@extends('layouts.app')
@section('title', 'Designations')

@push('stylesheets')
@include('partials.index-datatable-styles')
@include('partials.filter-card-styles')
<style>
    #designationsTableCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    #designationsTableCard .table-responsive table td:last-child { position: relative; white-space: nowrap; }
    #designationsTableCard .dropdown .dropdown-menu { position: absolute !important; }
    @media (max-width: 768px) {
        #designationsTableCard .table-responsive { overflow-x: auto; }
    }
</style>
@endpush

@section('contents')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12" id="designationsTableCard">
                    <x-table-filter-card
                        action="{{ route('designations.index') }}"
                        id="designationFilterForm"
                        :resetUrl="route('designations.index')"
                    >
                        <div class="pms-filter-field">
                            <label for="filter-search">Search</label>
                            <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                                   placeholder="Search by name…" value="{{ $search }}">
                        </div>
                        <div class="pms-filter-field">
                            <label for="filter-status">Status</label>
                            <select name="status" id="filter-status" class="form-control form-control-sm">
                                <option value="">All Statuses</option>
                                <option value="1" {{ request('status') === '1' ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ request('status') === '0' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                    </x-table-filter-card>

                    <x-active-filter-chips :chips="$activeChips" :totalCount="$designations->total()" />

                    <x-layouts.index-card
                        :createRoute="can('designation', 'add') ? route('designations.create') : null"
                        tableHeading="Designations"
                        createLabel="Add Designation"
                        :headers="['Name', 'Role', 'Status', 'Created At']"
                        :sortColumns="['designations.name', null, 'designations.status', 'designations.created_at']"
                        :perPageSlot="view('components.per-page-selector', ['current' => $perPage, 'baseUrl' => route('designations.index')])"
                        :pagination="$designations->links('vendor.pagination.bootstrap-4')">
                        @forelse ($designations as $designation)
                            <tr>
                                <td>
                                    <x-details-modal-with-actions
                                        as="trigger"
                                        modalId="designationDetailsModal"
                                        :detailsUrl="route('designations.show', $designation->id)"
                                        :entityId="$designation->id"
                                        :entityName="$designation->name ?? 'Designation'"
                                        :editUrl="route('designations.edit', $designation->id)"
                                        :deleteUrl="route('designations.destroy', $designation->id)"
                                    >
                                        {{ $designation->name }}
                                    </x-details-modal-with-actions>
                                </td>
                                <td>{{ role_display_name($designation->role?->name) ?: '—' }}</td>
                                <td>
                                    @if($designation->status)
                                        <span class="badge badge-success">Active</span>
                                    @else
                                        <span class="badge badge-secondary">Inactive</span>
                                    @endif
                                </td>
                                <td>{{ $designation->created_at->format('d M Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4">
                                    <x-table-empty-state
                                        :state="request()->anyFilled(['search', 'status']) ? 'no-results' : 'empty'"
                                        :createRoute="can('designation', 'add') ? route('designations.create') : null"
                                        createLabel="Add Designation"
                                        :resetUrl="route('designations.index')"
                                    />
                                </td>
                            </tr>
                        @endforelse
                    </x-layouts.index-card>
                </div>
            </div>
        </div>
    </section>

    <x-details-modal-with-actions
        modalId="designationDetailsModal"
        entityLabel="Designation"
        historyTarget="#versionHistoryModal"
        form="designation"
        formKey="designation"
    />

    <x-version-history-modal form="designation" entityLabel="Designation" />
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
<script>
    $(function () {
        PmsIndexDataTable.initLaravelPaginated('#example1');
        PmsIndexDataTable.attachServerSort('#example1', {
            baseUrl: '{{ route("designations.index") }}',
            currentQuery: @json(request()->except(['page']) + ['sort_col' => $sort['col'], 'sort_dir' => $sort['dir']]),
            currentSortCol: '{{ $sort["col"] }}',
            currentSortDir: '{{ $sort["dir"] }}'
        });

        $(document).on('click', '.designation-delete-btn, .action-dropdown-delete, .btn-details-modal-delete', function(e) {
            e.preventDefault();
            var form = $(this).closest('form');
            if (!form.length) return;
            Swal.fire({
                title: 'Are you sure?',
                text: 'Are you sure you want to delete this designation? You will not be able to revert this!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!'
            }).then(function(result) {
                if (result.isConfirmed) form.submit();
            });
        });

        $(document).on('click', '.details-modal-trigger', function(e) {
            e.preventDefault();
            var $t = $(this);
            var modalId = $t.data('modal-id');
            if (modalId !== 'designationDetailsModal') return;
            var detailsUrl = $t.data('details-url');
            var id = $t.data('entity-id');
            var name = $t.data('entity-name') || 'Designation';
            var editUrl = $t.data('edit-url');
            var deleteUrl = $t.data('delete-url');

            $('#' + modalId + '-title-name').text(name);
            $('#' + modalId + '-body').html(window.PmsDetailsModal ? PmsDetailsModal.loadingHtml() : '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">Loading...</p></div>');
            var $editBtn = $('#' + modalId + '-edit-btn');
            var $deleteForm = $('#' + modalId + '-delete-form');
            var $historyBtn = $('#' + modalId + '-history-btn');
            if ($editBtn.length) { $editBtn.hide().attr('href', '#'); }
            if ($deleteForm.length) { $deleteForm.hide().attr('action', '#'); }
            if ($historyBtn.length) { $historyBtn.hide().removeData('id').removeData('name').attr('data-id', id).attr('data-name', name); }
            $('#' + modalId).modal('show');

            $.ajax({
                url: detailsUrl,
                method: 'GET',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                success: function(res) {
                    if (res.status === 200 && res.data) {
                        var d = res.data;
                        var html = PmsDetailsModal.renderDl([
                            { label: 'ID', value: d.id || '—' },
                            { label: 'Name', value: '<strong>' + (d.name || '—') + '</strong>' },
                            { label: 'Role', value: d.role || '—' },
                            { label: 'Description', value: d.description || '—' },
                            { label: 'Status', value: d.status ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-secondary">Inactive</span>' },
                            { label: 'Created', value: d.created_at || '—' },
                            { label: 'Updated', value: d.updated_at || '—' }
                        ]);
                        $('#' + modalId + '-body').html(html);
                        if ($editBtn.length && editUrl) { $editBtn.attr('href', editUrl).show(); }
                        if ($deleteForm.length && deleteUrl) { $deleteForm.attr('action', deleteUrl).show(); }
                        if ($historyBtn.length) { $historyBtn.show(); }
                    } else {
                        $('#' + modalId + '-body').html('<div class="alert alert-warning">Unable to load details.</div>');
                    }
                },
                error: function(xhr) {
                    var msg = 'Failed to load details.';
                    if (xhr.status === 403) msg = 'Permission denied.';
                    if (xhr.status === 404) msg = 'Designation not found.';
                    $('#' + modalId + '-body').html('<div class="alert alert-danger">' + msg + '</div>');
                }
            });
        });
    });
</script>
@endpush