@extends('layouts.app')

@section('title', 'Mantenedor de Logo Corporativo - ERP LOGÍSTICO')
@section('header_title', 'Configuración de Logotipo Corporativo')

@section('styles')
<style>
    .logo-preview-card {
        background: #ffffff;
        border: 1px solid #ebedf3;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.02);
        padding: 30px;
        text-align: center;
        margin-bottom: 25px;
    }

    .logo-container-bg {
        background-color: #00063a; /* Dark Blue sidebar backdrop to test contrast */
        border-radius: 12px;
        padding: 40px 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 120px;
        width: 100%;
        max-width: 320px;
        margin: 15px auto;
        border: 2px dashed rgba(255, 231, 48, 0.3);
    }

    .logo-container-bg.light-bg {
        background-color: #ffffff;
        border-color: rgba(0, 13, 134, 0.15);
    }

    .logo-container-bg img {
        max-height: 70px;
        max-width: 100%;
        object-fit: contain;
    }

    .logo-info-label {
        font-size: 0.8rem;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--primary-color);
        letter-spacing: 0.5px;
    }

    .file-dropzone {
        border: 2px dashed #cbd5e1;
        border-radius: 12px;
        padding: 40px 20px;
        background-color: #f8fafc;
        transition: all 0.2s ease;
        text-align: center;
        cursor: pointer;
        position: relative;
    }

    .file-dropzone:hover {
        border-color: var(--primary-color);
        background-color: rgba(0, 13, 134, 0.02);
    }

    .file-dropzone input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .dropzone-icon {
        font-size: 2.5rem;
        color: #94a3b8;
        margin-bottom: 15px;
        transition: transform 0.2s ease;
    }

    .file-dropzone:hover .dropzone-icon {
        transform: translateY(-5px);
        color: var(--primary-color);
    }

    .contrast-toggle-btn {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        padding: 5px 12px;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 10px;
    }
</style>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-10">
        
        <div class="row g-4">
            <!-- Left Column: Current Logo Visualizer -->
            <div class="col-md-5">
                <div class="logo-preview-card">
                    <h5 class="fw-bold text-dark mb-4">Logotipo Actual del Sistema</h5>
                    
                    <div class="logo-info-label">Vista Previa</div>
                    
                    <div id="logo-preview-box" class="logo-container-bg">
                        @if ($logoUrl = \App\Models\Setting::getLogoUrl())
                            <img src="{{ $logoUrl }}" alt="Logo Corporativo">
                        @else
                            <!-- Fallback default SVG logo -->
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 50" width="100%" height="45">
                                <circle cx="28" cy="25" r="21" fill="#ffe730" stroke="#e03021" stroke-width="2.5"/>
                                <path d="M22 25 c0-3 3-5 6-5 c3 0 6 2 6 5 c0 4-3 6-6 7.5 c-3-1.5-6-3.5-6-7.5 Z" fill="#000d86"/>
                                <path d="M23 20 Q19 16, 25 17 Z" fill="#e03021"/>
                                <path d="M33 20 Q37 16, 31 17 Z" fill="#e03021"/>
                                <path d="M25 18 C25 15, 31 15, 31 18 Z" fill="#ffffff"/>
                                <text x="62" y="24" font-family="'Nunito', sans-serif" font-weight="800" font-size="15" fill="#ffffff">DOÑA</text>
                                <text x="110" y="24" font-family="'Nunito', sans-serif" font-weight="900" font-size="15" fill="#ffe730">CARNE</text>
                                <text x="62" y="38" font-family="'Nunito', sans-serif" font-weight="700" font-size="8.5" fill="#e03021" letter-spacing="1">ERP LOGÍSTICO</text>
                            </svg>
                        @endif
                    </div>

                    <div>
                        <button type="button" id="toggle-contrast" class="btn btn-outline-secondary btn-sm contrast-toggle-btn">
                            <i class="bi bi-contrast"></i> Alternar Fondo (Oscuro / Claro)
                        </button>
                    </div>

                    <div class="mt-4 p-3 bg-light rounded-3 text-start small">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted fw-semibold">Estado:</span>
                            @if (\App\Models\Setting::getLogoUrl())
                                <span class="badge bg-success text-white">Logo Personalizado</span>
                            @else
                                <span class="badge bg-secondary text-white">Por Defecto (Doña Carne)</span>
                            @endif
                        </div>
                        <div class="text-muted">
                            Este logotipo se renderiza de manera responsive en la barra lateral del ERP, en la portada de módulos, en la página de inicio de sesión y en todo documento o reporte PDF emitido.
                        </div>
                    </div>

                    @if (\App\Models\Setting::getLogoUrl())
                        <div class="mt-4">
                            <form action="{{ route('settings.logo.delete') }}" method="POST" onsubmit="return confirm('¿Está seguro de que desea eliminar el logotipo personalizado y restaurar el logotipo por defecto del sistema?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-outline-danger w-100">
                                    <i class="bi bi-trash-fill me-2"></i> Restaurar por Defecto
                                </button>
                            </form>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Right Column: Logo Upload Form -->
            <div class="col-md-7">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0 text-dark fw-bold"><i class="bi bi-cloud-arrow-up-fill text-primary me-2"></i>Cargar Nuevo Logotipo</h5>
                    </div>
                    <div class="card-body d-flex flex-column justify-content-between">
                        
                        @if ($errors->any())
                            <div class="alert alert-danger border-0 rounded-3 mb-4 shadow-sm" role="alert">
                                <ul class="mb-0 ps-3 small fw-semibold text-danger">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form action="{{ route('settings.logo.update') }}" method="POST" enctype="multipart/form-data" id="logo-upload-form">
                            @csrf
                            
                            <div class="mb-4">
                                <p class="text-muted small mb-2">
                                    Para lograr una integración estética premium, se recomienda subir archivos vectoriales (.svg) o imágenes (.png) con fondo transparente. Evite logotipos con fondos blancos opacos a menos que sea el diseño deseado.
                                </p>
                                <div class="alert alert-warning border-0 rounded-3 mb-0 py-2.5 px-3 text-warning-emphasis bg-warning-subtle small d-flex align-items-center">
                                    <i class="bi bi-info-circle-fill fs-5 me-2.5"></i>
                                    <div>
                                        <strong>Dimensiones recomendadas:</strong> 
                                        Proporción horizontal (relación de aspecto aproximada de <strong>4:1 o 3:1</strong>). Tamaño sugerido: <strong>220x50 px</strong> a <strong>400x100 px</strong> para asegurar legibilidad en el panel y en reportes imprimibles.
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <div class="file-dropzone" id="dropzone">
                                    <i class="bi bi-image text-muted dropzone-icon"></i>
                                    <h6 class="fw-bold text-dark mb-1">Arrastra tu archivo aquí o haz clic para buscar</h6>
                                    <p class="text-muted small mb-0">Formatos soportados: PNG, JPG, JPEG, SVG (Máx. 2MB)</p>
                                    <input type="file" name="logo" id="logo-input" accept="image/*" required>
                                </div>
                            </div>

                            <!-- File preview metadata -->
                            <div id="file-info" class="alert alert-info border-0 rounded-3 mb-4 d-none">
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-check-circle-fill fs-5 text-info me-3"></i>
                                    <div class="small">
                                        <strong>Archivo seleccionado:</strong> <span id="file-name">ninguno</span><br>
                                        <strong>Tamaño:</strong> <span id="file-size">0 KB</span>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end gap-3 mt-4">
                                <a href="{{ route('desktop') }}" class="btn btn-light border px-4">Cancelar</a>
                                <button type="submit" class="btn btn-primary px-5 fw-semibold">
                                    <i class="bi bi-check-lg me-2"></i> Guardar Logotipo
                                </button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const toggleBtn = document.getElementById('toggle-contrast');
        const previewBox = document.getElementById('logo-preview-box');
        const fileInput = document.getElementById('logo-input');
        const fileInfo = document.getElementById('file-info');
        const fileName = document.getElementById('file-name');
        const fileSize = document.getElementById('file-size');

        // Toggle background contrast of the preview area
        toggleBtn.addEventListener('click', function () {
            previewBox.classList.toggle('light-bg');
        });

        // Show metadata when a file is selected
        fileInput.addEventListener('change', function () {
            if (fileInput.files && fileInput.files[0]) {
                const file = fileInput.files[0];
                fileName.textContent = file.name;
                
                // Format size
                const sizeInKb = (file.size / 1024).toFixed(1);
                if (sizeInKb > 1024) {
                    fileSize.textContent = (sizeInKb / 1024).toFixed(1) + ' MB';
                } else {
                    fileSize.textContent = sizeInKb + ' KB';
                }
                
                fileInfo.classList.remove('d-none');
            } else {
                fileInfo.classList.add('d-none');
            }
        });
    });
</script>
@endsection