@extends('layouts.appv2')

@section('content')

<div class="container-fluid px-4"> {{-- Bootstrap container with horizontal padding --}}
    
    <h1 class="mb-4 gradient-text">Staff Designation</h1>  			
    @if ($message = Session::get('success'))
        <div class="alert alert-success" role="alert">
            {{ $message }}
        </div>
    @endif

    @if ($message = Session::get('error'))
        <div class="alert alert-danger" role="alert">
            {{ $message }}
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger" role="alert">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

        
    <div class="card mx-4 my-3" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);"> {{-- mx-4 = margin left/right, my-3 = margin top/bottom --}}
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center mb-0">
                <h5 class="mb-0">Manage Designation</h5>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <a class="btn btn-sm btn-outline-primary rounded-pill fw-bold" href="{{ route('admins.designationadd') }}" title="Add employee">
                        <i class="fa-solid fa-plus"></i> Add
                    </a>
                </div>
            </div>
        </div>

        <div class="card-body">

            <div class="d-flex justify-content-between align-items-center mb-3">

                {{-- Per Page Selection --}}
                <div class="d-flex align-items-center">
                    <form method="GET" action="{{ route('admins.designation') }}">
                        <div class="d-flex align-items-center">
                            <label class="me-2 mb-0 small">Show:</label>
                            <select name="perpage" class="form-select form-select-sm" style="width: 70px;" 
                                    onchange="this.form.submit()">
                                <option value="10" {{ ($perpage ?? 10) == 10 ? 'selected' : '' }}>10</option>
                                <option value="25" {{ ($perpage ?? 10) == 25 ? 'selected' : '' }}>25</option>
                                <option value="50" {{ ($perpage ?? 10) == 50 ? 'selected' : '' }}>50</option>
                                <option value="100" {{ ($perpage ?? 10) == 100 ? 'selected' : '' }}>100</option>
                            </select>
                            <span class="ms-2 small">entries</span>
                            <input type="hidden" name="search" value="{{ $search ?? '' }}">
                        </div>
                    </form>
                </div>

                {{-- Search Section --}}
                <div class="d-flex align-items-center">
                    <form method="GET" action="{{ route('admins.designation') }}" class="d-flex">
                        <input type="text" name="search" class="form-control form-control-sm me-2" style="width: 250px;"
                            placeholder="Search..." value="{{ $search ?? '' }}">
                        <input type="hidden" name="perpage" value="{{ $perpage ?? 10 }}">
                        <button class="btn btn-sm btn-primary me-2" type="submit">
                            <i class="fa fa-search"></i> Search
                        </button>
                        @if($search)
                            <a href="{{ route('admins.designation') }}" class="btn btn-sm btn-secondary">
                                <i class="fa fa-times"></i> Clear
                            </a>
                        @endif
                    </form>
                </div>

            </div>

            {{-- ----------------- Table Start --------------------- --}}
            <div class="table-responsive">
                        <button class="btn btn-danger" id="multi-delete" data-route="{{ route('admins.designationdeleteMultiple') }}">
                        <i class="fas fa-trash"></i>
                         Delete Selected
                        </button>
                    <table class="table table-sm table-bordered table-hover align-middle mt-3" id="designationTable"> 
                            <tr>
                                <th class="text-center" style="width: 50px;">    
                                    <input type="checkbox" class="form-check-input" id="checkboxesMain">
                                </th>
                                <th class="text-center" style="width: 80px;">@sortablelink('designation_id', 'No')</th>
                                <th class="text-center" style="width: 1px;">@sortablelink('grade_code', 'Grade Code')</th>
                                <th class="text-center" style="width: 200px;">@sortablelink('designation_name', 'Designation')</th>
                                <th class="text-center">@sortablelink('description', 'Description')</th>
                                <th class="text-center" style="width: 180px;">Action</th>
                            </tr>
                        </thead>
                        <tbody class="table-group-divider"> {{-- Adds visual separation --}}
                            @forelse($designations as $index => $designation)
                                <tr>
                                    <td class="text-center">
                                       <input type="checkbox" class="check" value="{{ $designation->designation_id }}">
                                    </td>
                                    <td class="text-center">{{ $designations->firstItem() + $index }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-secondary">{{ optional($designation->grades)->grade_code ?? 'N/A' }}</span>
                                    </td>
                                    <td>{{ $designation->designation_name }}</td>
                                    <td class="small text-muted">{{ $designation->description }}</td>
                                    <td class="text-center">
                                        <div class="btn-group btn-group-sm" role="group"> {{-- Bootstrap button group for compact buttons --}}
                                            <a class="btn btn-outline-info" href="{{ route('admins.designationedit', ['designation_id' => $designation->designation_id])}}" title="Edit">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </a>
                                            <button type="button" class="btn btn-outline-danger" 
                                                onclick="event.preventDefault(); if(confirm('Are you sure?')) document.getElementById('delete-form-{{ $designation->designation_id }}').submit();" 
                                                title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                        <form id="delete-form-{{ $designation->designation_id }}" 
                                              action="{{ route('admins.designationdelete', ['designation_id' => $designation->designation_id]) }}" 
                                              method="POST" class="d-none">
                                            @csrf
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-5">
                                        <div class="py-4">
                                            <i class="fa fa-folder-open fa-3x text-muted mb-3 d-block"></i>
                                            <h6 class="text-muted fw-bold">No Designations Found</h6>
                                            @if($search)
                                                <p class="text-muted small mb-3">
                                                    No results found for "<strong>{{ $search }}</strong>"
                                                </p>
                                                <a href="{{ route('admins.designation') }}" class="btn btn-sm btn-primary">
                                                    <i class="fa fa-refresh"></i> Clear Search
                                                </a>
                                            @else
                                                <p class="text-muted small mb-3">Start by adding your first designation</p>
                                                <a href="{{ route('admins.designationadd') }}" class="btn btn-sm btn-primary">
                                                    <i class="fa fa-plus"></i> Add Designation
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
            </div>

            {{-- Pagination with count check --}}
            @if($designations->total() > 0)
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="small text-muted">
                        Showing <strong>{{ $designations->firstItem() }}</strong> to <strong>{{ $designations->lastItem() }}</strong> 
                        of <strong>{{ $designations->total() }}</strong> entries
                    </div>
                    <div>
                        {{ $designations->appends(['search' => $search ?? '', 'perpage' => $perpage ?? 10])->links() }}
                    </div>
                </div>
            @endif
            {{-- ----------------- Table End --------------------- --}}

        </div>
    </div>

</div>
<!-- jQuery FIRST -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

<!-- SweetAlert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11">

</script><script>
$(document).ready(function () {

    $('#multi-delete').on('click', function () {

        let button = $(this);
        let selected = [];

        $('#designationTable .check:checked').each(function () {
            selected.push($(this).val());
        });

        if (selected.length === 0) {
            Swal.fire({
                icon: 'warning',
                title: 'Please select at least one record'
            });
            return;
        }

        Swal.fire({
            icon: 'warning',
            title: 'Are you sure you want to delete selected record(s)?',
            showCancelButton: true,
            confirmButtonText: 'Yes'
        }).then((result) => {

            if (result.isConfirmed) {
                $.ajax({
                    type: 'POST',
                    url: button.data('route'),
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        selected: selected
                    },
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: response
                        }).then(() => {
                            location.reload();
                        });
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                        Swal.fire('Error', 'Delete failed', 'error');
                    }
                });
            }
        });
    });

});
</script>
<!-- Function for the checkboxes selected all table for deleted -->
<script>
$(document).ready(function () {

    // Select / Deselect all
    $('#checkboxesMain').on('change', function () {
        $('.check').prop('checked', this.checked);
    });

    // Update master checkbox when individual checkbox changes
    $('.check').on('change', function () {
        $('#checkboxesMain').prop(
            'checked',
            $('.check:checked').length === $('.check').length
        );
    });

});
</script>

@endsection