<x-app-layout>
    @push('styles')
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet" />
    <style>
        :root {
            --admin-bg: #f5f7fb;
            --tab-active-bg: #ffffff;
            --text-dark: #1e293b;
            --text-muted: #64748b;
        }

        body {
            background-color: var(--admin-bg);
        }

        .ck-editor__editable {
            min-height: 200px;
        }

        /* FilePond Sleek Styling */
        .filepond--root {
            margin-bottom: 0;
            font-family: inherit;
        }

        .filepond--panel-root {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
        }

        .filepond--drop-label {
            color: #64748b;
            font-size: 0.85rem;
        }

        .filepond--label-action {
            color: #2563eb;
            font-weight: 600;
            text-decoration: none;
        }

        .filepond--credits {
            display: none !important;
        }

        /* Asset Card Styling */
        .asset-item-group {
            margin-bottom: 2rem;
        }

        .asset-preview-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100px;
        }

        .asset-preview-card img {
            max-height: 80px;
            object-fit: contain;
        }

        .form-control-sleek {
            border-radius: 50rem;
            padding: 0.6rem 1.5rem;
            border: 1px solid #e2e8f0;
            background: #ffffff;
            font-weight: 500;
        }

        .form-control-sleek:focus {
            border-color: #94a3b8;
            box-shadow: none;
        }

        .btn-save-floating {
            background: #111827;
            color: white;
            border-radius: 50rem;
            padding: 10px 30px;
            font-weight: 600;
            border: none;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }

        .btn-save-floating:hover {
            transform: translateY(-2px);
            background: #000000;
            color: white;
        }

        /* Color Picker Styling */
        .color-preview-circle {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            border: 2px solid #ffffff;
            box-shadow: 0 0 0 1px #e2e8f0;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .color-preview-circle:hover {
            transform: scale(1.05);
            box-shadow: 0 0 0 1px #cbd5e1, 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .input-group-text-color {
            background-color: #f8fafc !important;
            border-right: none !important;
            padding: 0 12px !important;
        }

        .color-input-field {
            border-left: none !important;
            text-transform: uppercase;
            font-family: 'Monaco', 'Consolas', monospace;
            letter-spacing: 0.5px;
        }

        /* Sticky Bottom Bar */
        .sticky-bottom-bar {
            position: sticky;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-top: 1px solid #e2e8f0;
            padding: 1rem 2rem;
            margin: 0 -1.5rem -1.5rem -1.5rem;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            z-index: 10;
        }

        /* Mobile Mockup CSS */
        .mobile-mockup-container {
            width: 280px;
            height: 580px;
            position: relative;
        }

        .mobile-frame {
            width: 100%;
            height: 100%;
            background: #111827;
            border-radius: 40px;
            padding: 12px;
            position: relative;
            box-shadow: 0 50px 100px -20px rgba(0,0,0,0.25), 0 30px 60px -30px rgba(0,0,0,0.3);
            border: 4px solid #374151;
        }

        .mobile-screen {
            width: 100%;
            height: 100%;
            border-radius: 30px;
            overflow: hidden;
            position: relative;
            background: #f8fafc;
            display: flex;
            flex-direction: column;
        }

        .mobile-home-indicator {
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: rgba(0,0,0,0.2);
            border-radius: 10px;
        }

        .app-content-preview {
            flex: 1;
        }

        .mockup-app-name {
            font-size: 1.4rem;
            letter-spacing: -0.5px;
        }

        .x-small {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 700;
        }

        .fw-black {
            font-weight: 900 !important;
        }

        .op-75 {
            opacity: 0.75;
        }

        /* Terminal Styling for JSON Preview */
        .terminal-box {
            background: #0c121e !important;
            border: 1px solid #1e293b !important;
            color: #10b981 !important;
            min-height: 400px;
            display: flex;
            flex-direction: column;
            border-radius: 12px !important;
            overflow: hidden;
        }

        .terminal-header {
            background: #1e293b !important;
            border-bottom: 1px solid #334155 !important;
            padding: 10px 20px !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .window-controls .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }

        .dot.red { background: #ef4444; }
        .dot.yellow { background: #f59e0b; }
        .dot.green { background: #22c55e; }

        .terminal-content {
            padding: 20px;
            flex-grow: 1;
            overflow: hidden;
        }

        .terminal-content pre {
            font-family: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Consolas', monospace !important;
            color: #10b981 !important;
            font-size: 0.85rem;
            margin: 0;
        }
    </style>
    @endpush

    <div class="container-fluid" id="main-content">
        <div class="row gx-3 gx-lg-4">
            <div class="col-12">
                <div class="card adminuiux-card">
                    <div class="card-body p-0">
                        <!-- Header Section -->
                        <div class="p-4 pb-0">
                            <div class="row align-items-center g-3 mb-3">
                                <div class="col">
                                    <h5 class="mb-0 fw-bold text-dark">{{ __('Mobile Settings') }}</h5>
                                    <small class="text-muted">
                                        {{ __('Manage branding and feature flags with secure, real-time mobile sync.') }}
                                    </small>
                                </div>
                                <div class="col-lg-4">
                                    <div class="input-group input-group-sm bg-light rounded-pill px-3 py-1 border">
                                        <i class="bi bi-search text-muted my-auto me-2"></i>
                                        <input type="text" id="mobileSearch" class="form-control border-0 bg-transparent" placeholder="{{ __('Search mobile settings...') }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="p-4">
                            <div class="row gx-4">
                                <!-- Left Side: Settings Form -->
                                <div class="col-xl-8 col-lg-7">
                                    <form id="mobileConfigForm" action="{{ route('mobile-settings.update') }}" method="POST" enctype="multipart/form-data" 
                                        autocomplete="off" class="ajax-form" data-reset="false" data-alert="false">
                                        @csrf
                                        @method('PUT')

                                @php
                                    $groupIcons = [
                                        'branding' => 'bi-palette',
                                        'control_center' => 'bi-command',
                                        'app_updates' => 'bi-cloud-download',
                                        'features' => 'bi-stars',
                                        'security_auth' => 'bi-shield-lock',
                                        'connectivity' => 'bi-wifi',
                                        'notifications' => 'bi-bell',
                                        'support_social' => 'bi-headset',
                                        'analytics_system' => 'bi-cpu',
                                        'localization' => 'bi-translate',
                                    ];
                                @endphp
                                <!-- Nav Tabs -->
                                <div class="overflow-x-auto mb-4" style="ms-overflow-style: -ms-autohiding-scrollbar;">
                                    <ul class="nav nav-tabs border-bottom-0 flex-nowrap" id="mobileTabs" role="tablist">
                                        @foreach($settings as $group => $items)
                                            @cantab('mobile settings', $group)
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link px-3 fw-semibold text-nowrap text-capitalize @if($loop->first) active @endif"
                                                    id="{{ $group }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $group }}" type="button" role="tab" aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                                                    <i class="bi {{ $groupIcons[$group] ?? 'bi-gear' }} me-2"></i>
                                                    {{ str_replace('_', ' ', $group) }}
                                                </button>
                                            </li>
                                            @endcantab
                                        @endforeach
                                        @cantab('mobile settings', 'developer')
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link px-3 fw-semibold text-nowrap"
                                                id="developer-tab" data-bs-toggle="tab" data-bs-target="#developer" type="button" role="tab" aria-selected="false">
                                                <i class="bi bi-code-square me-2 text-primary"></i>
                                                {{ __('Developer Console') }}
                                            </button>
                                        </li>
                                        @endcantab
                                    </ul>
                                </div>


                            <div class="tab-content" id="mobileTabsContent">
                                @foreach($settings as $group => $groupSettings)
                                    @cantab('mobile settings', $group)
                                    <div class="tab-pane fade @if($loop->first) show active @endif" id="{{ $group }}" role="tabpanel">
                                        <div class="row gx-3">
                                            <div class="col-12">
                                                <div class="card-body">
                                                    <div class="d-flex align-items-center mb-4">
                                                        <div class="avatar avatar-40 rounded-circle bg-primary-subtle text-primary me-3">
                                                            <i class="bi {{ $groupIcons[$group] ?? 'bi-gear' }} fs-5"></i>
                                                        </div>
                                                        <div>
                                                            <h6 class="fw-bold mb-0 text-uppercase tracking-wider text-dark">{{ str_replace('_', ' ', $group) }} {{ __('Configuration') }}</h6>
                                                            <small class="text-muted">{{ __('Manage mobile specific ' . str_replace('_', ' ', $group) . ' settings and synchronization.') }}</small>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="row">
                                                        @foreach($groupSettings as $setting)
                                                            @if($setting->type !== 'image_path')
                                                                <div class="{{ $setting->type === 'boolean' ? 'col-md-6 col-lg-6' : 'col-12' }} mb-4">
                                                                    <label class="form-label fw-semibold">
                                                                        {{ str_replace(['lang_en_', 'lang_id_', '_'], ['', '', ' '], $setting->key) }}
                                                                        @if($setting->key === 'app_name')<span class="text-danger">*</span>@endif
                                                                    </label>

                                                                    @if($setting->type === 'boolean')
                                                                        <div class="form-check form-switch mt-1">
                                                                            <input class="form-check-input" type="checkbox" role="switch" id="{{ $setting->key }}" name="{{ $setting->key }}" value="1" @checked($setting->value === 'true' || $setting->value === '1' || $setting->value === true)>
                                                                            <label class="form-check-label small text-muted ms-2" for="{{ $setting->key }}">{{ __('Enable') }}</label>
                                                                        </div>
                                                                    @elseif(str_ends_with($setting->key, '_at'))
                                                                        <input type="datetime-local" class="form-control" name="{{ $setting->key }}" 
                                                                               value="{{ !empty($setting->value) ? date('Y-m-d\TH:i', strtotime($setting->value)) : '' }}">
                                                                    @elseif(str_contains($setting->key, 'color') || str_contains($setting->key, 'background'))
                                                                        <div class="input-group color-picker-container w-100">
                                                                            <span class="input-group-text color-preview-visual" 
                                                                                  style="background-color: {{ $setting->value ?? '#000000' }}; width: 50px; border-radius: 50rem 0 0 50rem !important; border-right: none;"></span>
                                                                            <input type="text" class="form-control color-input-field fw-bold text-center" 
                                                                                   name="{{ $setting->key }}" value="{{ $setting->value }}" 
                                                                                   placeholder="#000000" style="border-left: none; border-right: none; max-width: 110px; background: #f8fafc; font-size: 0.85rem; z-index: 2;">
                                                                            <div class="input-group-text p-0 border-start-0 flex-grow-1 position-relative" style="background: white; border-radius: 0 50rem 50rem 0 !important; overflow: hidden; min-height: 42px;">
                                                                                <input type="color" class="color-picker-sync position-absolute" 
                                                                                       value="{{ $setting->value ?? '#000000' }}"
                                                                                       title="Choose color" style="top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; border: none; padding: 0; opacity: 0; z-index: 1;">
                                                                                <div class="w-100 h-100 color-bar-visual" style="background-color: {{ $setting->value ?? '#000000' }};"></div>
                                                                            </div>
                                                                        </div>
                                                                    @elseif(str_contains($setting->key, 'message') || str_contains($setting->key, 'description') || str_contains($setting->key, 'content') || str_contains($setting->key, 'schedule'))
                                                                        <textarea class="form-control rich-editor" id="editor-{{ $setting->key }}" 
                                                                                  name="{{ $setting->key }}" 
                                                                                  placeholder="Enter {{ str_replace('_', ' ', $setting->key) }} here...">{{ $setting->value }}</textarea>
                                                                    @elseif($setting->key === 'announcement_type')
                                                                        <select class="form-select" name="{{ $setting->key }}">
                                                                            <option value="info" @selected($setting->value === 'info')>Info (Blue)</option>
                                                                            <option value="warning" @selected($setting->value === 'warning')>Warning (Yellow)</option>
                                                                            <option value="danger" @selected($setting->value === 'danger')>Danger (Red)</option>
                                                                        </select>
                                                                    @elseif($setting->key === 'environment_selector')
                                                                        <select class="form-select" name="{{ $setting->key }}">
                                                                            <option value="production" @selected($setting->value === 'production')>Production</option>
                                                                            <option value="staging" @selected($setting->value === 'staging')>Staging</option>
                                                                            <option value="development" @selected($setting->value === 'development')>Development</option>
                                                                        </select>
                                                                    @elseif($setting->key === 'biometric_auth_type')
                                                                        <select class="form-select" name="{{ $setting->key }}">
                                                                            <option value="any" @selected($setting->value === 'any')>Any (Fingerprint/Face)</option>
                                                                            <option value="biometrics" @selected($setting->value === 'biometrics')>Biometrics Only</option>
                                                                            <option value="passcode" @selected($setting->value === 'passcode')>Passcode Only</option>
                                                                        </select>
                                                                    @elseif($setting->key === 'log_level')
                                                                        <select class="form-select" name="{{ $setting->key }}">
                                                                            <option value="debug" @selected($setting->value === 'debug')>Debug</option>
                                                                            <option value="info" @selected($setting->value === 'info')>Info</option>
                                                                            <option value="warn" @selected($setting->value === 'warn')>Warning</option>
                                                                            <option value="error" @selected($setting->value === 'error')>Error</option>
                                                                        </select>
                                                                    @elseif($setting->key === 'priority_level')
                                                                        <select class="form-select" name="{{ $setting->key }}">
                                                                            <option value="high" @selected($setting->value === 'high')>High</option>
                                                                            <option value="normal" @selected($setting->value === 'normal')>Normal</option>
                                                                            <option value="low" @selected($setting->value === 'low')>Low</option>
                                                                        </select>
                                                                    @elseif($setting->key === 'default_locale')
                                                                        <select class="form-select" name="{{ $setting->key }}">
                                                                            <option value="en" @selected($setting->value === 'en')>English (EN)</option>
                                                                            <option value="id" @selected($setting->value === 'id')>Indonesian (ID)</option>
                                                                        </select>
                                                                    @elseif($setting->type === 'integer' || $setting->type === 'int')
                                                                        <input type="number" class="form-control" name="{{ $setting->key }}" value="{{ $setting->value }}" 
                                                                               placeholder="Enter {{ str_replace('_', ' ', $setting->key) }}...">
                                                                    @elseif(str_contains($setting->key, 'message') || str_contains($setting->key, 'text') || str_contains($setting->key, 'subtitle'))
                                                                        <textarea class="form-control" name="{{ $setting->key }}" rows="2" 
                                                                               placeholder="Enter {{ str_replace('_', ' ', $setting->key) }}...">{{ $setting->value }}</textarea>
                                                                    @else
                                                                        <input type="text" class="form-control" name="{{ $setting->key }}" value="{{ $setting->value }}" 
                                                                               placeholder="Enter {{ str_replace('_', ' ', $setting->key) }}...">
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        @endforeach

                                                        @foreach($groupSettings as $setting)
                                                            @if($setting->type === 'image_path')
                                                                <div class="col-12 mb-5">
                                                                    <label class="form-label fw-semibold text-capitalize">
                                                                        {{ str_replace(['_url', '_'], ['', ' '], $setting->key) }}
                                                                    </label>
                                                                    
                                                                    <div class="asset-preview-container shadow-sm mb-3" id="preview-container-{{ $setting->key }}">
                                                                        @php
                                                                            $previewUrl = $setting->value;
                                                                            if ($previewUrl && !Str::startsWith($previewUrl, ['http', 'https', 'data:'])) {
                                                                                $previewUrl = asset($previewUrl);
                                                                            }
                                                                        @endphp
                                                                        @if($previewUrl)
                                                                            <img src="{{ $previewUrl }}" id="img-preview-{{ $setting->key }}" alt="Preview" class="img-fluid rounded" style="max-height: 120px; object-fit: contain;" loading="lazy">
                                                                        @else
                                                                            <i class="bi bi-image text-muted opacity-25 fs-1" id="icon-preview-{{ $setting->key }}"></i>
                                                                        @endif
                                                                    </div>

                                                                    <input type="file" id="pond-{{ $setting->key }}" name="{{ $setting->key }}" 
                                                                        class="filepond-mobile" data-key="{{ $setting->key }}"
                                                                        accept="image/png,image/jpeg,image/webp">
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endcantab
                                @endforeach

                                <!-- Developer Console Tab Content -->
                                @cantab('mobile settings', 'developer')
                                <div class="tab-pane fade" id="developer" role="tabpanel">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center justify-content-between mb-4">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar avatar-40 rounded-circle bg-dark text-white me-3">
                                                    <i class="bi bi-code-slash fs-5"></i>
                                                </div>
                                                <div>
                                                    <h6 class="fw-bold mb-0 text-uppercase tracking-wider text-dark">{{ __('Sync Payload Preview') }}</h6>
                                                    <small class="text-muted">{{ __('Raw JSON data being synchronized to mobile clients.') }}</small>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-dark rounded-pill px-3" onclick="copyConfigJson()">
                                                <i class="bi bi-file-earmark-code me-1"></i> {{ __('Copy JSON') }}
                                            </button>
                                        </div>
                                        
                                        <div class="terminal-box shadow-lg">
                                            <div class="terminal-header">
                                                <div class="window-controls">
                                                    <span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
                                                </div>
                                                <span class="extra-small text-white-50 opacity-50 font-monospace">SYNC_PAYLOAD.JSON</span>
                                                <i class="bi bi-braces text-white-50"></i>
                                            </div>
                                            <div class="terminal-content">
                                                <pre id="json-viewer" class="scroll-custom" style="max-height: 500px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;">@json(app(\App\Services\MobileConfig\MobileConfigService::class)->all(), JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)</pre>
                                            </div>
                                        </div>
                                        
                                        <div class="alert alert-info mt-4 border-0 bg-info-subtle rounded-4">
                                            <div class="d-flex">
                                                <i class="bi bi-lightbulb-fill fs-4 me-3"></i>
                                                <div>
                                                    <h6 class="fw-bold mb-1">{{ __('Developer Tip') }}</h6>
                                                    <p class="small mb-0 opacity-75">
                                                        Use this JSON to mock responses during mobile development or to verify that all system fallbacks (like branding) are working correctly before release.
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endcantab
                                </div>
                            </div>

                            @can('manage mobile settings')
                                <div class="sticky-bottom-bar d-flex justify-content-between align-items-center">
                                    <div class="small text-muted d-none d-md-block">
                                        <i class="bi bi-shield-check me-1"></i> Changes will be synchronized to all mobile clients.
                                    </div>
                                    <button type="submit" class="btn btn-save-floating px-5">
                                        <i class="bi bi-cloud-arrow-up me-2"></i> {{ __('Save Configuration') }}
                                    </button>
                                </div>
                            @endcan
                                    </form>
                                </div>

                                <!-- Right Side: Sticky Mobile Mockup -->
                                <div class="col-xl-4 col-lg-5 d-none d-lg-block">
                                    <div class="sticky-top" style="top: 100px; z-index: 5;">
                                        <div class="text-center mb-3">
                                            <span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-2">
                                                <i class="bi bi-phone me-1"></i> {{ __('Live App Preview') }}
                                            </span>
                                        </div>
                                        
                                        <!-- iPhone Mockup Shell -->
                                        <div class="mobile-mockup-container mx-auto">
                                            <div class="mobile-frame">
                                                <div class="mobile-screen bg-light">
                                                    <!-- Status Bar -->
                                                    <div class="mobile-status-bar d-flex justify-content-between px-3 pt-2 small text-dark opacity-75">
                                                        <span class="fw-bold">9:41</span>
                                                        <div class="d-flex gap-1">
                                                            <i class="bi bi-reception-4"></i>
                                                            <i class="bi bi-wifi"></i>
                                                            <i class="bi bi-battery-full"></i>
                                                        </div>
                                                    </div>

                                                    <!-- Dynamic App Content -->
                                                    <div class="app-content-preview d-flex flex-column align-items-center justify-content-center h-100 p-4 text-center">
                                                        <div class="app-logo-preview mb-3 animate__animated animate__zoomIn">
                                                            @php
                                                                $logo = $settings['branding']->firstWhere('key', 'logo_url')->value ?? '';
                                                                if ($logo && !Str::startsWith($logo, ['http', 'https', 'data:'])) $logo = asset($logo);
                                                            @endphp
                                                            <img src="{{ $logo ?: asset('assets/img/logo-placeholder.png') }}" id="mockup-logo" style="max-height: 80px; object-fit: contain;">
                                                        </div>
                                                        <h4 class="fw-black mb-1 mockup-app-name" style="color: #1a1a1a;">{{ $settings['branding']->firstWhere('key', 'app_name')->value ?? 'biiproject' }}</h4>
                                                        <p class="text-muted small mockup-app-tagline mb-4 px-2">{{ $settings['branding']->firstWhere('key', 'app_tagline')->value ?? 'Smart Solution' }}</p>
                                                        
                                                        <div class="w-100 px-3">
                                                            <div class="btn w-100 rounded-pill mb-2 py-2 mockup-primary-bg text-white shadow-sm" style="background-color: {{ $settings['branding']->firstWhere('key', 'theme_color_primary')->value ?? '#C6F135' }}; border: none;">
                                                                {{ __('Sign In') }}
                                                            </div>
                                                            <div class="btn w-100 rounded-pill py-2 border shadow-sm bg-white small">
                                                                {{ __('Create Account') }}
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="mt-auto w-100 pt-4">
                                                            <div class="d-flex justify-content-between x-small text-muted op-75 px-2">
                                                                <span>v{{ $settings['app_updates']->firstWhere('key', 'app_version')->value ?? '2.0.0' }}</span>
                                                                <span>{{ __('Secure Connection') }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mobile-home-indicator"></div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('pages.mobile-settings.scripts')

</x-app-layout>
