@extends('layouts.dashboard')

<style>
  .deprt-seach {
    width: 300px !important;
  }
</style>

@section('content')
<section class="content-header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <h1>Desk List</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Desk</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">
    @if (Session::has('message'))
    <div class="col-sm-12">
      <div id="alert" class="alert {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show" role="alert">
        {{ Session::get('message') }}
      </div>
    </div>
    @endif

    <div class="row">
      <div class="col-12 pr-0 d-flex justify-content-end">
        <button type="button" class="btn uniqbtn-btn" data-toggle="modal" data-target="#addDesk">
          <i class="fa fa-plus"></i>&nbsp; ADD
        </button>
      </div>

      <div class="col-12 mt-3">
        <div class="card">
          <div class="card-body p-2">
            <div class="table-responsive">
              <table id="desk-table" class="table table-head-fixed table-striped table-bordered text-nowrap text-center">
                <thead>
                  <tr>
                    <th>Sr No.</th>
                    <th>Name</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- Add Desk Modal --}}
<div class="modal fade" id="addDesk" tabindex="-1" aria-labelledby="addDesk" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title" id="addDesk">Add Desk</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close" style="opacity: 1;">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{ route('desk.add') }}" method="post" class="form-horizontal">
          @csrf
          <div class="form-group">
            <label>Desk Name</label>
            <input type="text" class="form-control" name="name" placeholder="Enter Desk Name">
          </div>
          <div class="form-group mb-0">
            <button type="submit" class="btn btn-primary float-right">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- Edit Desk Modal --}}
<div class="modal fade" id="editDeskModal" tabindex="-1" aria-labelledby="editDeskModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title" id="editDeskModalLabel">Edit Desk</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close" style="opacity: 1;">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="" method="post" id="editDeskForm">
          @csrf
          <input type="hidden" name="id" id="editDeskId">
          <div class="form-group">
            <label>Desk Name</label>
            <input type="text" class="form-control" name="name" id="editDeskName" placeholder="Enter Desk Name">
          </div>
          <div class="form-group mb-0">
            <button type="submit" class="btn btn-primary float-right">Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection


@push('scripts')
<script>
  $(document).ready(function() {
    let table = $('#desk-table').DataTable({
      processing: true,
      serverSide: true,
      bLengthChange: false,
      order: [[0, "desc"]],
      pageLength: 15,
      searching: true,
      ajax: { url: '{{ route("desk.index") }}' },
      columnDefs: [{ targets: '_all', className: 'text-center' }],
      columns: [
        { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
        { data: 'name', name: 'name' },
        { data: 'action', name: 'action', orderable: false, searchable: false },
      ]
    });

    // 🗑️ DELETE Desk
    $(document).on('click', '.deleteDesk', function() {
      let id = $(this).data('id');

      Swal.fire({
        title: 'Are you sure?',
        text: "This will permanently delete the desk!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: '{{ route("desk.delete") }}',
            method: 'POST',
            data: { id: id, _token: '{{ csrf_token() }}' },
            success: function(res) {
              Swal.fire('Deleted!', 'Desk deleted successfully.', 'success');
              table.ajax.reload();
            },
            error: function() {
              Swal.fire('Error!', 'Something went wrong.', 'error');
            }
          });
        }
      });
    });

    // ✏️ EDIT Desk (Open Modal)
    $(document).on('click', '.editDesk', function() {
      let id = $(this).data('id');
      $.get('{{ url("desk/edit") }}/' + id, function(response) {
        $('#editDeskId').val(response.id);
        $('#editDeskName').val(response.name);
        $('#editDeskForm').attr('action', '{{ url("desk/edit") }}/' + id);
        $('#editDeskModal').modal('show');
      });
    });
  });
</script>
@endpush