@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">تعديل تطبيق: {{ $app->appName }}</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.vendor-apps.update', $app) }}">
                        @csrf
                        @method('PUT')
                        <div class="form-group">
                            <label>اسم التطبيق</label>
                            <input type="text" name="appName" class="form-control"
                                value="{{ old('appName', $app->appName) }}">
                        </div>
                        <div class="form-group">
                            <label>App Token</label>
                            <input type="text" name="appToken" class="form-control"
                                value="{{ old('appToken', $app->appToken) }}">
                        </div>
                        <div class="form-group">
                            <label>الوصف</label>
                            <textarea name="description" class="form-control" rows="3">{{ old('description', $app->description) }}</textarea>
                        </div>
                        <div class="form-group">
                            <label>رابط الإدارة</label>
                            <input type="text" name="manage_link" class="form-control"
                                value="{{ old('manage_link', $app->manage_link) }}">
                        </div>
                        <div class="form-group">
                            <label>رابط الدعم</label>
                            <input type="text" name="support_link" class="form-control"
                                value="{{ old('support_link', $app->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', $app->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', $app->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', $app->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', $app->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', $app->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>

                        @php
                            $firebaseData = $app->firebase_server_key ?? [];
                            if (!is_array($firebaseData)) {
                                $firebaseData = [];
                            }
                        @endphp

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><x-lucide-key class="text-warning" width="20" height="20" /> Server Key <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="firebase_server_key" id="firebase_server_key"
                                        class="form-control" dir="ltr" placeholder="AAAA1234567890:APA91bF..."
                                        value="{{ old('firebase_server_key', $firebaseData['server_key'] ?? '') }}">
                                    <small class="form-text text-muted">
                                        📍 Project Settings → Cloud Messaging → Server Key
                                    </small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><x-lucide-badge-info class="text-info" width="20" height="20" /> Sender ID <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="firebase_sender_id" id="firebase_sender_id"
                                        class="form-control" dir="ltr" placeholder="123456789012"
                                        value="{{ old('firebase_sender_id', $firebaseData['sender_id'] ?? '') }}">
                                    <small class="form-text text-muted">
                                        📍 Project Settings → Cloud Messaging → Sender ID
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><x-lucide-smartphone class="text-success" width="20" height="20" /> App ID</label>
                                    <input type="text" name="firebase_app_id" id="firebase_app_id"
                                        class="form-control" dir="ltr"
                                        placeholder="1:123456789012:android:abc123def456"
                                        value="{{ old('firebase_app_id', $firebaseData['app_id'] ?? '') }}">
                                    <small class="form-text text-muted">
                                        📍 Project Settings → General → Your Apps → App ID
                                    </small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><x-lucide-package class="text-primary" width="20" height="20" /> Package Name / Bundle ID</label>
                                    <input type="text" name="firebase_package_name" id="firebase_package_name"
                                        class="form-control" dir="ltr" placeholder="com.vendor.app"
                                        value="{{ old('firebase_package_name', $firebaseData['package_name'] ?? '') }}">
                                    <small class="form-text text-muted">
                                        📍 Android: Package Name | iOS: Bundle ID
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><x-lucide-smartphone width="20" height="20" /> النظام (Platform)</label>
                                    <select name="firebase_platform" id="firebase_platform" class="form-control">
                                        <option value="">-- اختر النظام --</option>
                                        <option value="android"
                                            {{ old('firebase_platform', $firebaseData['platform'] ?? '') == 'android' ? 'selected' : '' }}>
                                            Android
                                        </option>
                                        <option value="ios"
                                            {{ old('firebase_platform', $firebaseData['platform'] ?? '') == 'ios' ? 'selected' : '' }}>
                                            iOS
                                        </option>
                                        <option value="both"
                                            {{ old('firebase_platform', $firebaseData['platform'] ?? '') == 'both' ? 'selected' : '' }}>
                                            Android & iOS
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><x-lucide-check-circle class="text-success" width="20" height="20" /> حالة Firebase</label>
                                    <div class="mt-2">
                                        @if (!empty($firebaseData['server_key']) && !empty($firebaseData['sender_id']))
                                            <span class="badge badge-success p-2">
                                                <x-lucide-check width="16" height="16" /> مُفعّل - Firebase جاهز للإشعارات
                                            </span>
                                        @else
                                            <span class="badge badge-warning p-2">
                                                <x-lucide-triangle-alert width="16" height="16" /> غير مُفعّل - أدخل البيانات
                                                المطلوبة
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Hidden field to combine all Firebase data as JSON -->
                        <input type="hidden" name="firebase_config" id="firebase_config">

                        <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', $app->is_root) ? 'checked' : '' }}>
                                <label class="custom-control-label" for="is_root">تطبيق رئيسي (Root App)</label>
                            </div>
                            <small class="form-text text-muted">عند التفعيل، سيكون هذا التطبيق هو التطبيق الرئيسي للموقع ولن يرتبط بأي تاجر. يمكن تعيين تطبيق رئيسي واحد فقط.</small>
                        </div>

                        <hr class="my-4">

                        <button type="submit" class="btn btn-primary">حفظ التغييرات</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            // Build Firebase JSON before form submit
            $('form').on('submit', function(e) {
                const serverKey = $('#firebase_server_key').val().trim();
                const senderId = $('#firebase_sender_id').val().trim();
                const appId = $('#firebase_app_id').val().trim();
                const packageName = $('#firebase_package_name').val().trim();
                const platform = $('#firebase_platform').val();

                // If any Firebase field is filled, validate required fields
                if (serverKey || senderId || appId || packageName) {
                    if (!serverKey) {
                        e.preventDefault();
                        alert('❌ يجب إدخال Server Key');
                        $('#firebase_server_key').focus();
                        return false;
                    }
                    if (!senderId) {
                        e.preventDefault();
                        alert('❌ يجب إدخال Sender ID');
                        $('#firebase_sender_id').focus();
                        return false;
                    }

                    // Build the JSON object
                    const firebaseConfig = {
                        server_key: serverKey,
                        sender_id: senderId
                    };

                    if (appId) firebaseConfig.app_id = appId;
                    if (packageName) firebaseConfig.package_name = packageName;
                    if (platform) firebaseConfig.platform = platform;

                    // Set the hidden field
                    $('#firebase_config').val(JSON.stringify(firebaseConfig));
                } else {
                    // Clear Firebase config if all fields are empty
                    $('#firebase_config').val('');
                }

                return true;
            });
        });
    </script>
@endsection