@extends('layouts.app')
@section('title', __('lang_v1.add_new'))
@section('content')
@include('master::layouts.nav')

<section class="content-header">
    <h1 class="tw-text-2xl tw-font-bold tw-text-gray-800">@lang('lang_v1.add_new')</h1>
</section>

<section class="content">
    <div class="tw-bg-white tw-shadow-sm tw-rounded-xl tw-p-6 tw-ring-1 tw-ring-gray-200">
        <form id="homepage-form" action="{{ route('home.page.settings.store') }}" method="POST">
            @csrf

            <div class="form-group mb-4">
                <label class="font-bold">نوع البيانات:</label>
                <select name="type" id="type" class="form-control">
                    <option value="" selected>اختر نوع البيانات</option>
                    <option value="stats" {{ isset($existing['stats']) ? 'selected' : '' }}>إحصائيات</option>
                    <option value="review" {{ isset($existing['review']) ? 'selected' : '' }}>آراء الزبائن</option>
                    <option value="faq" {{ isset($existing['faq']) ? 'selected' : '' }}>الأسئلة الشائعة</option>
                    <option value="image" {{ isset($existing['image']) ? 'selected' : '' }}>الصور</option>
                    <option value="color" {{ isset($existing['color']) ? 'selected' : '' }}>الألوان</option>
                </select>
            </div>

            {{-- 📊 الإحصائيات --}}
            <div id="stats-section" class="type-section" style="display:none;">
                <h4 class="font-bold text-lg mb-2">📊 الإحصائيات</h4>
                @php $stats = $existing['stats'] ?? ['invoices'=>'','customers'=>'','companies'=>'']; @endphp
                <div class="row">
                    <div class="col-md-4">
                        <label>عدد الفواتير</label>
                        <input type="number" name="stats[invoices]" class="form-control" value="{{ $stats['invoices'] ?? '' }}" min="0">
                    </div>
                    <div class="col-md-4">
                        <label>عدد العملاء</label>
                        <input type="number" name="stats[customers]" class="form-control" value="{{ $stats['customers'] ?? '' }}" min="0">
                    </div>
                    <div class="col-md-4">
                        <label>عدد الشركات</label>
                        <input type="number" name="stats[companies]" class="form-control" value="{{ $stats['companies'] ?? '' }}" min="0">
                    </div>
                </div>
            </div>

            {{-- 💬 آراء الزبائن --}}
            <div id="review-section" class="type-section" style="display:none;">
                <h4 class="font-bold text-lg mb-2">💬 آراء الزبائن</h4>
                <div id="reviews-container">
                    @php
                        $reviews = $existing['review'] ?? [['name'=>['ar'=>'','en'=>''],'title'=>['ar'=>'','en'=>''],'comment'=>['ar'=>'','en'=>''],'image'=>'']];
                    @endphp
                    @foreach($reviews as $i => $r)
                        <div class="review-item mb-3 border p-3 rounded">
                            <div class="tw-grid md:tw-grid-cols-2 tw-gap-3">
                                <div>
                                    <label>الاسم (عربي)</label>
                                    <input type="text" name="reviews[{{ $i }}][name][ar]" value="{{ $r['name']['ar'] ?? '' }}" class="form-control">
                                </div>
                                <div>
                                    <label>Name (English)</label>
                                    <input type="text" name="reviews[{{ $i }}][name][en]" value="{{ $r['name']['en'] ?? '' }}" class="form-control">
                                </div>
                            </div>
                            <div class="tw-grid md:tw-grid-cols-2 tw-gap-3 mt-2">
                                <div>
                                    <label>المنصب (عربي)</label>
                                    <input type="text" name="reviews[{{ $i }}][title][ar]" value="{{ $r['title']['ar'] ?? '' }}" class="form-control">
                                </div>
                                <div>
                                    <label>Title (English)</label>
                                    <input type="text" name="reviews[{{ $i }}][title][en]" value="{{ $r['title']['en'] ?? '' }}" class="form-control">
                                </div>
                            </div>
                            <div class="tw-grid md:tw-grid-cols-2 tw-gap-3 mt-2">
                                <div>
                                    <label>الرأي (عربي)</label>
                                    <textarea name="reviews[{{ $i }}][comment][ar]" class="form-control" rows="3">{{ $r['comment']['ar'] ?? '' }}</textarea>
                                </div>
                                <div>
                                    <label>Comment (English)</label>
                                    <textarea name="reviews[{{ $i }}][comment][en]" class="form-control" rows="3">{{ $r['comment']['en'] ?? '' }}</textarea>
                                </div>
                            </div>
                            <label class="mt-2">اختيار الصورة</label>
                            <select name="reviews[{{ $i }}][image]" class="form-control">
                                <option value="">-- اختر صورة --</option>
                                @foreach($imageOptions as $option)
                                    <option value="{{ $option['url'] }}" {{ isset($r['image']) && $r['image'] == $option['url'] ? 'selected' : '' }}>
                                        {{ $option['name'] }} ({{ $option['url'] }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endforeach
                </div>
                <button type="button" id="add-review" class="btn btn-sm btn-secondary mt-2">➕ إضافة رأي آخر</button>
            </div>

            {{-- ❓ الأسئلة الشائعة --}}
            <div id="faq-section" class="type-section" style="display:none;">
                <h4 class="font-bold text-lg mb-2">❓ الأسئلة الشائعة</h4>
                <div id="faqs-container">
                    @php
                        $faqs = $existing['faq'] ?? [];
                        if (empty($faqs)) {
                            $faqs[] = ['question'=>['ar'=>'','en'=>''],'answer'=>['ar'=>'','en'=>'']];
                        }
                    @endphp

                    @foreach($faqs as $i => $faq)
                        <div class="faq-item mb-3 border p-3 rounded">
                            <div class="tw-grid md:tw-grid-cols-2 tw-gap-3">
                                <div>
                                    <label>السؤال (عربي)</label>
                                    <input type="text" name="faqs[{{ $i }}][question][ar]" value="{{ $faq['question']['ar'] ?? '' }}" class="form-control">
                                </div>
                                <div>
                                    <label>Question (English)</label>
                                    <input type="text" name="faqs[{{ $i }}][question][en]" value="{{ $faq['question']['en'] ?? '' }}" class="form-control">
                                </div>
                            </div>
                            <div class="tw-grid md:tw-grid-cols-2 tw-gap-3 mt-2">
                                <div>
                                    <label>الجواب (عربي)</label>
                                    <textarea name="faqs[{{ $i }}][answer][ar]" class="form-control" rows="3">{{ $faq['answer']['ar'] ?? '' }}</textarea>
                                </div>
                                <div>
                                    <label>Answer (English)</label>
                                    <textarea name="faqs[{{ $i }}][answer][en]" class="form-control" rows="3">{{ $faq['answer']['en'] ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <button type="button" id="add-faq" class="btn btn-sm btn-secondary mt-2">➕ إضافة سؤال آخر</button>
            </div>

            {{-- 🖼️ الصور --}}
            <div id="image-section" class="type-section" style="display:none;">
                <h4 class="font-bold text-lg mb-2">🖼️ الصور</h4>
                <div id="images-container">
                    @php
                        $images = $existing['image'] ?? [['name'=>'','url'=>'']];
                    @endphp
                    @foreach($images as $i => $img)
                        <div class="image-item mb-3 border p-3 rounded">
                            <label>اسم الصورة</label>
                            <input type="text" name="images[{{ $i }}][name]" value="{{ $img['name'] ?? '' }}" class="form-control">
                            <label>رابط الصورة</label>
                            <select name="images[{{ $i }}][url]" class="form-control">
                                @foreach($imageOptions as $option)
                                    <option value="{{ $option['url'] }}" {{ isset($img['url']) && $img['url'] == $option['url'] ? 'selected' : '' }}>
                                        {{ $option['name'] }} ({{ $option['url'] }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endforeach
                </div>
                <button type="button" id="add-image" class="btn btn-sm btn-secondary mt-2">➕ إضافة صورة أخرى</button>
            </div>

            {{-- 🎨 الألوان --}}
            <div id="color-section" class="type-section" style="display:none;">
                <h4 class="font-bold text-lg mb-2">🎨 الألوان</h4>
                <div class="row">
                    @php
                        $colors = [
                            'primary' => 'اللون الأساسي',
                            'header' => 'لون الهيدر',
                            'footer' => 'لون الفوتر',
                            'title' => 'لون العناوين الرئيسية',
                            'subtitle' => 'لون العناوين الفرعية',
                            'text' => 'لون النصوص',
                            'highlight' => 'لون التمييز',
                            'button' => 'لون الأزرار',
                        ];
                        $colorValues = $existing['color'] ?? [];
                    @endphp
                    @foreach ($colors as $key => $label)
                        <div class="col-md-3 mb-3">
                            <label>{{ $label }}</label>
                            <input type="color" name="colors[{{ $key }}]" class="form-control form-control-color color-field"
                                   value="{{ $colorValues[$key] ?? '#000000' }}">
                        </div>
                    @endforeach
                </div>
            </div>

            <hr class="my-4">
            <button type="submit" class="btn btn-success w-100 py-2 text-lg">💾 حفظ</button>
        </form>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const typeSelect = document.getElementById('type');
    const sections = document.querySelectorAll('.type-section');

    function showSection(selected) {
        sections.forEach(s => s.style.display = 'none');
        if (selected) {
            const el = document.getElementById(selected + '-section');
            if (el) el.style.display = 'block';
        }
    }

    typeSelect.addEventListener('change', function() {
        showSection(this.value);
    });

    @if (!empty($existing))
        const selectedType = "{{ array_key_first($existing) }}";
        showSection(selectedType);
    @endif

    // 💬 إضافة رأي جديد
    let reviewIndex = {{ count($reviews ?? []) }};
    const addReviewBtn = document.getElementById('add-review');
    if (addReviewBtn) {
        addReviewBtn.addEventListener('click', function() {
            const container = document.getElementById('reviews-container');
            const options = `{!! collect($imageOptions)->map(fn($o) => "<option value='{$o['url']}'>{$o['name']} ({$o['url']})</option>")->implode('') !!}`;
            const html = `
                <div class="review-item mb-3 border p-3 rounded">
                    <div class="tw-grid md:tw-grid-cols-2 tw-gap-3">
                        <div><label>الاسم (عربي)</label><input type="text" name="reviews[${reviewIndex}][name][ar]" class="form-control"></div>
                        <div><label>Name (English)</label><input type="text" name="reviews[${reviewIndex}][name][en]" class="form-control"></div>
                    </div>
                    <div class="tw-grid md:tw-grid-cols-2 tw-gap-3 mt-2">
                        <div><label>المنصب (عربي)</label><input type="text" name="reviews[${reviewIndex}][title][ar]" class="form-control"></div>
                        <div><label>Title (English)</label><input type="text" name="reviews[${reviewIndex}][title][en]" class="form-control"></div>
                    </div>
                    <div class="tw-grid md:tw-grid-cols-2 tw-gap-3 mt-2">
                        <div><label>الرأي (عربي)</label><textarea name="reviews[${reviewIndex}][comment][ar]" class="form-control" rows="3"></textarea></div>
                        <div><label>Comment (English)</label><textarea name="reviews[${reviewIndex}][comment][en]" class="form-control" rows="3"></textarea></div>
                    </div>
                    <label class="mt-2">اختيار الصورة</label>
                    <select name="reviews[${reviewIndex}][image]" class="form-control">
                        <option value="">-- اختر صورة --</option>${options}
                    </select>
                </div>`;
            container.insertAdjacentHTML('beforeend', html);
            reviewIndex++;
        });
    }

    // ❓ إضافة سؤال جديد
    let faqIndex = {{ count($faqs ?? []) }};
    const addFaqBtn = document.getElementById('add-faq');
    if (addFaqBtn) {
        addFaqBtn.addEventListener('click', function() {
            const container = document.getElementById('faqs-container');
            const html = `
                <div class="faq-item mb-3 border p-3 rounded">
                    <div class="tw-grid md:tw-grid-cols-2 tw-gap-3">
                        <div><label>السؤال (عربي)</label><input type="text" name="faqs[${faqIndex}][question][ar]" class="form-control"></div>
                        <div><label>Question (English)</label><input type="text" name="faqs[${faqIndex}][question][en]" class="form-control"></div>
                    </div>
                    <div class="tw-grid md:tw-grid-cols-2 tw-gap-3 mt-2">
                        <div><label>الجواب (عربي)</label><textarea name="faqs[${faqIndex}][answer][ar]" class="form-control" rows="3"></textarea></div>
                        <div><label>Answer (English)</label><textarea name="faqs[${faqIndex}][answer][en]" class="form-control" rows="3"></textarea></div>
                    </div>
                </div>`;
            container.insertAdjacentHTML('beforeend', html);
            faqIndex++;
        });
    }

    // 🖼️ إضافة صورة جديدة
    let imageIndex = {{ count($images ?? []) }};
    const addImageBtn = document.getElementById('add-image');
    if (addImageBtn) {
        addImageBtn.addEventListener('click', function() {
            const container = document.getElementById('images-container');
            const options = `{!! collect($imageOptions)->map(fn($o) => "<option value='{$o['url']}'>{$o['name']} ({$o['url']})</option>")->implode('') !!}`;
            const html = `<div class="image-item mb-3 border p-3 rounded">
                <label>اسم الصورة</label><input type="text" name="images[${imageIndex}][name]" class="form-control" placeholder="مثلاً: شعار الموقع">
                <label>رابط الصورة</label><select name="images[${imageIndex}][url]" class="form-control">${options}</select>
            </div>`;
            container.insertAdjacentHTML('beforeend', html);
            imageIndex++;
        });
    }
});
</script>
@endsection