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

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

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

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

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

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

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

        $(document).on('click', '.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 MEC sector? 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();
            });
        });
    });
</script>
@endpush