@extends('dashboard.layouts.app')
<style>
    .modal span {
        display: block !important;
    }
    .general span{
        display: block !important;
    }
</style>
@section('content')
    @include('components.alert')

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card h-100 border-0 shadow-sm overflow-hidden">

                    <div class="card-header border-bottom d-flex align-items-center flex-wrap justify-content-between gap-3">
                        <form action="{{ route('slot_emp.index') }}" method="GET">
                            @if(request('search')) <input type="hidden" name="search" value="{{ request('search') }}"> @endif
                            @foreach ($slotEmps as $name => $options)
                                @if(request($name)) <input type="hidden" name="{{ $name }}" value="{{ request($name) }}"> @endif
                            @endforeach
                            <select name="per_page" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
                                @foreach ([5, 10, 25, 50, 100, 150] as $count)
                                    <option value="{{ $count }}" {{ request('per_page', 10) == $count ? 'selected' : '' }}>
                                        {{ $count }}
                                    </option>
                                @endforeach
                            </select>
                        </form>
                        {{-- <x-table-controls action="{{ route('slot_emp.index') }}" /> --}}

                        <button type="button" class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                            data-bs-toggle="modal" data-bs-target="#createModal">
                            <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                            Add New Slot
                        </button>
                    </div>

                    <div class="general py-3">
                        <form action="{{ route('slot_emp.index') }}" method="GET" class="p-3 border rounded shadow-sm">
                            <div class="row g-3">
                                <div class="col-md-2">
                                    <label for="type" class="form-label fw-bold">Type</label>
                                    <select name="type" class="form-select general-select">
                                        <option value="">All Types</option>
                                        <option value="teacher" {{ request('type') == 'teacher' ? 'selected' : '' }}>Teacher</option>
                                        <option value="tester" {{ request('type') == 'tester' ? 'selected' : '' }}>Tester</option>
                                    </select>
                                </div>
                    
                                <div class="col-md-2">
                                    <label for="slot_day" class="form-label fw-bold">Slot Day</label>
                                    <select name="slot_day" class="form-select general-select">
                                        <option value="">All Days</option>
                                        @foreach (['saturday', 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday'] as $day)
                                            <option value="{{ $day }}" {{ request('slot_day') == $day ? 'selected' : '' }}>
                                                {{ ucfirst($day) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                    
                                <div class="col-md-2">
                                    <label for="season" class="form-label fw-bold">Season</label>
                                    <select name="season" class="form-select general-select">
                                        <option value="">All Seasons</option>
                                        @foreach (['summer', 'winter', 'ramadan'] as $season)
                                            <option value="{{ $season }}" {{ request('season') == $season ? 'selected' : '' }}>
                                                {{ ucfirst($season) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                    
                                <div class="col-md-2">
                                    <label for="timing_type" class="form-label fw-bold">Timing Type</label>
                                    <select name="timing_type" class="form-select general-select">
                                        <option value="">All Timing Types</option>
                                        <option value="morning" {{ request('timing_type') == 'morning' ? 'selected' : '' }}>Morning</option>
                                        <option value="night" {{ request('timing_type') == 'night' ? 'selected' : '' }}>Night</option>
                                    </select>
                                </div>
                    
                                <div class="col-md-2">
                                    <label for="track_type_id" class="form-label fw-bold">Track Type</label>
                                    <select name="track_type_id" class="form-select general-select">
                                        <option value="">All Tracks</option>
                                        @foreach ($trackTypes as $track)
                                            <option value="{{ $track->id }}" {{ request('track_type_id') == $track->id ? 'selected' : '' }}>
                                                {{ $track->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                    
                                <div class="col-md-2">
                                    <label for="search" class="form-label fw-bold">Search</label>
                                    <input type="text" class="form-control" name="search" placeholder="Search" value="{{ request('search') }}">
                                </div>
                            </div>
                    
                            <div class="d-flex justify-content-end gap-2 mt-3">
                                <button type="submit" class="btn btn-primary px-3">
                                    <i class="bi bi-funnel"></i> Filter
                                </button>
                                <a href="{{ route('slot_emp.index') }}" class="btn btn-secondary px-3">
                                    <i class="bi bi-x-circle"></i> Clear
                                </a>
                            </div>
                        </form>
                    </div>
                    



                    

                    <!-- Slot Emp Table -->
                    <table class="table table-bordered table-sm table bordered-table sm-table mb-0">

                        <thead class="table-dark">
                            <tr>
                                <th>Index</th>
                                <th>Type</th>
                                <th>Slot Day</th>
                                <th>Slot Start</th>
                                <th>Slot End</th>
                                <th>Season</th>
                                <th>Timing Type</th>
                                <th>Track Type</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($slotEmps as $slotEmp)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ ucfirst(strtolower($slotEmp->type)) }}</td>
                                    <td>{{ ucfirst(strtolower($slotEmp->slot_day)) }}</td>
                                    <td>{{ \Carbon\Carbon::createFromFormat('H:i:s', $slotEmp->slot_start)->format('g:i A') }}
                                    </td>
                                    <td>{{ \Carbon\Carbon::createFromFormat('H:i:s', $slotEmp->slot_end)->format('g:i A') }}
                                    </td>
                                    <td>
                                        @if ($slotEmp->season)
                                            @foreach ($slotEmp->season as $season)
                                                {{ ucfirst(strtolower($season)) }}<br>
                                            @endforeach
                                        @endif
                                    </td>
                                    <td>{{ ucfirst(strtolower($slotEmp->timing_type)) }}</td>
                                    <td>
                                        @if ($slotEmp->type == 'teacher')
                                            @if ($slotEmp->track_type_id)
                                                @foreach ($slotEmp->track_type_id as $id)
                                                    {{ ucfirst(strtolower($trackTypes->where('id', $id)->first()->name)) ?? '' }}<br>
                                                @endforeach
                                            @endif
                                        @elseif($slotEmp->type == 'tester')
                                            demo
                                        @endif
                                    </td>

                                    <td>
                                        <!-- Edit Button -->
                                        <button type="button" class="btn btn-outline-primary btn-sm radius-8"
                                            data-bs-toggle="modal" data-bs-target="#editModal{{ $slotEmp->id }}">
                                            <iconify-icon icon="lucide:edit" class="text-lg"></iconify-icon>

                                        </button>
                                        <!-- Delete Button -->
                                        <button type="button" class="btn btn-outline-danger btn-sm radius-8"
                                            data-bs-toggle="modal" data-bs-target="#deleteModal{{ $slotEmp->id }}">
                                            <iconify-icon icon="fluent:delete-24-regular" class="text-lg"></iconify-icon>
                                        </button>
                                    </td>
                                </tr>

                                <!-- Edit Modal -->
                                <div class="modal fade" id="editModal{{ $slotEmp->id }}" tabindex="-1"
                                    aria-labelledby="editSlotLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <form action="{{ route('slot_emp.update', $slotEmp->id) }}" method="POST">
                                                @csrf
                                                @method('PUT')
                                                <div class="modal-header">
                                                    <div class="modal-title fs-5 fw-bold" id="editSlotLabel">Edit Slot</div>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>

                                                <div class="modal-body">
                                                    <div class="row g-3">
                                                        <!-- Slot Day -->
                                                        <div class="col-md-4">
                                                            <label for="slot_day" class="form-label">Slot Day <span
                                                                    class="text-danger "
                                                                    style="display: inline !important">*<span></label>
                                                            <select id="slot_day" value="{{ $slotEmp->slot_day }}"
                                                                class="form-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 }}"
                                                                        {{ $slotEmp->slot_day == $day ? 'selected' : '' }}>
                                                                        {{ ucfirst($day) }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <!-- Slot Start -->
                                                        <div class="col-md-4">
                                                            <label for="slot_start" class="form-label">Slot Start <span
                                                                    class="text-danger "
                                                                    style="display: inline !important">*<span></label>
                                                            <input type="time" id="slot_start" class="form-control"
                                                                name="slot_start" value="{{ $slotEmp->slot_start }}">
                                                        </div>

                                                        <!-- Slot End -->
                                                        <div class="col-md-4">
                                                            <label for="slot_end" class="form-label">Slot End <span
                                                                    class="text-danger "
                                                                    style="display: inline !important">*<span></label>
                                                            <input type="time" id="slot_end" class="form-control"
                                                                name="slot_end" value="{{ $slotEmp->slot_end }}">
                                                        </div>

                                                        <!-- Season -->
                                                        <div class="col-md-4">
                                                            <label for="season" class="form-label">Season <span
                                                                    class="text-danger "
                                                                    style="display: inline !important">*<span></label>
                                                            <select id="season" name="season[]"
                                                                class="form-select general-select" multiple>
                                                                @foreach (['summer', 'winter', 'ramadan'] as $season)
                                                                    <option value="{{ $season }}"
                                                                        {{ is_array($slotEmp->season) && in_array($season, $slotEmp->season) ? 'selected' : '' }}>
                                                                        {{ ucfirst($season) }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <!-- Timing Type -->
                                                        <div class="col-md-4">
                                                            <label for="timing_type" class="form-label">Timing Type <span
                                                                    class="text-danger "
                                                                    style="display: inline !important">*<span></label>
                                                            <select id="timing_type" name="timing_type"
                                                                class="form-select general-select">
                                                                <option value="" disabled selected>Select Timing
                                                                </option>
                                                                @foreach (['morning', 'night'] as $time)
                                                                    <option value="{{ $time }}"
                                                                        {{ $slotEmp->timing_type == $time ? 'selected' : '' }}>
                                                                        {{ ucfirst($time) }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <!-- Type -->
                                                        <div class="col-md-4">
                                                            <label for="type" class="form-label">Type <span
                                                                    class="text-danger "
                                                                    style="display: inline !important">*<span></label>
                                                            <select id="type" name="type"
                                                                class="form-select general-select">
                                                                <option value="" disabled selected>Select Type
                                                                </option>
                                                                @foreach (['teacher', 'tester'] as $type)
                                                                    <option value="{{ $type }}"
                                                                        {{ $slotEmp->type == $type ? 'selected' : '' }}>
                                                                        {{ ucfirst($type) }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <!-- Track Type -->

                                                        <div class="col-12 track-type-wrapper d-none">
                                                            <label for="track_type_id" class="form-label">Track
                                                                Types <span class="text-danger "
                                                                    style="display: inline !important">*<span></label>
                                                            <select id="track_type_id" name="track_type_id[]"
                                                                class="form-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 bg-light">
                                                    <button type="button" class="btn btn-outline-secondary"
                                                        data-bs-dismiss="modal">Cancel</button>
                                                    <button type="submit" class="btn btn-primary">Update Slot</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- Delete Modal -->
                                <div class="modal fade" id="deleteModal{{ $slotEmp->id }}" tabindex="-1"
                                    aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <form action="{{ route('slot_emp.destroy', $slotEmp->id) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <div class="modal-header">
                                                    <h6 class="modal-title text-center">Delete</h6>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body text-center">
                                                    <p>Are you sure you want to delete
                                                        <strong>{{ $slotEmp->name }}</strong>?
                                                    </p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-bs-dismiss="modal">Close</button>
                                                    <button type="submit" class="btn btn-danger">Delete</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center">No slotEmp found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    <div class="m-2">
                        <div>
                            {{ $slotEmps->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- Create Slot Modal -->
    <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createSlotLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form action="{{ route('slot_emp.store') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <div class="modal-title fs-5 fw-bold" id="createSlotLabel">Create New Slot</div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div class="row g-3">
                            <!-- Slot Day -->
                            <div class="col-md-4">
                                <label for="slot_day" class="form-label">Slot Day <span class="text-danger "
                                        style="display: inline !important">*<span></label>
                                <select id="slot_day" class="form-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>

                            <!-- Slot Start -->
                            <div class="col-md-4">
                                <label for="slot_start" class="form-label">Slot Start <span class="text-danger "
                                        style="display: inline !important">*<span></label>
                                <input type="time" id="slot_start" class="form-control" name="slot_start"
                                    value="{{ old('slot_start') }}">
                            </div>

                            <!-- Slot End -->
                            <div class="col-md-4">
                                <label for="slot_end" class="form-label">Slot End <span class="text-danger "
                                        style="display: inline !important">*<span></label>
                                <input type="time" id="slot_end" class="form-control" name="slot_end"
                                    value="{{ old('slot_end') }}">
                            </div>

                            <!-- Season -->
                            <div class="col-md-4">
                                <label for="season" class="form-label">Season <span class="text-danger "
                                        style="display: inline !important">*<span></label>
                                <select id="season" name="season[]" class="form-select general-select" multiple>
                                    @foreach (['summer', 'winter', 'ramadan'] as $season)
                                        <option value="{{ $season }}"
                                            {{ old('season') == $season ? 'selected' : '' }}>
                                            {{ ucfirst($season) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Timing Type -->
                            <div class="col-md-4">
                                <label for="timing_type" class="form-label">Timing Type <span class="text-danger "
                                        style="display: inline !important">*<span></label>
                                <select id="timing_type" name="timing_type" class="form-select general-select">
                                    <option value="" disabled selected>Select Timing</option>
                                    @foreach (['morning', 'night'] as $time)
                                        <option value="{{ $time }}"
                                            {{ old('timing_type') == $time ? 'selected' : '' }}>
                                            {{ ucfirst($time) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Type -->
                            <div class="col-md-4">
                                <label for="type" class="form-label">Type <span class="text-danger "
                                        style="display: inline !important">*<span></label>
                                <select id="type" name="type" class="form-select general-select">
                                    <option value="" disabled selected>Select Type</option>
                                    @foreach (['teacher', 'tester'] as $type)
                                        <option value="{{ $type }}" {{ old('type') == $type ? 'selected' : '' }}>
                                            {{ ucfirst($type) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Track Type -->
                            <div class="col-12 track-type-wrapper d-none">
                                <label for="track_type_id" class="form-label">Track Types <span class="text-danger "
                                        style="display: inline !important">*<span></label>
                                <select id="track_type_id" name="track_type_id[]" class="form-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 bg-light">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Create Slot</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

{{-- 
<!-- Flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>



 --}}

@push('scripts')
    {{-- 
<script>
    flatpickr("#slot_start", {
        enableTime: true,
        noCalendar: true,
        dateFormat: "H:i",
        time_24hr: true,
        allowInput: true 
    });

    flatpickr("#slot_end", {
        enableTime: true,
        noCalendar: true,
        dateFormat: "H:i",
        time_24hr: true,
        allowInput: true 
    });
</script> --}}

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

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

        // Create Modal
        $('#createModal').on('shown.bs.modal', function() {
            let modal = $(this);

            // Apply select2
            modal.find('.general-select').select2({
                dropdownParent: modal,
                placeholder: "Select",
                allowClear: true,
                width: '100%'
            });

            // Initial check
            toggleTrackTypeWrapper(modal.find('select[name="type"]'));

            // Change event
            modal.find('select[name="type"]').on('change', function() {
                toggleTrackTypeWrapper(this);
            });
        });

        // Edit Modals
        $(document).ready(function() {
            $('div[id^="editModal"]').on('shown.bs.modal', function() {
                let modal = $(this);

                // Apply select2
                modal.find('.general-select').select2({
                    dropdownParent: modal,
                    placeholder: "Select",
                    allowClear: true,
                    width: '100%'
                });

                // Initial check
                toggleTrackTypeWrapper(modal.find('select[name="type"]'));

                // Change event
                modal.find('select[name="type"]').on('change', function() {
                    toggleTrackTypeWrapper(this);
                });
            });
        });
    </script>
@endpush