@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;
            /* Light red background */
            color: #dc3545;
            /* Red color for the icon */
            border-radius: 5px;
            /* Slight rounding for a softer square */
            padding: 8px;
            /* Space around the icon */
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            /* Width of the square */
            height: 30px;
            /* Height of the square */
            transition: background-color 0.3s, color 0.3s;
            /* Smooth transition effects */
        }

        .remove-session-icon:hover {
            background-color: #dc3545;
            /* Darker red on hover */
            color: white;
            /* White icon color on hover */
        }
    </style>
    <div class="mt-5 d-flex justify-content-center">
        <div class="w-50">
            <h1 class="mt-5 mb-4 text-center">Create Appointments</h1>

            <form action="{{ route('teacher.appointments.store') }}" method="POST" id="FormRelod">
                @csrf

                {{-- <div class="form-group">
                    <label for="teacher_id">Teachers</label>
                    <select name="teacher_id" id="teacher_id" required
                        class="form-control @error('teacher_id') is-invalid @enderror">
                        <option value="">Select teachers</option>
                        @foreach ($teachers as $teachers)
                            <option value="{{ $teachers->id }}" {{ old('teacher_id') == $teachers->id ? 'selected' : '' }}>
                                {{ $teachers->name }}</option>
                        @endforeach
                    </select>
                    @error('teacher_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div> --}}


                <div class="form-group">
                    <label for="curriculum_id">Curriculum</label>

                    <select name="curriculum_id" class="form-control curriculumId" id="curriculumId">
                        <option value="">Select Curriculum</option>
                        @foreach ($curricula as $teacherEducationalStage)
                            <option value="{{ $teacherEducationalStage->curriculum->id }}"
                                {{ old('curriculum_id') == $teacherEducationalStage->curriculum->id ? 'selected' : '' }}>
                                {{ $teacherEducationalStage->curriculum->name }}
                                <!-- Adjust to the actual name attribute -->
                            </option>
                        @endforeach
                    </select>
                    @error('curriculum_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>



                <div id="dynamic-groups-container">
                    <!-- Initial form group template for cloning, hidden by default -->
                    <div class="form-group" id="form-container-template">
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="day">Day</label>
                                <select name="day[]" class="form-control day" placeholder="Select day">
                                    <option value="">Select Day</option>
                                    <option value="monday">Monday</option>
                                    <option value="tuesday">Tuesday</option>
                                    <option value="wednesday">Wednesday</option>
                                    <option value="thursday">Thursday</option>
                                    <option value="friday">Friday</option>
                                    <option value="saturday">Saturday</option>
                                    <option value="sunday">Sunday</option>
                                </select>
                                @error('day.*')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group col-md-4">
                                <label for="time_from">Time From</label>
                                <input type="time" name="time_from[]" class="form-control time_from"
                                    placeholder="Enter start time">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="time_to">Time To</label>
                                <input type="time" name="time_to[]" class="form-control time_to"
                                    placeholder="Enter end time">
                            </div>
                        </div>
                        <button class="delete-group-btn btn btn-danger">Delete Group</button>
                    </div>
                </div>

                <!-- Add new group button -->
                <button id="add-new-group-btn" class="btn btn-success">Add New Group</button>




                <button type="submit" class="btn btn-primary" id="create-btn">Create</button>
            </form>
        </div>
    </div>
@endsection

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