@extends('admin.layouts.app')

@php
    $heroButtonsForm = old('value.hero_buttons', $itemValue['hero_buttons'] ?? []);
    if (!is_array($heroButtonsForm)) {
        $heroButtonsForm = [];
    }
    $trustBoxesForm = old('value.trust_boxes', $itemValue['trust_boxes'] ?? []);
    if (!is_array($trustBoxesForm)) {
        $trustBoxesForm = [];
    }
@endphp

@section('content')
    <section class="section">
        <div class="section-header">
            <h1>قسم الهيرو — الصفحة الرئيسية الجديدة</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="/admin/">{{ trans('admin/main.dashboard') }}</a></div>
                <div class="breadcrumb-item">الصفحة الرئيسية الجديدة</div>
                <div class="breadcrumb-item">قسم الهيرو</div>
            </div>
        </div>

        <div class="section-body">
            <div class="card">
                <div class="card-body">
                    <form method="post" action="/admin/new-homepage/hero" id="premiumHeroForm">
                        {{ csrf_field() }}

                        @if(!empty(getGeneralSettings('content_translate')))
                            <div class="form-group">
                                <label class="input-label">{{ trans('auth.language') }}</label>
                                <select name="locale" class="form-control js-edit-content-locale">
                                    @foreach($userLanguages as $lang => $language)
                                        <option value="{{ $lang }}" @if(mb_strtolower(request()->get('locale', !empty($itemValue['locale']) ? strtolower($itemValue['locale']) : app()->getLocale())) == mb_strtolower($lang)) selected @endif>{{ $language }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @else
                            <input type="hidden" name="locale" value="{{ getDefaultLocale() }}">
                        @endif

                        <h5 class="font-weight-bold mb-3">العنوان والوصف والصور</h5>

                        <div class="form-group">
                            <label>العنوان الرئيسي</label>
                            <textarea name="value[title]" rows="4" class="form-control" placeholder="سطر لكل سطر">{{ old('value.title', $itemValue['title'] ?? '') }}</textarea>
                        </div>

                        <div class="form-group">
                            <label>الوصف (تحت العنوان)</label>
                            <textarea name="value[description]" rows="4" class="form-control">{{ old('value.description', $itemValue['description'] ?? '') }}</textarea>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>لون العنوان (CSS)</label>
                                    <input type="text" name="value[title_color]" class="form-control" dir="ltr" placeholder="#5786c7" value="{{ old('value.title_color', $itemValue['title_color'] ?? '') }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>لون الوصف (CSS)</label>
                                    <input type="text" name="value[description_color]" class="form-control" dir="ltr" placeholder="#5786c7" value="{{ old('value.description_color', $itemValue['description_color'] ?? '') }}">
                                </div>
                            </div>
                        </div>
                        <p class="text-small text-muted mb-3">لون هوية مؤسسة مونتيسوري الدولية للتدريب الموصى به: <code dir="ltr">#5786c7</code> (نفس لون التمييز في التصميم).</p>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>لون تمييز اسم المؤسسة (الجزء بين <code>**</code> في العنوان)</label>
                                    <input type="text" name="value[title_highlight_color]" class="form-control" dir="ltr" placeholder="#5786c7" value="{{ old('value.title_highlight_color', $itemValue['title_highlight_color'] ?? '') }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>لون شارة «منهج مونتيسوري» فوق العنوان</label>
                                    <input type="text" name="value[hero_badge_color]" class="form-control" dir="ltr" placeholder="#466aa8" value="{{ old('value.hero_badge_color', $itemValue['hero_badge_color'] ?? '') }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>صورة الهيرو (بجانب النص)</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <button type="button" class="input-group-text admin-file-manager" data-input="ph_hero_image" data-preview="holder_ph_hero_image">
                                        <i class="fa fa-upload"></i>
                                    </button>
                                </div>
                                <input type="text" name="value[hero_image]" id="ph_hero_image" class="form-control" value="{{ old('value.hero_image', $itemValue['hero_image'] ?? '') }}">
                            </div>
                            <div id="holder_ph_hero_image" class="mt-2"></div>
                        </div>

                        <div class="form-group">
                            <label>صورة الخلفية (اختياري)</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <button type="button" class="input-group-text admin-file-manager" data-input="ph_hero_bg" data-preview="holder_ph_hero_bg">
                                        <i class="fa fa-upload"></i>
                                    </button>
                                </div>
                                <input type="text" name="value[hero_background]" id="ph_hero_bg" class="form-control" value="{{ old('value.hero_background', $itemValue['hero_background'] ?? '') }}">
                            </div>
                            <div id="holder_ph_hero_bg" class="mt-2"></div>
                        </div>

                        <hr class="my-4">
                        <h5 class="font-weight-bold mb-2">الأزرار</h5>
                        <p class="text-small text-muted mb-3">حد أقصى {{ \App\Http\Controllers\Admin\NewHomepageHeroController::$maxHeroButtons }} أزرار. احذف جميع الأزرار واحفظ لإخفاء أزرار هذا القسم من الموقع (عند الحفظ يُخزَّن قائمة فارغة).</p>

                        <div id="hero-buttons-repeater">
                            @foreach ($heroButtonsForm as $i => $row)
                                @if (!is_array($row))
                                    @continue
                                @endif
                                <div class="border rounded p-3 mb-2 js-hero-button-row">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <strong>زر</strong>
                                        <button type="button" class="btn btn-sm btn-outline-danger js-remove-hero-button">{{ trans('admin/main.delete') }}</button>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="form-group mb-2">
                                                <label class="mb-0 font-weight-normal">النص</label>
                                                <input type="text" name="value[hero_buttons][{{ $i }}][label]" class="form-control" value="{{ $row['label'] ?? '' }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-2">
                                                <label class="mb-0 font-weight-normal">الرابط</label>
                                                <input type="text" name="value[hero_buttons][{{ $i }}][url]" class="form-control" dir="ltr" value="{{ $row['url'] ?? '' }}">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group mb-2">
                                                <label class="mb-0 font-weight-normal">النوع</label>
                                                <select name="value[hero_buttons][{{ $i }}][style]" class="form-control">
                                                    <option value="primary" @if(($row['style'] ?? 'primary') === 'primary') selected @endif>أساسي</option>
                                                    <option value="secondary" @if(($row['style'] ?? '') === 'secondary') selected @endif>ثانوي</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="value[hero_buttons][{{ $i }}][new_tab]" value="0">
                                    <div class="form-check pl-0">
                                        <label class="mb-0">
                                            <input type="checkbox" name="value[hero_buttons][{{ $i }}][new_tab]" value="1" class="form-check-input position-static ml-0 mr-2" @if(!empty($row['new_tab'])) checked @endif>
                                            فتح في نافذة جديدة
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm js-add-hero-button mt-2">+ إضافة زر</button>

                        <hr class="my-4">
                        <h5 class="font-weight-bold mb-2">البُوكسات (تحت الأزرار)</h5>
                        <p class="text-small text-muted mb-3">حد أقصى {{ \App\Http\Controllers\Admin\NewHomepageHeroController::$maxTrustBoxes }} بوكسات. احذف كل الصفوف لإخفاء الشريط في الهيرو premium؛ في السلايدر يُعرض السطر الأول فقط لكل بوكس.</p>

                        <div id="trust-boxes-repeater">
                            @foreach ($trustBoxesForm as $j => $trow)
                                @if (!is_array($trow))
                                    @continue
                                @endif
                                <div class="border rounded p-3 mb-2 js-trust-box-row">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <strong>بُوكس</strong>
                                        <button type="button" class="btn btn-sm btn-outline-danger js-remove-trust-box">{{ trans('admin/main.delete') }}</button>
                                    </div>
                                    <div class="form-group mb-2">
                                        <label class="mb-0 font-weight-normal">السطر الأول</label>
                                        <input type="text" name="value[trust_boxes][{{ $j }}][l1]" class="form-control" value="{{ $trow['l1'] ?? '' }}">
                                    </div>
                                    <div class="form-group mb-2">
                                        <label class="mb-0 font-weight-normal">السطر الثاني</label>
                                        <input type="text" name="value[trust_boxes][{{ $j }}][l2]" class="form-control" value="{{ $trow['l2'] ?? '' }}">
                                    </div>
                                    <div class="form-group mb-0">
                                        <label class="mb-0 font-weight-normal">سطر فرعي / ميتا</label>
                                        <input type="text" name="value[trust_boxes][{{ $j }}][meta]" class="form-control" value="{{ $trow['meta'] ?? '' }}">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm js-add-trust-box mt-2">+ إضافة بُوكس</button>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">{{ trans('admin/main.save_change') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <template id="tpl-hero-button">
        <div class="border rounded p-3 mb-2 js-hero-button-row">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <strong>زر</strong>
                <button type="button" class="btn btn-sm btn-outline-danger js-remove-hero-button">{{ trans('admin/main.delete') }}</button>
            </div>
            <div class="row">
                <div class="col-md-5">
                    <div class="form-group mb-2">
                        <label class="mb-0 font-weight-normal">النص</label>
                        <input type="text" name="value[hero_buttons][__IDX__][label]" class="form-control" value="">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-2">
                        <label class="mb-0 font-weight-normal">الرابط</label>
                        <input type="text" name="value[hero_buttons][__IDX__][url]" class="form-control" dir="ltr" value="">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb-2">
                        <label class="mb-0 font-weight-normal">النوع</label>
                        <select name="value[hero_buttons][__IDX__][style]" class="form-control">
                            <option value="primary" selected>أساسي</option>
                            <option value="secondary">ثانوي</option>
                        </select>
                    </div>
                </div>
            </div>
            <input type="hidden" name="value[hero_buttons][__IDX__][new_tab]" value="0">
            <div class="form-check pl-0">
                <label class="mb-0">
                    <input type="checkbox" name="value[hero_buttons][__IDX__][new_tab]" value="1" class="form-check-input position-static ml-0 mr-2">
                    فتح في نافذة جديدة
                </label>
            </div>
        </div>
    </template>

    <template id="tpl-trust-box">
        <div class="border rounded p-3 mb-2 js-trust-box-row">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <strong>بُوكس</strong>
                <button type="button" class="btn btn-sm btn-outline-danger js-remove-trust-box">{{ trans('admin/main.delete') }}</button>
            </div>
            <div class="form-group mb-2">
                <label class="mb-0 font-weight-normal">السطر الأول</label>
                <input type="text" name="value[trust_boxes][__TIDX__][l1]" class="form-control" value="">
            </div>
            <div class="form-group mb-2">
                <label class="mb-0 font-weight-normal">السطر الثاني</label>
                <input type="text" name="value[trust_boxes][__TIDX__][l2]" class="form-control" value="">
            </div>
            <div class="form-group mb-0">
                <label class="mb-0 font-weight-normal">سطر فرعي / ميتا</label>
                <input type="text" name="value[trust_boxes][__TIDX__][meta]" class="form-control" value="">
            </div>
        </div>
    </template>
@endsection

@push('scripts_bottom')
<script>
(function () {
    var maxBtns = {{ (int) \App\Http\Controllers\Admin\NewHomepageHeroController::$maxHeroButtons }};
    var maxTrust = {{ (int) \App\Http\Controllers\Admin\NewHomepageHeroController::$maxTrustBoxes }};
    var btnIdx = {{ count($heroButtonsForm) }};
    var trustIdx = {{ count($trustBoxesForm) }};

    function reindexHeroButtons() {
        var wrap = document.getElementById('hero-buttons-repeater');
        if (!wrap) return;
        [].slice.call(wrap.querySelectorAll('.js-hero-button-row')).forEach(function (row, i) {
            row.querySelectorAll('[name]').forEach(function (el) {
                el.name = el.name.replace(/value\[hero_buttons\]\[\d+\]/, 'value[hero_buttons][' + i + ']');
            });
        });
    }

    function reindexTrustBoxes() {
        var wrap = document.getElementById('trust-boxes-repeater');
        if (!wrap) return;
        [].slice.call(wrap.querySelectorAll('.js-trust-box-row')).forEach(function (row, i) {
            row.querySelectorAll('[name]').forEach(function (el) {
                el.name = el.name.replace(/value\[trust_boxes\]\[\d+\]/, 'value[trust_boxes][' + i + ']');
            });
        });
    }

    document.addEventListener('click', function (e) {
        if (e.target.closest('.js-add-hero-button')) {
            e.preventDefault();
            var wrap = document.getElementById('hero-buttons-repeater');
            var tpl = document.getElementById('tpl-hero-button');
            if (!wrap || !tpl || wrap.querySelectorAll('.js-hero-button-row').length >= maxBtns) return;
            var html = tpl.innerHTML.replace(/__IDX__/g, String(btnIdx++));
            wrap.insertAdjacentHTML('beforeend', html);
            reindexHeroButtons();
        }
        if (e.target.closest('.js-remove-hero-button')) {
            e.preventDefault();
            var row = e.target.closest('.js-hero-button-row');
            if (row && row.parentNode) {
                row.parentNode.removeChild(row);
                reindexHeroButtons();
            }
        }
        if (e.target.closest('.js-add-trust-box')) {
            e.preventDefault();
            var wrapT = document.getElementById('trust-boxes-repeater');
            var tplT = document.getElementById('tpl-trust-box');
            if (!wrapT || !tplT || wrapT.querySelectorAll('.js-trust-box-row').length >= maxTrust) return;
            var htmlT = tplT.innerHTML.replace(/__TIDX__/g, String(trustIdx++));
            wrapT.insertAdjacentHTML('beforeend', htmlT);
            reindexTrustBoxes();
        }
        if (e.target.closest('.js-remove-trust-box')) {
            e.preventDefault();
            var rowT = e.target.closest('.js-trust-box-row');
            if (rowT && rowT.parentNode) {
                rowT.parentNode.removeChild(rowT);
                reindexTrustBoxes();
            }
        }
    });
})();
</script>
@endpush