@extends('dashboard.layouts.app')

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

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="shadow-sm border-0" style="border-radius: 18px;">
                <div class="border-bottom p-3" style="border-radius: 18px 18px 0 0;">
                    <div class="mb-0">Create New Session Slot</div>
                </div>
                <div class="p-3">
                    <form action="{{ route('supervisor-session-slots.store') }}" method="POST">
                        @csrf
                        
                        {{-- supervisor Selection (Admin Only) --}}
                        @if(isset($supervisors) && $supervisors->count() > 0)
                        <div class="mb-3">
                            <label for="supervisor_id" class="form-label">supervisor Member <span class="text-danger">*</span></label>
                            <select name="staff_id" id="staff_id" class="form-select @error('staff_id') is-invalid @enderror" required>
                                <option value="">-- Select supervisor --</option>
                                @foreach($supervisors as $supervisor)
                                    <option value="{{ $supervisor->id }}" {{ old('staff_id') == $supervisor->id ? 'selected' : '' }}>
                                        {{ $supervisor->first_name }} {{ $supervisor->last_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('staff_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        @else
                            <input type="hidden" name="staff_id" value="{{ Auth::user()->staff->id }}">
                        @endif

                        {{-- Booking Type --}}
                        <div class="mb-3">
                            <label class="form-label">Booking Type <span class="text-danger">*</span></label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="booking_type" id="type_single" value="single" {{ old('booking_type', 'single') == 'single' ? 'checked' : '' }} onchange="toggleDateInputs()">
                                    <label class="form-check-label" for="type_single">Single Day</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="booking_type" id="type_multiple" value="multiple" {{ old('booking_type') == 'multiple' ? 'checked' : '' }} onchange="toggleDateInputs()">
                                    <label class="form-check-label" for="type_multiple">Multiple Days</label>
                                </div>
                            </div>
                        </div>

                        {{-- Dates --}}
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="start_date" class="form-label">Date <span class="text-danger">*</span></label>
                                <input type="date" name="start_date" id="start_date" class="form-control @error('start_date') is-invalid @enderror" value="{{ old('start_date') }}" required>
                                @error('start_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3 d-none" id="end_date_wrapper">
                                <label for="end_date" class="form-label">End Date (Inclusive) <span class="text-danger">*</span></label>
                                <input type="date" name="end_date" id="end_date" class="form-control @error('end_date') is-invalid @enderror" value="{{ old('end_date') }}">
                                @error('end_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Time Range --}}
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="start_time" class="form-label">Start Time <span class="text-danger">*</span></label>
                                <input type="time" name="start_time" id="start_time" class="form-control @error('start_time') is-invalid @enderror" value="{{ old('start_time') }}" required>
                                @error('start_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="end_time" class="form-label">End Time <span class="text-danger">*</span></label>
                                <input type="time" name="end_time" id="end_time" class="form-control @error('end_time') is-invalid @enderror" value="{{ old('end_time') }}" required>
                                @error('end_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Session Type & Duration --}}
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="session_type" class="form-label">Session Type <span class="text-danger">*</span></label>
                                <select name="session_type" id="session_type" class="form-select @error('session_type') is-invalid @enderror" required>
                                    <option value="induction" {{ old('session_type') == 'induction' ? 'selected' : '' }}>Induction</option>
                                    <option value="demo" {{ old('session_type') == 'demo' ? 'selected' : '' }}>Demo</option>
                                    <option value="training" {{ old('session_type') == 'training' ? 'selected' : '' }}>Training</option>
                                </select>
                                @error('session_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="duration_minutes" class="form-label">Duration (Minutes) <small class="">(Optional - splits the range)</small></label>
                                <input type="number" name="duration_minutes" id="duration_minutes" class="form-control @error('duration_minutes') is-invalid @enderror" value="{{ old('duration_minutes', 30) }}" min="1">
                                @error('duration_minutes')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2 mt-3">
                            <a href="{{ route('supervisor-session-slots.index') }}" class="btn btn-outline-secondary">Cancel</a>
                            <button type="submit" class="btn btn-outline-primary">Create Slots</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function toggleDateInputs() {
        const isMultiple = document.getElementById('type_multiple').checked;
        const endDateWrapper = document.getElementById('end_date_wrapper');
        const endDateInput = document.getElementById('end_date');
        
        if (isMultiple) {
            endDateWrapper.classList.remove('d-none');
            endDateInput.setAttribute('required', 'required');
        } else {
            endDateWrapper.classList.add('d-none');
            endDateInput.removeAttribute('required');
            endDateInput.value = '';
        }
    }

    // Run on load to set correct state (e.g. if returning with errors)
    document.addEventListener('DOMContentLoaded', function() {
        toggleDateInputs();
    });
</script>
@endsection