@extends('admin.layouts.layouts')

@section('content')
    @push('css')
        @include('admin.courses.shared.courses_css')
    @endpush

    <div class="container mt-5">
        <h1 class="text-center mb-4">Edit Course</h1>
        <form action="{{ route('admin.courses.update', $curriculumSession->id) }}" method="POST"
            enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <!-- Display Validation Errors -->
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Assign Session Group -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="mb-0">Assign Session</h3>
                    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#assignSession"
                        aria-expanded="false" aria-controls="assignSession">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
                <div id="assignSession" class="collapse show">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="curriculum_id">Curriculum</label>
                            <select name="curriculum_id" id="curriculum_id" class="form-control">
                                <option value="">Select Curriculum</option>
                                @foreach ($curricula as $curriculum)
                                    <option value="{{ $curriculum->id }}"
                                        {{ $curriculum->id == old('curriculum_id', $currentCurriculumId) ? 'selected' : '' }}>
                                        {{ $curriculum->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="teacher_id">Teacher</label>
                            <select name="teacher_id" id="teacher_id" class="form-control">
                                <option value="">Select Teacher</option>
                                @foreach ($teachers as $teacher)
                                    <option value="{{ $teacher->id }}"
                                        {{ $teacher->id == old('teacher_id', $currentTeacherId) ? 'selected' : '' }}>
                                        {{ $teacher->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="language_id">Language</label>
                            <select name="language_id" id="language_id" class="form-control">
                                <option value="" disabled>Select Language</option>
                                @foreach ($languages as $language)
                                    <option value="{{ $language->id }}"
                                        {{ $language->id == $selectedLanguageId ? 'selected' : '' }}>
                                        {{ $language->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('language_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <div class="form-group">
                                <label for="title">Title</label>
                                <input type="text" name="title" class="form-control"
                                    value="{{ $curriculumSession->title }}" placeholder="Enter title name">

                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="title_ar">Arabic Title</label>
                                <input type="text" name="title_ar" class="form-control"
                                    value="{{ $curriculumSession->title_ar }}" placeholder="Enter arabic title name">
                                @error('title_ar')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="rating">Rating</label>
                                <input type="number" name="rating" class="form-control" min="1" max="5"
                                    step="0.1" value="{{ $curriculumSession->rating }}"
                                    placeholder="Enter rating (1-5)">

                                @error('rating')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="image">Image</label>
                                <input type="file" name="image" id="image"
                                    class="form-control-file @error('image') is-invalid @enderror" accept="image/*">
                                @if ($curriculumSession->image && file_exists(public_path('storage/' . $curriculumSession->image)))
                                    <img id="currentImage" src="{{ asset('storage/' . $curriculumSession->image) }}"
                                        style="max-width: 150px; margin-top: 10px;">
                                @endif
                                @error('image')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="mb-0">Details Session</h3>
                        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#detailsSession"
                            aria-expanded="false" aria-controls="detailsSession">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div id="detailsSession" class="collapse show">
                        <div class="card-body">

                            @foreach ($onlineSessions as $session)

                                <div class="form-group">
                                    <label for="duration">Duration (weeks)</label>
                                    <input type="number" name="duration" class="form-control" step="1"
                                        min="0" value="{{ $session->duration }}"
                                        placeholder="Enter duration in weeks">
                                </div>
                                <div class="form-group">
                                    <label for="lessons">Lessons</label>
                                    <input type="number" name="lessons" class="form-control" step="1"
                                        min="0" value="{{ $session->lessons }}"
                                        placeholder="Enter lessons in number">
                                </div>

                                <div class="form-group">
                                    <label for="certificate">Certificate</label>
                                    <input type="text" name="certificate" class="form-control"
                                        value="{{ $session->certificate }}" placeholder="Enter certificate details">
                                </div>

                            @endforeach

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



                <!-- Assign Session Group -->
               <div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="mb-0">Videos Session</h3>
        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#videoSession"
            aria-expanded="false" aria-controls="videoSession">
            <i class="fas fa-plus"></i>
        </button>
    </div>
    <div id="videoSession" class="collapse show">
        <div class="card-body">
            <!-- Container for session items -->
            <div class="session-items-container">
                @foreach ($videos as $index => $video)
                    <div class="session-item" data-index="{{ $index }}">
                        <div class="form-group">
                            <label for="video-url-{{ $index }}">Video URL</label>
                            <input type="url" name="video_url[]" id="video-url-{{ $index }}"
                                class="form-control" placeholder="Enter video URL"
                                value="{{ old('video_url.' . $index, $video->videos) }}" required>
                        </div>

                        <div class="form-group">
                            <label for="video_image_{{ $index }}">Video Image</label>
                            <input type="file" name="video_image[]" id="video_image_{{ $index }}"
                                class="form-control-file" accept="image/*"
                                onchange="previewImage(event, {{ $index }})">
                            <!-- Display existing image if available -->
                            @if ($video->video_image && file_exists(public_path('storage/' . $video->video_image)))
                                <img src="{{ asset('storage/' . $video->video_image) }}"
                                    id="preview-image-{{ $index }}"
                                    style="max-width: 150px; margin-top: 10px;">
                            @else
                                <p>No image details available.</p>
                            @endif
                        </div>

                        <!-- Trash Icon with Square Background -->
                        <span class="remove-session-icon"
                                    style="display: none; cursor: pointer; background-color: #dc3545; color: white; padding: 5px; border-radius: 4px; float: right;">
                                    <i class="fas fa-trash-alt"></i>
                                </span>
                    </div>
                @endforeach
            </div>

            <!-- Button to add new session item -->
            <button type="button" class="btn btn-primary add-session">Add New</button>
        </div>
    </div>
</div>




                <!-- Assign Session Group -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="mb-0">Overview</h3>
                        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#overview"
                            aria-expanded="false" aria-controls="overview">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div id="overview" class="collapse show">
                        <div class="card-body">
                            @foreach ($overviews as $overview)
                                <div class="form-group">
                                    <label for="description">Description</label>
                                    <textarea name="description" id="description" class="form-control" rows="4" placeholder="Enter description">{{ $overview->description }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label for="description_ar">Arabic Description</label>
                                    <textarea name="description_ar" id="description_ar" class="form-control" rows="4"
                                        placeholder="Enter arabic description">{{ $overview->description_ar }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label for="description_two">Other Description</label>
                                    <textarea name="description_two" id="description_two" class="form-control" rows="4"
                                        placeholder="Enter other description">{{ $overview->description_two }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label for="description_two_ar">Arabic Other Description</label>
                                    <textarea name="description_two_ar" id="description_ar" class="form-control" rows="4"
                                        placeholder="Enter arabic other description">{{ $overview->description_two_ar }}</textarea>
                                </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="mb-0">Topic</h3>
                        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#topic"
                            aria-expanded="false" aria-controls="topic">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div id="topic" class="collapse show">
                        <div class="card-body">



                            <div class="form-group">
                                <label for="description_title">Description</label>
                                <textarea name="description_title" id="description_title" class="form-control" rows="4"
                                    placeholder="Enter description">{{ $overview->description_title }}</textarea>
                            </div>
                            <div class="form-group">
                                <label for="description_title_ar">Description (Arabic)</label>
                                <textarea name="description_title_ar" id="description_title_ar" class="form-control" rows="4"
                                    placeholder="Enter description">{{ $overview->description_title_ar }}</textarea>
                            </div>
                            @endforeach


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




                <div class="text-center form-group">
                    <button type="submit" class="btn btn-primary">Update Course</button>
                </div>
        </form>
    </div>
    </div>
@endsection
@push('js')
    @include('admin.courses.shared.input_courses');
    @include('admin.courses.shared.script_courses');
@endpush