@extends('admin.layouts.master')

@section('title', 'إنشاء تطبيق تاجر')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">إنشاء تطبيق جديد</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.vendor-apps.store') }}">
                        @csrf
                        <div class="form-group">
                            <label>اسم التطبيق</label>
                            <input type="text" name="appName" class="form-control" required value="{{ old('appName') }}">
                        </div>
                        <div class="form-group">
                            <label>App Token (يُولد تلقائياً إن تُرك فارغاً)</label>
                            <input type="text" name="appToken" class="form-control" value="{{ old('appToken') }}">
                        </div>
                        <div class="form-group">
                            <label>الوصف</label>
                            <textarea name="description" class="form-control" rows="3">{{ old('description') }}</textarea>
                        </div>
                        <div class="form-group">
                            <label>رابط الإدارة</label>
                            <input type="text" name="manage_link" class="form-control" value="{{ old('manage_link') }}">
                        </div>
                        <div class="form-group">
                            <label>رابط الدعم</label>
                            <input type="text" name="support_link" class="form-control"
                                value="{{ old('support_link') }}">
                        </div>

                        <hr class="my-4">
                        <h5 class="mb-3">⚙️ إعدادات المظهر والعلامة التجارية</h5>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>لون التطبيق الأساسي</label>
                                    <input type="color" name="app_color" class="form-control"
                                        value="{{ old('app_color', '#3b82f6') }}">
                                    <small class="form-text text-muted">اللون الرئيسي للتطبيق (HEX)</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Deep Link Scheme</label>
                                    <input type="text" name="deep_link_scheme" class="form-control"
                                        placeholder="vendorapp://" value="{{ old('deep_link_scheme') }}">
                                    <small class="form-text text-muted">مثال: tajershop://</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>شعار التطبيق (Logo)</label>
                                    <input type="text" name="app_logo" class="form-control"
                                        placeholder="logos/vendor1.png" value="{{ old('app_logo') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>أيقونة التطبيق (Icon)</label>
                                    <input type="text" name="app_icon" class="form-control"
                                        placeholder="icons/vendor1.png" value="{{ old('app_icon') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>أيقونة الإشعارات</label>
                                    <input type="text" name="notification_icon" class="form-control"
                                        placeholder="notifications/vendor1.png" value="{{ old('notification_icon') }}">
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">
                        <h5 class="mb-3">🔥 إعدادات Firebase</h5>

                        <div class="alert alert-info">
                            <strong>📝 كيفية الحصول على إعدادات Firebase:</strong>
                            <ol class="mb-0 mt-2">
                                <li>افتح <a href="https://console.firebase.google.com" target="_blank">Firebase Console</a>
                                </li>
                                <li>اختر مشروعك → <strong>Project Settings</strong> → <strong>Cloud Messaging</strong></li>
                                <li>انسخ <strong>Server Key</strong> و <strong>Sender ID</strong></li>
                                <li>اختر التطبيق المحدد واحصل على <strong>App ID</strong> و <strong>Package Name</strong>
                                </li>
                            </ol>
                        </div>

                        <div class="form-group">
                            <label>Firebase Configuration (JSON)</label>
                            <textarea name="firebase_config" id="firebase_config" class="form-control" rows="8"
                                placeholder='{"server_key": "AAAA...", "sender_id": "123456789012", "app_id": "1:123...", "package_name": "com.vendor.app"}'>{{ old('firebase_config') }}</textarea>
                            <small class="form-text text-muted">
                                <strong>مثال:</strong>
                                <pre class="bg-light p-2 mt-1 small">{
  "server_key": "AAAA1234567890:APA91bF...",
  "sender_id": "123456789012",
  "app_id": "1:123456789012:android:abc123",
  "package_name": "com.vendor1.shop",
  "platform": "android"
}</pre>
                            </small>
                        </div>

                        <hr class="my-4">

                        <div class="form-group">
                            <div class="custom-control custom-switch">
                                <input type="hidden" name="is_root" value="0">
                                <input type="checkbox" class="custom-control-input" id="is_root" name="is_root"
                                    value="1" {{ old('is_root') ? 'checked' : '' }}>
                                <label class="custom-control-label" for="is_root">تطبيق رئيسي (Root App)</label>
                            </div>
                            <small class="form-text text-muted">عند التفعيل، سيكون هذا التطبيق هو التطبيق الرئيسي للموقع ولن يرتبط بأي تاجر. يمكن تعيين تطبيق رئيسي واحد فقط.</small>
                        </div>

                        <div class="form-group" id="vendor_id_group">
                            <label>ربط لتاجر (اختياري)</label>
                            <select name="vendor_id" class="form-control">
                                <option value="">— لا شيء —</option>
                                @foreach (\App\Models\Vendor\Vendor::with('user')->orderBy('id')->get() as $vendor)
                                    <option value="{{ $vendor->id }}">{{ $vendor->name() ?? 'Vendor #' . $vendor->id }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">حفظ</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            // Select2 for better dropdowns
            $('select[name="vendor_id"]').select2({
                width: '100%',
                placeholder: '— لا شيء —'
            });

            // Toggle vendor field visibility based on is_root
            function toggleVendorField() {
                const isRoot = $('#is_root').is(':checked');
                const $vendorGroup = $('#vendor_id_group');
                if (isRoot) {
                    $vendorGroup.hide();
                    $('select[name="vendor_id"]').val('').trigger('change');
                } else {
                    $vendorGroup.show();
                }
            }
            $('#is_root').on('change', toggleVendorField);
            toggleVendorField();

            // Validate Firebase JSON on form submit
            $('form').on('submit', function(e) {
                const firebaseConfig = $('#firebase_config').val().trim();

                // Skip validation if empty (optional field)
                if (!firebaseConfig) {
                    return true;
                }

                try {
                    const config = JSON.parse(firebaseConfig);

                    // Validate required fields
                    if (!config.server_key) {
                        e.preventDefault();
                        alert('❌ يجب توفير server_key في Firebase Configuration');
                        return false;
                    }

                    if (!config.sender_id) {
                        e.preventDefault();
                        alert('❌ يجب توفير sender_id في Firebase Configuration');
                        return false;
                    }

                    // Show success
                    console.log('✅ Firebase Configuration valid:', config);
                } catch (error) {
                    e.preventDefault();
                    alert('❌ Firebase Configuration غير صحيح - يجب أن يكون JSON صالح\n\n' + error.message);
                    return false;
                }
            });

            // Format JSON on paste
            $('#firebase_config').on('paste', function(e) {
                setTimeout(() => {
                    try {
                        const value = $(this).val();
                        const parsed = JSON.parse(value);
                        const formatted = JSON.stringify(parsed, null, 2);
                        $(this).val(formatted);
                    } catch (e) {
                        // Ignore if not valid JSON yet
                    }
                }, 100);
            });
        });
    </script>
@endsection