@extends('layout_web.layouts')

@section('content')
    <style>
        .bg-teal {
            background-color: #0e7c5b;
            /* Example teal color */
        }

        .modal-content {
            border-radius: 10px;
            /* Rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            /* Subtle shadow for depth */
        }

        .modal-header {
            border-bottom: 2px solid #0e7c5b;
            /* Darker line for separation */
        }

        .form-control:focus {
            border-color: #0e7c5b;
            /* Focus border color */
            box-shadow: 0 0 5px rgba(0, 86, 179, 0.5);
            /* Subtle focus shadow */
        }

        .btn-primary {
            background-color: #0e7c5b;
            /* Slightly darker button color */
            border-color: #0e7c5b;
            /* Matching border color */
        }

        .btn-primary:hover {
            background-color: #0e7c5b;
            /* Darker color on hover */
            border-color: #0e7c5b;
            /* Matching border color on hover */
        }
    </style>
    <div class="edu-breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-inner">
                <div class="page-title">
                    <h1 class="title">My Account</h1>
                </div>
                <ul class="edu-breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="separator"><i class="icon-angle-right"></i></li>

                    <li class="breadcrumb-item active" aria-current="page">My Account</li>
                </ul>
            </div>
        </div>
        <ul class="shape-group">
            <li class="shape-1">
                <span></span>
            </li>
            <li class="shape-2 scene"><img data-depth="2" src="{{ asset('web/assets/images/about/shape-13.png') }}"
                    alt="shape"></li>
            <li class="shape-3 scene"><img data-depth="-2" src="{{ asset('web/assets/images/about/shape-15.png') }}"
                    alt="shape"></li>
            <li class="shape-4">
                <span></span>
            </li>
            <li class="shape-5 scene"><img data-depth="2" src="{{ asset('web/assets/images/about/shape-07.png') }}"
                    alt="shape"></li>
        </ul>
    </div>

    <!--=====================================-->
    <!--=        FAQ Area Start            =-->
    <!--=====================================-->
    <section class="edu-section-gap faq-page-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="faq-page-nav">
                        <div class="thumbnail">
                            <img src="{{ asset('web/assets/images/blog/blog-large-1.jpg') }}" alt="Blog Image">
                        </div>
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#gn-ques"
                                    type="button" role="tab" aria-selected="true">General Informations</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#rg-ques" type="button"
                                    role="tab" aria-selected="false">Saved Courses</button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#com-urriculums"
                                    type="button" role="tab" aria-selected="false">My Curriculums</button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#com-policy" type="button"
                                    role="tab" aria-selected="false">My Instructors</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#com-appointment"
                                    type="button" role="tab" aria-selected="false">My Appointments</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#com-session" type="button"
                                    role="tab" aria-selected="false">My Sessions</button>
                            </li>


                        </ul>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="tab-content faq-page-tab-content" id="faq-accordion">
                        <div class="tab-pane fade show active" id="gn-ques" role="tabpanel">
                            <div class="faq-accordion">
                                <div class="accordion">
                                    <div class="container">
                                        <div class="login-form-box registration-form">

                                            <form action="{{ route('profile.update') }}" method="POST">
                                                @csrf
                                                @method('PUT')
                                                <div class="form-group">
                                                    <label for="first_name">First Name</label>
                                                    <input type="text" name="first_name" id="first_name"
                                                        placeholder="Enter Your First Name"
                                                        value="{{ old('first_name', $student->first_name) }}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label for="last_name">Last Name</label>
                                                    <input type="text" name="last_name" id="last_name"
                                                        placeholder="Enter Your Last Name"
                                                        value="{{ old('last_name', $student->last_name) }}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label for="phone">Phone Number</label>
                                                    <input type="text" name="phone" id="phone"
                                                        placeholder="Enter Your Phone"
                                                        value="{{ old('phone', $student->phone) }}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label for="email">Email</label>
                                                    <input type="email" name="email" id="email"
                                                        placeholder="Enter Your Email"
                                                        value="{{ old('email', $user->email) }}" required>
                                                </div>


                                                <div class="form-group">
                                                    <button type="submit" class="edu-btn btn-medium">Save Changes <i
                                                            class="icon-4"></i></button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="rg-ques" role="tabpanel">
                            <div class="faq-accordion">
                                <div class="accordion">
                                    @if ($curriculumSessions->isNotEmpty())
                                        @foreach ($curriculumSessions as $curriculumSession)
                                            @foreach ($curriculumSession->onlineSessions as $onlineSession)
                                                <div class="edu-course course-style-4 course-style-14">
                                                    <div class="inner">
                                                        <div class="thumbnail">
                                                            <a
                                                                href="{{ route('course.details', ['slug' => str_slug($curriculumSession->title)]) }}">
                                                                <img src="{{ empty($curriculumSession->image) ? asset('web/assets/images/default.jpg') : Storage::url($curriculumSession->image) }}"
                                                                    alt="Course Image">

                                                            </a>
                                                            <div class="time-top">
                                                                <span class="duration"><i
                                                                        class="icon-61"></i>{{ $onlineSession->duration }}</span>
                                                            </div>
                                                        </div>
                                                        <div class="content">
                                                            <h6 class="title">
                                                                <a
                                                                    href="{{ route('course.details', ['slug' => str_slug($curriculumSession->title)]) }}">
                                                                    {{ $curriculumSession->title }}
                                                                </a>
                                                            </h6>
                                                            <li class="course-rating">
                                                                <div class="rating">
                                                                    @for ($i = 1; $i <= 5; $i++)
                                                                        <i
                                                                            class="icon-23 {{ $i <= $curriculumSession->rating ? 'filled' : 'empty' }}"></i>
                                                                    @endfor
                                                                </div>
                                                                <span
                                                                    class="rating-count">{{ $curriculumSession->rating }}</span>
                                                            </li>
                                                            <p>Lorem ipsum dolor sit amet consectur elit sed eiusmod tempor
                                                                incidid
                                                                unt
                                                                labore dolore magna.</p>
                                                            <ul class="course-meta">
                                                                <li><i class="icon-24"></i>{{ $onlineSession->lessons }}
                                                                    Lessons</li>
                                                                <li><i class="icon-25"></i>20 Students</li>
                                                            </ul>
                                                        </div>
                                                    </div>

                                                </div>
                                            @endforeach
                                        @endforeach
                                    @else
                                        <p>No curriculum sessions available for you at the moment.</p>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="com-urriculums" role="tabpanel">
                            <div class="faq-accordion">
                                <div class="accordion">
                                    <h3 class="mb-4 text-center">My Curriculums</h3>

                                    @if ($curriculums->isNotEmpty())
                                        <div class="row">
                                            @php $hasCurriculumName = false; @endphp
                                            @foreach ($curriculums as $studentContent)
                                                @if (!empty($studentContent->curriculum->name))
                                                    @php $hasCurriculumName = true; @endphp
                                                    <div class="mb-4 col-md-6" data-sal-delay="150" data-sal="slide-up"
                                                        data-sal-duration="800">
                                                        <div
                                                            class="border-0 shadow-sm card h-100 edu-team-grid team-style-2">
                                                            <div
                                                                class="text-white card-header bg-teal d-flex align-items-center rounded-top">
                                                                <h5 class="mb-0 card-title">
                                                                    <i class="fas fa-book-open me-2"></i>
                                                                    {{ $studentContent->curriculum->name }}
                                                                </h5>
                                                            </div>
                                                            <div class="card-body">
                                                                <p class="mb-2 text-muted">
                                                                    <strong>Description:</strong>
                                                                    {{ $studentContent->curriculum->description ?? 'No description available' }}
                                                                </p>
                                                            </div>
                                                            <div class="card-body">
                                                                <p class="mb-2 text-muted">
                                                                    <strong>Education Stage:</strong>
                                                                    {{ $studentContent->educationalStage->name ?? 'No Education Stage available' }}
                                                                </p>
                                                            </div>
                                                            <div class="card-body">
                                                                <p class="mb-2 text-muted">
                                                                    <strong>Stage Year:</strong>
                                                                    {{ $studentContent->stageYear->name ?? 'No Stage Year available' }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endforeach

                                            @if (!$hasCurriculumName)
                                                <p class="text-center text-muted">No curriculum available at the moment.
                                                </p>
                                            @endif
                                        </div>
                                    @else
                                        <p class="text-center text-muted">No curriculum available at the moment.</p>
                                    @endif

                                    <!-- Add Curriculums Button -->
                                    <div class="mt-4 d-flex justify-content-end">
                                        <button class="btn btn-success btn-lg" data-bs-toggle="modal"
                                            data-bs-target="#selectCurriculumModal">
                                            Add Curriculum
                                        </button>
                                    </div>

                                    <div class="modal fade" id="selectCurriculumModal" tabindex="-1"
                                        aria-labelledby="selectCurriculumModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header"
                                                    style="background-color: #0e7c5b; color: white;">
                                                    <h5 class="modal-title" id="selectCurriculumModalLabel">Select
                                                        Curriculum</h5>
                                                    <button type="button" class="btn-close btn-close-white"
                                                        data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body"
                                                    style="min-height: 300px; overflow-y: auto; padding: 20px;">
                                                    <form id="selectCurriculumForm" method="POST"
                                                        action="{{ route('students.store') }}">
                                                        @csrf

                                                        <!-- Curriculum Selection -->
                                                        <div class="mb-4">
                                                            <label for="curriculum_id" class="form-label"
                                                                style="font-weight: bold;">Select Curriculum</label>
                                                            <select class="form-select" id="curriculum_id"
                                                                name="curriculum_id" required
                                                                style="border: 1px solid #0e7c5b; font-size: 1.5rem;">
                                                                <option value="">Select Curriculum</option>
                                                                @forelse ($getcurriculumsByEducationAndStageYear as $curriculum)
                                                                    <option value="{{ $curriculum->id }}">
                                                                        {{ $curriculum->name }}</option>
                                                                @empty
                                                                    <option value="">No curriculums available
                                                                    </option>
                                                                @endforelse
                                                            </select>
                                                        </div>

                                                        <!-- Teacher Selection -->
                                                        <div class="mb-4">
                                                            <label for="teacher_id" class="form-label"
                                                                style="font-weight: bold;">Select Teacher</label>
                                                            <select class="form-select" id="teacherCurriculm_id"
                                                                name="teacher_id" required
                                                                style="border: 1px solid #0e7c5b; font-size: 1.5rem;">
                                                                <option value="">Select a Teacher</option>
                                                            </select>
                                                            @error('teacher_id')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>

                                                        <!-- Action Buttons -->
                                                        <div class="d-flex justify-content-between">
                                                            <button type="submit" class="btn btn-primary btn-lg">Add
                                                                Curriculum</button>
                                                            <button type="button" class="btn btn-warning btn-lg"
                                                                data-bs-dismiss="modal">Cancel</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>






                        <div class="tab-pane fade" id="com-policy" role="tabpanel">
                            <div class="faq-accordion">
                                <div class="accordion">
                                    <div class="row g-5">
                                        <!-- Start Instructor Grid  -->
                                        @if ($teachers instanceof \Illuminate\Support\Collection)
                                            @foreach ($teachers as $teacher)
                                                <div class="col-lg-4 col-md-6" data-sal-delay="150" data-sal="slide-up"
                                                    data-sal-duration="800">
                                                    <div class="edu-team-grid team-style-2">
                                                        <div class="inner">
                                                            <div class="thumbnail-wrap">
                                                                <div class="thumbnail">
                                                                    <a href="#">
                                                                        <img src="{{ empty($teacher->image) ? asset('web/assets/images/default.jpg') : Storage::url($teacher->image) }}"
                                                                            alt="Course Image"
                                                                            style="width: 200px; height: 200px; ">
                                                                    </a>
                                                                </div>
                                                            </div>

                                                            <div class="content">
                                                                <h5 class="title"><a
                                                                        href="#">{{ $teacher->name }}</a></h5>
                                                                <span class="designation">{{ $teacher->experience }} years
                                                                    of experience</span>
                                                                <p>{{ substr($teacher->description, 0, 100) }}..</p>
                                                                <div class="d-flex justify-content-between">
                                                                    <p class="mb-2">
                                                                        @if ($teacher->cv)
                                                                            <a href="{{ Storage::url($teacher->cv) }}"
                                                                                target="_blank"
                                                                                class="btn btn-dark">Download
                                                                                CV</a>
                                                                        @endif
                                                                    </p>

                                                                    <p class="mb-2">
                                                                        @if ($teacher->channel_link)
                                                                            <a href="{{ $teacher->channel_link }}"
                                                                                target="_blank"
                                                                                class="btn btn-primary">Visit
                                                                                Channel</a>
                                                                        @endif
                                                                    </p>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @elseif($teachers)
                                            {{-- If $teachers is a single object --}}
                                            <div class="col-lg-4 col-md-6" data-sal-delay="150" data-sal="slide-up"
                                                data-sal-duration="800">
                                                <div class="edu-team-grid team-style-2">
                                                    <div class="inner">
                                                        <div class="thumbnail-wrap">
                                                            <div class="thumbnail">
                                                                <a href="#">
                                                                    <img src="{{ empty($teachers->image) ? asset('web/assets/images/default.jpg') : Storage::url($teachers->image) }}"
                                                                        alt="Course Image"
                                                                        style="width: 250px; height: 250px; ">
                                                                </a>

                                                            </div>
                                                        </div>
                                                        <div class="content">
                                                            <h5 class="title"><a
                                                                    href="#">{{ $teachers->name }}</a></h5>
                                                            <span class="designation">{{ $teachers->experience }} years of
                                                                experience</span>
                                                            <p>{{ substr($teachers->description, 0, 100) }}..</p>
                                                            <div class="d-flex justify-content-between">
                                                                <p class="mb-2">
                                                                    @if ($teacher->cv)
                                                                        <a href="{{ Storage::url($teacher->cv) }}"
                                                                            target="_blank" class="btn btn-dark">Download
                                                                            CV</a>
                                                                    @endif
                                                                </p>

                                                                <p class="mb-2">
                                                                    @if ($teacher->channel_link)
                                                                        <a href="{{ $teacher->channel_link }}"
                                                                            target="_blank" class="btn btn-primary">Visit
                                                                            Channel</a>
                                                                    @endif
                                                                </p>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <p>No teacher found.</p>
                                        @endif


                                        <!-- End Instructor Grid  -->
                                    </div>

                                </div>
                            </div>
                        </div>


                        <div class="tab-pane fade" id="com-appointment" role="tabpanel">
                            <div class="faq-accordion">
                                <div class="accordion">
                                    <div class="row g-5">
                                        @if ($appointments->isNotEmpty())
                                            @foreach ($appointments as $appointment)
                                                <div class="col-12">
                                                    <div class="accordion-item">
                                                        <h5 class="accordion-header">
                                                            <button class="accordion-button" type="button"
                                                                data-bs-toggle="collapse"
                                                                data-bs-target="#appointment-{{ $appointment->id }}"
                                                                aria-expanded="true">
                                                                Appointment on {{ $appointment->day }}
                                                                ({{ $appointment->time_from }} -
                                                                {{ $appointment->time_to }})
                                                            </button>
                                                        </h5>
                                                        <div id="appointment-{{ $appointment->id }}"
                                                            class="accordion-collapse collapse show">
                                                            <div class="accordion-body">
                                                                <p>Teacher: {{ $appointment->teacher->name ?? 'N/A' }}</p>
                                                                <p>Curriculum:
                                                                    {{ $appointment->curriculum->name ?? 'N/A' }}</p>
                                                                <p>Time: {{ $appointment->time_from }} -
                                                                    {{ $appointment->time_to }}</p>
                                                                <div class="d-flex justify-content-end">
                                                                    @foreach ($appointmentStudents->where('appointment_id', $appointment->id) as $appointmentStudent)
                                                                        <button class="btn bg-teal edit-appointment btn-lg"
                                                                            style=" color: white;"
                                                                            data-appointment-student-id="{{ $appointmentStudent->id }}"
                                                                            data-id="{{ $appointmentStudent->appointment->id }}"
                                                                            data-bs-toggle="modal"
                                                                            data-bs-target="#editAppointmentModal">
                                                                            Edit Appointment
                                                                        </button>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            <p>Please Select appointments.</p>
                                        @endif
                                    </div>
                                    <!-- Existing Select Appointment Button -->
                                    <div class="mt-4 d-flex justify-content-end">
                                        <button class="btn btn-success btn-lg" data-bs-toggle="modal"
                                            data-bs-target="#selectAppointmentModal">
                                            Select Appointment
                                        </button>
                                    </div>

                                    <div class="modal fade" id="selectAppointmentModal" tabindex="-1"
                                        aria-labelledby="selectAppointmentModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header"
                                                    style="background-color: #0e7c5b; color: white;">
                                                    <h5 class="modal-title" id="selectAppointmentModalLabel">Select
                                                        Appointment</h5>
                                                    <button type="button" class="btn-close btn-close-white"
                                                        data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body"
                                                    style="min-height: 300px; overflow-y: auto; padding: 20px;">
                                                    <form id="selectAppointmentForm" method="POST"
                                                        action="{{ route('appointments.store') }}">
                                                        @csrf

                                                        <!-- Teacher Selection -->
                                                        <div class="mb-4">
                                                            <label for="teacher_id" class="form-label"
                                                                style="font-weight: bold;">Select Teacher</label>
                                                            <select class="form-select" id="teacher_id" name="teacher_id"
                                                                required
                                                                style="border: 1px solid #0e7c5b; font-size: 1.5rem;">
                                                                <option value="">Select a Teacher</option>
                                                                @foreach ($teachers as $teacher)
                                                                    <option value="{{ $teacher->id }}">
                                                                        {{ $teacher->name }}</option>
                                                                @endforeach
                                                            </select>
                                                            @error('teacher_id')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>

                                                        <!-- Appointment Selection -->
                                                        <div class="mb-4">
                                                            <label for="appointment_id" class="form-label"
                                                                style="font-weight: bold;">Select Appointment</label>
                                                            <select class="form-select" id="appointment_id"
                                                                name="appointment_id" required
                                                                style="border: 1px solid #0e7c5b; font-size: 1.5rem;">
                                                                <option value="">Select an Appointment</option>
                                                            </select>
                                                            <div id="alreadySelectedMessage"
                                                                style="display:none; color: red; font-weight: bold;"></div>


                                                            @error('appointment_id')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>

                                                        <!-- Action Buttons -->
                                                        <div class="d-flex justify-content-between">
                                                            <button type="submit" class="btn btn-primary btn-lg">Select
                                                                Appointment</button>
                                                            <button type="button" class="btn btn-warning btn-lg"
                                                                data-bs-dismiss="modal">Cancel</button>
                                                        </div>
                                                    </form>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="com-session" role="tabpanel">
                            <div class="faq-accordion">
                                <div class="accordion">
                                    <div class="row g-5">
                                        @if ($appointments->isNotEmpty())
                                            @foreach ($appointments as $appointment)
                                                <div class="col-12">
                                                    <div class="accordion-item">
                                                        <h5 class="accordion-header">
                                                            <button
                                                                class="accordion-button d-flex justify-content-between align-items-center"
                                                                type="button" data-bs-toggle="collapse"
                                                                data-bs-target="#appointment-{{ $appointment->id }}"
                                                                aria-expanded="true">
                                                                <span class="fw-bold">Sessions:</span> You have
                                                                @php
                                                                    $appointmentStudent = $appointmentStudents->firstWhere(
                                                                        'appointment_id',
                                                                        $appointment->id,
                                                                    );
                                                                @endphp
                                                                {{ $appointmentStudent ? $appointmentStudent->zoom_link_clicks : 'N/A' }}
                                                                sessions
                                                                <i class="bi bi-chevron-down"></i>
                                                            </button>
                                                        </h5>
                                                        <div id="appointment-{{ $appointment->id }}"
                                                            class="accordion-collapse collapse show">
                                                            <div class="accordion-body">
                                                                <div class="d-flex flex-column">
                                                                    <p><strong>Teacher:</strong>
                                                                        {{ $appointment->teacher->name ?? 'N/A' }}</p>
                                                                    <p><strong>Curriculum:</strong>
                                                                        {{ $appointment->curriculum->name ?? 'N/A' }}</p>
                                                                    <p><strong>Time:</strong> {{ $appointment->time_from }}
                                                                        - {{ $appointment->time_to }}</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>



                    <!-- Edit Appointment Modal -->
                    <div class="modal fade" id="editAppointmentModal" tabindex="-1"
                        aria-labelledby="editAppointmentModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg modal-dialog-centered">
                            <div class="modal-content">
                                <!-- Modal Header -->
                                <div class="modal-header" style="background-color: #0e7c5b; color: white;">
                                    <h5 class="modal-title" id="editAppointmentModalLabel">Edit Appointment</h5>
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>

                                <!-- Modal Body -->
                                <div class="modal-body" style="min-height: 300px; overflow-y: auto; padding: 20px;">
                                    <form id="editAppointmentForm" method="POST" action="">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" id="edit_appointment_student_id"
                                            name="appointment_student_id" value="">

                                        <!-- Teacher Selection (Read-Only) -->
                                        <div class="mb-4">
                                            <label for="edit_teacher_id" class="form-label"
                                                style="font-weight: bold;">Selected Teacher</label>
                                            <input type="text" id="edit_teacher_name" class="form-control"
                                                style="border: 1px solid #0e7c5b; font-size: 1.5rem;" value=""
                                                readonly>
                                            <input type="hidden" name="teacher_id" id="edit_teacher_id" value="">
                                        </div>


                                        <!-- Appointment Selection (Dropdown) -->
                                        <div class="mb-4">
                                            <label for="appointmentEdit_id" class="form-label"
                                                style="font-weight: bold;">Select Appointment</label>
                                            <select class="form-select" id="appointmentEdit_id" name="appointment_id"
                                                required style="border: 1px solid #0e7c5b; font-size: 1.5rem;">
                                                <option value="">Select an Appointment</option>
                                            </select>
                                            <div id="alreadySelectedMessage"
                                                style="display:none; color: red; font-weight: bold;"></div>

                                            @error('appointment_id')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <!-- Action Buttons -->
                                        <div class="d-flex justify-content-between">
                                            <button type="submit" class="btn btn-primary btn-lg">Update
                                                Appointment</button>
                                            <button type="button" class="btn btn-warning btn-lg"
                                                data-bs-dismiss="modal">Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>






                </div>
            </div>
        </div>
        </div>
    </section>
@endsection

@push('js')
    <script>
        // Handle edit button clicks to populate the modal with appointment details
        // Trigger the modal and fetch data when an edit button is clicked
        document.querySelectorAll('.edit-appointment').forEach(button => {
            button.addEventListener('click', function() {
                // Get the data-appointment-student-id and data-id from the clicked button
                const appointmentStudentId = this.getAttribute('data-appointment-student-id');
                const appointmentId = this.getAttribute('data-id');

                // Set the hidden input for appointment_student_id
                document.getElementById('edit_appointment_student_id').value = appointmentStudentId;

                // Dynamically set the form action for editing the appointment student record
                const actionUrl = "{{ route('appointments.update', ':id') }}".replace(':id',
                    appointmentStudentId);
                document.getElementById('editAppointmentForm').setAttribute('action', actionUrl);

                // Fetch and populate appointment details based on appointment_student_id
                fetch(`/appointments/${appointmentStudentId}/edit`)
                    .then(response => response.json())
                    .then(appointmentData => {
                        // Populate the teacher data
                        document.getElementById('edit_teacher_id').value = appointmentData.teacher.id;
                        document.getElementById('edit_teacher_name').value = appointmentData.teacher
                            .name;

                        // Clear existing appointment options and populate them
                        const appointmentSelect = document.getElementById('appointmentEdit_id');
                        appointmentSelect.innerHTML = '<option value="">Select an Appointment</option>';

                        // Populate dropdown with available appointments for this teacher
                        appointmentData.appointments.forEach(appointment => {
                            const option = document.createElement('option');
                            option.value = appointment.id;
                            option.textContent = appointment.details;
                            appointmentSelect.appendChild(option);
                        });

                        // Set the selected appointment
                        appointmentSelect.value = appointmentId;

                    })
                    .catch(error => {
                        console.error('Error fetching appointment details:', error);
                    });
            });
        });





        // Handle teacher selection change to fetch and display appointments
        document.getElementById('teacher_id').addEventListener('change', function() {
            const teacherId = this.value;
            const appointmentSelect = document.getElementById('appointment_id');
            const messageDiv = document.getElementById('alreadySelectedMessage');

            // Clear previous appointments and hide the message
            appointmentSelect.innerHTML = '<option value="">Select an Appointment</option>';
            messageDiv.style.display = 'none'; // Hide the message initially
            appointmentSelect.style.display = 'block'; // Show the select element by default

            if (teacherId) {
                // Fetch appointments for this teacher
                fetch(`/appointments/teacher/${teacherId}`)
                    .then(response => response.json())
                    .then(appointmentsData => {
                        appointmentsData.appointments.forEach(appointment => {
                            const option = document.createElement('option');
                            option.value = appointment.id;
                            option.textContent = appointment
                                .details; // Adjust according to your appointment properties
                            appointmentSelect.appendChild(option);
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching appointments:', error);
                    });
            }
        });


        // Get current teacher ID
        // Function to populate the select element with appointments
        function populateAppointments(appointments) {
            var appointmentSelect = document.getElementById('appointmentEdit_id');

            // Clear existing options first
            appointmentSelect.innerHTML = '<option value="">Select an Appointment</option>';

            // Check if appointments exist for this teacher
            if (appointments && appointments.length > 0) {
                appointments.forEach(function(appointment) {
                    var option = document.createElement('option');
                    option.value = appointment.id;
                    option.textContent = appointment.details; // Adjust based on appointment data
                    appointmentSelect.appendChild(option);
                });
            } else {
                var noOption = document.createElement('option');
                noOption.value = '';
                noOption.textContent = 'No Appointments Available';
                appointmentSelect.appendChild(noOption);
            }
        }

        // Triggered when the modal is shown
        $('#editAppointmentModal').on('shown.bs.modal', function(e) {
            // Get the button that triggered the modal
            var button = $(e.relatedTarget);

            // Get the appointment student ID and teacher ID from the button's data attributes
            var appointmentStudentId = button.data('appointment-student-id');
            var appointmentId = button.data('id'); // Appointment ID (optional)

            // Fetch appointment details, including the teacher ID
            fetch(`/appointments/${appointmentStudentId}/edit`)
                .then(response => response.json())
                .then(appointmentData => {
                    var currentTeacherId = appointmentData.teacher.id; // Get the teacher ID

                    // Update the form fields with the current data
                    document.getElementById('edit_teacher_id').value = currentTeacherId;
                    document.getElementById('edit_teacher_name').value = appointmentData.teacher.name;

                    // Fetch appointments for this teacher
                    fetch(`/appointments/teacher/${currentTeacherId}`)
                        .then(response => response.json())
                        .then(data => {
                            console.log(data); // Log the data for debugging
                            populateAppointments(data.appointments);
                        })
                        .catch(error => {
                            console.error('Error fetching appointments:', error);
                        });
                })
                .catch(error => {
                    console.error('Error fetching appointment details:', error);
                });
        });

        $(document).ready(function() {
            $('#curriculum_id').on('change', function() {
                var curriculumId = $(this).val();

                // Clear the teacher dropdown before making the request
                $('#teacherCurriculm_id').html('<option value="">Select a Teacher</option>');

                if (curriculumId) {
                    $.ajax({
                        url: '{{ route('getTeacher') }}', // This should match the route for the AJAX request
                        method: 'POST',
                        data: {
                            curriculumId: curriculumId,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            var teachers = response.teachers;

                            // Populate the teacher dropdown
                            if (teachers.length > 0) {
                                teachers.forEach(function(teacher) {
                                    $('#teacherCurriculm_id').append(
                                        '<option value="' + teacher.id + '">' +
                                        teacher.name + '</option>'
                                    );
                                });
                            } else {
                                $('#teacherCurriculm_id').append(
                                    '<option value="">No teachers available</option>');
                            }
                        }
                    });
                }
            });
        });
    </script>
@endpush