@extends('layouts.dashboard')

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

@section('content')

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Department 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">Department</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="#addDepartment">
          <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="department-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 Department Modal -->
<div class="modal fade" id="addDepartment" tabindex="-1" aria-labelledby="addDepartmentLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title" id="addDepartmentLabel">Add Department</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 id="addDepartmentForm" action="{{ route('department.add') }}" method="post" class="form-horizontal">
          @csrf
          <div class="form-group">
            <label for="exampleInputName">Department Name</label>
            <input type="text" class="form-control" id="exampleInputName" placeholder="Enter department name" name="name">
            <span class="help-block text-danger"><strong></strong></span>
          </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 Department Modal -->
<div class="modal fade" id="editDepartment" tabindex="-1" aria-labelledby="editDepartmentLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title" id="editDepartmentLabel">Edit Department</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 id="editDepartmentForm" method="post">
          @csrf
          <input type="hidden" name="id" id="edit_id">
          <div class="form-group">
            <label for="edit_name">Department Name</label>
            <input type="text" class="form-control" id="edit_name" name="name" placeholder="Enter department name">
            <span class="help-block text-danger"><strong></strong></span>
          </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>
  // Initialize DataTable
  var table = $('#department-table').DataTable({
    processing: true,
    serverSide: true,
    bLengthChange: false,
    order: [[0, "desc"]],
    pageLength: 15,
    ajax: { url: '{{ route("department.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 },
    ]
  });

  // Add Department via AJAX
  $('#addDepartmentForm').submit(function(e){
    e.preventDefault();
    var form = $(this);
    $.ajax({
      url: form.attr('action'),
      type: 'POST',
      data: form.serialize(),
      success: function(response){
        $('#addDepartment').modal('hide');
        Swal.fire('Success!', 'Department added successfully', 'success');
        table.ajax.reload();
        form[0].reset();
      },
      error: function(xhr){
        var err = xhr.responseJSON.errors;
        form.find('span.help-block strong').text(err && err.name ? err.name[0] : '');
      }
    });
  });

  // Open Edit Modal
  $(document).on('click', '.editDepartment', function() {
    var id = $(this).data('id');
    var name = $(this).data('name');

    $('#edit_id').val(id);
    $('#edit_name').val(name);
    $('#editDepartment').modal('show');
  });

  // Update Department via AJAX
  $('#editDepartmentForm').submit(function(e) {
    e.preventDefault();
    var id = $('#edit_id').val();
    var formData = $(this).serialize();

    $.ajax({
      url: '{{ url("department/edit") }}/' + id,
      type: 'POST',
      data: formData,
      success: function(response) {
        $('#editDepartment').modal('hide');
        Swal.fire('Updated!', 'Department updated successfully', 'success');
        table.ajax.reload();
      },
      error: function(xhr) {
        var err = xhr.responseJSON.errors;
        $('#editDepartmentForm').find('span.help-block strong').text(err && err.name ? err.name[0] : '');
      }
    });
  });

  // Delete Department
  $(document).on('click', '.deleteDepartment', function() {
    var id = $(this).data('id');
    Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if(result.isConfirmed) {
        $.ajax({
          url: '{{ route("department.destroy", "") }}/' + id,
          type: 'DELETE',
          data: { "_token": "{{ csrf_token() }}" },
          success: function(response){
            Swal.fire('Deleted!', response.message, 'success');
            table.ajax.reload();
          },
          error: function(xhr){
            Swal.fire('Error!', xhr.responseJSON.message, 'error');
          }
        });
      }
    });
  });
</script>
@endpush