@extends('backend.layouts.app')
@section('content')
    <div class="card page-container" id="page-container">
        <div class="card-body p-lg-25 content-wrap">
            <div class="d-flex flex-column flex-lg-row mb-17">
                <div class="flex-lg-row-fluid me-0 me-lg-20">
                    <form action="{{ $action }}" class="form mb-15" method="POST" enctype="multipart/form-data">
                        @csrf

                        <h3 class="mb-5">{{ TranslationManager::translate('Ruaana Landing Logo') }}</h3>
                        <div class="row mb-8 align-items-center">
                            <div class="col-md-6 fv-row">
                                <label class="fs-6 fw-bold mb-2">{{ TranslationManager::translate('Logo') }}</label>
                                <input type="file" class="form-control form-control-solid" name="logo" id="logo_input"
                                    accept="image/*" onchange="handleImagePreview(this, 'logo_preview_img', 'logo_preview_box')" />
                                <div class="form-text text-muted">يفضل رفع شعار بصيغة PNG وبخلفية شفافة</div>
                            </div>
                            <div class="col-md-6 fv-row">
                                <div id="logo_preview_box" class="{{ $ruaanaPage->logo ? '' : 'd-none' }}">
                                    <label class="fs-7 fw-bold mb-2 text-muted d-block">{{ TranslationManager::translate('Current Logo Preview') }}</label>
                                    <div class="d-inline-flex flex-column align-items-start p-4 rounded" style="background-color: #07303b; border: 1px solid rgba(255,255,255,0.2);">
                                        <img id="logo_preview_img" src="{{ $ruaanaPage->getLogo() ?? '' }}" alt="logo"
                                            class="rounded mb-3" style="max-width: 220px; max-height: 90px; object-fit: contain;" />
                                        <div class="form-check form-check-custom form-check-solid form-check-danger">
                                            <input class="form-check-input" type="checkbox" name="remove_logo" value="1" id="remove_logo_cb" />
                                            <label class="form-check-label text-danger fw-bold fs-7 cursor-pointer" for="remove_logo_cb">
                                                {{ TranslationManager::translate('Delete / Remove Logo') }} (حذف الشعار)
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="separator separator-dashed my-8"></div>

                        <h3 class="mb-5">{{ TranslationManager::translate('Hero Section') }}</h3>
                        <div class="row mb-5">
                            @foreach ($languages as $language)
                                <div class="col-md-6 fv-row" @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif>
                                    <label class="fs-5 fw-bold mb-2">
                                        {{ TranslationManager::translate('Hero Welcome', $language->code) }}
                                        <span class="badge badge-light-primary ms-1">{{ $language->name }}</span>
                                    </label>
                                    <input type="text" class="form-control form-control-solid"
                                        name="hero_welcome[{{ $language->code }}]"
                                        value="{{ $ruaanaPage->getTranslation('hero_welcome', $language->code, false) }}" />
                                </div>
                            @endforeach
                        </div>

                        <div class="row mb-5">
                            @foreach ($languages as $language)
                                <div class="col-md-6 fv-row" @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif>
                                    <label class="fs-5 fw-bold mb-2">
                                        {{ TranslationManager::translate('Hero Title', $language->code) }}
                                        <span class="badge badge-light-primary ms-1">{{ $language->name }}</span>
                                    </label>
                                    <input type="text" class="form-control form-control-solid"
                                        name="hero_title[{{ $language->code }}]"
                                        value="{{ $ruaanaPage->getTranslation('hero_title', $language->code, false) }}" />
                                </div>
                            @endforeach
                        </div>

                        <div class="row mb-5">
                            @foreach ($languages as $language)
                                <div class="col-md-6 fv-row" @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif>
                                    <label class="fs-5 fw-bold mb-2">
                                        {{ TranslationManager::translate('Primary CTA Text', $language->code) }}
                                        <span class="badge badge-light-primary ms-1">{{ $language->name }}</span>
                                    </label>
                                    <input type="text" class="form-control form-control-solid"
                                        name="hero_primary_cta_text[{{ $language->code }}]"
                                        value="{{ $ruaanaPage->getTranslation('hero_primary_cta_text', $language->code, false) }}" />
                                </div>
                            @endforeach
                        </div>

                        <div class="row mb-5">
                            @foreach ($languages as $language)
                                <div class="col-md-6 fv-row" @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif>
                                    <label class="fs-5 fw-bold mb-2">
                                        {{ TranslationManager::translate('Secondary CTA Text', $language->code) }}
                                        <span class="badge badge-light-primary ms-1">{{ $language->name }}</span>
                                    </label>
                                    <input type="text" class="form-control form-control-solid"
                                        name="hero_secondary_cta_text[{{ $language->code }}]"
                                        value="{{ $ruaanaPage->getTranslation('hero_secondary_cta_text', $language->code, false) }}" />
                                </div>
                            @endforeach
                        </div>

                        <div class="row mb-5">
                            <div class="col-md-6 fv-row">
                                <label class="fs-5 fw-bold mb-2">{{ TranslationManager::translate('Primary CTA URL') }}</label>
                                <input type="text" class="form-control form-control-solid" name="hero_primary_cta_url"
                                    placeholder="/register" value="{{ $ruaanaPage->hero_primary_cta_url }}" />
                            </div>
                            <div class="col-md-6 fv-row">
                                <label class="fs-5 fw-bold mb-2">{{ TranslationManager::translate('Secondary CTA URL') }}</label>
                                <input type="text" class="form-control form-control-solid" name="hero_secondary_cta_url"
                                    placeholder="#about" value="{{ $ruaanaPage->hero_secondary_cta_url }}" />
                            </div>
                        </div>

                        <div class="separator separator-dashed my-8"></div>

                        <h3 class="mb-5">{{ TranslationManager::translate('About Section') }}</h3>
                        <div class="row mb-5">
                            @foreach ($languages as $language)
                                <div class="col-md-6 fv-row" @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif>
                                    <label class="fs-5 fw-bold mb-2">
                                        {{ TranslationManager::translate('About Title', $language->code) }}
                                        <span class="badge badge-light-primary ms-1">{{ $language->name }}</span>
                                    </label>
                                    <input type="text" class="form-control form-control-solid"
                                        name="about_title[{{ $language->code }}]"
                                        value="{{ $ruaanaPage->getTranslation('about_title', $language->code, false) }}" />
                                </div>
                            @endforeach
                        </div>

                        @foreach ($languages as $language)
                            <div class="row mb-5" @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif>
                                <div class="col-md-12 fv-row">
                                    <label class="fs-5 fw-bold mb-2">
                                        {{ TranslationManager::translate('About Description', $language->code) }}
                                        <span class="badge badge-light-primary ms-1">{{ $language->name }}</span>
                                    </label>
                                    <textarea class="form-control form-control-solid ckeditor"
                                        name="about_description[{{ $language->code }}]">{{ $ruaanaPage->getTranslation('about_description', $language->code, false) }}</textarea>
                                </div>
                            </div>
                        @endforeach

                        <div class="row mb-5">
                            @foreach ($languages as $language)
                                <div class="col-md-6 fv-row" @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif>
                                    <label class="fs-5 fw-bold mb-2">
                                        {{ TranslationManager::translate('About Button Text', $language->code) }}
                                        <span class="badge badge-light-primary ms-1">{{ $language->name }}</span>
                                    </label>
                                    <input type="text" class="form-control form-control-solid"
                                        name="about_button_text[{{ $language->code }}]"
                                        value="{{ $ruaanaPage->getTranslation('about_button_text', $language->code, false) }}" />
                                </div>
                            @endforeach
                        </div>

                        <div class="row mb-5">
                            <div class="col-md-12 fv-row">
                                <label class="fs-5 fw-bold mb-2">{{ TranslationManager::translate('About Button URL') }}</label>
                                <input type="text" class="form-control form-control-solid" name="about_button_url"
                                    placeholder="https://www.ruaana.com/about"
                                    value="{{ $ruaanaPage->about_button_url }}" />
                            </div>
                        </div>

                        <div class="row mb-8 align-items-center">
                            <div class="col-md-6 fv-row">
                                <label class="fs-6 fw-bold mb-2">{{ TranslationManager::translate('About Image') }} (صورة النبذة)</label>
                                <input type="file" class="form-control form-control-solid" name="about_image" id="about_image_input"
                                    accept="image/*" onchange="handleImagePreview(this, 'about_preview_img', 'about_preview_box')" />
                                <div class="form-text text-muted">في حال عدم رفع صورة، سيتم عرض الأشكال الهندسية الرسمية لرؤانا تلقائياً</div>
                            </div>
                            <div class="col-md-6 fv-row">
                                <div id="about_preview_box" class="{{ $ruaanaPage->about_image ? '' : 'd-none' }}">
                                    <label class="fs-7 fw-bold mb-2 text-muted d-block">{{ TranslationManager::translate('Current About Image Preview') }}</label>
                                    <div class="d-inline-flex flex-column align-items-start p-3 bg-light rounded border">
                                        <img id="about_preview_img" src="{{ $ruaanaPage->getAboutImage() ?? '' }}" alt="about"
                                            class="rounded mb-3 shadow-sm" style="max-width: 220px; max-height: 160px; object-fit: cover;" />
                                        <div class="form-check form-check-custom form-check-solid form-check-danger">
                                            <input class="form-check-input" type="checkbox" name="remove_about_image" value="1" id="remove_about_image_cb" />
                                            <label class="form-check-label text-danger fw-bold fs-7 cursor-pointer" for="remove_about_image_cb">
                                                {{ TranslationManager::translate('Delete / Remove About Image') }} (حذف صورة النبذة)
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="separator separator-dashed my-8"></div>

                        <h3 class="mb-5">{{ TranslationManager::translate('Courses Section') }}</h3>
                        <div class="row mb-5">
                            @foreach ($languages as $language)
                                <div class="col-md-6 fv-row" @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif>
                                    <label class="fs-5 fw-bold mb-2">
                                        {{ TranslationManager::translate('Courses Section Title', $language->code) }}
                                        <span class="badge badge-light-primary ms-1">{{ $language->name }}</span>
                                    </label>
                                    <input type="text" class="form-control form-control-solid"
                                        name="courses_title[{{ $language->code }}]"
                                        value="{{ $ruaanaPage->getTranslation('courses_title', $language->code, false) }}" />
                                </div>
                            @endforeach
                        </div>

                        <div class="row mb-5">
                            @foreach ($languages as $language)
                                <div class="col-md-6 fv-row" @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif>
                                    <label class="fs-5 fw-bold mb-2">
                                        {{ TranslationManager::translate('Courses Section Subtitle', $language->code) }}
                                        <span class="badge badge-light-primary ms-1">{{ $language->name }}</span>
                                    </label>
                                    <input type="text" class="form-control form-control-solid"
                                        name="courses_subtitle[{{ $language->code }}]"
                                        value="{{ $ruaanaPage->getTranslation('courses_subtitle', $language->code, false) }}" />
                                </div>
                            @endforeach
                        </div>

                        <div class="row mb-8">
                            <div class="col-sm">
                                <label class="fs-6 fw-bold mb-2">{{ TranslationManager::translate('Featured Courses') }}</label>
                                <select class="form-select form-select-solid" data-control="select2" multiple
                                    data-hide-search="false" name="course_id[]">
                                    @foreach ($courses as $course)
                                        <option value="{{ $course->id }}"
                                             {{ in_array($course->id, optional($ruaanaPage->courses)->pluck('id')->toArray() ?? []) ? 'selected' : '' }}>
                                            {{ $course->getName() }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="separator mb-8"></div>
                        <button type="submit" class="btn btn-primary">
                            <span class="indicator-label">{{ TranslationManager::translate('Submit') }}</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            $('.ckeditor').ckeditor();
        });

        function handleImagePreview(input, imgId, containerId) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#' + imgId).attr('src', e.target.result);
                    $('#' + containerId).removeClass('d-none');
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endpush