@extends('dashboard.layouts.app')
@section('title', __('dashboard.Create Schedule'))
@section('page_heading', __('dashboard.Create Schedule'))
@section('breadcrumb')
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.schedules.index') }}" class="text-muted text-hover-primary">{{ __('dashboard.Schedules') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">{{ __('dashboard.Create Schedule') }}</li>
@endsection

@section('content')
<div class="container-fluid py-4">
    <div class="row mb-4 align-items-center">
        <div class="col-12 col-md-8">
            <h2 class="mb-0 text-primary fw-bold">{{ __('dashboard.Create Schedule') }}</h2>
            <p class="text-muted mt-1">{{ __('dashboard.Set up a new schedule by defining the type, sessions, and teacher availability.') }}</p>
        </div>
        <div class="col-12 col-md-4 text-md-end">
            <a href="{{ route('dashboard.schedules.index') }}" class="btn btn-outline-secondary fw-bold">
                <i class="bi bi-arrow-left me-2"></i>{{ __('dashboard.Back to Schedules') }}
            </a>
        </div>
    </div>

    <div class="card shadow-sm rounded">
        <div class="card-header">
            <h3 class="card-title">{{ __('dashboard.Create Schedule') }}</h3>
        </div>
        <div class="card-body p-4">
            <form action="{{ route('dashboard.schedules.store') }}" method="POST" class="needs-validation" novalidate>
                @csrf

                <div class="row">
                    <div class="mb-3 col-md-6">
                        <label for="item_name" class="form-label fw-bold">{{ __('dashboard.Schedule Name') }}</label>
                        <input type="text" class="form-control @error('item_name') is-invalid @enderror" id="item_name" name="item_name" value="{{ old('item_name') }}" required>
                        @error('item_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3 col-md-6">
                        <label for="schedule_type" class="form-label fw-bold">{{ __('dashboard.Schedule Type') }}</label>
                        <select class="form-select @error('schedule_type') is-invalid @enderror" id="schedule_type" name="schedule_type" required>
                            <option value="custom">{{ __('dashboard.Custom') }}</option>
                            <option value="track">{{ __('dashboard.Track') }}</option>
                            <option value="item">{{ __('dashboard.Item') }}</option>
                        </select>
                        <small class="text-muted">{{ __('dashboard.Choose the type of schedule to create.') }}</small>
                        @error('schedule_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3 col-md-4" id="track_category_fields" style="display: none;">
                        <label for="track_category_id" class="form-label fw-bold">{{ __('dashboard.Track Category') }}</label>
                        <select class="form-select @error('track_category_id') is-invalid @enderror" id="track_category_id" name="track_category_id">
                            <option value="">{{ __('dashboard.Select an option') }}</option>
                            @foreach ($trackCategories as $category)
                                <option value="{{ $category->id }}" {{ old('track_category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('track_category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3 col-md-4" id="track_sub_category_fields" style="display: none;">
                        <label for="track_sub_category_id" class="form-label fw-bold">{{ __('dashboard.Track Sub Category') }}</label>
                        <select class="form-select @error('track_sub_category_id') is-invalid @enderror" id="track_sub_category_id" name="track_sub_category_id" disabled>
                            <option value="">{{ __('dashboard.Select an option') }}</option>
                        </select>
                        @error('track_sub_category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3 col-md-4" id="track_fields" style="display: none;">
                        <label for="track_id" class="form-label fw-bold">{{ __('dashboard.Track') }}</label>
                        <select class="form-select @error('track_id') is-invalid @enderror" id="track_id" name="track_id">
                            <option value="">{{ __('dashboard.Select an option') }}</option>
                        </select>
                        @error('track_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3 col-md-4" id="track_level_fields" style="display: none;">
                        <label for="track_level_id" class="form-label fw-bold">{{ __('dashboard.Track Level') }}</label>
                        <select class="form-select @error('track_level_id') is-invalid @enderror" id="track_level_id" name="track_level_id">
                            <option value="">{{ __('dashboard.Select an option') }}</option>
                        </select>
                        @error('track_level_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3 col-md-4" id="item_fields" style="display: none;">
                        <label for="item_category_id" class="form-label fw-bold">{{ __('dashboard.Item Category') }}</label>
                        <select class="form-select @error('item_category_id') is-invalid @enderror" id="item_category_id" name="item_category_id">
                            <option value="">{{ __('dashboard.Select an option') }}</option>
                            @foreach ($itemCategories as $category)
                                <option value="{{ $category->id }}" {{ old('item_category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('item_category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror

                        <label for="item_id" class="form-label fw-bold mt-3">{{ __('dashboard.Item') }}</label>
                        <select class="form-select @error('item_id') is-invalid @enderror" id="item_id" name="item_id">
                            <option value="">{{ __('dashboard.Select an option') }}</option>
                        </select>
                        @error('item_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3 col-md-4">
                        <label for="sessions_count" class="form-label fw-bold">{{ __('dashboard.Sessions Count') }}</label>
                        <input type="number" class="form-control @error('sessions_count') is-invalid @enderror" id="sessions_count" name="sessions_count" value="{{ old('sessions_count') }}" required min="1">
                        @error('sessions_count')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3 col-md-4">
                        <label for="sessions_per_week" class="form-label fw-bold">{{ __('dashboard.Sessions Per Week') }}</label>
                        <input type="number" class="form-control @error('sessions_per_week') is-invalid @enderror" id="sessions_per_week" name="sessions_per_week" max="3" value="{{ old('sessions_per_week', 1) }}" required min="1">
                        @error('sessions_per_week')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3 col-md-4">
                        <label for="start_date" class="form-label fw-bold">{{ __('dashboard.Start Date') }}</label>
                        <input type="date" class="form-control @error('start_date') is-invalid @enderror" id="start_date" name="start_date" value="{{ old('start_date') }}" required>
                        @error('start_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3 col-md-4">
                        <label for="end_date" class="form-label fw-bold">{{ __('dashboard.End Date') }}</label>
                        <input type="text" class="form-control" id="end_date" name="end_date" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">{{ __('dashboard.Select Weekly Slots') }}</label>
                        <div id="time-slots-container" class="border p-3 rounded bg-light"></div>
                        @error('slots')
                            <div class="text-danger mt-2">{{ $message }}</div>
                        @enderror
                        @error('slots.*')
                            <div class="text-danger mt-2">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <button type="button" id="fetch-teachers-btn" class="btn btn-info fw-bold">{{ __('dashboard.Fetch Available Teachers') }}</button>
                    </div>

                    <div class="legend mb-3">
                        <h5>{{ __('dashboard.Conflict Status Legend') }}</h5>
                        <div class="d-flex flex-wrap gap-3">
                            <span class="legend-item"><span class="color-box" style="background-color: #87CEEB; border-radius: 10px;"></span> {{ __('dashboard.Scheduled') }}</span>
                            <span class="legend-item"><span class="color-box" style="background-color: #00008B; border-radius: 10px;"></span> {{ __('dashboard.Reserved') }}</span>
                            <span class="legend-item"><span class="color-box" style="background-color: #FF0000; border-radius: 10px;"></span> {{ __('dashboard.Started') }}</span>
                        </div>
                    </div>

                    <div class="mb-3" id="teachers-container" style="display: none;">
                        <label class="form-label fw-bold">{{ __('dashboard.Available Teachers') }}</label>
                        <div class="row">
                            <div class="col-12 mb-3">
                                <div id="available-teachers-count" class="text-muted"><i>{{ __('dashboard.Loading...') }}</i></div>
                            </div>
                            <div class="col-12">
                                <div class="table-responsive" id="available-teachers"></div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex gap-3">
                        <button type="submit" class="btn btn-primary fw-bold px-4">{{ __('dashboard.Create') }}</button>
                        <a href="{{ route('dashboard.schedules.index') }}" class="btn btn-secondary fw-bold px-4">{{ __('dashboard.Cancel') }}</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        $(document).ready(function() {
            function initializeFlatpickr() {
                flatpickr('.slot-start, .slot-end', {
                    enableTime: true,
                    noCalendar: true,
                    dateFormat: "H:i",
                    time_24hr: true,
                    defaultHour: 16,
                    defaultMinute: 0
                });
            }

            function updateOptions(elementId, data, placeholder) {
                const selectElement = $(elementId);
                selectElement.empty().append(`<option value="">${placeholder}</option>`);
                $.each(data, function(index, item) {
                    selectElement.append(`<option value="${item.id}">${item.name}</option>`);
                });
            }

            $('#schedule_type').change(function() {
                const type = $(this).val();
                $('#track_category_fields, #track_sub_category_fields, #track_fields, #track_level_fields, #item_fields').hide();
                $('#sessions_count').val('');
                resetTimeSlots();
                if (type === 'track') {
                    $('#track_category_fields').show();
                    $('#item_id').val('');
                } else if (type === 'item') {
                    $('#item_fields').show();
                    $('#track_category_id, #track_sub_category_id, #track_id, #track_level_id').val('');
                } else {
                    $('#track_category_id, #track_sub_category_id, #track_id, #track_level_id, #item_id').val('');
                }
            });

            $('#track_category_id').change(function() {
                const categoryId = $(this).val();
                if (categoryId) {
                    $.ajax({
                        url: "{{ route('dashboard.schedules.getSubCategories') }}",
                        type: "GET",
                        data: { category_id: categoryId },
                        success: function(data) {
                            if (data.subCategories.length > 0) {
                                updateOptions('#track_sub_category_id', data.subCategories, "{{ __('dashboard.Select Sub Category') }}");
                                $('#track_sub_category_id').prop('disabled', false);
                                $('#track_sub_category_fields').show();
                                $('#track_fields, #track_level_fields').hide();
                            } else {
                                $('#track_sub_category_id').prop('disabled', true).val('');
                                $('#track_sub_category_fields').hide();
                                getTracksByCategory(categoryId);
                            }
                        }
                    });
                } else {
                    $('#track_sub_category_fields, #track_fields, #track_level_fields').hide();
                    $('#track_sub_category_id').prop('disabled', true).val('');
                    $('#track_id, #track_level_id').val('');
                }
            });

            function getTracksByCategory(categoryId) {
                $.ajax({
                    url: "{{ route('dashboard.schedules.getTracksByCategory') }}",
                    type: "GET",
                    data: { category_id: categoryId },
                    success: function(data) {
                        updateOptions('#track_id', data.tracks, "{{ __('dashboard.Select Track') }}");
                        $('#track_fields').show();
                        $('#track_level_fields').hide();
                    }
                });
            }

            $('#track_sub_category_id').change(function() {
                const subCategoryId = $(this).val();
                if (subCategoryId) {
                    $.ajax({
                        url: "{{ route('dashboard.schedules.getTracksBySubCategory') }}",
                        type: "GET",
                        data: { sub_category_id: subCategoryId },
                        success: function(data) {
                            updateOptions('#track_id', data.tracks, "{{ __('dashboard.Select Track') }}");
                            $('#track_fields').show();
                            $('#track_level_fields').hide();
                        }
                    });
                } else {
                    $('#track_fields, #track_level_fields').hide();
                    $('#track_id, #track_level_id').val('');
                }
            });

            $('#track_id').change(function() {
                const trackId = $(this).val();
                if (trackId) {
                    $.ajax({
                        url: "{{ route('dashboard.schedules.getTrackLevels') }}",
                        type: "GET",
                        data: { track_id: trackId },
                        success: function(data) {
                            updateOptions('#track_level_id', data.trackLevels, "{{ __('dashboard.Select Track Level') }}");
                            $('#track_level_fields').show();
                        }
                    });
                } else {
                    $('#track_level_fields').hide();
                    $('#track_level_id').val('');
                }
            });

            $('#track_level_id').change(function() {
                const trackLevelId = $(this).val();
                const scheduleType = $('#schedule_type').val();
                if (trackLevelId && scheduleType === 'track') {
                    $.ajax({
                        url: "{{ route('dashboard.schedules.getSessionsByLevel') }}",
                        type: "GET",
                        data: { level_id: trackLevelId },
                        success: function(data) {
                            $('#sessions_count').val(data.sessions_count);
                            calculateEndDate();
                        }
                    });
                }
            });

            $('#item_category_id').change(function() {
                const categoryId = $(this).val();
                if (categoryId) {
                    $.ajax({
                        url: "{{ route('dashboard.schedules.getItemsByCategory') }}",
                        type: "GET",
                        data: { category_id: categoryId },
                        success: function(data) {
                            updateOptions('#item_id', data.results, "{{ __('dashboard.Select Item') }}");
                        }
                    });
                } else {
                    updateOptions('#item_id', [], "{{ __('dashboard.Select Item') }}");
                }
            });

            function calculateEndDate() {
                const startDate = $('#start_date').val();
                const sessionsCount = parseInt($('#sessions_count').val()) || 0;
                const sessionsPerWeek = parseInt($('#sessions_per_week').val()) || 0;
                if (startDate && sessionsCount > 0 && sessionsPerWeek > 0) {
                    const weeksNeeded = Math.ceil(sessionsCount / sessionsPerWeek);
                    const endDate = new Date(startDate);
                    endDate.setDate(endDate.getDate() + (weeksNeeded * 7) - 1);
                    $('#end_date').val(endDate.toISOString().split('T')[0]);
                } else {
                    $('#end_date').val('');
                }
            }

            $('#start_date, #sessions_count, #sessions_per_week').on('change input', calculateEndDate);

            function generateTimeSlot(index) {
                const days = ['{{__('dashboard.Sunday')}}', '{{__('dashboard.Monday')}}', '{{__('dashboard.Tuesday')}}', '{{__('dashboard.Wednesday')}}', '{{__('dashboard.Thursday')}}', '{{__('dashboard.Friday')}}', '{{__('dashboard.Saturday')}}'];
                return `
                    <div class="row g-3 mb-3 time-slot-row" data-index="${index}">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">${index === 0 ? '{{__('dashboard.Day')}}' : ''}</label>
                            <select class="form-select slot-day" name="slots[${index}][day]" required>
                                <option value="">{{__('dashboard.Select Day')}}</option>
                                ${days.map((day, i) => `<option value="${i}">${day}</option>`).join('')}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">${index === 0 ? '{{__('dashboard.Start Time')}}' : ''}</label>
                            <input type="text" class="form-control slot-start" name="slots[${index}][start]" required data-toggle="flatpickr">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">${index === 0 ? '{{__('dashboard.End Time')}}' : ''}</label>
                            <input type="text" class="form-control slot-end" name="slots[${index}][end]" required data-toggle="flatpickr">
                        </div>
                    </div>
                `;
            }

            function resetTimeSlots() {
                $('#time-slots-container').empty();
                updateTimeSlots();
            }

            function updateTimeSlots() {
                const sessionsPerWeek = parseInt($('#sessions_per_week').val() || 1, 10);
                const currentSlots = $('.time-slot-row').length;
                const container = $('#time-slots-container');
                if (currentSlots > sessionsPerWeek) {
                    $('.time-slot-row').slice(sessionsPerWeek).remove();
                } else if (currentSlots < sessionsPerWeek) {
                    for (let i = currentSlots; i < sessionsPerWeek; i++) {
                        container.append(generateTimeSlot(i));
                        initializeFlatpickr();
                    }
                }
            }

            $('#sessions_per_week').on('input', function() {
                resetTimeSlots();
                $('#teachers-container').hide();
            });

            let selectedSlots = [];

            $('#fetch-teachers-btn').on('click', function() {
                selectedSlots = [];
                $('.time-slot-row').each(function() {
                    const day = $(this).find('.slot-day').val();
                    const start = $(this).find('.slot-start').val();
                    const end = $(this).find('.slot-end').val();
                    if (day && start && end) {
                        selectedSlots.push({ day, start, end });
                    }
                });
                const startDate = $('#start_date').val();
                const sessionsCount = $('#sessions_count').val();
                if (selectedSlots.length === $('.time-slot-row').length && selectedSlots.length > 0 && startDate && sessionsCount) {
                    fetchAvailableTeachers(selectedSlots, startDate, sessionsCount);
                } else {
                    alert('{{ __('dashboard.Please fill in all slots, start date, and sessions count') }}');
                }
            });

            function fetchAvailableTeachers(slots, startDate, sessionsCount) {
                $.ajax({
                    url: "{{ route('dashboard.schedules.getAvailableTeachers') }}",
                    type: "GET",
                    data: {
                        slots: slots,
                        start_date: startDate,
                        sessions_count: sessionsCount,
                        timezone: 'UTC'
                    },
                    beforeSend: function() {
                        $('#available-teachers-count').html('<i>{{ __('dashboard.Loading...') }}</i>');
                        $('#available-teachers').empty();
                        $('#teachers-container').show();
                    },
                    success: function(data) {
                        if (Array.isArray(data) && data.length > 0) {
                            data.sort((a, b) => {
                                const order = { available: 1, partially_available: 2, busy: 3 };
                                return order[a.status] - order[b.status];
                            });
                            const availableCount = data.filter(t => t.status === 'available').length;
                            const days = ['{{__('dashboard.Sunday')}}', '{{__('dashboard.Monday')}}', '{{__('dashboard.Tuesday')}}', '{{__('dashboard.Wednesday')}}', '{{__('dashboard.Thursday')}}', '{{__('dashboard.Friday')}}', '{{__('dashboard.Saturday')}}'];

                            let tableHtml = `
                                <div class="table-responsive">
                                   
                                    <table class="table table-bordered table-hover align-middle">
                                        <thead class="table-dark sticky-top">
                                            <tr>
                                                <th class="teacher-col" scope="col">{{ __('dashboard.Teacher') }}</th>
                            `;

                            data[0].slots.forEach((slot, index) => {
                                const originalSlot = selectedSlots[slot.slot_index];
                                const dayName = days[originalSlot.day];
                                tableHtml += `<th scope="col">${dayName}, ${slot.date}, ${originalSlot.start} - ${originalSlot.end}</th>`;
                            });

                            tableHtml += `
                                            </tr>
                                        </thead>
                                        <tbody>
                            `;

                            data.forEach(teacher => {
                                const conflictCount = teacher.slots.reduce((count, slot) => {
                                    return count + (slot.status === 'busy' && slot.reason === 'conflict' && slot.conflicts ? slot.conflicts.length : 0);
                                }, 0);
                                const teacherCellClass = conflictCount > 0 ? 'bg-conflict-teacher' : '';
                                tableHtml += `
                                    <tr>
                                        <td class="teacher-col ${teacherCellClass}">
                                            <div>${teacher.text}</div>
                                            ${conflictCount > 0 ? `<small class="text-muted">{{ __('dashboard.Conflicts') }}: ${conflictCount}</small>` : ''}
                                            ${teacher.status === 'available' ? `
                                                <button type="button" class="btn btn-primary btn-sm select-teacher-btn mt-2"
                                                        data-teacher-id="${teacher.id}"
                                                        data-teacher-name="${teacher.text}">
                                                    {{ __('dashboard.Select') }}
                                                </button>
                                            ` : ''}
                                        </td>
                                `;

                                teacher.slots.forEach(slot => {
                                    let cellText = '';

                                    if (slot.status === 'available') {
                                        cellText = '';
                                    } else if (slot.status === 'busy') {
                                        if (slot.reason === 'conflict' && slot.conflicts && slot.conflicts.length > 0) {
                                            cellText = slot.conflicts.map(conflict => {
                                                let conflictColor = '';
                                                switch (conflict.status) {
                                                    case 'scheduled':
                                                        conflictColor = '#87CEEB';
                                                        break;
                                                    case 'reserved':
                                                        conflictColor = '#00008B';
                                                        break;
                                                    case 'started':
                                                        conflictColor = '#FF0000';
                                                        break;
                                                    default:
                                                        conflictColor = '#6c757d';
                                                }
                                                // return `<span class="conflict-item" style="color: ${conflictColor}">${conflict.item_name} (${conflict.start} - ${conflict.end}) - ${conflict.status || 'No Status'}</span>`;
                                                return `<span class="conflict-item" style="color: ${conflictColor}">(${conflict.start} - ${conflict.end})</span>`;

                                            }).join('');
                                        } else {
                                            cellText = '{{ __('dashboard.No Availability') }}';
                                        }
                                    }

                                    tableHtml += `
                                        <td class="default-cell" title="${slot.conflicts ? slot.conflicts.map(c => `${c.item_name} (${c.start} - ${c.end}) - ${c.status}`).join('\n') : cellText}">
                                            ${cellText}
                                        </td>
                                    `;
                                });

                                tableHtml += '</tr>';
                            });

                            tableHtml += `
                                        </tbody>
                                    </table>
                                </div>
                            `;

                            $('#available-teachers-count').html(`<span>{{ __('dashboard.Available Teachers') }}: ${availableCount} / ${data.length}</span>`);
                            $('#available-teachers').html(tableHtml);

                            $('.select-teacher-btn').off('click').on('click', function() {
                                const teacherId = $(this).data('teacher-id');
                                const teacherName = $(this).data('teacher-name');
                                $('input[name="teacher_id"]').remove();
                                $('#teachers-container').append(`<input type="hidden" name="teacher_id" value="${teacherId}">`);
                                $('.select-teacher-btn').removeClass('btn-success').addClass('btn-primary').text('{{ __('dashboard.Select') }}');
                                $(this).removeClass('btn-primary').addClass('btn-success').text('{{ __('dashboard.Selected') }}');
                            });
                        } else {
                            $('#available-teachers-count').html(`<span>{{ __('dashboard.Available Teachers') }}: 0</span>`);
                            $('#available-teachers').html('<p class="text-muted"><i>{{ __('dashboard.No teachers available') }}</i></p>');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching teachers:', error);
                        $('#available-teachers-count').html(`<span>{{ __('dashboard.Available Teachers') }}: 0</span>`);
                        $('#available-teachers').html('<p class="text-danger"><i>{{ __('dashboard.Error loading teachers') }}</i></p>');
                    }
                });
            }

            updateTimeSlots();
        });
    </script>
    <style>
        .table-responsive {
            max-height: 500px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
        }
        .table {
            margin-bottom: 0;
        }
        .table th, .table td {
            vertical-align: middle;
            text-align: center;
            font-size: 1rem;
            padding: 1rem;
            min-width: 150px;
        }
        .teacher-col {
            min-width: 250px;
            text-align: left;
        }
        .default-cell {
            background-color: #dfdfd3 !important;
        }
        .bg-conflict-teacher {
            background-color: #fcd6a9 !important;
        }
        .table-dark {
            background-color: #343a40;
            color: white;
        }
        .sticky-top th {
            position: sticky;
            top: 0;
            z-index: 2;
            background-color: #343a40;
            border-bottom: 2px solid #dee2e6;
        }
        .table-hover tbody tr:hover {
            background-color: #f8f9fa !important;
            color: inherit;
        }
        .conflict-item {
            display: block;
            padding: 2px 5px;
            margin: 2px 0;
            border-radius: 3px;
        }
        .card {
            border: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .form-label {
            margin-bottom: 0.25rem;
        }
        .btn-sm {
            padding: 0.25rem 0.5rem;
        }
        .container-fluid {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
        .legend {
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        .legend-item {
            display: flex;
            align-items: center;
        }
        .color-box {
            width: 20px;
            height: 20px;
            display: inline-block;
            margin-right: 10px;
            border: 1px solid #dee2e6;
        }
    </style>
@endsection