@extends('layouts.app', ['activePage' => 'user', 'menuParent' => 'perfil', 'titlePage' => __('Perfil/Configuración de usuario')])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid">
        <div class="py-6">
            <div class="max-w-7xl mx-auto px-4 space-y-8">
                <div class="mb-2 grid grid-cols-3 items-center">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-800 mb-0">Perfil y configuración de cuenta</h1>
                        <p class="text-sm text-gray-500 mt-1">Actualiza tu información personal, medios de contacto y seguridad desde este panel.</p>
                    </div>
                    <div></div>

                    <div class="flex justify-end">
                        <a href="{{ url()->previous() }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                            <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                            </svg>
                            Volver
                        </a>
                    </div>
                </div>
                <div class="bg-white rounded-2xl shadow p-6 flex flex-col lg:flex-row items-center gap-6">
                    @php
                    $user = auth()->user();
                    @endphp
                    <div class="flex-1 w-full text-center lg:text-left">
                        <div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-center gap-2 text-center">
                            <div class="flex items-center gap-4 w-full">
                                <div class="flex-1">
                                    <div class="bg-white/80 backdrop-blur-sm px-4 py-3 rounded-lg shadow-sm border border-gray-100">
                                        <h2 class="text-2xl font-semibold text-gray-900 leading-tight">{{ $user->name }}</h2>
                                        <p class="text-sm text-gray-600 mt-1">{{ $user->email }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                            <div>
                                <div class="text-gray-500">Perfil</div>
                                <div class="font-medium text-gray-800">{{ optional($user->perfil)->nombre ?? '—' }}</div>
                            </div>
                            <div>
                                <div class="text-gray-500">Sucursal</div>
                                <div class="font-medium text-gray-800">{{ optional($user->sucursal)->nombre ?? '—' }}</div>
                            </div>
                            <div>
                                <div class="text-gray-500">Teléfono</div>
                                <div class="font-medium text-gray-800">{{ $user->telefono ?? '—' }}</div>
                            </div>
                            <div>
                                <div class="text-gray-500">Estado</div>
                                @if($user->estatus == 1)
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Activo</span>
                                @else
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">Inactivo</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <section class="lg:col-span-2 bg-white rounded-2xl shadow">
                        <header class="px-6 py-4 border-b flex items-center gap-3">
                            <i class="material-icons text-[#0A415F]">edit</i>
                            <h3 class="text-lg font-semibold">Editar información</h3>
                        </header>

                        <form class="p-6" onsubmit="event.preventDefault(); updatedInfo(1)">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nombre de usuario:</label>
                                    <input id="name" name="name" type="text" value="{{ auth()->user()->name }}"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="Nombre de usuario">
                                </div>

                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Correo:</label>
                                    <input id="email" name="email" type="email" value="{{ auth()->user()->email }}"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="Correo electrónico">
                                </div>

                                <div>
                                    <label for="nombres" class="block text-sm font-medium text-gray-700 mb-1">Nombre:</label>
                                    <input id="nombres" name="nombres" type="text" value="{{ auth()->user()->nombres ?? '' }}"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="Nombre(s)">
                                </div>

                                <div>
                                    <label for="apellidos" class="block text-sm font-medium text-gray-700 mb-1">Apellido:</label>
                                    <input id="apellidos" name="apellidos" type="text" value="{{ auth()->user()->apellidos ?? '' }}"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="Apellido(s)">
                                </div>

                                <div>
                                    <label for="telefono" class="block text-sm font-medium text-gray-700 mb-1">Teléfono:</label>
                                    <input id="telefono" name="telefono" type="text" value="{{ auth()->user()->telefono ?? '' }}"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="Teléfono">
                                </div>

                                <div>
                                    <label for="extension" class="block text-sm font-medium text-gray-700 mb-1">Extensión:</label>
                                    <input id="extension" name="extension" type="text" value="{{ auth()->user()->extension ?? '' }}"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="Extensión (opcional)">
                                </div>

                                <div>
                                    <label for="celular" class="block text-sm font-medium text-gray-700 mb-1">Celular:</label>
                                    <input id="celular" name="celular" type="text" value="{{ auth()->user()->celular ?? '' }}"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="Celular (opcional)">
                                </div>
                            </div>

                            <div class="mt-6 flex justify-end">
                                <button type="submit" id="btnGuardarMovimiento"
                                    class="flex items-center justify-center gap-2 bg-[#0A415F] hover:bg-[#083449] text-white px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 shadow-sm transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-200"
                                    title="Guardar cambios" aria-label="Guardar cambios">
                                    <i class="fas fa-save text-sm"></i>
                                    <span>Guardar cambios</span>
                                </button>
                            </div>
                        </form>
                    </section>

                    <!-- Change Password -->
                    <section class="bg-white rounded-2xl shadow">
                        <header class="px-6 py-4 border-b flex items-center gap-3">
                            <i class="material-icons text-[#0A415F]">lock</i>
                            <h3 class="text-lg font-semibold">Seguridad</h3>
                        </header>
                        <form class="p-6 space-y-4" onsubmit="event.preventDefault(); updatedInfo(2)">
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Nueva contraseña</label>
                                <input id="NuevaContraseña" name="NuevaContraseña" type="password"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    placeholder="Ingresa la nueva contraseña">
                            </div>

                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Confirmar contraseña</label>
                                <input id="ConfirmarContraseña" name="ConfirmarContraseña" type="password"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    placeholder="Repite la contraseña">
                            </div>

                            <div>
                                <button type="submit" id="restablecer"
                                    class="w-full px-4 py-2 bg-[#0A415F] hover:bg-[#083449] text-white rounded-md text-sm font-medium transition-colors duration-200">
                                    <i class="fas fa-save text-sm"></i>
                                    Actualizar contraseña
                                </button>
                            </div>
                        </form>
                    </section>

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


<!-- Tailwind modal (loading) -->
<div id="loadingSave" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40" aria-hidden="true">
    <div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-md">
        <div class="flex items-center gap-4">
            <svg class="animate-spin h-8 w-8 text-[#0A415F]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
            </svg>
            <div>
                <h4 class="text-[#0A415F] font-semibold">Guardando información</h4>
                <p class="text-sm text-gray-600">Se está guardando tu información, por favor espera.</p>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
    // Configuración AJAX
    $(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });
    });

    function showNotification(icon, from, align, type, text, mensaje) {
        $.notify({
            icon: icon,
            message: "<label class='h5 font-weight-bold'>" + text + "</label> " + mensaje
        }, {
            type: type,
            delay: 2000,
            placement: {
                from: from,
                align: align
            }
        });
    }

    function error() {
        // Mantener compatibilidad con llamadas previas (si existe el elemento)
        try {
            $('#restablecer').prop('disabled', false);
        } catch (e) {}
        Swal.fire({
            icon: 'error',
            title: 'Contraseña no válida',
            html: '<label class="text-secondary h6">La contraseña debe de tener:</label></br>' +
                '<label class="text-secondary"><span class="text-danger">1. </span>Deben de ser iguales.</label></br>' +
                '<label class="text-secondary"><span class="text-danger">2. </span>Tener por lo menos una letra.</label></br>' +
                '<label class="text-secondary"><span class="text-danger">3. </span>Tener por lo menos un número.</label></br>' +
                '<label class="text-secondary"><span class="text-danger">4. </span>Tener por lo menos un caracter especial ( * + - . _ ).</label></br>' +
                '<label class="text-secondary"><span class="text-danger">5. </span>Tener longitud mayor o igual a 8.</label>'
        });
    }

    // Mostrar/ocultar el modal de carga usando clases Tailwind
    function showLoading() {
        $('#loadingSave').removeClass('hidden');
    }

    function hideLoading() {
        $('#loadingSave').addClass('hidden');
    }

    function updatedInfo(tipo) {
        let name = $('#name').val(),
            email = $('#email').val(),
            NuevaContraseña = $('#NuevaContraseña').val(),
            ConfirmarContraseña = $('#ConfirmarContraseña').val();

        if (tipo === 1) {
            if (!name || !email) {
                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar toda la información de perfil');
                return false;
            }

            let nombres = $('#nombres').val(),
                apellidos = $('#apellidos').val(),
                telefono = $('#telefono').val(),
                extension = $('#extension').val(),
                celular = $('#celular').val(),
                rol = $('#rol').val(),
                estatus = $('#estatus').val();

            showLoading();
            $.ajax({
                    url: "{{ url('perfil/update_info') }}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        name,
                        email,
                        nombres,
                        apellidos,
                        telefono,
                        extension,
                        celular,
                        rol,
                        estatus
                    }
                })
                .done(function(resp) {
                    setTimeout(() => showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje), 1200);
                })
                .fail(function(xhr) {
                    console.log('error', xhr.responseText);
                    hideLoading();
                })
                .always(function() {
                    setTimeout(() => hideLoading(), 1200);
                });

        } else if (tipo === 2) {
            const regex = /^[0-9]*$/;
            var password = $('#NuevaContraseña').val(),
                password_confirmation = $('#ConfirmarContraseña').val(),
                longitud = password.length,
                bandera = false,
                bandera2 = false,
                bandera3 = false;

            for (var i = 0; i <= longitud - 1; i++) {
                if (regex.test(password[i])) {
                    bandera = true;
                } else {
                    if (password[i] == password[i].toUpperCase()) {
                        bandera2 = true;
                    }
                }
            }
            if (password.includes('*') || password.includes('+') || password.includes('.') || password.includes('-') || password.includes('_')) {
                bandera3 = true;
            }
            var a = tiene_letras(password);
            if (a == 0 || longitud < 8 || !bandera || !bandera2 || !bandera3 || password != password_confirmation) {
                error();
                return false;
            }

            showLoading();
            $.ajax({
                    url: "{{ url('perfil/update_pass') }}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        NuevaContraseña: NuevaContraseña,
                        ConfirmarContraseña: password_confirmation
                    }
                })
                .done(function(resp) {
                    setTimeout(() => showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje), 2000);
                })
                .fail(function() {
                    console.log('error');
                })
                .always(function() {
                    setTimeout(() => hideLoading(), 2000);
                });
        }
    }

    function tiene_letras(password) {
        var letras = "abcdefghyjklmnñopqrstuvwxyz";
        password = password.toLowerCase();
        for (i = 0; i < password.length; i++) {
            if (letras.indexOf(password.charAt(i), 0) != -1) {
                return 1;
            }
        }
        return 0;
    }
</script>
@endpush