@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')

    @php
        $tickets = 1;

    @endphp
    <div class="max-w-[1180px] mx-auto">
        <div class="grid grid-cols-12">
            <div class="hidden md:block md:col-span-4 lg:col-span-3 m-10">
                @include('backend.components.sidebar-menu-perfil')
              </div>
            <div class="col-span-12 mx-4 md:col-span-8 lg:col-span-9">
                <div class="bg-white border-b-2 border-l-2 border-r-2 rounded-bl-[18px] rounded-br-[18px] min-h-96 px-6">
                    @if ($tickets > 0)
                    <div x-data="{ activeTab: 1, openModal: false, openPhoneModal: false, openEmailModal: false }" class="relative">
                        <div class="py-5">
                                <button 
                                x-on:click="activeTab = 1" 
                                x-bind:class="{
                                    'border-b-[3.3px] border-purple-200 text-purple-200': activeTab === 1,
                                    'text-grey-500': activeTab !== 1
                                }"
                                class="me-5 text-base transition-colors duration-200"
                                id="tab-1">
                                Datos Personales
                            </button>
                            <button 
                                x-on:click="activeTab = 2"
                                x-bind:class="{
                                    'border-b-[3.3px] border-purple-200 text-purple-200': activeTab === 2,
                                    'text-grey-500': activeTab !== 2
                                }"
                                class="text-base transition-colors duration-200"
                                id="tab-2">
                                Cambiar Contraseña
                            </button>
                        </div>
                        <div x-show="activeTab === 1">
                            <form action="" class="p-4" x-data="{ phoneChanged: false, emailChanged: false, phone: '{{ auth()->user()->phone }}', email: '{{ auth()->user()->email }}' }" @submit.prevent="if (phoneChanged) openPhoneModal = true; else if (emailChanged) openEmailModal = true">
                                <div class="grid grid-cols-2 gap-4 mb-4">
                                    <div>
                                        <label class="form-label">Nombres</label>
                                        <input type="text" class="form-control" placeholder="Alexander" value="{{ auth()->user()->name }}">
                                    </div>
                                    <div>
                                        <label class="form-label">Apellidos</label>
                                        <input type="text" class="form-control" placeholder="Jhonny Jones" value="{{ auth()->user()->last_name }}">
                                    </div>
                                </div>

                                <div class="grid grid-cols-2 gap-4 mb-4">
                                    <div>
                                        <label class="form-label">Tipo de documento</label>
                                        <select class="form-control">
                                            <option value="DNI" {{ auth()->user()->document_type == 'DNI' ? 'selected' : '' }}>DNI</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="form-label">Número de documento</label>
                                        <input type="text" class="form-control" placeholder="07984522" value="{{ auth()->user()->document_number }}">
                                    </div>
                                </div>

                                <div class="grid grid-cols-2 gap-4 mb-4">
                                    <div>
                                        <label class="form-label">País</label>
                                        <select id="country" name="country" class="form-control">
                                            <option value="Peru" {{ auth()->user()->country == 'Peru' ? 'selected' : '' }}>Peru</option>
                                            <!-- Add other countries as needed -->
                                        </select>
                                    </div>
                                    <div>
                                        <label class="form-label">Ciudad</label>
                                        <input type="text" class="form-control" placeholder="Lima" value="{{ auth()->user()->city }}">
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label">Correo</label>
                                    <input type="email" class="form-control" placeholder="jhonnyjones@gmail.com" x-model="email" @change="emailChanged = true">
                                </div>

                                <div class="grid grid-cols-2 gap-4 mb-4">
                                    <div class="mb-4">
                                        <label class="form-label">Prefijo</label>
                                        <select class="form-control custom-select">
                                            <option value="51" {{ auth()->user()->prefix == '51' ? 'selected' : '' }}>Perú (+51)</option>
                                            <!-- Add other prefixes as needed -->
                                        </select>
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">Teléfono</label>
                                        <input type="text" class="form-control" placeholder="912 456 789" x-model="phone" @change="phoneChanged = true">
                                    </div>
                                </div>
                                <button class="btn btn-primary">
                                    Actualizar Datos
                                </button>
                            </form>
                        </div>
                        <div x-show="activeTab === 2" x-cloak>
                        <form action="" class="p-4">
                            <div class="grid grid-cols-3 gap-4 mb-4">
                                <div class="col-span-2">
                                    <label class="form-label">Contraseña Actual</label>
                                    <input type="password" class="form-control" placeholder="********">
                                </div>
                                <div class="col-span-2">
                                    <label class="form-label">Nueva Contraseña</label>
                                    <input type="password" class="form-control" placeholder="********">
                                </div>
                                <div class="col-span-2">
                                    <label class="form-label">Confirmar Nueva Contraseña</label>
                                    <input type="password" class="form-control" placeholder="********">
                                </div>
                            </div>
                            <button class="btn btn-primary">
                                Cambiar Contraseña
                            </button>
                        </form>
                        </div>
                    </div>
                    @else
                        <h4 class="pt-10 font-bold">Mis Entradas</h4>
                        <p class="text-base mt-2 font-light">Aún no has realizado ningún pedido</p>
                        <div class="flex flex-col items-center justify-center text-center mt-10">
                            <img src="storage/icons/confirmation_number.svg" alt="" width="40px">
                            <h4 class="font-bold mt-5">Aún no tienes entradas</h4>
                            <p class="text-sm mt-2 font-light">Parece que todavía no has comprado ninguna entrada. <br /> ¿Por qué no echas un vistazo a los próximos eventos?</p>
                            <button class="btn btn-primary my-5">Explorar Eventos</button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <x-modal name="validacion-telefono-modal" x-show="openPhoneModal" x-on:click.away="openPhoneModal = false">
        <form class="p-6">
            <h2 class="text-xl font-semibold mb-4">Validación de actualización de datos</h2>
            <p class="text-sm text-grey-400 mb-4">Te hemos enviado un código de validación a tu teléfono. Introduce el código para continuar con la actualización de tu información.</p>
            
            <div class="mb-4">
                <label class="form-label">Teléfono</label>
                <input type="text" class="form-control" x-model="phone" readonly>
                <span class="text-xs text-grey-400">Hint text</span>
            </div>
            
            <div class="mb-4">
                <label class="form-label">Código de validación</label>
                <input type="text" class="form-control" placeholder="Código de validación">
                <span class="text-xs text-grey-400">Hint text</span>
            </div>

            <div class="flex justify-between items-center mb-4">
                <span class="text-xs text-grey-400">Reenviar el código en 01:30</span>
                <button type="button" class="text-purple-200">Reenviar código</button>
            </div>

            <div class="flex justify-end gap-4">
                <button type="button" class="btn btn-secondary" x-on:click="openPhoneModal = false">Cancelar</button>
                <button type="submit" class="btn btn-primary">Actualizar</button>
            </div>
        </form>
    </x-modal>

    <x-modal name="validacion-correo-modal" x-show="openEmailModal" x-on:click.away="openEmailModal = false">
        <form class="p-6">
            <h2 class="text-xl font-semibold mb-4">Validación de actualización de datos</h2>
            <p class="text-sm text-grey-400 mb-4">Te hemos enviado un código de validación a tu correo electrónico. Introduce el código para continuar con la actualización de tu información.</p>
            
            <div class="mb-4">
                <label class="form-label">Correo</label>
                <input type="email" class="form-control" x-model="email" readonly>
                <span class="text-xs text-grey-400">Hint text</span>
            </div>
            
            <div class="mb-4">
                <label class="form-label">Código de validación</label>
                <input type="text" class="form-control" placeholder="Código de validación">
                <span class="text-xs text-grey-400">Hint text</span>
            </div>

            <div class="flex justify-between items-center mb-4">
                <span class="text-xs text-grey-400">Reenviar el código en 01:30</span>
                <button type="button" class="text-purple-200">Reenviar código</button>
            </div>

            <div class="flex justify-end gap-4">
                <button type="button" class="btn btn-secondary" x-on:click="openEmailModal = false">Cancelar</button>
                <button type="submit" class="btn btn-primary">Actualizar</button>
            </div>
        </form>
    </x-modal>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const phoneModal = document.querySelector('x-modal[name="validacion-telefono-modal"]');
        const emailModal = document.querySelector('x-modal[name="validacion-correo-modal"]');
        const closeModalButton = document.getElementById('close-modal');
        const form = document.querySelector('#nominar-entrada-form');

        form.addEventListener('submit', function(event) {
            event.preventDefault();
            form.innerHTML = `
                <h2 class="text-xl font-semibold mb-4">Nominar entrada</h2>
                <p class="text-sm text-grey-400 mb-4">${ticketIdElement.textContent}</p>
                <div class="flex flex-col items-center">
                    <img src="storage/logo-morado.png" width="254" alt="Logo" class="mb-2">
                    <p class="text-lg text-purple-200 font-semibold mb-4">¡Tu entrada ha sido registrada con éxito!</p>
                    <p class="text-sm text-grey-400 mb-4 text-center">Tu entrada ya cuenta con los datos del asistente del evento. Podrás descargar la entrada nominada desde la sección “Mis entradas”.</p>
                    <div class="flex justify-end gap-4">
                        <button type="button" id="close-modal" class="btn btn-primary">Volver a mis entradas</button>
                    </div>
                </div>
            `;
            closeModalButton.addEventListener('click', function() {
                phoneModal.style.display = 'none';
                emailModal.style.display = 'none';
            });
        });
    });
    </script>
@endsection