@extends('layouts.dashboard')
<style>
  .deprt-seach { width: 300px !important; }
</style>

@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Designation 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">Designation</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">
          {{ Session::get('message') }}
        </div>
      </div>
    @endif

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

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

  </div>
</section>

<!-- Add Designation Modal -->
<div class="modal fade" id="addDesignation" tabindex="-1" aria-labelledby="addDesignationLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title" id="addDesignationLabel">Add Designation</h5>
        <button type="button" class="close text-white" data-dismiss="modal" style="opacity:1;">&times;</button>
      </div>
      <div class="modal-body">
        <form id="addDesignationForm" action="{{ route('designation.add') }}" method="post">
          @csrf
          <div class="form-group">
            <label for="addName">Designation Name</label>
            <input type="text" class="form-control" id="addName" name="name" placeholder="Enter Designation 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 Designation Modal -->
<div class="modal fade" id="editDesignation" tabindex="-1" aria-labelledby="editDesignationLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title" id="editDesignationLabel">Edit Designation</h5>
        <button type="button" class="close text-white" data-dismiss="modal" style="opacity:1;">&times;</button>
      </div>
      <div class="modal-body">
        <form id="editDesignationForm" method="post">
          @csrf
          <div class="form-group">
            <label for="editName">Designation Name</label>
            <input type="text" class="form-control" id="editName" 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">Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function(){

  // CSRF for AJAX
  $.ajaxSetup({
    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
  });

  // Initialize DataTable
  var table = $('#designation-table').DataTable({
    processing: true,
    serverSide: true,
    bLengthChange: false,
    order: [[0, "desc"]],
    pageLength: 15,
    ajax: { url: '{{ route("designation.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 }
    ]
  });

  // Auto hide alert
  setTimeout(() => $('#alert').fadeOut('slow'), 3000);

  // Add Designation
  $('#addDesignationForm').submit(function(e){
    e.preventDefault();
    var form = $(this);
    $.post(form.attr('action'), form.serialize())
      .done(function(response){
        $('#addDesignation').modal('hide');
        Swal.fire('Success!', 'Designation added successfully', 'success');
        table.ajax.reload();
        form[0].reset();
        form.find('span.help-block strong').text('');
      })
      .fail(function(xhr){
        var err = xhr.responseJSON.errors;
        form.find('span.help-block strong').text(err?.name ? err.name[0] : '');
      });
  });

  // Edit Designation Modal
  $(document).on('click', '.editDesignation', function(){
    var id = $(this).data('id');
    $.get('{{ route("designation.view", ["id" => ":id"]) }}'.replace(':id', id), function(data){
      $('#editDesignationForm').attr('action', '{{ route("designation.edit", ["id" => ":id"]) }}'.replace(':id', id));
      $('#editName').val(data.name);
      $('#editDesignation').modal('show');
      $('#editDesignationForm').find('span.help-block strong').text('');
    });
  });

  // Update Designation
  $('#editDesignationForm').submit(function(e){
    e.preventDefault();
    var form = $(this);
    $.post(form.attr('action'), form.serialize())
      .done(function(response){
        $('#editDesignation').modal('hide');
        Swal.fire('Success!', 'Designation updated successfully', 'success');
        table.ajax.reload();
      })
      .fail(function(xhr){
        var err = xhr.responseJSON.errors;
        form.find('span.help-block strong').text(err?.name ? err.name[0] : '');
      });
  });

  // Delete Designation
  $(document).on('click', '.deleteDesignation', 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){
        $.post('{{ route("designation.destroy", ["id" => ":id"]) }}'.replace(':id', id), {
          _method: 'DELETE'
        }).done(function(response){
          Swal.fire('Deleted!', response.message, 'success');
          table.ajax.reload();
        }).fail(function(xhr){
          Swal.fire('Error!', xhr.responseJSON?.message || 'Something went wrong!', 'error');
        });
      }
    });
  });

});
</script>
@endpush