@extends('admin.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 topics</h1>

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


                <div class="form-group topic-group">
                    <h3 class="group-header">Topic
                        <span class="toggle-icon">&#x002B;</span> <!-- Plus icon -->
                    </h3>
                    <div class="collapsed">
                        <div class="form-group">
                            <label for="curriculum_sessions_id">OnlineSessions</label>
                            <select name="curriculum_sessions_id" id="curriculum_sessions_id" class="form-control">
                                <option value="">Select OnlineSession</option>
                                @foreach ($CurriculumSessions as $CurriculumSessions)
                                    <option value="{{ $CurriculumSessions->id }}">{{ $CurriculumSessions->title }}</option>
                                @endforeach
                            </select>
                            @error('curriculum_sessions_id')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="title">Title</label>
                            <input type="text" name="title_topic" id="title" class="form-control"
                                placeholder="Enter title">
                            @error('title_topic')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="title_ar">Arabic Title</label>
                            <input type="text" name="title_topic_ar" id="title_ar" class="form-control"
                                placeholder="Enter arabic title">
                            @error('title_topic_ar')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <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>
                            @error('description_title')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="description_title_ar">Arabic Description</label>
                            <textarea name="description_title_ar" id="description_title_ar" class="form-control" rows="4"
                                placeholder="Enter description"></textarea>
                            @error('description_title_ar')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>


                    </div>


                </div>




                <div class="form-group topic_course_information-group">
                    <h3 class="group-header">
                        Topic Course Information
                        <span class="toggle-icon">&#x002B;</span> <!-- Plus icon -->
                    </h3>
                    <div class="collapsed">
                        <div id="main-container" class="container mt-4">
                            <div id="form-container">
                                <!-- Main input group -->
                                <div class="form-group">
                                    <div class="row">
                                        <div class="form-group col-md-4">
                                            <label for="title">Title</label>
                                            <input type="text" name="title_topic_course[]" id="title"
                                                class="form-control" placeholder="Enter title">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="title_ar">Arabic Title</label>
                                            <input type="text" name="title_topic_course_ar[]" id="title_ar"
                                                class="form-control" placeholder="Enter Arabic title">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="time">Time</label>
                                            <input type="text" name="time[]" id="time" class="form-control"
                                                placeholder="Enter time">
                                        </div>

                                    </div>
                                    <!-- This button should be initially present -->
                                    <button class="add-group-btn btn btn-success">Add Group</button>

                                    <button class="add-question-btn btn btn-primary">Add New Group (Question &
                                        Answer)</button>
                                </div>

                                <!-- Dynamic input groups will be added here -->
                                <div id="dynamic-groups-container"></div>

                                <!-- Template for the form group -->
                                <div id="form-container-template" style="display: none;">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="form-group col-md-4">
                                                <label for="title">Title</label>
                                                <input type="text" name="title_topic_course[]" id="title"
                                                    class="form-control" placeholder="Enter title">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="title_ar">Arabic Title</label>
                                                <input type="text" name="title_topic_course_ar[]" id="title_ar"
                                                    class="form-control" placeholder="Enter Arabic title">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="time">Time</label>
                                                <input type="text" name="time[]" id="time" class="form-control"
                                                    placeholder="Enter time">
                                            </div>

                                        </div>
                                        <!-- This button should be initially present -->
                                        <button class="add-group-btn btn btn-success">Add Group</button>
                                        <!-- Add this delete button to each form group -->
                                        <button class="delete-group-btn btn btn-danger">Delete Group</button>
                                        <!-- Button to add new question-answer group -->
                                        <button class="add-question-btn btn btn-primary">Add New Group (Question &
                                            Answer)</button>
                                    </div>
                                </div>

                                <!-- Template for the question-answer group -->
                                <div id="question-answer-template" style="display: none;">
                                    <div class="row question-answer-group">
                                        <div class="col-md-6 form-group">
                                            <label for="question-${Date.now()}">Question</label>
                                            <input type="text" name="question[]" placeholder="Question"
                                                class="form-control">
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label for="question_ar-${Date.now()}">Question (Arabic)</label>
                                            <input type="text" name="question_ar[]" placeholder="Arabic Question"
                                                class="form-control">
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label for="answer-${Date.now()}">Answer</label>
                                            <input type="text" name="answer[]" placeholder="Answer"
                                                class="form-control">
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label for="answer_ar-${Date.now()}">Answer (Arabic)</label>
                                            <input type="text" name="answer_ar[]" placeholder="Arabic Answer"
                                                class="form-control">
                                        </div>
                                        <div class="col-md-2 d-flex align-items-center">
                                            <button type="button"
                                                class="delete-question-answer-btn btn btn-danger">Delete</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


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

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