@extends('layouts.app')

@section('title', 'Vista Previa 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>
                            Vista Previa APP Móvil
                        </h3>
                        <div>
                            <a href="{{ route('configuracion.app.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i>
                                Volver a Configuración
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Simulador de APP Móvil -->
                    <div class="row justify-content-center">
                        <div class="col-md-4">
                            <div class="mobile-simulator">
                                <div class="mobile-frame">
                                    <!-- Status Bar -->
                                    <div class="status-bar" style="background: {{ $appConfigs['primary_color'] }}">
                                        <div class="status-left">
                                            <span class="time">9:41</span>
                                        </div>
                                        <div class="status-right">
                                            <i class="fas fa-signal"></i>
                                            <i class="fas fa-wifi"></i>
                                            <i class="fas fa-battery-three-quarters"></i>
                                        </div>
                                    </div>

                                    <!-- App Header -->
                                    <div class="app-header" style="background: linear-gradient(135deg, {{ $appConfigs['primary_color'] }} 0%, {{ $appConfigs['secondary_color'] }} 100%)">
                                        <div class="app-title">
                                            <h1 style="color: {{ $appConfigs['text_color'] }}">{{ $appConfigs['app_name'] }}</h1>
                                            <p style="color: {{ $appConfigs['text_color'] }}; opacity: 0.8;">v{{ $appConfigs['app_version'] }}</p>
                                        </div>
                                        @if($appConfigs['app_logo'] && $appConfigs['app_logo'] !== 'mobile/images/logo.png')
                                            <div class="app-logo">
                                                <img src="{{ asset('storage/' . $appConfigs['app_logo']) }}" alt="Logo" style="max-width: 60px; max-height: 60px;">
                                            </div>
                                        @endif
                                    </div>

                                    <!-- App Content -->
                                    <div class="app-content" style="background: {{ $appConfigs['background_color'] }}; color: {{ $appConfigs['text_color'] }}">
                                        <!-- Dashboard Cards -->
                                        <div class="dashboard-cards">
                                            <div class="card-item" style="background: linear-gradient(135deg, {{ $appConfigs['primary_color'] }} 0%, {{ $appConfigs['secondary_color'] }} 100%)">
                                                <i class="fas fa-shopping-cart"></i>
                                                <span>Ventas</span>
                                            </div>
                                            <div class="card-item" style="background: linear-gradient(135deg, {{ $appConfigs['success_color'] }} 0%, {{ $appConfigs['primary_color'] }} 100%)">
                                                <i class="fas fa-users"></i>
                                                <span>Clientes</span>
                                            </div>
                                            <div class="card-item" style="background: linear-gradient(135deg, {{ $appConfigs['warning_color'] }} 0%, {{ $appConfigs['primary_color'] }} 100%)">
                                                <i class="fas fa-box"></i>
                                                <span>Inventario</span>
                                            </div>
                                            <div class="card-item" style="background: linear-gradient(135deg, {{ $appConfigs['danger_color'] }} 0%, {{ $appConfigs['primary_color'] }} 100%)">
                                                <i class="fas fa-chart-line"></i>
                                                <span>Reportes</span>
                                            </div>
                                        </div>

                                        <!-- Quick Actions -->
                                        <div class="quick-actions">
                                            <h3>Acciones Rápidas</h3>
                                            <div class="action-buttons">
                                                <button class="btn-action" style="background: {{ $appConfigs['button_color'] }}; color: {{ $appConfigs['text_color'] }}">
                                                    <i class="fas fa-plus"></i>
                                                    Nueva Venta
                                                </button>
                                                <button class="btn-action" style="background: {{ $appConfigs['button_color'] }}; color: {{ $appConfigs['text_color'] }}">
                                                    <i class="fas fa-search"></i>
                                                    Buscar Cliente
                                                </button>
                                            </div>
                                        </div>

                                        <!-- Status Indicators -->
                                        <div class="status-indicators">
                                            <div class="status-item">
                                                <i class="fas fa-wifi" style="color: {{ $appConfigs['success_color'] }}"></i>
                                                <span>Conectado</span>
                                            </div>
                                            @if($appConfigs['enable_offline_mode'])
                                                <div class="status-item">
                                                    <i class="fas fa-download" style="color: {{ $appConfigs['warning_color'] }}"></i>
                                                    <span>Modo Offline</span>
                                                </div>
                                            @endif
                                            @if($appConfigs['enable_notifications'])
                                                <div class="status-item">
                                                    <i class="fas fa-bell" style="color: {{ $appConfigs['primary_color'] }}"></i>
                                                    <span>Notificaciones</span>
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <!-- App Footer -->
                                    <div class="app-footer" style="background: {{ $appConfigs['primary_color'] }}">
                                        <div class="nav-item active">
                                            <i class="fas fa-home"></i>
                                            <span>Inicio</span>
                                        </div>
                                        <div class="nav-item">
                                            <i class="fas fa-shopping-cart"></i>
                                            <span>Ventas</span>
                                        </div>
                                        <div class="nav-item">
                                            <i class="fas fa-users"></i>
                                            <span>Clientes</span>
                                        </div>
                                        <div class="nav-item">
                                            <i class="fas fa-cog"></i>
                                            <span>Config</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Configuración Actual -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">Configuración Actual</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h6>Información General</h6>
                                            <ul class="list-unstyled">
                                                <li><strong>Nombre:</strong> {{ $appConfigs['app_name'] }}</li>
                                                <li><strong>Versión:</strong> {{ $appConfigs['app_version'] }}</li>
                                                <li><strong>Moneda:</strong> {{ $appConfigs['currency'] }} ({{ $appConfigs['currency_symbol'] }})</li>
                                                <li><strong>Zona Horaria:</strong> {{ $appConfigs['timezone'] }}</li>
                                            </ul>
                                        </div>
                                        <div class="col-md-6">
                                            <h6>Características</h6>
                                            <ul class="list-unstyled">
                                                <li><strong>Modo Offline:</strong> {{ $appConfigs['enable_offline_mode'] ? 'Habilitado' : 'Deshabilitado' }}</li>
                                                <li><strong>Notificaciones:</strong> {{ $appConfigs['enable_notifications'] ? 'Habilitadas' : 'Deshabilitadas' }}</li>
                                                <li><strong>Ubicación:</strong> {{ $appConfigs['enable_location'] ? 'Habilitada' : 'Deshabilitada' }}</li>
                                                <li><strong>Registro:</strong> {{ $appConfigs['enable_registration'] ? 'Habilitado' : 'Deshabilitado' }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.mobile-simulator {
    max-width: 375px;
    margin: 0 auto;
    background: #000;
    border-radius: 25px;
    padding: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
}

.mobile-frame {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    height: 667px;
    display: flex;
    flex-direction: column;
}

.status-bar {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.status-right i {
    margin-left: 8px;
}

.app-header {
    padding: 20px;
    text-align: center;
    color: white;
}

.app-title h1 {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
}

.app-title p {
    margin: 5px 0 0 0;
    font-size: 14px;
}

.app-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.card-item {
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    color: white;
    font-weight: 600;
}

.card-item i {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}

.quick-actions h3 {
    margin-bottom: 15px;
    font-size: 18px;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-action {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.status-indicators {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.app-footer {
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.nav-item.active {
    opacity: 1;
}

.nav-item i {
    font-size: 18px;
    margin-bottom: 4px;
}
</style>
@endpush