@extends('admin.layouts.layouts')

@section('content')
    @push('css')
        @include('admin.courses.shared.courses_css')
    @endpush
    <div class="container mt-5">
        <h1 class="mb-4 text-center">Create New Course</h1>
        <form action="{{ route('admin.courses.store') }}" method="POST" enctype="multipart/form-data" id="FormRelod">
            @csrf

            <!-- 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="mb-4 card">
                <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">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="curriculum_id">Curriculum</label>
                            <select name="curriculum_id" id="curriculum_id" required
                                class="form-control @error('curriculum_id') is-invalid @enderror">
                                <option value="">Select Curriculum</option>
                                @foreach ($curricula as $curriculum)
                                    <option value="{{ $curriculum->id }}"
                                        {{ old('curriculum_id') == $curriculum->id ? 'selected' : '' }}>
                                        {{ $curriculum->name }}</option>
                                @endforeach
                            </select>
                            @error('curriculum_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="teacher_id">Teacher</label>
                            <select name="teacher_id" id="teacher_id"required
                                class="form-control @error('teacher_id') is-invalid @enderror">
                                <option value="">Select Teacher</option>
                                <!-- Teachers will be populated dynamically here -->
                            </select>
                            @error('teacher_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

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

                        <div class="form-group">
                            <label for="title">Title</label>
                            <input type="text" name="title" id="title"
                                class="form-control @error('title') is-invalid @enderror" placeholder="Enter title name"
                                value="{{ old('title') }}">
                            @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" id="title_ar"
                                class="form-control @error('title_ar') is-invalid @enderror"
                                placeholder="Enter Arabic title name" value="{{ old('title_ar') }}">
                            @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" id="rating"
                                class="form-control @error('rating') is-invalid @enderror" min="1" max="5"
                                step="0.1" placeholder="Enter rating (1-5)" value="{{ old('rating') }}">
                            @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/*">
                            @error('image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Details Session Group -->
            <div class="mb-4 card">
                <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">
                    <div class="card-body">

                        <div class="form-group">
                            <label for="duration">Duration (weeks)</label>
                            <input type="text" name="duration" id="duration"
                                class="form-control @error('duration') is-invalid @enderror"
                                placeholder="Enter duration in weeks" value="{{ old('duration') }}">
                            @error('duration')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="lessons">Lessons</label>
                            <input type="number" name="lessons" id="lessons"
                                class="form-control @error('lessons') is-invalid @enderror" step="1" min="0"
                                placeholder="Enter number of lessons" value="{{ old('lessons') }}">
                            @error('lessons')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="certificate">Certificate</label>
                            <select name="certificate" id="certificate"
                                class="form-control @error('certificate') is-invalid @enderror">
                                <option value="" disabled selected>Select an option</option>
                                <option value="yes" {{ old('certificate') == 'yes' ? 'selected' : '' }}>Yes</option>
                                <option value="no" {{ old('certificate') == 'no' ? 'selected' : '' }}>No</option>
                            </select>
                            @error('certificate')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>


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

            <!-- Videos Session Group -->
            <div class="mb-4 card">
                <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="#videosSession"
                        aria-expanded="false" aria-controls="videosSession">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
                <div id="videosSession" class="collapse session-content"> <!-- Updated to use ID for collapse -->
                    <div class="card-body"> <!-- Added card-body for better structure -->
                        <div class="session-items-container">
                            <div class="mb-3 session-item"> <!-- Added margin-bottom -->
                                <div class="form-group">
                                    <label for="video-url">Video URL</label>
                                    <input type="url" name="video_url[]" class="form-control"
                                        placeholder="Enter video URL">
                                </div>
                                <div class="form-group">
                                    <label for="video_image">Video Image</label>
                                    <input type="file" name="video_image[]" class="form-control-file"
                                        accept="image/*">
                                </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>
                        </div>
                        <!-- Add New Button -->
                        <button type="button" class="btn btn-primary add-session">Add New</button>
                    </div>
                </div>
            </div>


            <div class="mb-4 card">
                <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">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea name="description" id="description" class="form-control" rows="4" placeholder="Enter 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 description"></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"></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"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="content">Content</label>
                            <textarea name="content" id="content" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Topic Description Group -->
            <div class="mb-4 card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="mb-0">Topic Description</h3>
                    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#topicDescription"
                        aria-expanded="false" aria-controls="topicDescription">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
                <div id="topicDescription" class="collapse">
                    <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"></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"></textarea>
                        </div>

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

            <div class="text-center form-group">
                <button type="submit" class="btn btn-success" id="create-btn">Save</button>
            </div>
        </form>
    </div>
@endsection


@push('js')
    @include('admin.courses.shared.input_courses');
    @include('admin.courses.shared.script_courses');
    @include('shared.relodButton')
@endpush