@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Manage Users</a></li>
    <li class="breadcrumb-item active" aria-current="page">List all Designations</li>
  </ol>
</nav>
<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
          <div class="col-6 d-flex justify-content-end" style="width: 100%;">
              <a href="{{ route('designations.create') }}" id="add_designation" class="btn btn-primary" type="button">
                  <i data-feather="plus"></i> Add Designation
              </a>
          </div>
        <h6 class="card-title">List all Designations</h6>
        
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        
        <div class="table-responsive">
          <table id="dataTableExample" class="table">
            <thead>
              <tr>
                <th>No</th>
                <th>Name</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
                        @foreach ($designations as $designation)
              <tr>
                <td>{{ $no++ }}</td>
                <td>{{ $designation->name }}</td>
                <td>
                    <a href="{{ route('designations.show', $designation->id) }}" class="btn btn-primary btn-sm" role="button" aria-pressed="true" title="View">
                        <i data-feather="eye"></i>
                        View
                    </a>
                    <a href="{{ route('designations.edit', $designation->id) }}" class="btn btn-primary btn-sm" role="button" aria-pressed="true" title="Edit">
                        <i data-feather="edit"></i>
                        Edit
                    </a>
                    <form method="POST" action="{{ route('designations.destroy', $designation->id) }}" style="display: inline-block;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-primary btn-sm" title="Delete">
                            <i data-feather="trash-2"></i>
                            Delete
                        </button>
                    </form>
                </td>
              </tr>
            @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
  <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  <script>
    $(document).ready(function() {
        // SweetAlert for delete confirmation
        $('form').on('submit', function(e) {
            e.preventDefault();
            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) {
                    this.submit();
                }
            });
        });
    });
  </script>
@endpush