@extends('layout.layout')

@section('content')
    <div class="container-fluid">
        @if (isset($products) && $products)
            @include('dashboard.academics.scheduled.form')
            @include('dashboard.academics.scheduled.track_slots')
            @include('dashboard.academics.scheduled.product_slots')
            @include('dashboard.academics.scheduled.submit')
        @else
            <div class="alert alert-danger">No data available. Please contact support.</div>
        @endif
    </div>
@endsection

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    .table tbody td div {
        font-size: 12px;
    }
    .selected-slot {
        border: 2px solid #28a745 !important;
        background-color: #e6f4ea !important;
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
    }
    .input-group {
        position: relative;
    }
    .date-range-input {
        border-radius: 0 !important;
        padding: 10px 15px;
        font-size: 14px;
        background-color: #fff;
        border: 1px solid #ced4da;
        border-left: none;
        border-right: none;
        transition: border-color 0.2s ease;
    }
    .date-range-input:focus {
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
        outline: none;
    }
    .input-group-text {
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-right: none;
        border-radius: 5px 0 0 5px;
    }
    .btn-outline-secondary {
        border: 1px solid #ced4da;
        padding: 0 10px;
    }
    #prev_date {
        border-right: none;
        border-radius: 0;
    }
    #next_date {
        border-left: none;
        border-radius: 0 5px 5px 0;
    }
    .btn-outline-secondary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .flatpickr-calendar {
        font-family: Arial, sans-serif;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        background-color: #007bff !important;
        border-color: #007bff !important;
        color: #fff !important;
    }
    .flatpickr-day.inRange {
        background-color: #e6f4ff !important;
        border-color: #e6f4ff !important;
        color: #000 !important;
    }
    .form-select {
        font-size: 14px;
        padding: 10px;
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

<script>
    window.products = @json($products ?? null);
    window.tracks = @json($tracks ?? null);
    window.today = '{{ now()->format('Y-m-d') }}';
    console.log('Products:', window.products);
    console.log('Tracks:', window.tracks);
    console.log('Today:', window.today);
</script>