@extends('layouts.app')

@section('title', 'Configuración APP Móvil')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">
                            <i class="fas fa-mobile-alt mr-2"></i>
                            Configuración APP Móvil
                        </h3>
                        <div>
                            <a href="{{ route('configuracion.app.preview') }}" class="btn btn-info mr-2">
                                <i class="fas fa-eye"></i>
                                Vista Previa
                            </a>
                            <button type="button" class="btn btn-warning" onclick="resetConfig()">
                                <i class="fas fa-undo"></i>
                                Resetear
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <form action="{{ route('configuracion.app.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="row">
                            <!-- Información Básica -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Información Básica</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="app_name">Nombre de la APP</label>
                                            <input type="text" class="form-control" id="app_name" name="app_name" 
                                                   value="{{ old('app_name', $appConfigs['app_name']) }}" required>
                                        </div>

                                        <div class="form-group">
                                            <label for="app_logo">Logo de la APP</label>
                                            <input type="file" class="form-control" id="app_logo" name="app_logo" 
                                                   accept="image/*">
                                            @if($appConfigs['app_logo'] && $appConfigs['app_logo'] !== 'mobile/images/logo.png')
                                                <div class="mt-2">
                                                    <img src="{{ asset('storage/' . $appConfigs['app_logo']) }}" alt="Logo actual" 
                                                         style="max-width: 100px; max-height: 100px;">
                                                </div>
                                            @endif
                                        </div>

                                        <div class="form-group">
                                            <label for="app_version">Versión</label>
                                            <input type="text" class="form-control" id="app_version" name="app_version" 
                                                   value="{{ old('app_version', $appConfigs['app_version']) }}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Colores -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Colores</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="primary_color">Color Primario</label>
                                                    <input type="color" class="form-control" id="primary_color" 
                                                           name="primary_color" 
                                                           value="{{ old('primary_color', $appConfigs['primary_color']) }}" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="secondary_color">Color Secundario</label>
                                                    <input type="color" class="form-control" id="secondary_color" 
                                                           name="secondary_color" 
                                                           value="{{ old('secondary_color', $appConfigs['secondary_color']) }}" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="background_color">Color de Fondo</label>
                                                    <input type="color" class="form-control" id="background_color" 
                                                           name="background_color" 
                                                           value="{{ old('background_color', $appConfigs['background_color']) }}" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="text_color">Color de Texto</label>
                                                    <input type="color" class="form-control" id="text_color" 
                                                           name="text_color" 
                                                           value="{{ old('text_color', $appConfigs['text_color']) }}" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="button_color">Color de Botones</label>
                                                    <input type="color" class="form-control" id="button_color" 
                                                           name="button_color" 
                                                           value="{{ old('button_color', $appConfigs['button_color']) }}" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="success_color">Color de Éxito</label>
                                                    <input type="color" class="form-control" id="success_color" 
                                                           name="success_color" 
                                                           value="{{ old('success_color', $appConfigs['success_color']) }}" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="warning_color">Color de Advertencia</label>
                                                    <input type="color" class="form-control" id="warning_color" 
                                                           name="warning_color" 
                                                           value="{{ old('warning_color', $appConfigs['warning_color']) }}" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="danger_color">Color de Peligro</label>
                                                    <input type="color" class="form-control" id="danger_color" 
                                                           name="danger_color" 
                                                           value="{{ old('danger_color', $appConfigs['danger_color']) }}" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <!-- Características -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Características</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="enable_offline_mode" 
                                                       name="enable_offline_mode" value="1" 
                                                       {{ old('enable_offline_mode', $appConfigs['enable_offline_mode']) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="enable_offline_mode">
                                                    Modo Offline
                                                </label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="enable_notifications" 
                                                       name="enable_notifications" value="1" 
                                                       {{ old('enable_notifications', $appConfigs['enable_notifications']) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="enable_notifications">
                                                    Notificaciones
                                                </label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="enable_location" 
                                                       name="enable_location" value="1" 
                                                       {{ old('enable_location', $appConfigs['enable_location']) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="enable_location">
                                                    Ubicación
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Límites -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Límites</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="sync_interval">Intervalo de Sincronización (segundos)</label>
                                            <input type="number" class="form-control" id="sync_interval" 
                                                   name="sync_interval" min="60" max="3600" 
                                                   value="{{ old('sync_interval', $appConfigs['sync_interval']) }}" required>
                                        </div>

                                        <div class="form-group">
                                            <label for="max_offline_orders">Máximo Pedidos Offline</label>
                                            <input type="number" class="form-control" id="max_offline_orders" 
                                                   name="max_offline_orders" min="10" max="200" 
                                                   value="{{ old('max_offline_orders', $appConfigs['max_offline_orders']) }}" required>
                                        </div>

                                        <div class="form-group">
                                            <label for="max_offline_payments">Máximo Pagos Offline</label>
                                            <input type="number" class="form-control" id="max_offline_payments" 
                                                   name="max_offline_payments" min="10" max="200" 
                                                   value="{{ old('max_offline_payments', $appConfigs['max_offline_payments']) }}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <!-- Configuración Regional -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Configuración Regional</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="timezone">Zona Horaria</label>
                                            <select class="form-control" id="timezone" name="timezone" required>
                                                <option value="America/Caracas" {{ $appConfigs['timezone'] == 'America/Caracas' ? 'selected' : '' }}>Caracas, Venezuela</option>
                                                <option value="America/Mexico_City" {{ $appConfigs['timezone'] == 'America/Mexico_City' ? 'selected' : '' }}>México</option>
                                                <option value="America/New_York" {{ $appConfigs['timezone'] == 'America/New_York' ? 'selected' : '' }}>Nueva York</option>
                                                <option value="America/Los_Angeles" {{ $appConfigs['timezone'] == 'America/Los_Angeles' ? 'selected' : '' }}>Los Ángeles</option>
                                                <option value="Europe/Madrid" {{ $appConfigs['timezone'] == 'Europe/Madrid' ? 'selected' : '' }}>Madrid</option>
                                                <option value="UTC" {{ $appConfigs['timezone'] == 'UTC' ? 'selected' : '' }}>UTC</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="date_format">Formato de Fecha</label>
                                            <select class="form-control" id="date_format" name="date_format" required>
                                                <option value="d/m/Y" {{ $appConfigs['date_format'] == 'd/m/Y' ? 'selected' : '' }}>dd/mm/yyyy</option>
                                                <option value="m/d/Y" {{ $appConfigs['date_format'] == 'm/d/Y' ? 'selected' : '' }}>mm/dd/yyyy</option>
                                                <option value="Y-m-d" {{ $appConfigs['date_format'] == 'Y-m-d' ? 'selected' : '' }}>yyyy-mm-dd</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="time_format">Formato de Hora</label>
                                            <select class="form-control" id="time_format" name="time_format" required>
                                                <option value="H:i:s" {{ $appConfigs['time_format'] == 'H:i:s' ? 'selected' : '' }}>24 horas (HH:mm:ss)</option>
                                                <option value="h:i:s A" {{ $appConfigs['time_format'] == 'h:i:s A' ? 'selected' : '' }}>12 horas (hh:mm:ss AM/PM)</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="currency">Moneda</label>
                                            <select class="form-control" id="currency" name="currency" required>
                                                <option value="VES" {{ $appConfigs['currency'] == 'VES' ? 'selected' : '' }}>VES - Bolívar Soberano (Venezuela)</option>
                                                <option value="USD" {{ $appConfigs['currency'] == 'USD' ? 'selected' : '' }}>USD - Dólar Americano</option>
                                                <option value="EUR" {{ $appConfigs['currency'] == 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                                                <option value="MXN" {{ $appConfigs['currency'] == 'MXN' ? 'selected' : '' }}>MXN - Peso Mexicano</option>
                                                <option value="COP" {{ $appConfigs['currency'] == 'COP' ? 'selected' : '' }}>COP - Peso Colombiano</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="currency_symbol">Símbolo de Moneda</label>
                                            <input type="text" class="form-control" id="currency_symbol" name="currency_symbol" 
                                                   value="{{ old('currency_symbol', $appConfigs['currency_symbol']) }}" required>
                                        </div>

                                        <div class="form-group">
                                            <label for="decimal_places">Decimales</label>
                                            <input type="number" class="form-control" id="decimal_places" 
                                                   name="decimal_places" min="0" max="4" 
                                                   value="{{ old('decimal_places', $appConfigs['decimal_places']) }}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Configuración del Sistema -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Configuración del Sistema</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="items_per_page">Elementos por Página</label>
                                            <input type="number" class="form-control" id="items_per_page" 
                                                   name="items_per_page" min="5" max="100" 
                                                   value="{{ old('items_per_page', $appConfigs['items_per_page']) }}" required>
                                        </div>

                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="enable_registration" 
                                                       name="enable_registration" value="1" 
                                                       {{ old('enable_registration', $appConfigs['enable_registration']) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="enable_registration">
                                                    Habilitar Registro de Usuarios
                                                </label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="maintenance_mode" 
                                                       name="maintenance_mode" value="1" 
                                                       {{ old('maintenance_mode', $appConfigs['maintenance_mode']) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="maintenance_mode">
                                                    Modo Mantenimiento
                                                </label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="maintenance_message">Mensaje de Mantenimiento</label>
                                            <textarea class="form-control" id="maintenance_message" name="maintenance_message" 
                                                      rows="3">{{ old('maintenance_message', $appConfigs['maintenance_message']) }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i>
                                        Guardar Configuración
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function resetConfig() {
    if (confirm('¿Está seguro de resetear la configuración de la APP?')) {
        window.location.href = '{{ route("configuracion.app.reset") }}';
    }
}
</script>
@endsection