@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')
    <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('pages.cuenta.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">
                    <div class="relative" id="tabs-container">
                        <div class="py-5">
                            <button
                                class="me-5 text-base transition-colors duration-200 text-purple-200 border-b-[3.3px] border-purple-200 font-semibold cursor-pointer pb-2 tab-button"
                                data-tab="1">
                                Datos Personales
                            </button>
                            <button
                                class="text-base transition-colors duration-200 text-grey-500 cursor-pointer pb-2 tab-button"
                                data-tab="2">
                                Cambiar Contraseña
                            </button>
                        </div>
                        <div class="block tab-content" data-tab="1">
                            <datos-personales :user="{{ auth()->user() }}" />
                        </div>
                        <div class="hidden tab-content" data-tab="2">
                            <cambio-clave />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <x-modal name="validacion-telefono-modal" id="phone-modal">
        <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" id="phone-input" 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 close-modal">Cancelar</button>
                <button type="submit" class="btn btn-primary">Actualizar</button>
            </div>
        </form>
    </x-modal>

    <x-modal name="validacion-correo-modal" id="email-modal">
        <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" id="email-input" 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 close-modal">Cancelar</button>
                <button type="submit" class="btn btn-primary">Actualizar</button>
            </div>
        </form>
    </x-modal>

    <script>
        class TabManager {
            constructor() {
                this.tabButtons = document.querySelectorAll('.tab-button');
                this.tabContents = document.querySelectorAll('.tab-content');
                this.init();
            }

            init() {
                if (this.tabButtons.length > 0) {
                    this.tabButtons.forEach(button => {
                        button.addEventListener('click', () => this.switchTab(button));
                    });
                    this.switchTab(this.tabButtons[0]);
                }
            }

            switchTab(selectedButton) {
                const tabId = selectedButton.dataset.tab;

                this.tabButtons.forEach(button => {
                    button.classList.remove('text-purple-200', 'border-b-[3.3px]', 'border-purple-200',
                        'font-semibold');
                    button.classList.add('text-grey-500');
                });

                this.tabContents.forEach(content => {
                    content.classList.remove('block');
                    content.classList.add('hidden');
                });

                selectedButton.classList.add('text-purple-200', 'border-b-[3.3px]', 'border-purple-200',
                    'font-semibold');
                selectedButton.classList.remove('text-grey-500');

                const activeContent = document.querySelector(`.tab-content[data-tab="${tabId}"]`);
                if (activeContent) {
                    activeContent.classList.remove('hidden');
                    activeContent.classList.add('block');
                }
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            const tabManager = new TabManager();
        });
    </script>

@endsection