@extends('admin.layouts.app')

@php
    $featureCardsForm = old('value.feature_cards', $itemValue['feature_cards'] ?? []);
    if (!is_array($featureCardsForm)) {
        $featureCardsForm = [];
    }
@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/definitions" id="premiumDefinitionsForm">
                        {{ 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>
                            <input type="text" name="value[accent_color]" class="form-control" dir="ltr" placeholder="#5786c7" value="{{ old('value.accent_color', $itemValue['accent_color'] ?? '') }}">
                        </div>

                        <hr class="my-4">
                        <h5 class="font-weight-bold mb-3">البطاقة الكبيرة (Spotlight)</h5>

                        <div class="form-group">
                            <label>السطر الصغير فوق العنوان (مثلاً: لماذا تختارنا)</label>
                            <input type="text" name="value[spotlight_eyebrow]" class="form-control" value="{{ old('value.spotlight_eyebrow', $itemValue['spotlight_eyebrow'] ?? '') }}">
                        </div>

                        <div class="form-group">
                            <label>عنوان البطاقة الكبيرة</label>
                            <textarea name="value[spotlight_title]" rows="2" class="form-control">{{ old('value.spotlight_title', $itemValue['spotlight_title'] ?? '') }}</textarea>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>نص الزر</label>
                                    <input type="text" name="value[spotlight_cta_label]" class="form-control" value="{{ old('value.spotlight_cta_label', $itemValue['spotlight_cta_label'] ?? '') }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>رابط الزر</label>
                                    <input type="text" name="value[spotlight_cta_url]" class="form-control" dir="ltr" value="{{ old('value.spotlight_cta_url', $itemValue['spotlight_cta_url'] ?? '') }}">
                                </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_def_spotlight" data-preview="holder_ph_def_spotlight">
                                        <i class="fa fa-upload"></i>
                                    </button>
                                </div>
                                <input type="text" name="value[spotlight_image]" id="ph_def_spotlight" class="form-control" dir="ltr" value="{{ old('value.spotlight_image', $itemValue['spotlight_image'] ?? '') }}">
                            </div>
                            <div id="holder_ph_def_spotlight" class="mt-2"></div>
                        </div>

                        <div class="form-group mb-0">
                            <label>تغطية داكنة فوق الصورة (CSS اختياري)</label>
                            <input type="text" name="value[spotlight_veil]" class="form-control" dir="ltr" placeholder="linear-gradient(180deg, rgba(11,45,107,.15) 0%, rgba(5,20,50,.88) 92%)" value="{{ old('value.spotlight_veil', $itemValue['spotlight_veil'] ?? '') }}">
                            <p class="text-small text-muted mt-1 mb-0">اتركه فارغاً لاستخدام التدرج الافتراضي.</p>
                        </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\NewHomepageDefinitionsController::$maxFeatureCards }} بطاقات. على الموقع تُعرض <strong>اثنتان في كل صف</strong>. أيقونة Font Awesome مثل <code dir="ltr">fas fa-book</code> أو <code dir="ltr">fa fa-users</code>.</p>

                        <div id="definitions-cards-repeater">
                            @foreach ($featureCardsForm as $ci => $crow)
                                @if (!is_array($crow))
                                    @continue
                                @endif
                                <div class="border rounded p-3 mb-2 js-def-card-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-def-card">{{ trans('admin/main.delete') }}</button>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group mb-2">
                                                <label class="mb-0 font-weight-normal">الأيقونة (كلاسات)</label>
                                                <input type="text" name="value[feature_cards][{{ $ci }}][icon]" class="form-control" dir="ltr" value="{{ $crow['icon'] ?? '' }}" placeholder="fas fa-book">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-2">
                                                <label class="mb-0 font-weight-normal">لون الأيقونة</label>
                                                <select name="value[feature_cards][{{ $ci }}][icon_tone]" class="form-control">
                                                    @foreach (['blue' => 'أزرق', 'amber' => 'كهرماني', 'mint' => 'نعناعي', 'rose' => 'وردي'] as $tk => $tl)
                                                        <option value="{{ $tk }}" @if(($crow['icon_tone'] ?? 'blue') === $tk) selected @endif>{{ $tl }}</option>
                                                    @endforeach
                                                </select>
                                            </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[feature_cards][{{ $ci }}][title]" class="form-control" value="{{ $crow['title'] ?? '' }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group mb-0">
                                        <label class="mb-0 font-weight-normal">الوصف</label>
                                        <textarea name="value[feature_cards][{{ $ci }}][description]" rows="2" class="form-control">{{ $crow['description'] ?? '' }}</textarea>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm js-add-def-card 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-def-card">
        <div class="border rounded p-3 mb-2 js-def-card-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-def-card">{{ trans('admin/main.delete') }}</button>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group mb-2">
                        <label class="mb-0 font-weight-normal">الأيقونة (كلاسات)</label>
                        <input type="text" name="value[feature_cards][__CIDX__][icon]" class="form-control" dir="ltr" value="" placeholder="fas fa-book">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-2">
                        <label class="mb-0 font-weight-normal">لون الأيقونة</label>
                        <select name="value[feature_cards][__CIDX__][icon_tone]" class="form-control">
                            <option value="blue" selected>أزرق</option>
                            <option value="amber">كهرماني</option>
                            <option value="mint">نعناعي</option>
                            <option value="rose">وردي</option>
                        </select>
                    </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[feature_cards][__CIDX__][title]" class="form-control" value="">
                    </div>
                </div>
            </div>
            <div class="form-group mb-0">
                <label class="mb-0 font-weight-normal">الوصف</label>
                <textarea name="value[feature_cards][__CIDX__][description]" rows="2" class="form-control"></textarea>
            </div>
        </div>
    </template>
@endsection

@push('scripts_bottom')
<script>
(function () {
    var maxC = {{ (int) \App\Http\Controllers\Admin\NewHomepageDefinitionsController::$maxFeatureCards }};
    var cIdx = {{ count($featureCardsForm) }};

    function reindexDefCards() {
        var wrap = document.getElementById('definitions-cards-repeater');
        if (!wrap) return;
        [].slice.call(wrap.querySelectorAll('.js-def-card-row')).forEach(function (row, i) {
            row.querySelectorAll('[name]').forEach(function (el) {
                el.name = el.name.replace(/value\[feature_cards\]\[\d+\]/, 'value[feature_cards][' + i + ']');
            });
        });
    }

    document.addEventListener('click', function (e) {
        if (e.target.closest('.js-add-def-card')) {
            e.preventDefault();
            var wrap = document.getElementById('definitions-cards-repeater');
            var tpl = document.getElementById('tpl-def-card');
            if (!wrap || !tpl || wrap.querySelectorAll('.js-def-card-row').length >= maxC) return;
            var html = tpl.innerHTML.replace(/__CIDX__/g, String(cIdx++));
            wrap.insertAdjacentHTML('beforeend', html);
            reindexDefCards();
        }
        if (e.target.closest('.js-remove-def-card')) {
            e.preventDefault();
            var row = e.target.closest('.js-def-card-row');
            if (row && row.parentNode) {
                row.parentNode.removeChild(row);
                reindexDefCards();
            }
        }
    });
})();
</script>
@endpush