@extends('layouts.admin.master')
@section('tab-name', 'مدیریت لندینگ: ' . $service->title)

@section('content')
    @php
        $upload_base = trim(config('paths.upload', 'assets/uploads'), '/');
        $inheritance_options = [
            'self' => 'محتوای همین خدمت',
            'parent' => 'ارث‌بری از والد',
            'grandparent' => 'ارث‌بری از پدربزرگ',
            'root' => 'ارث‌بری از ریشه درخت',
        ];
    @endphp

    <div class="container-fluid py-3">
        <div class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-4">
            <div>
                <h4 class="fw-bold mb-1">Landing Manager</h4>
                <p class="text-muted mb-0">مدیریت سکشن های صفحه خدمت: {{ $service->title }}</p>
            </div>
            <a href="{{ route('admin.services.index') }}" class="btn btn-light rounded-custom">بازگشت به لیست خدمات</a>
        </div>

        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="d-flex justify-content-end mb-3">
            @if(!empty($addableSections))
                <button class="btn btn-custom rounded-custom" data-bs-toggle="modal" data-bs-target="#add-section-modal">
                    افزودن سکشن جدید
                </button>
            @endif
        </div>

        @foreach($sections as $section)
            @php
                $section_config = $registry[$section->section_key] ?? null;
            @endphp

            @if(($section_config['is_sort_locked'] ?? false) === true)
                <div class="card border-0 shadow-sm rounded-custom2 mb-4">
                    <div class="card-header bg-light border-0 py-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div>
                            <strong>{{ $section_config['label'] ?? $section->section_key }}</strong>
                            <small class="text-muted d-block">این سکشن همیشه اولین بخش صفحه است.</small>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-label-success">ثابت</span>
                            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#edit-section-modal-{{ $section->id }}">
                                ویرایش
                            </button>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach

        <div class="card border-0 shadow-sm rounded-custom2">
            <div class="card-header bg-light border-0 py-3 d-flex justify-content-between align-items-center">
                <strong>سکشن های قابل مرتب سازی</strong>
                <small class="text-muted">با Drag & Drop ترتیب را تغییر دهید.</small>
            </div>
            <div class="card-body">
                <div id="sortable-sections">
                    @foreach($sections as $section)
                        @php
                            $section_config = $registry[$section->section_key] ?? null;
                        @endphp

                        @if(($section_config['is_sort_locked'] ?? false) === false)
                            <div class="card border mb-3 sortable-item" data-id="{{ $section->id }}">
                                <div class="card-header bg-white d-flex justify-content-between align-items-center flex-wrap gap-2">
                                    <div class="d-flex align-items-center gap-2">
                                        <i class="bi bi-grid-3x3-gap-fill text-muted drag-handle"></i>
                                        <strong>{{ $section_config['label'] ?? $section->section_key }}</strong>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#edit-section-modal-{{ $section->id }}">
                                            ویرایش
                                        </button>
                                        <form method="POST"
                                              action="{{ route('admin.services.landing.destroy', [$service, $section]) }}"
                                              onsubmit="return confirm('از حذف این سکشن مطمئن هستید؟')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger">حذف سکشن</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>

        @if(!empty($addableSections))
            <div class="modal fade" id="add-section-modal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">افزودن سکشن جدید</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form method="POST" action="{{ route('admin.services.landing.store', $service) }}">
                                @csrf
                                <div class="row g-3">
                                    @foreach($addableSections as $section_key => $section_config)
                                        <div class="col-lg-4">
                                            <label class="border rounded-custom d-block p-2 h-100 cursor-pointer">
                                                <input class="form-check-input ms-1" type="radio" name="section_key"
                                                       value="{{ $section_key }}">
                                                <span class="fw-bold">{{ $section_config['label'] }}</span>
                                                <img class="img-fluid rounded mt-2"
                                                     src="{{ asset($section_config['preview']) }}"
                                                     alt="{{ $section_config['label'] }}">
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="mt-3 d-flex justify-content-end">
                                    <button type="submit" class="btn btn-custom rounded-custom">افزودن به صفحه</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @foreach($sections as $section)
            @php
                $content = (array) ($section->content ?? []);
                $section_config = $registry[$section->section_key] ?? null;
            @endphp
            <div class="modal fade" id="edit-section-modal-{{ $section->id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">ویرایش سکشن: {{ $section_config['label'] ?? $section->section_key }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form method="POST"
                                  action="{{ route('admin.services.landing.update', [$service, $section]) }}"
                                  enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                @include('admin.service.landing.partials.form-fields', ['section' => $section, 'content' => $content, 'inheritance_options' => $inheritance_options, 'upload_base' => $upload_base])
                                <div class="mt-3 d-flex justify-content-end">
                                    <button type="submit" class="btn btn-custom rounded-custom">ذخیره تنظیمات</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endsection

@push('scripts')
    <script src="{{asset('assets/admin/js/488sortable.min.js')}}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const sortableContainer = document.getElementById('sortable-sections');
            if (!sortableContainer) {
                return;
            }

            Sortable.create(sortableContainer, {
                animation: 180,
                handle: '.drag-handle',
                onEnd: function () {
                    const order = [];
                    sortableContainer.querySelectorAll('.sortable-item').forEach((item, index) => {
                        order.push({
                            id: item.dataset.id,
                            position: index + 2
                        });
                    });

                    fetch("{{ route('admin.services.landing.order', $service) }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({order: order})
                    });
                }
            });

            document.querySelectorAll('[data-add-step]').forEach((button) => {
                button.addEventListener('click', function () {
                    const wrapper = document.querySelector('[data-steps-wrapper="' + this.dataset.addStep + '"]');
                    if (!wrapper) {
                        return;
                    }

                    const nextIndex = parseInt(wrapper.getAttribute('data-next-index') || '0', 10);
                    wrapper.setAttribute('data-next-index', String(nextIndex + 1));

                    const row = document.createElement('div');
                    row.className = 'row g-2 mb-2 step-row';
                    row.innerHTML = `
                        <div class="col-md-5"><input type="text" name="steps[${nextIndex}][title]" class="form-control bg-light rounded-custom" placeholder="عنوان استپ"></div>
                        <div class="col-md-6"><input type="text" name="steps[${nextIndex}][description]" class="form-control bg-light rounded-custom" placeholder="توضیح کوتاه"></div>
                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100" data-remove-step>×</button></div>
                    `;
                    wrapper.appendChild(row);
                });
            });

            document.addEventListener('click', function (event) {
                if (event.target.matches('[data-remove-step]')) {
                    const row = event.target.closest('.step-row');
                    if (row) {
                        row.remove();
                    }
                }

                if (event.target.matches('[data-remove-card]')) {
                    const row = event.target.closest('.card-row');
                    if (row) {
                        row.remove();
                    }
                }

                if (event.target.matches('[data-remove-step-v2]')) {
                    const row = event.target.closest('.step-v2-row');
                    if (row) {
                        row.remove();
                    }
                }

                if (event.target.matches('[data-remove-card-v2]')) {
                    const row = event.target.closest('.card-v2-row');
                    if (row) {
                        row.remove();
                    }
                }

                if (event.target.matches('[data-remove-growth-button]')) {
                    const row = event.target.closest('.growth-button-row');
                    if (row) {
                        row.remove();
                    }
                }

                if (event.target.matches('[data-remove-spec-item]')) {
                    const row = event.target.closest('.spec-item-row');
                    if (row) {
                        row.remove();
                    }
                }

                if (event.target.matches('[data-remove-compare-item]')) {
                    const row = event.target.closest('.compare-item-row');
                    if (row) {
                        row.remove();
                    }
                }

                if (event.target.matches('[data-remove-compare-feature]')) {
                    const row = event.target.closest('.compare-feature-row');
                    if (row) {
                        row.remove();
                    }
                }

                if (event.target.matches('[data-remove-faq-item]')) {
                    const row = event.target.closest('.faq-item-row');
                    if (row) {
                        row.remove();
                    }
                }

                if (event.target.matches('[data-remove-work-sample]')) {
                    const row = event.target.closest('.work-sample-row');
                    if (row) {
                        row.remove();
                    }
                }
            });

            document.querySelectorAll('[data-add-card]').forEach((button) => {
                button.addEventListener('click', function () {
                    const wrapper = document.querySelector('[data-cards-wrapper="' + this.dataset.addCard + '"]');
                    if (!wrapper) {
                        return;
                    }

                    const nextIndex = parseInt(wrapper.getAttribute('data-next-index') || '0', 10);
                    wrapper.setAttribute('data-next-index', String(nextIndex + 1));

                    const row = document.createElement('div');
                    row.className = 'row g-2 mb-2 card-row';
                    row.innerHTML = `
                        <div class="col-md-5"><input type="text" name="cards[${nextIndex}][title]" class="form-control bg-light rounded-custom" placeholder="عنوان card"></div>
                        <div class="col-md-6"><input type="text" name="cards[${nextIndex}][description]" class="form-control bg-light rounded-custom" placeholder="توضیح card"></div>
                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100" data-remove-card>×</button></div>
                    `;
                    wrapper.appendChild(row);
                });
            });

            document.querySelectorAll('[data-add-step-v2]').forEach((button) => {
                button.addEventListener('click', function () {
                    const wrapper = document.querySelector('[data-steps-v2-wrapper="' + this.dataset.addStepV2 + '"]');
                    if (!wrapper) {
                        return;
                    }
                    const nextIndex = parseInt(wrapper.getAttribute('data-next-index') || '0', 10);
                    wrapper.setAttribute('data-next-index', String(nextIndex + 1));
                    const row = document.createElement('div');
                    row.className = 'row g-2 mb-2 step-v2-row';
                    row.innerHTML = `
                        <div class="col-md-5"><input type="text" name="steps_v2[${nextIndex}][title]" class="form-control bg-light rounded-custom" placeholder="عنوان استپ"></div>
                        <div class="col-md-6"><input type="text" name="steps_v2[${nextIndex}][description]" class="form-control bg-light rounded-custom" placeholder="توضیح کوتاه"></div>
                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100" data-remove-step-v2>×</button></div>
                    `;
                    wrapper.appendChild(row);
                });
            });

            document.querySelectorAll('[data-add-card-v2]').forEach((button) => {
                button.addEventListener('click', function () {
                    const wrapper = document.querySelector('[data-cards-v2-wrapper="' + this.dataset.addCardV2 + '"]');
                    if (!wrapper) {
                        return;
                    }
                    const nextIndex = parseInt(wrapper.getAttribute('data-next-index') || '0', 10);
                    wrapper.setAttribute('data-next-index', String(nextIndex + 1));
                    const row = document.createElement('div');
                    row.className = 'row g-2 mb-3 card-v2-row';
                    row.innerHTML = `
                        <div class="col-md-3"><input type="text" name="cards_v2[${nextIndex}][title]" class="form-control bg-light rounded-custom" placeholder="عنوان"></div>
                        <div class="col-md-3"><input type="text" name="cards_v2[${nextIndex}][description]" class="form-control bg-light rounded-custom" placeholder="توضیح"></div>
                        <div class="col-md-2"><input type="text" name="cards_v2[${nextIndex}][button_text]" class="form-control bg-light rounded-custom" placeholder="عنوان دکمه"></div>
                        <div class="col-md-3"><input type="url" name="cards_v2[${nextIndex}][button_link]" class="form-control bg-light rounded-custom" placeholder="لینک دکمه"></div>
                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100" data-remove-card-v2>×</button></div>
                        <div class="col-md-6">
                            <input type="hidden" name="cards_v2[${nextIndex}][existing_image]" value="">
                            <label class="form-label">تصویر کارت</label>
                            <input type="file" name="card_v2_card_images[${nextIndex}]" class="form-control bg-light rounded-custom">
                        </div>
                    `;
                    wrapper.appendChild(row);
                });
            });

            document.querySelectorAll('[data-add-growth-button]').forEach((button) => {
                button.addEventListener('click', function () {
                    const wrapper = document.querySelector('[data-growth-buttons-wrapper="' + this.dataset.addGrowthButton + '"]');
                    if (!wrapper) {
                        return;
                    }
                    const nextIndex = parseInt(wrapper.getAttribute('data-next-index') || '0', 10);
                    wrapper.setAttribute('data-next-index', String(nextIndex + 1));
                    const row = document.createElement('div');
                    row.className = 'row g-2 mb-2 growth-button-row';
                    row.innerHTML = `
                        <div class="col-md-4"><input type="text" name="growth_buttons[${nextIndex}][text]" class="form-control bg-light rounded-custom" placeholder="متن دکمه"></div>
                        <div class="col-md-7"><input type="url" name="growth_buttons[${nextIndex}][link]" class="form-control bg-light rounded-custom" placeholder="لینک دکمه"></div>
                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100" data-remove-growth-button>×</button></div>
                    `;
                    wrapper.appendChild(row);
                });
            });

            document.querySelectorAll('[data-add-spec-item]').forEach((button) => {
                button.addEventListener('click', function () {
                    const wrapper = document.querySelector('[data-spec-items-wrapper="' + this.dataset.addSpecItem + '"]');
                    if (!wrapper) {
                        return;
                    }
                    const nextIndex = parseInt(wrapper.getAttribute('data-next-index') || '0', 10);
                    wrapper.setAttribute('data-next-index', String(nextIndex + 1));
                    const row = document.createElement('div');
                    row.className = 'row g-2 mb-2 spec-item-row';
                    row.innerHTML = `
                        <div class="col-md-5"><input type="text" name="specifications_items[${nextIndex}][title]" class="form-control bg-light rounded-custom" placeholder="عنوان ویژگی"></div>
                        <div class="col-md-6"><input type="text" name="specifications_items[${nextIndex}][description]" class="form-control bg-light rounded-custom" placeholder="توضیح ویژگی"></div>
                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100" data-remove-spec-item>×</button></div>
                    `;
                    wrapper.appendChild(row);
                });
            });

            document.querySelectorAll('[data-add-compare-item]').forEach((button) => {
                button.addEventListener('click', function () {
                    const wrapper = document.querySelector('[data-compare-items-wrapper="' + this.dataset.addCompareItem + '"]');
                    if (!wrapper) {
                        return;
                    }
                    const nextIndex = parseInt(wrapper.getAttribute('data-next-index') || '0', 10);
                    wrapper.setAttribute('data-next-index', String(nextIndex + 1));
                    const row = document.createElement('div');
                    row.className = 'row g-2 mb-2 compare-item-row';
                    row.innerHTML = `
                        <div class="col-md-4"><input type="text" name="compare_items[${nextIndex}][title]" class="form-control bg-light rounded-custom" placeholder="عنوان آیتم"></div>
                        <div class="col-md-4"><input type="hidden" name="compare_items[${nextIndex}][existing_image]" value=""><input type="file" name="compare_item_images[${nextIndex}]" class="form-control bg-light rounded-custom"></div>
                        <div class="col-md-3"></div>
                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100" data-remove-compare-item>×</button></div>
                    `;
                    wrapper.appendChild(row);
                });
            });

            document.querySelectorAll('[data-add-compare-feature]').forEach((button) => {
                button.addEventListener('click', function () {
                    const wrapper = document.querySelector('[data-compare-features-wrapper="' + this.dataset.addCompareFeature + '"]');
                    if (!wrapper) {
                        return;
                    }
                    const nextIndex = parseInt(wrapper.getAttribute('data-next-index') || '0', 10);
                    wrapper.setAttribute('data-next-index', String(nextIndex + 1));
                    const row = document.createElement('div');
                    row.className = 'row g-2 mb-2 compare-feature-row';
                    row.innerHTML = `
                        <div class="col-md-11"><input type="text" name="compare_features[${nextIndex}][title]" class="form-control bg-light rounded-custom" placeholder="عنوان ویژگی"></div>
                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100" data-remove-compare-feature>×</button></div>
                    `;
                    wrapper.appendChild(row);
                });
            });

            document.querySelectorAll('[data-add-faq-item]').forEach((button) => {
                button.addEventListener('click', function () {
                    const wrapper = document.querySelector('[data-faq-items-wrapper="' + this.dataset.addFaqItem + '"]');
                    if (!wrapper) {
                        return;
                    }
                    const nextIndex = parseInt(wrapper.getAttribute('data-next-index') || '0', 10);
                    wrapper.setAttribute('data-next-index', String(nextIndex + 1));
                    const row = document.createElement('div');
                    row.className = 'row g-2 mb-2 faq-item-row';
                    row.innerHTML = `
                        <div class="col-md-5"><input type="text" name="faq_items[${nextIndex}][question]" class="form-control bg-light rounded-custom" placeholder="عنوان سوال"></div>
                        <div class="col-md-6"><input type="text" name="faq_items[${nextIndex}][answer]" class="form-control bg-light rounded-custom" placeholder="پاسخ سوال"></div>
                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100" data-remove-faq-item>×</button></div>
                    `;
                    wrapper.appendChild(row);
                });
            });

            document.querySelectorAll('[data-add-work-sample]').forEach((button) => {
                button.addEventListener('click', function () {
                    const wrapper = document.querySelector('[data-work-samples-wrapper="' + this.dataset.addWorkSample + '"]');
                    if (!wrapper) {
                        return;
                    }
                    const nextIndex = parseInt(wrapper.getAttribute('data-next-index') || '0', 10);
                    wrapper.setAttribute('data-next-index', String(nextIndex + 1));
                    const row = document.createElement('div');
                    row.className = 'row g-2 mb-3 work-sample-row';
                    row.innerHTML = `
                        <div class="col-md-3"><input type="text" name="work_samples[${nextIndex}][title]" class="form-control bg-light rounded-custom" placeholder="عنوان"></div>
                        <div class="col-md-3"><input type="text" name="work_samples[${nextIndex}][short_description]" class="form-control bg-light rounded-custom" placeholder="توضیح کوتاه"></div>
                        <div class="col-md-3"><input type="url" name="work_samples[${nextIndex}][link]" class="form-control bg-light rounded-custom" placeholder="لینک"></div>
                        <div class="col-md-2"><input type="hidden" name="work_samples[${nextIndex}][existing_image]" value=""><input type="file" name="work_sample_images[${nextIndex}]" class="form-control bg-light rounded-custom"></div>
                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100" data-remove-work-sample>×</button></div>
                    `;
                    wrapper.appendChild(row);
                });
            });
        });
    </script>
@endpush