@extends('layouts.admin')

@section('admin-content')
<h2 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem;">Personalización de Marca</h2>
<p style="color: var(--text-muted); margin-bottom: 2rem;">Adapta el carrito de compras a cualquier sector comercial modificando los colores, el logo, el nombre y las redes sociales de tu empresa.</p>

<form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <!-- Name & Logo Card -->
    <div class="glass" style="border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;">
        <h3 style="font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-color);">Identidad de Marca</h3>
        
        <div class="form-group">
            <label for="company_name" class="form-label">Nombre del Negocio</label>
            <input type="text" id="company_name" name="company_name" value="{{ old('company_name', $settings['company_name'] ?? '') }}" required class="form-control" placeholder="Ej. Glow & Style Peluquería">
        </div>

        <div class="form-group">
            <label class="form-label">Logotipo de la Empresa</label>
            <div style="display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;">
                @if(!empty($settings['company_logo']) && Storage::disk('public')->exists($settings['company_logo']))
                    <div>
                        <span class="form-label" style="font-size: 0.8rem; margin-bottom: 0.25rem;">Logo Actual:</span>
                        <img src="{{ asset('storage/' . $settings['company_logo']) }}" alt="Logo" style="height: 80px; width: 80px; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: #fff; padding: 0.25rem; display: block;">
                    </div>
                @endif
                <div style="flex: 1; min-width: 200px;">
                    <div class="file-upload-wrapper" style="padding: 1.5rem;">
                        <svg width="24" height="24" fill="none" stroke="var(--text-muted)" stroke-width="2" viewBox="0 0 24 24" style="margin: 0 auto 0.25rem auto; display: block;"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        <span style="font-weight: 500; font-size: 0.85rem; color: var(--text-secondary);">Selecciona una nueva imagen de logo</span>
                        <input type="file" name="company_logo" class="file-upload-input" onchange="previewFile(this)">
                    </div>
                </div>
            </div>
            <div id="logo-preview-container" style="margin-top: 1rem; display: none; text-align: center;">
                <span class="form-label" style="font-size: 0.8rem;">Nuevo Logo Vista Previa:</span>
                <img id="logo-preview" src="#" alt="Nuevo logo" style="max-height: 80px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); display: inline-block; padding: 0.25rem; background: #fff;">
            </div>
        </div>

        <div class="form-group" style="margin-top: 1.5rem;">
            <label class="form-label">Favicon de la Tienda (Por defecto es una hermosa mariposa)</label>
            <div style="display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;">
                <div>
                    <span class="form-label" style="font-size: 0.8rem; margin-bottom: 0.25rem;">Favicon Actual:</span>
                    @if(!empty($settings['company_favicon']) && Storage::disk('public')->exists($settings['company_favicon']))
                        <img src="{{ asset('storage/' . $settings['company_favicon']) }}" alt="Favicon" style="height: 32px; width: 32px; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: #fff; padding: 0.15rem; display: block;">
                    @else
                        <!-- Default Butterfly SVG Favicon -->
                        <span style="display: block; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: #fff; padding: 0.15rem; width: 32px; height: 32px;">
                            <svg viewBox="0 0 64 64" style="fill: var(--primary-color); stroke: var(--primary-color); stroke-width: 1.5; width: 100%; height: 100%;">
                                <path d="M 32 40 C 22 42, 10 38, 8 28 C 6 18, 18 12, 30 22 Z"/>
                                <path d="M 32 40 C 42 42, 54 38, 56 28 C 58 18, 46 12, 34 22 Z"/>
                            </svg>
                        </span>
                    @endif
                </div>
                <div style="flex: 1; min-width: 200px;">
                    <div class="file-upload-wrapper" style="padding: 1rem 1.5rem;">
                        <svg width="20" height="20" fill="none" stroke="var(--text-muted)" stroke-width="2" viewBox="0 0 24 24" style="margin: 0 auto 0.25rem auto; display: block;"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        <span style="font-weight: 500; font-size: 0.8rem; color: var(--text-secondary);">Selecciona un nuevo favicon</span>
                        <input type="file" name="company_favicon" class="file-upload-input" onchange="previewFavicon(this)">
                    </div>
                </div>
            </div>
            <div id="favicon-preview-container" style="margin-top: 1rem; display: none; text-align: center;">
                <span class="form-label" style="font-size: 0.8rem;">Nuevo Favicon Vista Previa:</span>
                <img id="favicon-preview" src="#" alt="Nuevo favicon" style="max-height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); display: inline-block; padding: 0.15rem; background: #fff;">
            </div>
        </div>
    </div>

    <!-- Placeholders Card -->
    <div class="glass" style="border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;">
        <h3 style="font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-color);">Imágenes por Defecto (Placeholders)</h3>
        <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.5rem;">Establece las imágenes que se mostrarán por defecto cuando un producto o servicio no disponga de una foto cargada.</p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;">
            <!-- Default Product Image -->
            <div class="form-group">
                <label class="form-label">Imagen por Defecto para Productos</label>
                <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
                    <div>
                        @if(!empty($settings['default_product_image']) && Storage::disk('public')->exists($settings['default_product_image']))
                            <img src="{{ asset('storage/' . $settings['default_product_image']) }}" alt="Default Product" style="height: 60px; width: 60px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: #fff; padding: 0.15rem; display: block;">
                        @else
                            <img src="{{ asset('images/placeholder.svg') }}" alt="Default Product" style="height: 60px; width: 60px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: #fff; padding: 0.15rem; display: block;">
                        @endif
                    </div>
                    <div style="flex: 1;">
                        <div class="file-upload-wrapper" style="padding: 1rem;">
                            <svg width="18" height="18" fill="none" stroke="var(--text-muted)" stroke-width="2" viewBox="0 0 24 24" style="margin: 0 auto 0.25rem auto; display: block;"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            <span style="font-size: 0.75rem; color: var(--text-secondary);">Subir nueva imagen</span>
                            <input type="file" name="default_product_image" class="file-upload-input" onchange="previewDefaultProduct(this)">
                        </div>
                    </div>
                </div>
                <div id="default-product-preview-container" style="margin-top: 0.75rem; display: none; text-align: center;">
                    <span class="form-label" style="font-size: 0.85rem;">Vista previa:</span>
                    <img id="default-product-preview" src="#" alt="Vista previa producto" style="max-height: 60px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); display: inline-block; padding: 0.15rem; background: #fff;">
                </div>
            </div>

            <!-- Default Service Image -->
            <div class="form-group">
                <label class="form-label">Imagen por Defecto para Servicios</label>
                <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
                    <div>
                        @if(!empty($settings['default_service_image']) && Storage::disk('public')->exists($settings['default_service_image']))
                            <img src="{{ asset('storage/' . $settings['default_service_image']) }}" alt="Default Service" style="height: 60px; width: 60px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: #fff; padding: 0.15rem; display: block;">
                        @else
                            <img src="{{ asset('images/placeholder_service.svg') }}" alt="Default Service" style="height: 60px; width: 60px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: #fff; padding: 0.15rem; display: block;">
                        @endif
                    </div>
                    <div style="flex: 1;">
                        <div class="file-upload-wrapper" style="padding: 1rem;">
                            <svg width="18" height="18" fill="none" stroke="var(--text-muted)" stroke-width="2" viewBox="0 0 24 24" style="margin: 0 auto 0.25rem auto; display: block;"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            <span style="font-size: 0.75rem; color: var(--text-secondary);">Subir nueva imagen</span>
                            <input type="file" name="default_service_image" class="file-upload-input" onchange="previewDefaultService(this)">
                        </div>
                    </div>
                </div>
                <div id="default-service-preview-container" style="margin-top: 0.75rem; display: none; text-align: center;">
                    <span class="form-label" style="font-size: 0.85rem;">Vista previa:</span>
                    <img id="default-service-preview" src="#" alt="Vista previa servicio" style="max-height: 60px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); display: inline-block; padding: 0.15rem; background: #fff;">
                </div>
            </div>
        </div>
    </div>

    <!-- Style & Colors Card -->
    <div class="glass" style="border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;">
        <h3 style="font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-color);">Diseño y Colores</h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem;">
            <div class="form-group">
                <label for="primary_color" class="form-label">Color Primario</label>
                <div style="display: flex; gap: 0.5rem; align-items: center;">
                    <input type="color" id="primary_color" name="primary_color" value="{{ old('primary_color', $settings['primary_color'] ?? '#ec4899') }}" style="width: 45px; height: 45px; border: none; border-radius: 50%; cursor: pointer; padding: 0; background: transparent;">
                    <input type="text" id="primary_color_text" value="{{ old('primary_color', $settings['primary_color'] ?? '#ec4899') }}" class="form-control" style="font-family: monospace; font-size: 0.9rem;" readonly>
                </div>
            </div>

            <div class="form-group">
                <label for="secondary_color" class="form-label">Color Secundario</label>
                <div style="display: flex; gap: 0.5rem; align-items: center;">
                    <input type="color" id="secondary_color" name="secondary_color" value="{{ old('secondary_color', $settings['secondary_color'] ?? '#8b5cf6') }}" style="width: 45px; height: 45px; border: none; border-radius: 50%; cursor: pointer; padding: 0; background: transparent;">
                    <input type="text" id="secondary_color_text" value="{{ old('secondary_color', $settings['secondary_color'] ?? '#8b5cf6') }}" class="form-control" style="font-family: monospace; font-size: 0.9rem;" readonly>
                </div>
            </div>

            <div class="form-group">
                <label for="theme_mode" class="form-label">Tema del Sitio</label>
                <select id="theme_mode" name="theme_mode" class="form-control">
                    <option value="light" {{ (old('theme_mode', $settings['theme_mode'] ?? 'light') == 'light') ? 'selected' : '' }}>Modo Claro (Light)</option>
                    <option value="dark" {{ (old('theme_mode', $settings['theme_mode'] ?? 'light') == 'dark') ? 'selected' : '' }}>Modo Oscuro (Dark)</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Services Configuration Card -->
    <div class="glass" style="border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;">
        <h3 style="font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-color);">Configuración de Servicios en Inicio</h3>
        
        <div class="form-group" style="margin-bottom: 1.5rem;">
            <label class="form-label" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none;">
                <input type="checkbox" name="show_services" value="1" {{ old('show_services', $settings['show_services'] ?? '1') == '1' ? 'checked' : '' }} style="width: 20px; height: 20px; accent-color: var(--primary-color);">
                <span>Mostrar sección de servicios en la página principal</span>
            </label>
        </div>

        <div class="form-group">
            <label for="services_title" class="form-label">Título de la Sección</label>
            <input type="text" id="services_title" name="services_title" value="{{ old('services_title', $settings['services_title'] ?? 'Nuestros Servicios') }}" required class="form-control" placeholder="Ej. Nuestros Servicios / Qué Ofrecemos">
        </div>

        <div class="form-group" style="margin-bottom: 0;">
            <label for="services_subtitle" class="form-label">Subtítulo o Descripción corta</label>
            <textarea id="services_subtitle" name="services_subtitle" rows="2" class="form-control" placeholder="Ej. Conoce los tratamientos y cuidados profesionales que ofrecemos para ti.">{{ old('services_subtitle', $settings['services_subtitle'] ?? '') }}</textarea>
        </div>
    </div>

    <!-- Order Pickup Time Card -->
    <div class="glass" style="border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;">
        <h3 style="font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-color);">Gestión de Pedidos y Tiempos de Retiro</h3>
        
        <div class="form-group" style="margin-bottom: 0;">
            <label for="order_pickup_limit_hours" class="form-label">Plazo Máximo para Retiro y Pago en Tienda (Horas)</label>
            <div style="display: flex; gap: 0.5rem; align-items: center; max-width: 250px;">
                <input type="number" id="order_pickup_limit_hours" name="order_pickup_limit_hours" min="1" max="168" value="{{ old('order_pickup_limit_hours', $settings['order_pickup_limit_hours'] ?? '12') }}" required class="form-control">
                <span style="font-weight: 600; color: var(--text-secondary);">Horas</span>
            </div>
            <small style="display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.82rem;">
                Tiempo límite que tendrá el cliente para acudir a la boutique, realizar el pago y retirar su pedido antes de que el sistema considere vencido el plazo y libere los productos devueltos al inventario.
            </small>
        </div>
    </div>

    <!-- Social Media Card -->
    <div class="glass" style="border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 2rem;">
        <h3 style="font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-color);">Redes Sociales</h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem;">
            <div class="form-group">
                <label for="social_facebook" class="form-label">Enlace a Facebook</label>
                <input type="url" id="social_facebook" name="social_facebook" value="{{ old('social_facebook', $settings['social_facebook'] ?? '') }}" class="form-control" placeholder="https://facebook.com/pagina">
            </div>

            <div class="form-group">
                <label for="social_instagram" class="form-label">Enlace a Instagram</label>
                <input type="url" id="social_instagram" name="social_instagram" value="{{ old('social_instagram', $settings['social_instagram'] ?? '') }}" class="form-control" placeholder="https://instagram.com/usuario">
            </div>

            <div class="form-group">
                <label for="social_whatsapp" class="form-label">Número de WhatsApp</label>
                <input type="text" id="social_whatsapp" name="social_whatsapp" value="{{ old('social_whatsapp', $settings['social_whatsapp'] ?? '') }}" class="form-control" placeholder="Ej. +584123456789">
            </div>

            <div class="form-group">
                <label for="social_tiktok" class="form-label">Enlace a TikTok</label>
                <input type="url" id="social_tiktok" name="social_tiktok" value="{{ old('social_tiktok', $settings['social_tiktok'] ?? '') }}" class="form-control" placeholder="https://tiktok.com/@usuario">
            </div>
        </div>
    </div>

    <!-- Submit buttons -->
    <div style="display: flex; gap: 1rem;">
        <button type="submit" class="btn btn-primary">Aplicar Cambios</button>
        <a href="{{ route('admin.dashboard') }}" class="btn btn-outline">Cancelar</a>
    </div>
</form>

<script>
// Keep text boxes in sync with color picker circles
document.getElementById('primary_color').addEventListener('input', function(e) {
    document.getElementById('primary_color_text').value = e.target.value;
});
document.getElementById('secondary_color').addEventListener('input', function(e) {
    document.getElementById('secondary_color_text').value = e.target.value;
});

function previewFile(input) {
    var preview = document.getElementById('logo-preview');
    var container = document.getElementById('logo-preview-container');
    var file    = input.files[0];
    var reader  = new FileReader();

    reader.onloadend = function () {
        preview.src = reader.result;
        container.style.display = 'block';
    }

    if (file) {
        reader.readAsDataURL(file);
    } else {
        preview.src = "";
        container.style.display = 'none';
    }
}

function previewFavicon(input) {
    var preview = document.getElementById('favicon-preview');
    var container = document.getElementById('favicon-preview-container');
    var file    = input.files[0];
    var reader  = new FileReader();

    reader.onloadend = function () {
        preview.src = reader.result;
        container.style.display = 'block';
    }

    if (file) {
        reader.readAsDataURL(file);
    } else {
        preview.src = "";
        container.style.display = 'none';
    }
}

function previewDefaultProduct(input) {
    var preview = document.getElementById('default-product-preview');
    var container = document.getElementById('default-product-preview-container');
    var file    = input.files[0];
    var reader  = new FileReader();

    reader.onloadend = function () {
        preview.src = reader.result;
        container.style.display = 'block';
    }

    if (file) {
        reader.readAsDataURL(file);
    } else {
        preview.src = "";
        container.style.display = 'none';
    }
}

function previewDefaultService(input) {
    var preview = document.getElementById('default-service-preview');
    var container = document.getElementById('default-service-preview-container');
    var file    = input.files[0];
    var reader  = new FileReader();

    reader.onloadend = function () {
        preview.src = reader.result;
        container.style.display = 'block';
    }

    if (file) {
        reader.readAsDataURL(file);
    } else {
        preview.src = "";
        container.style.display = 'none';
    }
}
</script>
@endsection