@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    @php
        $activeFiltersCount = collect([
            request('search'),
            request('type'),
            request('slot_day'),
            request('season'),
            request('timing_type'),
            request('track_type_id'),
            request('per_page'),
        ])
            ->filter(fn($value) => filled($value))
            ->count();

        $days = ['saturday', 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
        $seasons = ['summer', 'winter', 'ramadan'];
        $types = ['teacher', 'tester'];
        $timings = ['morning', 'night'];
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Employee Slots"
                    description="Browse, filter, create, and manage teacher and tester slot configurations across days, seasons, and track types.">
                    <button type="button" class="asset-btn asset-btn--primary" data-bs-toggle="modal"
                        data-bs-target="#createModal">
                        + Add New Slot
                    </button>
                </x-page-title>


                <div class="ui-card ui-card--table" style="border-radius: 20px 20px 0px 0px !important;">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-nowrap">
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap">Filters</h6>

                            <x-table-controls :action="route('slot_emp.index')" searchName="search" searchPlaceholder="search"
                                :export="true" :exportRoute="route('slot_emp.export')" :saveRoute="route('slot_emp.saveFilteredTable')" :filters="[
                                    'type' => collect($types)
                                        ->mapWithKeys(fn($type) => [$type => ucfirst($type)])
                                        ->toArray(),
                                    'slot_day' => collect($days)
                                        ->mapWithKeys(fn($day) => [$day => ucfirst($day)])
                                        ->toArray(),
                                    'season' => collect($seasons)
                                        ->mapWithKeys(fn($season) => [$season => ucfirst($season)])
                                        ->toArray(),
                                    'timing_type' => collect($timings)
                                        ->mapWithKeys(fn($timing) => [$timing => ucfirst($timing)])
                                        ->toArray(),
                                    'track_type_id' => collect($trackTypes)
                                        ->mapWithKeys(fn($track) => [$track->id => $track->name])
                                        ->toArray(),
                                ]" :filterLabels="[
                                    'type' => 'Type',
                                    'slot_day' => 'Slot Day',
                                    'season' => 'Season',
                                    'timing_type' => 'Timing Type',
                                    'track_type_id' => 'Track Type',
                                ]" />

                            <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">
                        </div>
                    </div>
                </div>

                <div class="ui-card ui-card--table" style="border-radius: 0px !important;">

                    <x-table :headers="[
                        'Index',
                        'Type',
                        'Slot Day',
                        'Slot Start',
                        'Slot End',
                        'Season',
                        'Timing Type',
                        'Track Type',
                        'Actions',
                    ]" :paginator="$slotEmps"
                        emptyMessage="No slots found matching the current filters.">
                        @forelse ($slotEmps as $slotEmp)
                            <tr id="slot-row-{{ $slotEmp->id }}">
                                <td class="ui-muted text-center">{{ $loop->iteration }}</td>

                                <td class="text-center">
                                    <span
                                        class="ui-pill ui-pill--{{ strtolower($slotEmp->type) === 'teacher' ? 'info' : 'warn' }}">
                                        {{ ucfirst(strtolower($slotEmp->type)) }}
                                    </span>
                                </td>

                                <td class="ui-muted text-center">
                                    {{ ucfirst(strtolower($slotEmp->slot_day)) }}
                                </td>

                                <td class="text-center">
                                    <div class="ui-title">
                                        {{ \Carbon\Carbon::createFromFormat('H:i:s', $slotEmp->slot_start)->format('g:i A') }}
                                    </div>
                                </td>

                                <td class="text-center">
                                    <div class="ui-title">
                                        {{ \Carbon\Carbon::createFromFormat('H:i:s', $slotEmp->slot_end)->format('g:i A') }}
                                    </div>
                                </td>

                                <td class="text-center">
                                    @if ($slotEmp->season)
                                        <div class="slot-multi-wrap">
                                            @foreach ($slotEmp->season as $season)
                                                <span class="ui-pill ui-pill--neutral">
                                                    {{ ucfirst(strtolower($season)) }}
                                                </span>
                                            @endforeach
                                        </div>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--success">
                                        {{ ucfirst(strtolower($slotEmp->timing_type)) }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    @if ($slotEmp->type === 'teacher')
                                        @if ($slotEmp->track_type_id)
                                            <div class="slot-multi-wrap">
                                                @foreach ($slotEmp->track_type_id as $id)
                                                    @php
                                                        $track = $trackTypes->where('id', $id)->first();
                                                    @endphp
                                                    @if ($track)
                                                        <span class="ui-pill ui-pill--info">
                                                            {{ ucfirst(strtolower($track->name)) }}
                                                        </span>
                                                    @endif
                                                @endforeach
                                            </div>
                                        @else
                                            <span class="ui-muted">—</span>
                                        @endif
                                    @elseif($slotEmp->type === 'tester')
                                        <span class="ui-pill ui-pill--warn">Demo</span>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">
                                        <button type="button" class="table-action btn-plain" data-bs-toggle="modal"
                                            data-bs-target="#editModal{{ $slotEmp->id }}" title="Edit Slot">
                                            <iconify-icon icon="lucide:edit"></iconify-icon>
                                        </button>

                                        <button type="button" class="delete-action-btn" data-bs-toggle="modal"
                                            data-bs-target="#deleteModal{{ $slotEmp->id }}" title="Delete Slot">
                                            <span class="table-action table-action--danger">
                                                <iconify-icon icon="fluent:delete-24-regular"></iconify-icon>
                                            </span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                        @endforelse
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    @foreach ($slotEmps as $slotEmp)
        <div class="modal fade slot-modal" id="editModal{{ $slotEmp->id }}" tabindex="-1"
            aria-labelledby="editSlotLabel{{ $slotEmp->id }}" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content border-0 shadow-lg rounded-4">
                    <form action="{{ route('slot_emp.update', $slotEmp->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title" id="editSlotLabel{{ $slotEmp->id }}">Edit Slot</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <div class="modal-body pt-3">
                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label class="asset-label">Slot Day <span class="text-danger d-inline">*</span></label>
                                    <select class="asset-select general-select" name="slot_day" required>
                                        <option value="" disabled>Select Slot Day</option>
                                        @foreach (['saturday', 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday'] as $day)
                                            <option value="{{ $day }}"
                                                {{ $slotEmp->slot_day == $day ? 'selected' : '' }}>
                                                {{ ucfirst($day) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Type <span class="text-danger d-inline">*</span></label>
                                    <select name="type" class="asset-select general-select type-selector">
                                        <option value="" disabled>Select Type</option>
                                        @foreach ($types as $type)
                                            <option value="{{ $type }}"
                                                {{ $slotEmp->type == $type ? 'selected' : '' }}>
                                                {{ ucfirst($type) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Slot Start <span
                                            class="text-danger d-inline">*</span></label>
                                    <input type="time" class="asset-input" name="slot_start"
                                        value="{{ $slotEmp->slot_start }}">
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Slot End <span class="text-danger d-inline">*</span></label>
                                    <input type="time" class="asset-input" name="slot_end"
                                        value="{{ $slotEmp->slot_end }}">
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Season <span class="text-danger d-inline">*</span></label>
                                    <select name="season[]" class="asset-select general-select" multiple>
                                        @foreach ($seasons as $season)
                                            <option value="{{ $season }}"
                                                {{ is_array($slotEmp->season) && in_array($season, $slotEmp->season) ? 'selected' : '' }}>
                                                {{ ucfirst($season) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Timing Type <span
                                            class="text-danger d-inline">*</span></label>
                                    <select name="timing_type" class="asset-select general-select">
                                        <option value="" disabled>Select Timing</option>
                                        @foreach ($timings as $time)
                                            <option value="{{ $time }}"
                                                {{ $slotEmp->timing_type == $time ? 'selected' : '' }}>
                                                {{ ucfirst($time) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div
                                    class="asset-col-12 track-type-wrapper {{ $slotEmp->type === 'teacher' ? '' : 'd-none' }}">
                                    <label class="asset-label">Track Types <span
                                            class="text-danger d-inline">*</span></label>
                                    <select name="track_type_id[]" class="asset-select general-select" multiple>
                                        @foreach ($trackTypes as $trackType)
                                            <option value="{{ $trackType->id }}"
                                                {{ collect($slotEmp->track_type_id)->contains($trackType->id) ? 'selected' : '' }}>
                                                {{ $trackType->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer border-top-0 pt-0">
                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                                Cancel
                            </button>
                            <button type="submit" class="asset-btn asset-btn--primary">
                                Update Slot
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade slot-modal" id="deleteModal{{ $slotEmp->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow-lg rounded-4">
                    <form action="{{ route('slot_emp.destroy', $slotEmp->id) }}" method="POST">
                        @csrf
                        @method('DELETE')

                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title">Delete Slot</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body pt-3">
                            <p class="mb-0">
                                Are you sure you want to delete this slot?
                            </p>
                        </div>

                        <div class="modal-footer border-top-0 pt-0">
                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                                Cancel
                            </button>
                            <button type="submit" class="btn btn-outline-danger">
                                Delete
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach

    <div class="modal fade slot-modal" id="createModal" tabindex="-1" aria-labelledby="createSlotLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <form action="{{ route('slot_emp.store') }}" method="POST">
                    @csrf

                    <div class="modal-header border-bottom-0 pb-0">
                        <h5 class="modal-title" id="createSlotLabel">Create New Slot</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body pt-3">
                        <div class="asset-form-grid">
                            <div class="asset-col-6">
                                <label class="asset-label">Slot Day <span class="text-danger d-inline">*</span></label>
                                <select class="asset-select general-select" name="slot_day" required>
                                    <option value="" disabled selected>Select Slot Day</option>
                                    @foreach (['saturday', 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday'] as $day)
                                        <option value="{{ $day }}"
                                            {{ old('slot_day') == $day ? 'selected' : '' }}>
                                            {{ ucfirst($day) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="asset-col-6">
                                <label class="asset-label">Type <span class="text-danger d-inline">*</span></label>
                                <select name="type" class="asset-select general-select type-selector">
                                    <option value="" disabled selected>Select Type</option>
                                    @foreach ($types as $type)
                                        <option value="{{ $type }}" {{ old('type') == $type ? 'selected' : '' }}>
                                            {{ ucfirst($type) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="asset-col-6">
                                <label class="asset-label">Slot Start <span class="text-danger d-inline">*</span></label>
                                <input type="time" class="asset-input" name="slot_start"
                                    value="{{ old('slot_start') }}">
                            </div>

                            <div class="asset-col-6">
                                <label class="asset-label">Slot End <span class="text-danger d-inline">*</span></label>
                                <input type="time" class="asset-input" name="slot_end"
                                    value="{{ old('slot_end') }}">
                            </div>

                            <div class="asset-col-6">
                                <label class="asset-label">Season <span class="text-danger d-inline">*</span></label>
                                <select name="season[]" class="asset-select general-select" multiple>
                                    @foreach ($seasons as $season)
                                        <option value="{{ $season }}"
                                            {{ collect(old('season', []))->contains($season) ? 'selected' : '' }}>
                                            {{ ucfirst($season) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="asset-col-6">
                                <label class="asset-label">Timing Type <span class="text-danger d-inline">*</span></label>
                                <select name="timing_type" class="asset-select general-select">
                                    <option value="" disabled selected>Select Timing</option>
                                    @foreach ($timings as $time)
                                        <option value="{{ $time }}"
                                            {{ old('timing_type') == $time ? 'selected' : '' }}>
                                            {{ ucfirst($time) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="asset-col-12 track-type-wrapper d-none">
                                <label class="asset-label">Track Types <span class="text-danger d-inline">*</span></label>
                                <select name="track_type_id[]" class="asset-select general-select" multiple>
                                    @foreach ($trackTypes as $trackType)
                                        <option value="{{ $trackType->id }}"
                                            {{ collect(old('track_type_id', []))->contains($trackType->id) ? 'selected' : '' }}>
                                            {{ $trackType->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer border-top-0 pt-0">
                        <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="asset-btn asset-btn--primary">
                            Create Slot
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .filter-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .filter-head__meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .staff-filter-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .staff-filter-col {
            grid-column: span 3 / span 3;
        }

        .staff-filter-col--search {
            grid-column: span 6 / span 6;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .filter-search-wrap {
            position: relative;
        }

        .filter-search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: 18px;
            pointer-events: none;
        }

        .filter-search-input {
            padding-left: 2.5rem;
        }

        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .slot-multi-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            flex-wrap: wrap;
        }

        .table-action {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            transition: 0.2s ease;
            font-size: 18px;
            text-decoration: none;
        }

        .table-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        }

        .table-action--danger {
            border-color: #f3d1d1;
            color: #dc3545;
        }

        .table-action--danger:hover {
            background: #fff5f5;
        }

        .delete-action-btn,
        .btn-plain {
            border: none;
            background: transparent;
            padding: 0;
        }

        .slot-modal .modal-body span {
            display: inline;
        }

        @media (max-width: 1199.98px) {

            .staff-filter-col,
            .staff-filter-col--search {
                grid-column: span 6 / span 6;
            }
        }

        @media (max-width: 767.98px) {

            .staff-filter-col,
            .staff-filter-col--search {
                grid-column: span 12 / span 12;
            }

            .filter-head {
                align-items: stretch;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        function toggleTrackTypeWrapper(typeSelect) {
            const selectedType = $(typeSelect).val();
            const modal = $(typeSelect).closest('.modal');
            const trackWrapper = modal.find('.track-type-wrapper');

            if (selectedType === 'teacher') {
                trackWrapper.removeClass('d-none').show();
            } else {
                trackWrapper.addClass('d-none').hide();
            }
        }

        function initModalSelects(modal) {
            modal.find('.general-select').each(function() {
                const $select = $(this);

                if ($select.hasClass('select2-hidden-accessible')) {
                    $select.select2('destroy');
                }

                $select.select2({
                    dropdownParent: modal,
                    placeholder: "Select",
                    allowClear: true,
                    width: '100%'
                });
            });

            toggleTrackTypeWrapper(modal.find('.type-selector'));
        }

        $(document).ready(function() {
            $('.select2-page-filter').select2({
                width: '100%'
            });

            $('#createModal').on('shown.bs.modal', function() {
                const modal = $(this);
                initModalSelects(modal);

                modal.find('.type-selector').off('change').on('change', function() {
                    toggleTrackTypeWrapper(this);
                });
            });

            $('div[id^="editModal"]').on('shown.bs.modal', function() {
                const modal = $(this);
                initModalSelects(modal);

                modal.find('.type-selector').off('change').on('change', function() {
                    toggleTrackTypeWrapper(this);
                });
            });

            setTimeout(() => {
                let alert = document.getElementById('successAlert');
                if (alert) {
                    let bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                }
            }, 10000);
        });
    </script>
@endpush