@extends('layouts.app')
@section('title', 'MEC Sub Sectors')

@push('stylesheets')
@include('partials.index-datatable-styles')
@include('partials.filter-card-styles')
<style>
    #mecSubSectorsTableCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    #mecSubSectorsTableCard .table-responsive table td:last-child { position: relative; white-space: nowrap; }
    #mecSubSectorsTableCard .dropdown .dropdown-menu { position: absolute !important; }
    #mecSubSectorsTableCard table.table thead th,
    #mecSubSectorsTableCard table.table tbody td {
        text-align: left !important;
    }
    #mecSubSectorsTableCard table .details-modal-trigger {
        font-weight: 700 !important;
    }
    @media (max-width: 768px) {
        #mecSubSectorsTableCard .table-responsive { overflow-x: auto; }
    }
</style>
@endpush

@section('contents')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12" id="mecSubSectorsTableCard">
                    <x-table-filter-card
                        action="{{ route('mec-sub-sectors.index') }}"
                        id="mecSubSectorFilterForm"
                        :resetUrl="route('mec-sub-sectors.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…" value="{{ $search }}">
                        </div>
                    </x-table-filter-card>

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

                    <x-layouts.index-card
                        :createRoute="can('mec_sub_sector', 'add') ? route('mec-sub-sectors.create') : null"
                        tableHeading="MEC Sub Sectors"
                        createLabel="Create MEC Sub Sector"
                        :headers="['Name', 'Sector', 'Status', 'Created At']"
                        :perPageSlot="view('components.per-page-selector', ['current' => $perPage, 'baseUrl' => route('mec-sub-sectors.index')])"
                        :sortColumns="['mec_sub_sectors.name', null, 'mec_sub_sectors.status', 'mec_sub_sectors.created_at']"
                        :pagination="$subSectors->links('vendor.pagination.bootstrap-4')"
                    >
                        @forelse ($subSectors as $data)
                            <tr>
                                <td class="font-weight-bold">
                                    <x-details-modal-with-actions
                                        as="trigger"
                                        modalId="mecSubSectorDetailsModal"
                                        :detailsUrl="route('mec-sub-sectors.show', $data->id)"
                                        :entityId="$data->id"
                                        :entityName="$data->name ?? 'MEC Sub Sector'"
                                        :editUrl="route('mec-sub-sectors.edit', $data->id)"
                                        :deleteUrl="route('mec-sub-sectors.destroy', $data->id)"
                                    >
                                        {{ $data->name ?? '-' }}
                                    </x-details-modal-with-actions>
                                </td>
                                <td>{{ $data->sector?->name ?? '-' }}</td>
                                <td>
                                    @if($data->status)
                                        <span class="badge badge-success">Active</span>
                                    @else
                                        <span class="badge badge-secondary">Inactive</span>
                                    @endif
                                </td>
                                <td>{{ $data->created_at->format('d M Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4">
                                    <x-table-empty-state
                                        :state="request()->anyFilled(['search']) ? 'no-results' : 'empty'"
                                        :createRoute="can('mec_sub_sector', 'add') ? route('mec-sub-sectors.create') : null"
                                        createLabel="Create MEC Sub Sector"
                                        :resetUrl="route('mec-sub-sectors.index')"
                                    />
                                </td>
                            </tr>
                        @endforelse
                    </x-layouts.index-card>
                </div>
            </div>
        </div>
    </section>

    <x-details-modal-with-actions
        modalId="mecSubSectorDetailsModal"
        entityLabel="MEC Sub Sector"
        historyTarget="#versionHistoryModal"
        form="mec_sub_sector"
        formKey="mec_sub_sector"
    />

    <x-version-history-modal form="mec_sub_sector" entityLabel="MEC Sub Sector" />
@endsection

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

    $(document).on('click', '.mec-sub-sector-delete-btn, .action-dropdown-delete, .btn-details-modal-delete', function(e) {
        e.preventDefault();
        var form = $(this).closest('form');
        Swal.fire({
            title: 'Are you sure?',
            text: "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 !== 'mecSubSectorDetailsModal') return;
        var detailsUrl = $t.data('details-url');
        var id = $t.data('entity-id');
        var name = $t.data('entity-name') || 'MEC Sub Sector';
        var editUrl = $t.data('edit-url');
        var deleteUrl = $t.data('delete-url');

        $('#' + modalId + '-title-name').text(name);
        $('#' + modalId + '-body').html('<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 = '<dl class="row mb-0">';
                    html += '<dt class="col-sm-4">Name</dt><dd class="col-sm-8"><strong>' + (d.name || '-') + '</strong></dd>';
                    if (d.sector) html += '<dt class="col-sm-4">Sector</dt><dd class="col-sm-8">' + d.sector + '</dd>';
                    if (d.description) html += '<dt class="col-sm-4">Description</dt><dd class="col-sm-8">' + d.description + '</dd>';
                    html += '<dt class="col-sm-4">Status</dt><dd class="col-sm-8">' + (d.status ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-secondary">Inactive</span>') + '</dd>';
                    html += '<dt class="col-sm-4">Created At</dt><dd class="col-sm-8">' + (d.created_at || '-') + '</dd>';
                    if (d.updated_at) html += '<dt class="col-sm-4">Updated At</dt><dd class="col-sm-8">' + d.updated_at + '</dd>';
                    html += '</dl>';
                    $('#' + 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 MEC sub sector details.</div>');
                }
            },
            error: function(xhr) {
                var msg = 'Failed to load MEC sub sector details.';
                if (xhr.status === 403) msg = 'Permission denied.';
                if (xhr.status === 404) msg = 'MEC sub sector not found.';
                $('#' + modalId + '-body').html('<div class="alert alert-danger">' + msg + '</div>');
            }
        });
    });
</script>
@endpush