@extends('layouts.master')

@section('content')
<div style="max-width: 800px; margin: 0 auto;">
    <h3 style="font-weight: 800; margin-bottom: 5px;">إعدادات صفحة المنتج</h3>
    <p style="color: #666;">تعديل معلومات المنتج وصفحة الشراء</p>
    <hr>

    @include('layouts.errors')
    <div id="flash">
        @if(session('flash_notification'))
            @foreach(session('flash_notification') as $msg)
                <div class="alert alert-{{ $msg->level }}">{{ $msg->message }}</div>
            @endforeach
        @endif
    </div>

    <div style="text-align: center; margin-bottom: 1.5rem; display: flex; gap: 10px; justify-content: center;">
        <a href="/admin/licenses" class="btn btn-primary">إدارة التراخيص</a>
        <a href="/purchase" target="_blank" class="btn btn-success">معاينة صفحة الشراء</a>
    </div>

    {{-- Product Info --}}
    <div style="background: #bbbbd0; border: 2px solid #9999CC; padding: 1.5rem; margin-bottom: 1.5rem;">
        <h5 style="color: #7777CC; font-weight: 700; margin-bottom: 1rem;">معلومات المنتج</h5>
        <form method="POST" action="/admin/product-settings/update">
            @csrf

            <div class="form-group">
                <label>تفعيل صفحة الشراء:</label>
                <select name="purchase_page_enabled" class="form-control" style="max-width: 300px;">
                    <option value="1" {{ ($settings['purchase_page_enabled'] ?? '0') == '1' ? 'selected' : '' }}>مفعّلة (ظاهرة)</option>
                    <option value="0" {{ ($settings['purchase_page_enabled'] ?? '0') == '0' ? 'selected' : '' }}>معطّلة (مخفية)</option>
                </select>
            </div>

            <div class="form-group">
                <label>اسم المنتج:</label>
                <input type="text" class="form-control" name="product_name" value="{{ $settings['product_name'] ?? '' }}" placeholder="سكريبت كلمات الأغاني">
            </div>

            <div class="form-group">
                <label>وصف المنتج:</label>
                <textarea class="form-control" name="product_description" rows="3" placeholder="نظام متكامل لإدارة كلمات الأغاني...">{{ $settings['product_description'] ?? '' }}</textarea>
            </div>

            <div class="form-group">
                <label>السعر:</label>
                <input type="text" class="form-control" name="product_price" value="{{ $settings['product_price'] ?? '' }}" placeholder="مثال: 99$" style="max-width: 200px;">
            </div>

            <div class="form-group">
                <label>الإصدار:</label>
                <input type="text" class="form-control" name="product_version" value="{{ $settings['product_version'] ?? '' }}" placeholder="1.0" style="max-width: 150px; direction: ltr;">
            </div>

            <div class="form-group">
                <label>رابط المعاينة التجريبية:</label>
                <input type="url" class="form-control" name="product_demo_url" value="{{ $settings['product_demo_url'] ?? '' }}" placeholder="https://demo.example.com" style="direction: ltr;">
                <small style="color: #888;">سيظهر كـ iframe ورابط مباشر في صفحة الشراء</small>
            </div>

            <div class="form-group">
                <label>معلومات التواصل للشراء:</label>
                <textarea class="form-control" name="purchase_contact" rows="3" placeholder="واتساب: +966...&#10;تلجرام: @example&#10;إيميل: sales@example.com">{{ $settings['purchase_contact'] ?? '' }}</textarea>
            </div>

            <hr style="border-color: #9999CC;">

            {{-- Features --}}
            <h5 style="color: #7777CC; font-weight: 700; margin-bottom: 1rem;">مميزات المنتج</h5>
            <div id="features-list">
                @forelse($features as $i => $f)
                <div class="feature-row" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
                    <input type="text" name="feature_icons[]" class="form-control" value="{{ $f['icon'] ?? '' }}" placeholder="أيقونة" style="width: 70px; text-align: center;">
                    <input type="text" name="feature_titles[]" class="form-control" value="{{ $f['title'] }}" placeholder="عنوان الميزة" style="flex: 1;">
                    <input type="text" name="feature_descs[]" class="form-control" value="{{ $f['desc'] ?? '' }}" placeholder="وصف مختصر" style="flex: 2;">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @empty
                <div class="feature-row" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
                    <input type="text" name="feature_icons[]" class="form-control" placeholder="أيقونة" style="width: 70px; text-align: center;">
                    <input type="text" name="feature_titles[]" class="form-control" placeholder="عنوان الميزة" style="flex: 1;">
                    <input type="text" name="feature_descs[]" class="form-control" placeholder="وصف مختصر" style="flex: 2;">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @endforelse
            </div>
            <button type="button" class="btn btn-sm btn-success" onclick="addFeature()" style="margin-bottom: 15px;">+ إضافة ميزة</button>

            <hr style="border-color: #9999CC;">

            {{-- Requirements --}}
            <h5 style="color: #7777CC; font-weight: 700; margin-bottom: 1rem;">متطلبات التشغيل - متطلبات السيرفر</h5>
            <div id="requirements-list">
                @php $requirements = json_decode(\App\SiteSetting::get('product_requirements', '[]'), true) ?: []; @endphp
                @forelse($requirements as $i => $r)
                <div class="req-row" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
                    <input type="text" name="req_labels[]" class="form-control" value="{{ $r['label'] }}" placeholder="المتطلب (مثل: PHP)" style="flex: 1;">
                    <input type="text" name="req_values[]" class="form-control" value="{{ $r['value'] }}" placeholder="القيمة (مثل: 7.4 / 8.0)" style="flex: 2;">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @empty
                <div class="req-row" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
                    <input type="text" name="req_labels[]" class="form-control" placeholder="المتطلب" style="flex: 1;">
                    <input type="text" name="req_values[]" class="form-control" placeholder="القيمة" style="flex: 2;">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @endforelse
            </div>
            <button type="button" class="btn btn-sm btn-success" onclick="addRow('requirements-list','req_labels[]','المتطلب','req_values[]','القيمة')" style="margin-bottom: 10px;">+ إضافة متطلب</button>

            <h6 style="color: #7777CC; font-weight: 700; margin: 10px 0;">الاستضافات المدعومة</h6>
            <div id="hosting-list">
                @php $hosting = json_decode(\App\SiteSetting::get('product_hosting', '[]'), true) ?: []; @endphp
                @forelse($hosting as $h)
                <div class="host-row" style="display: flex; gap: 8px; margin-bottom: 6px; align-items: center;">
                    <input type="text" name="hosting_items[]" class="form-control" value="{{ $h }}" placeholder="اسم الاستضافة">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @empty
                <div class="host-row" style="display: flex; gap: 8px; margin-bottom: 6px; align-items: center;">
                    <input type="text" name="hosting_items[]" class="form-control" placeholder="اسم الاستضافة">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @endforelse
            </div>
            <button type="button" class="btn btn-sm btn-success" onclick="addSingle('hosting-list','hosting_items[]','اسم الاستضافة')" style="margin-bottom: 15px;">+ إضافة استضافة</button>

            <hr style="border-color: #9999CC;">

            {{-- Installation Steps --}}
            <h5 style="color: #7777CC; font-weight: 700; margin-bottom: 1rem;">طريقة التثبيت</h5>
            <div id="steps-list">
                @php $steps = json_decode(\App\SiteSetting::get('product_install_steps', '[]'), true) ?: []; @endphp
                @forelse($steps as $i => $s)
                <div class="step-row" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
                    <span style="background: #7777CC; color: #fff; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 0.8em;">{{ $i + 1 }}</span>
                    <input type="text" name="step_titles[]" class="form-control" value="{{ $s['title'] }}" placeholder="عنوان الخطوة" style="flex: 1;">
                    <input type="text" name="step_descs[]" class="form-control" value="{{ $s['desc'] }}" placeholder="وصف الخطوة" style="flex: 2;">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @empty
                <div class="step-row" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
                    <input type="text" name="step_titles[]" class="form-control" placeholder="عنوان الخطوة" style="flex: 1;">
                    <input type="text" name="step_descs[]" class="form-control" placeholder="وصف الخطوة" style="flex: 2;">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @endforelse
            </div>
            <button type="button" class="btn btn-sm btn-success" onclick="addRow('steps-list','step_titles[]','عنوان الخطوة','step_descs[]','وصف الخطوة')" style="margin-bottom: 15px;">+ إضافة خطوة</button>

            <hr style="border-color: #9999CC;">

            {{-- What's Included --}}
            <h5 style="color: #7777CC; font-weight: 700; margin-bottom: 1rem;">ماذا تحصل عند الشراء؟</h5>
            <div id="includes-list">
                @php $includes = json_decode(\App\SiteSetting::get('product_includes', '[]'), true) ?: []; @endphp
                @forelse($includes as $item)
                <div class="inc-row" style="display: flex; gap: 8px; margin-bottom: 6px; align-items: center;">
                    <input type="text" name="include_items[]" class="form-control" value="{{ $item }}" placeholder="ميزة مشمولة">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @empty
                <div class="inc-row" style="display: flex; gap: 8px; margin-bottom: 6px; align-items: center;">
                    <input type="text" name="include_items[]" class="form-control" placeholder="ميزة مشمولة">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @endforelse
            </div>
            <button type="button" class="btn btn-sm btn-success" onclick="addSingle('includes-list','include_items[]','ميزة مشمولة')" style="margin-bottom: 15px;">+ إضافة عنصر</button>

            <hr style="border-color: #9999CC;">

            {{-- License Terms --}}
            <h5 style="color: #7777CC; font-weight: 700; margin-bottom: 1rem;">شروط الترخيص</h5>
            <h6 style="color: #2a2; font-weight: 700;">مسموح</h6>
            <div id="allowed-list">
                @php $allowed = json_decode(\App\SiteSetting::get('license_allowed', '[]'), true) ?: []; @endphp
                @forelse($allowed as $a)
                <div class="al-row" style="display: flex; gap: 8px; margin-bottom: 6px; align-items: center;">
                    <input type="text" name="allowed_items[]" class="form-control" value="{{ $a }}" placeholder="بند مسموح">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @empty
                <div class="al-row" style="display: flex; gap: 8px; margin-bottom: 6px; align-items: center;">
                    <input type="text" name="allowed_items[]" class="form-control" placeholder="بند مسموح">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @endforelse
            </div>
            <button type="button" class="btn btn-sm btn-success" onclick="addSingle('allowed-list','allowed_items[]','بند مسموح')" style="margin-bottom: 10px;">+ إضافة بند</button>

            <h6 style="color: #a00; font-weight: 700;">غير مسموح</h6>
            <div id="notallowed-list">
                @php $notallowed = json_decode(\App\SiteSetting::get('license_not_allowed', '[]'), true) ?: []; @endphp
                @forelse($notallowed as $na)
                <div class="na-row" style="display: flex; gap: 8px; margin-bottom: 6px; align-items: center;">
                    <input type="text" name="notallowed_items[]" class="form-control" value="{{ $na }}" placeholder="بند غير مسموح">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @empty
                <div class="na-row" style="display: flex; gap: 8px; margin-bottom: 6px; align-items: center;">
                    <input type="text" name="notallowed_items[]" class="form-control" placeholder="بند غير مسموح">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>
                </div>
                @endforelse
            </div>
            <button type="button" class="btn btn-sm btn-success" onclick="addSingle('notallowed-list','notallowed_items[]','بند غير مسموح')" style="margin-bottom: 10px;">+ إضافة بند</button>

            <div class="form-group">
                <label style="font-weight: 700; color: #664;">نص التحذير:</label>
                <textarea class="form-control" name="license_warning" rows="2" placeholder="تحذير للمخالفين...">{{ \App\SiteSetting::get('license_warning', '') }}</textarea>
            </div>

            <button type="submit" class="btn btn-primary btn-block">حفظ إعدادات المنتج</button>
        </form>
    </div>

    {{-- Upload Product File --}}
    <div style="background: #bbbbd0; border: 2px solid #9999CC; padding: 1.5rem; margin-bottom: 1.5rem;">
        <h5 style="color: #7777CC; font-weight: 700; margin-bottom: 1rem;">ملف المنتج (النسخة)</h5>

        @if(!empty($settings['product_file']))
            <div style="background: #d0e8d0; border: 1px solid #8c8; padding: 12px; margin-bottom: 15px;">
                <strong>الملف الحالي:</strong> {{ $settings['product_file_original'] ?? $settings['product_file'] }}<br>
                <small>
                    الحجم: {{ number_format(($settings['product_file_size'] ?? 0) / 1024 / 1024, 2) }} MB |
                    آخر تحديث: {{ $settings['product_updated_at'] ?? '-' }}
                </small>
            </div>
        @else
            <div style="background: #e8e8d0; border: 1px solid #cc8; padding: 12px; margin-bottom: 15px; text-align: center;">
                لم يتم رفع ملف المنتج بعد
            </div>
        @endif

        <form method="POST" action="/admin/product-settings/upload" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label>رفع ملف جديد (ZIP, RAR):</label>
                <input type="file" name="product_file" class="form-control-file" accept=".zip,.rar,.tar,.gz" required>
                <small style="color: #888;">الحد الأقصى: 100MB - سيحل محل الملف الحالي</small>
            </div>
            <button type="submit" class="btn btn-primary btn-block">رفع / تحديث النسخة</button>
        </form>
    </div>

</div>

<script>
function addFeature() {
    var html = '<div class="feature-row" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">' +
        '<input type="text" name="feature_icons[]" class="form-control" placeholder="أيقونة" style="width: 70px; text-align: center;">' +
        '<input type="text" name="feature_titles[]" class="form-control" placeholder="عنوان الميزة" style="flex: 1;">' +
        '<input type="text" name="feature_descs[]" class="form-control" placeholder="وصف مختصر" style="flex: 2;">' +
        '<button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>' +
        '</div>';
    document.getElementById('features-list').insertAdjacentHTML('beforeend', html);
}
function addRow(listId, name1, ph1, name2, ph2) {
    var html = '<div style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">' +
        '<input type="text" name="' + name1 + '" class="form-control" placeholder="' + ph1 + '" style="flex: 1;">' +
        '<input type="text" name="' + name2 + '" class="form-control" placeholder="' + ph2 + '" style="flex: 2;">' +
        '<button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>' +
        '</div>';
    document.getElementById(listId).insertAdjacentHTML('beforeend', html);
}
function addSingle(listId, name, ph) {
    var html = '<div style="display: flex; gap: 8px; margin-bottom: 6px; align-items: center;">' +
        '<input type="text" name="' + name + '" class="form-control" placeholder="' + ph + '">' +
        '<button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">X</button>' +
        '</div>';
    document.getElementById(listId).insertAdjacentHTML('beforeend', html);
}
</script>
@endsection
