@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 */
        }

        .input-group {
            margin-bottom: 15px;
        }

        .input-group input {
            margin-right: 10px;
        }

        .add-group-btn,
        .add-question-btn {
            margin-top: 10px;
            background-color: red;
            color: white;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>

    <div class="mt-5 d-flex justify-content-center">
        <div class="w-50">
            <h1 class="mt-5 mb-4 text-center">
                {{ isset($blog) ? 'Edit Blog' : 'Create New Blog' }}
            </h1>
            <form action="{{ isset($blog) ? route('admin.blogs.update', $blog->id) : route('admin.blogs.store') }}"
                method="POST" enctype="multipart/form-data">
                @csrf
                @if (isset($blog))
                    @method('PUT')
                @endif

                <div class="form-group">
                    <label for="image">Image</label>
                    <input type="file" name="image" id="image" class="form-control-file" accept="image/*"
                        {{ isset($blog) ? '' : 'required' }}>
                    @if (isset($blog) && $blog->image)
                        <img src="{{ asset('storage/' . $blog->image) }}" alt="Current Image" class="mt-2 img-thumbnail"
                            style="height: 60px;">
                    @endif
                </div>

                <div class="form-group">
                    <label for="title_one">Title One</label>
                    <input type="text" name="title_one" id="title_one" class="form-control" placeholder="Enter title one"
                        value="{{ old('title_one', $blog->title_one ?? '') }}" required>
                </div>

                <div class="form-group">
                    <label for="title_one_ar">Arabic Title One</label>
                    <input type="text" name="title_one_ar" id="title_one_ar" class="form-control"
                        placeholder="Enter Arabic title one" value="{{ old('title_one_ar', $blog->title_one_ar ?? '') }}"
                        required>
                </div>

                <div class="form-group">
                    <label for="date">Date</label>
                    <input type="date" name="date" id="date" class="form-control" placeholder="Enter date"
                        value="{{ old('date', $blog->date ?? '') }}" required>
                </div>

                <div class="form-group">
                    <label for="desc_one">Description One</label>
                    <textarea name="desc_one" id="desc_one" class="form-control" rows="4" placeholder="Enter description one"
                        required>{{ old('desc_one', $blog->desc_one ?? '') }}</textarea>
                </div>

                <div class="form-group">
                    <label for="desc_one_ar">Arabic Description One</label>
                    <textarea name="desc_one_ar" id="desc_one_ar" class="form-control" rows="4"
                        placeholder="Enter Arabic description one" required>{{ old('desc_one_ar', $blog->desc_one_ar ?? '') }}</textarea>
                </div>

                <div class="form-group">
                    <label for="blog_content">Content Blog</label>
                    <textarea name="blog_content_one" id="blog_content" class="form-control">{{ old('blog_content_one', $blog->blog_content_one ?? '') }}</textarea>
                </div>


                <div class="form-group">
                    <label for="text_button_en">Text Button (English)</label>
                    <input type="text" name="text_button_en" id="text_button_en" class="form-control"
                        placeholder="Enter text for button (English)"
                        value="{{ old('text_button_en', $blog->text_button_en ?? '') }}" required>
                </div>

                <div class="form-group">
                    <label for="text_button_ar">Text Button (Arabic)</label>
                    <input type="text" name="text_button_ar" id="text_button_ar" class="form-control"
                        placeholder="Enter text for button (Arabic)"
                        value="{{ old('text_button_ar', $blog->text_button_ar ?? '') }}" required>
                </div>

                <div class="form-group">
                    <label for="url_text_button">URL for Button</label>
                    <input type="url" name="url_text_button" id="url_text_button" class="form-control"
                        placeholder="Enter URL for button"
                        value="{{ old('url_text_button', $blog->url_text_button ?? '') }}" required>
                </div>

                <div class="form-group">
                    <label for="creator_desc_en">Creator Description (English)</label>
                    <textarea name="creator_desc_en" id="creator_desc_en" class="form-control" rows="4"
                        placeholder="Enter creator description (English)" required>{{ old('creator_desc_en', $blog->creator_desc_en ?? '') }}</textarea>
                </div>

                <div class="form-group">
                    <label for="creator_desc_ar">Arabic Creator Description</label>
                    <textarea name="creator_desc_ar" id="creator_desc_ar" class="form-control" rows="4"
                        placeholder="Enter creator description (Arabic)" required>{{ old('creator_desc_ar', $blog->creator_desc_ar ?? '') }}</textarea>
                </div>

                <div class="form-group">
                    <label for="creator_en">Creator (English)</label>
                    <input type="text" name="creator_en" id="creator_en" class="form-control"
                        placeholder="Enter creator (English)" value="{{ old('creator_en', $blog->creator_en ?? '') }}"
                        required>
                </div>

                <div class="form-group">
                    <label for="creator_ar">Creator (Arabic)</label>
                    <input type="text" name="creator_ar" id="creator_ar" class="form-control"
                        placeholder="Enter creator (Arabic)" value="{{ old('creator_ar', $blog->creator_ar ?? '') }}"
                        required>
                </div>

                <div class="form-group">
                    <label for="image_two">Second Image</label>
                    <input type="file" name="image_two" id="image_two" class="form-control-file" accept="image/*"
                        {{ isset($blog) ? '' : 'required' }}>
                    @if (isset($blog) && $blog->image_two)
                        <img src="{{ asset('storage/' . $blog->image_two) }}" alt="Current Image Two"
                            class="mt-2 img-thumbnail" style="height: 60px;">
                    @endif
                </div>

                <div class="form-group">
                    <label for="title_two">Title Two</label>
                    <input type="text" name="title_two" id="title_two" class="form-control"
                        placeholder="Enter title two" value="{{ old('title_two', $blog->title_two ?? '') }}" required>
                </div>

                <div class="form-group">
                    <label for="title_two_ar">Arabic Title Two</label>
                    <input type="text" name="title_two_ar" id="title_two_ar" class="form-control"
                        placeholder="Enter Arabic title two" value="{{ old('title_two_ar', $blog->title_two_ar ?? '') }}"
                        required>
                </div>

                <div class="form-group">
                    <label for="desc_two_one">Description Two One</label>
                    <textarea name="desc_two_one" id="desc_two_one" class="form-control" rows="4"
                        placeholder="Enter description two one" required>{{ old('desc_two_one', $blog->desc_two_one ?? '') }}</textarea>
                </div>

                <div class="form-group">
                    <label for="desc_two_one_ar">Arabic Description Two One</label>
                    <textarea name="desc_two_one_ar" id="desc_two_one_ar" class="form-control" rows="4"
                        placeholder="Enter Arabic description two one" required>{{ old('desc_two_one_ar', $blog->desc_two_one_ar ?? '') }}</textarea>
                </div>

                <div class="form-group">
                    <label for="title_three">Title Three</label>
                    <input type="text" name="title_three" id="title_three" class="form-control"
                        placeholder="Enter title three" value="{{ old('title_three', $blog->title_three ?? '') }}"
                        required>
                </div>

                <div class="form-group">
                    <label for="title_three_ar">Arabic Title Three</label>
                    <input type="text" name="title_three_ar" id="title_three_ar" class="form-control"
                        placeholder="Enter Arabic title three"
                        value="{{ old('title_three_ar', $blog->title_three_ar ?? '') }}" required>
                </div>

                <div class="form-group">
                    <label for="desc_three_one">Description Three One</label>
                    <textarea name="desc_three_one" id="desc_three_one" class="form-control" rows="4"
                        placeholder="Enter description three one" required>{{ old('desc_three_one', $blog->desc_three_one ?? '') }}</textarea>
                </div>

                <div class="form-group">
                    <label for="desc_three_one_ar">Arabic Description Three One</label>
                    <textarea name="desc_three_one_ar" id="desc_three_one_ar" class="form-control" rows="4"
                        placeholder="Enter Arabic description three one" required>{{ old('desc_three_one_ar', $blog->desc_three_one_ar ?? '') }}</textarea>
                </div>

                <div class="form-group">
                    <label for="blog_content_2">Content Blog Two</label>
                    <textarea name="blog_content_two" id="blog_content_2" class="form-control">{{ old('blog_content_two', $blog->blog_content_two ?? '') }}</textarea>
                </div>

                <button type="submit" class="btn btn-primary">{{ isset($blog) ? 'Update' : 'Save' }}</button>
            </form>
        </div>
    </div>
@endsection

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