@extends('landing.layout.app')

@section('content')
    <main class="flex-grow max-w-7xl mx-auto w-full px-6 py-xl">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
            <!-- Left Side: Context & Branding -->
            <div class="lg:col-span-5 flex flex-col justify-center space-y-md">
                <div class="space-y-sm">
                    <span class="font-label-md text-secondary tracking-widest uppercase">Atención al Alumno</span>
                    <h1 class="font-display-xl text-primary leading-tight">Buzón de Quejas y Sugerencias</h1>
                    <p class="font-body-lg text-on-surface-variant max-w-md">
                        Tu opinión es fundamental para mantener el estándar de excelencia académica que nos define.
                        Utiliza este medio formal para hacernos llegar tus comentarios de manera segura.
                    </p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-sm">
                    <div class="p-md border border-outline-variant bg-white flex flex-col gap-xs">
                        <span class="material-symbols-outlined text-secondary"
                            style="font-variation-settings: 'FILL' 1;">security</span>
                        <h3 class="font-headline-sm text-primary">Privacidad</h3>
                        <p class="font-body-sm text-on-surface-variant">
                            Tus datos están protegidos bajo nuestras políticas de confidencialidad institucional.
                        </p>
                    </div>
                    <div class="p-md border border-outline-variant bg-white flex flex-col gap-xs">
                        <span class="material-symbols-outlined text-secondary"
                            style="font-variation-settings: 'FILL' 1;">history_edu</span>
                        <h3 class="font-headline-sm text-primary">Seguimiento</h3>
                        <p class="font-body-sm text-on-surface-variant">
                            Recibirás un folio de seguimiento para consultar el estatus de tu petición.
                        </p>
                    </div>
                </div>

                <div class="relative w-full h-64 overflow-hidden rounded-xl border border-outline-variant">
                    <img class="w-full h-full object-cover"
                        data-alt="A clean, sun-drenched modern university campus hallway with high ceilings and minimalist architecture. Large windows illuminate the corridor with soft, natural light, highlighting the prestigious and stable academic environment. The scene is quiet and professional, reflecting the institution's commitment to quality and order. Subtle shadows play on the polished floors, following a palette of deep blues and ivory whites."
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuBnqWTwyQLnd8vO9qRfPiWljAr6Vsu7ollpbkuHeuBuffVvE2oW3iQJdf6G0Z0VoBtxfvfVPuc6hHp3d8S01hw7WW2fECC7WYioXKpYTsUMPZkdM1Y0gKpug5WCulMOY_zRXUrblmCvZOLPeO6PbRsqBRzGbogW0s4R3GgMSn6skn4MeVSYHZw_ioRIPAugaU7cGsRRJeRUBf0c-vdhgcXMTUquyaLpExJbsTPRCcpQy7XGesodHbNh-c-lnHP5JDnFcj-M5pCbmN0" />
                    <div class="absolute inset-0 bg-gradient-to-t from-primary/60 to-transparent"></div>
                    <div class="absolute bottom-4 left-4 text-white">
                        <p class="font-label-sm">Campus Principal</p>
                        <p class="font-headline-sm">Excelencia Académica</p>
                    </div>
                </div>
            </div>

            <!-- Right Side: Submission Form -->
            <div class="lg:col-span-7">
                <div class="bg-white border border-outline-variant p-xl shadow-sm">
                    @if (session('success'))
                        <div class="mb-md border border-green-200 bg-green-50 px-4 py-3 text-green-800 font-body-sm">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="mb-md border border-error/30 bg-error-container px-4 py-3 text-on-error-container font-body-sm">
                            Revisa los campos marcados antes de enviar tu solicitud.
                        </div>
                    @endif

                    <form class="space-y-md" action="{{ route('complaints.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- Personal Info Row -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-md">
                            <div class="space-y-xs">
                                <label class="font-label-md text-primary" for="persona">Nombre completo (Opcional)</label>
                                <input
                                    class="w-full border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary py-3 px-4 font-body-md text-on-surface"
                                    id="persona" name="persona" placeholder="Ej: Juan Pérez" type="text"
                                    value="{{ old('persona') }}" />
                                @error('persona')
                                    <p class="font-label-sm text-error">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="space-y-xs">
                                <label class="font-label-md text-primary" for="email">Correo electrónico (Opcional)</label>
                                <input
                                    class="w-full border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary py-3 px-4 font-body-md text-on-surface"
                                    id="email" name="email" placeholder="correo@universidad.edu" type="email"
                                    value="{{ old('email') }}" />
                                @error('email')
                                    <p class="font-label-sm text-error">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Phone Row -->
                        <div class="space-y-xs">
                            <label class="font-label-md text-primary" for="telefono">Teléfono (Opcional)</label>
                            <div class="flex">
                                <span
                                    class="inline-flex items-center px-4 bg-surface-container-low border border-r-0 border-outline-variant text-on-surface-variant font-body-md">+52</span>
                                <input
                                    class="w-full border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary py-3 px-4 font-body-md text-on-surface"
                                    id="telefono" name="telefono" placeholder="0000000000" type="tel"
                                    value="{{ old('telefono') }}" />
                            </div>
                            @error('telefono')
                                <p class="font-label-sm text-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Details Row -->
                        <div class="space-y-xs">
                            <div class="flex justify-between items-center">
                                <label class="font-label-md text-primary" for="queja">Quejas/Sugerencias</label>
                                <span class="font-label-sm text-on-surface-variant italic">Obligatorio</span>
                            </div>
                            <textarea
                                class="w-full border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary py-3 px-4 font-body-md text-on-surface"
                                id="queja" name="queja" placeholder="Por favor describe detalladamente tu situación o propuesta..."
                                rows="6">{{ old('queja') }}</textarea>
                            @error('queja')
                                <p class="font-label-sm text-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- File Upload -->
                        <div class="space-y-xs">
                            <span class="font-label-md text-primary">Carga evidencias</span>
                            <label id="evidence-dropzone"
                                class="border-2 border-dashed border-outline-variant p-xl flex flex-col items-center justify-center bg-surface-container-lowest hover:bg-surface-container-low transition-colors cursor-pointer group">
                                <span class="material-symbols-outlined text-outline group-hover:text-primary mb-2"
                                    style="font-size: 48px;">cloud_upload</span>
                                <span class="font-body-md text-on-surface-variant">Click o arrastra los archivos aquí</span>
                                <span class="font-label-sm text-outline mt-1">PDF, JPG, PNG (Max. 10MB por archivo, hasta 10 archivos)</span>
                                <input id="evidence-input" class="sr-only" name="evidencias[]" type="file"
                                    accept=".pdf,.jpg,.jpeg,.png" multiple />
                            </label>
                            <p id="evidence-error" class="hidden font-label-sm text-error"></p>
                            <ul id="evidence-list" class="space-y-xs font-body-sm text-on-surface-variant"></ul>
                            @error('evidencias')
                                <p class="font-label-sm text-error">{{ $message }}</p>
                            @enderror
                            @error('evidencias.*')
                                <p class="font-label-sm text-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Consent -->
                        <div class="space-y-xs">
                            <div class="flex items-start gap-3">
                                <input class="mt-1 border-outline-variant text-primary focus:ring-primary" id="consent"
                                    name="consentimiento" type="checkbox" value="1" @checked(old('consentimiento')) />
                                <label class="font-body-sm text-on-surface-variant" for="consent">
                                    Acepto los términos de uso y el tratamiento de mis datos personales de acuerdo con el
                                    aviso de privacidad institucional.
                                </label>
                            </div>
                            @error('consentimiento')
                                <p class="font-label-sm text-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Submit Action -->
                        <div class="pt-sm border-t border-outline-variant flex justify-end">
                            <button
                                class="bg-secondary text-on-secondary-container px-xl py-4 font-label-md flex items-center gap-2 hover:opacity-90 transition-opacity active:opacity-80"
                                type="submit">
                                Enviar
                                <span class="material-symbols-outlined"
                                    style="font-variation-settings: 'FILL' 1;">send</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const dropzone = document.getElementById('evidence-dropzone');
            const input = document.getElementById('evidence-input');
            const list = document.getElementById('evidence-list');
            const error = document.getElementById('evidence-error');
            const maxFiles = 10;
            const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png'];
            const maxSize = 10 * 1024 * 1024;
            let selectedFiles = [];
            let previewUrls = [];

            const addFiles = (files) => {
                const incomingFiles = Array.from(files);
                const invalidMessages = [];

                incomingFiles.forEach((file) => {
                    if (selectedFiles.length >= maxFiles) {
                        invalidMessages.push(`Puedes cargar máximo ${maxFiles} archivos.`);
                        return;
                    }

                    if (!allowedTypes.includes(file.type)) {
                        invalidMessages.push(`${file.name}: formato no permitido.`);
                        return;
                    }

                    if (file.size > maxSize) {
                        invalidMessages.push(`${file.name}: supera 10MB.`);
                        return;
                    }

                    if (hasFile(file)) {
                        invalidMessages.push(`${file.name}: ya está agregado.`);
                        return;
                    }

                    selectedFiles.push(file);
                });

                syncInputFiles();
                renderFiles();
                renderError(invalidMessages);
            };

            const removeFile = (index) => {
                selectedFiles.splice(index, 1);
                syncInputFiles();
                renderFiles();
                renderError([]);
            };

            const hasFile = (file) => {
                return selectedFiles.some((selectedFile) => {
                    return selectedFile.name === file.name &&
                        selectedFile.size === file.size &&
                        selectedFile.lastModified === file.lastModified;
                });
            };

            const syncInputFiles = () => {
                const dataTransfer = new DataTransfer();

                selectedFiles.forEach((file) => {
                    dataTransfer.items.add(file);
                });

                input.files = dataTransfer.files;
            };

            const renderFiles = () => {
                list.innerHTML = '';

                previewUrls.forEach((url) => URL.revokeObjectURL(url));
                previewUrls = [];

                selectedFiles.forEach((file, index) => {
                    const item = document.createElement('li');
                    item.className = 'flex items-center justify-between gap-3 border border-outline-variant px-3 py-2 bg-white';

                    const fileInfo = document.createElement('div');
                    fileInfo.className = 'flex flex-1 items-center gap-3 min-w-0';

                    if (file.type.startsWith('image/')) {
                        const image = document.createElement('img');
                        const previewUrl = URL.createObjectURL(file);
                        previewUrls.push(previewUrl);
                        image.src = previewUrl;
                        image.alt = file.name;
                        image.className = 'h-12 w-12 object-cover border border-outline-variant';
                        fileInfo.appendChild(image);
                    } else {
                        const icon = document.createElement('span');
                        icon.className = 'material-symbols-outlined text-primary';
                        icon.textContent = 'picture_as_pdf';
                        fileInfo.appendChild(icon);
                    }

                    const fileText = document.createElement('span');
                    fileText.className = 'truncate';
                    fileText.textContent = `${file.name} (${formatSize(file.size)})`;
                    fileInfo.appendChild(fileText);

                    const removeButton = document.createElement('button');
                    removeButton.type = 'button';
                    removeButton.className = 'text-error font-label-sm px-3 py-2 hover:bg-error-container';
                    removeButton.textContent = 'Eliminar';
                    removeButton.addEventListener('click', () => removeFile(index));

                    item.appendChild(fileInfo);
                    item.appendChild(removeButton);
                    list.appendChild(item);
                });
            };

            const renderError = (messages) => {
                error.textContent = messages.join(' ');
                error.classList.toggle('hidden', messages.length === 0);
            };

            const formatSize = (bytes) => {
                if (bytes < 1024 * 1024) {
                    return `${Math.round(bytes / 1024)} KB`;
                }

                return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
            };

            input.addEventListener('change', () => {
                addFiles(input.files);
            });

            ['dragenter', 'dragover'].forEach((eventName) => {
                dropzone.addEventListener(eventName, (event) => {
                    event.preventDefault();
                    dropzone.classList.add('border-primary', 'bg-surface-container-low');
                });
            });

            ['dragleave', 'drop'].forEach((eventName) => {
                dropzone.addEventListener(eventName, (event) => {
                    event.preventDefault();
                    dropzone.classList.remove('border-primary', 'bg-surface-container-low');
                });
            });

            dropzone.addEventListener('drop', (event) => {
                addFiles(event.dataTransfer.files);
            });
        });
    </script>
@endsection