@extends('teacher.layouts.layouts')

@section('content')
    <style>
        .form-group {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        .group-header {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
            cursor: pointer;
        }

        .collapsed {
            display: none;
        }

        .group-header .toggle-icon {
            float: right;
            font-size: 1.2rem;
            transition: transform 0.3s;
        }

        .group-header.collapsed .toggle-icon {
            transform: rotate(180deg);
        }

        .videos-session-container {
            margin-bottom: 20px;
        }

        .session-item {
            position: relative;
            padding: 10px;
            border: 1px solid #ccc;
            margin-top: 10px;
            border-radius: 5px;
        }

        .remove-session-icon {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            background-color: #f8d7da;
            color: #dc3545;
            border-radius: 5px;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            transition: background-color 0.3s, color 0.3s;
        }

        .remove-session-icon:hover {
            background-color: #dc3545;
            color: white;
        }
    </style>

    <div class="mt-5 d-flex justify-content-center">
        <div class="w-50">
            <h1 class="mt-5 mb-4 text-center">Edit Appointment</h1>

            <form action="{{ route('teacher.appointments.update', [$appointment->id]) }}" method="POST">
                @csrf
                @method('PUT')

                <!-- Curriculum Selection -->
                <div class="form-group">
                    <label for="curriculum_id">Curriculum</label>
                    <select name="curriculum_id" class="form-control" id="curriculumId">
                        <option value="">Select Curriculum</option>
                        @foreach ($curricula as $teacherEducationalStage)
                            @if ($teacherEducationalStage->curriculum)
                                <!-- Check if the curriculum exists -->
                                <option value="{{ $teacherEducationalStage->curriculum->id }}"
                                    {{ old('curriculum_id', $appointment->curriculum_id) == $teacherEducationalStage->curriculum->id ? 'selected' : '' }}>
                                    {{ $teacherEducationalStage->curriculum->name }}
                                </option>
                            @endif
                        @endforeach
                    </select>
                    @error('curriculum_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>


                <!-- Day and Time Fields for Single Appointment -->
                <div class="form-group">
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label for="day">Day</label>
                            <select name="day" class="form-control">
                                <option value="">Select Day</option>
                                <option value="monday" {{ $appointment->day == 'monday' ? 'selected' : '' }}>Monday</option>
                                <option value="tuesday" {{ $appointment->day == 'tuesday' ? 'selected' : '' }}>Tuesday
                                </option>
                                <option value="wednesday" {{ $appointment->day == 'wednesday' ? 'selected' : '' }}>Wednesday
                                </option>
                                <option value="thursday" {{ $appointment->day == 'thursday' ? 'selected' : '' }}>Thursday
                                </option>
                                <option value="friday" {{ $appointment->day == 'friday' ? 'selected' : '' }}>Friday</option>
                                <option value="saturday" {{ $appointment->day == 'saturday' ? 'selected' : '' }}>Saturday
                                </option>
                                <option value="sunday" {{ $appointment->day == 'sunday' ? 'selected' : '' }}>Sunday
                                </option>
                            </select>

                        </div>

                        <div class="form-group col-md-4">
                            <label for="time_from">Time From</label>
                            <input type="time" name="time_from" class="form-control"
                                value="{{ old('time_from', $appointment->time_from) }}">
                        </div>

                        <div class="form-group col-md-4">
                            <label for="time_to">Time To</label>
                            <input type="time" name="time_to" class="form-control"
                                value="{{ old('time_to', $appointment->time_to) }}">
                        </div>

                    </div>
                </div>

                <!-- Buttons -->
                <button type="submit" class="btn btn-primary">Update</button>
            </form>
        </div>
    </div>
@endsection

@push('js')
    @include('teacher.appointments.shared.script')
@endpush