@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">Update Topics</h1>

            <form action="{{ route('admin.topics.update', $topic->id) }}" method="POST">
                @csrf
                @method('PUT')

                <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 $session)
                                    <option value="{{ $session->id }}"
                                        {{ $topic->curriculum_sessions_id == $session->id ? 'selected' : '' }}>
                                        {{ $session->title }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="title_topic">Title</label>
                            <input type="text" name="title_topic" id="title_topic" class="form-control"
                                value="{{ old('title_topic', $topic->title) }}" placeholder="Enter title">
                        </div>
                        <div class="form-group">
                            <label for="title_topic_ar">Arabic Title</label>
                            <input type="text" name="title_topic_ar" id="title_topic_ar" class="form-control"
                                value="{{ old('title_topic_ar', $topic->title_ar) }}" placeholder="Enter Arabic title">
                        </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">{{ old('description_title', $topic->description) }}</textarea>
                        </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 Arabic description">{{ old('description_title_ar', $topic->description_ar) }}</textarea>
                        </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">
                                        @foreach ($topicInformation as $index => $topicInfo)
                                            <div class="mb-3 col-md-12">
                                                <div class="row">
                                                    <div class="form-group col-md-4">
                                                        <label for="title_{{ $index }}">Title</label>
                                                        <input type="text" name="title_topic_course[]"
                                                            id="title_{{ $index }}" class="form-control"
                                                            value="{{ old('title_topic_course.' . $index, $topicInfo->title) }}"
                                                            placeholder="Enter title">
                                                    </div>
                                                    <div class="form-group col-md-4">
                                                        <label for="title_ar_{{ $index }}">Arabic Title</label>
                                                        <input type="text" name="title_topic_course_ar[]"
                                                            id="title_ar_{{ $index }}" class="form-control"
                                                            value="{{ old('title_topic_course_ar.' . $index, $topicInfo->title_ar) }}"
                                                            placeholder="Enter Arabic title">
                                                    </div>
                                                    <div class="form-group col-md-4">
                                                        <label for="time_{{ $index }}">Time</label>
                                                        <input type="text" name="time[]" id="time_{{ $index }}"
                                                            class="form-control"
                                                            value="{{ old('time.' . $index, $topicInfo->time) }}"
                                                            placeholder="Enter time">
                                                    </div>




                                                    <!-- Display related questions and answers -->
                                                    @php
                                                        $relatedQuestions = $questionsByTopicInfo->get(
                                                            $topicInfo->id,
                                                            [],
                                                        );
                                                    @endphp
                                                    @foreach ($relatedQuestions as $questionIndex => $question)
                                                        <div class="mb-3 col-md-12">
                                                            <div class="row question-answer-group">
                                                                <div class="form-group col-md-6">
                                                                    <label
                                                                        for="question_{{ $index }}_{{ $questionIndex }}">Question</label>
                                                                    <input type="text" name="question[]"
                                                                        id="question_{{ $index }}_{{ $questionIndex }}"
                                                                        class="form-control"
                                                                        value="{{ old('question.' . $index . '.' . $questionIndex, $question->question) }}"
                                                                        placeholder="Enter question">
                                                                </div>
                                                                <div class="form-group col-md-6">
                                                                    <label
                                                                        for="question_ar_{{ $index }}_{{ $questionIndex }}">Question
                                                                        (Arabic)
                                                                    </label>
                                                                    <input type="text" name="question_ar[]"
                                                                        id="question_ar_{{ $index }}_{{ $questionIndex }}"
                                                                        class="form-control"
                                                                        value="{{ old('question_ar.' . $index . '.' . $questionIndex, $question->question_ar) }}"
                                                                        placeholder="Enter Arabic question">
                                                                </div>
                                                                <div class="form-group col-md-6">
                                                                    <label
                                                                        for="answer_{{ $index }}_{{ $questionIndex }}">Answer</label>
                                                                    <input type="text" name="answer[]"
                                                                        id="answer_{{ $index }}_{{ $questionIndex }}"
                                                                        class="form-control"
                                                                        value="{{ old('answer.' . $index . '.' . $questionIndex, $question->answer) }}"
                                                                        placeholder="Enter answer">
                                                                </div>
                                                                <div class="form-group col-md-6">
                                                                    <label
                                                                        for="answer_ar_{{ $index }}_{{ $questionIndex }}">Answer
                                                                        (Arabic)</label>
                                                                    <input type="text" name="answer_ar[]"
                                                                        id="answer_ar_{{ $index }}_{{ $questionIndex }}"
                                                                        class="form-control"
                                                                        value="{{ old('answer_ar.' . $index . '.' . $questionIndex, $question->answer_ar) }}"
                                                                        placeholder="Enter Arabic answer">
                                                                </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>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <!-- Buttons to add new groups -->
                                    <div class="mt-3">
                                        <button type="button" class="add-group-btn btn btn-success">Add Group</button>
                                        <button type="button" class="add-question-btn btn btn-primary">Add New Group
                                            (Question & Answer)</button>
                                    </div>
                                </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 dynamic-group">
                                        <div class="row">
                                            <div class="form-group col-md-4">
                                                <label>Title</label>
                                                <input type="text" name="title_topic_course[]" class="form-control"
                                                    placeholder="Enter title">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label>Arabic Title</label>
                                                <input type="text" name="title_topic_course_ar[]" class="form-control"
                                                    placeholder="Enter Arabic title">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label>Time</label>
                                                <input type="text" name="time[]" class="form-control"
                                                    placeholder="Enter time">
                                            </div>
                                           
                                        </div>
                                        <!-- Buttons for dynamic group -->
                                        <button type="button" class="mt-2 delete-group-btn btn btn-danger">Delete
                                            Group</button>
                                        <button type="button" class="mt-2 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>Question</label>
                                            <input type="text" name="question[]" placeholder="Question"
                                                class="form-control">
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label>Question (Arabic)</label>
                                            <input type="text" name="question_ar[]" placeholder="Arabic Question"
                                                class="form-control">
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label>Answer</label>
                                            <input type="text" name="answer[]" placeholder="Answer"
                                                class="form-control">
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label>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="mt-4 delete-question-answer-btn btn btn-danger">Delete</button>
                                        </div>
                                    </div>
                                </div>

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

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

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