@extends('layout.base')
@section('title')
@section('style')
    @parent


@endsection

@section('container')

    <div class="card card-body py-3" style="border-radius: 30px;">
        <div class="row align-items-center">
            <div class="col-12">
                <div class="d-sm-flex align-items-center justify-space-between">
                    <h4 class="mb-4 mb-md-0 card-title">Mi Perfil</h4>
                    <nav aria-label="breadcrumb" class="ms-auto">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item d-flex align-items-center">
                                <a class="text-muted text-decoration-none d-flex" href="{{ route('dashboard') }}">
                                    <iconify-icon icon="solar:home-2-line-duotone" class="fs-6"></iconify-icon>
                                </a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">
                                <span class="badge fw-medium fs-2 bg-primary-subtle text-primary">
                                    Mi perfil
                                </span>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="card overflow-hidden shadow-md" style="border-radius: 40px;">
        <div class="card-body p-0">
            <img src="{{ asset('assets/images/backgrounds/fondo_citas.jpg') }}" alt="matdash-img"
                style="border-radius: 40px 40px 0 0; height:200px" width="100%">
            <div class="row align-items-center d-flex align-items-center justify-content-center">
                <div class="col-lg-4 mt-n3 order-lg-2 order-1 ">
                    <div class="mt-n5 ">
                        <div class="d-flex align-items-center justify-content-center mb-2">
                            <div class="d-flex align-items-center justify-content-center round-110">
                                <div
                                    class="border border-4 border-white d-flex align-items-center justify-content-center rounded-circle overflow-hidden round-100">
                                    <img class="pointer avatar"
                                        src="{{ session('avatar_url') ?? asset('assets/images/avatar-default.png') }}"
                                        style="width: 90px; height: 90px; max-width: 100%; max-height: 100%; object-fit: cover; border-radius:50%; border: 1px solid #000;">
                                </div>
                            </div>
                        </div>
                        <div class="text-center">
                            <h5 class="mb-10">{{ session('nombre') ?? 'Usuario' }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Columna izquierda: Datos personales + domicilio -->
        <!-- Columna izquierda: Card con tabs (Datos personales / Domicilio) -->
        <div class="col-lg-4 mb-4">
            <div class="card shadow-lg border" style="border-radius: 20px;">
                <div class="card-body">
                    <!-- Nav tabs (horizontal) -->
                    <ul class="nav nav-tabs mb-3" id="leftTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="left-datos-tab" data-bs-toggle="tab"
                                data-bs-target="#left-datos" type="button" role="tab" aria-controls="left-datos"
                                aria-selected="true">
                                Datos personales
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="left-domicilio-tab" data-bs-toggle="tab"
                                data-bs-target="#left-domicilio" type="button" role="tab"
                                aria-controls="left-domicilio" aria-selected="false">
                                Domicilio
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content" id="leftTabsContent">
                        <!-- Pestaña: Datos personales -->
                        <div class="tab-pane fade show active" id="left-datos" role="tabpanel"
                            aria-labelledby="left-datos-tab">                            
                            <hr>
                            <div class="vstack gap-3 mt-3">
                                <div class="hstack gap-3">
                                    <iconify-icon icon="solar:user-bold" width="20" height="20"></iconify-icon>
                                    <div>
                                        <small class="text-muted">Nombre</small>
                                        <div class="fw-semibold">{{ session('nombre') ?? '-' }}</div>
                                    </div>
                                </div>

                                <div class="hstack gap-3">
                                    <iconify-icon icon="ic:baseline-email" width="20" height="20"></iconify-icon>
                                    <div>
                                        <small class="text-muted">Correo</small>
                                        <div class="fw-semibold">{{ session('correo') ?? '-' }}</div>
                                    </div>
                                </div>

                                <div class="hstack gap-3">
                                    <iconify-icon icon="ic:baseline-phone" width="20" height="20"></iconify-icon>
                                    <div>
                                        <small class="text-muted">Teléfono</small>
                                        <div class="fw-semibold">{{ session('telefono') ?? '-' }}</div>
                                    </div>
                                </div>

                                <div class="hstack gap-3">
                                    <iconify-icon icon="solar:badge-check" width="20" height="20"></iconify-icon>
                                    <div>
                                        <small class="text-muted">Tipo</small>
                                        <div class="fw-semibold">{{ session('tipo_usuario') ?? '-' }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pestaña: Domicilio -->
                        <div class="tab-pane fade" id="left-domicilio" role="tabpanel" aria-labelledby="left-domicilio-tab">                            
                            <hr>
                            <div class="vstack gap-3 mt-3">
                                <div class="hstack gap-3">
                                    <iconify-icon icon="material-symbols:home" width="20"
                                        height="20"></iconify-icon>
                                    <div>
                                        <small class="text-muted">Calle / Número</small>
                                        <div class="fw-semibold">
                                            @if (session('calle'))
                                                {{ session('calle') }} {{ session('numero_exterior') ?? '' }}
                                                @if (session('numero_interior'))
                                                    <span class="text-muted">Int. {{ session('numero_interior') }}</span>
                                                @endif
                                            @else
                                                -
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="hstack gap-3">
                                    <iconify-icon icon="ri:map-pin-2-fill" width="20" height="20"></iconify-icon>
                                    <div>
                                        <small class="text-muted">Colonia</small>
                                        <div class="fw-semibold">{{ session('colonia') ?? '-' }}</div>
                                    </div>
                                </div>

                                <div class="hstack gap-3">
                                    <iconify-icon icon="uiw:map" width="20" height="20"></iconify-icon>
                                    <div>
                                        <small class="text-muted">Municipio / Estado</small>
                                        <div class="fw-semibold">
                                            {{ session('municipio') ?? '-' }} / {{ session('estado') ?? '-' }}
                                        </div>
                                    </div>
                                </div>

                                <div class="hstack gap-3">
                                    <iconify-icon icon="ic:baseline-markunread-mailbox" width="20"
                                        height="20"></iconify-icon>
                                    <div>
                                        <small class="text-muted">C.P.</small>
                                        <div class="fw-semibold">{{ session('cp') ?? '-' }}</div>
                                    </div>
                                </div>

                                <div class="hstack gap-3">
                                    <iconify-icon icon="akar-icons:globe" width="20" height="20"></iconify-icon>
                                    <div>
                                        <small class="text-muted">País</small>
                                        <div class="fw-semibold">{{ session('pais') ?? 'México' }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> {{-- tab-content --}}
                </div> {{-- card-body --}}
            </div> {{-- card --}}
        </div> {{-- col --}}


        <!-- Columna derecha: Tabs (Cambiar contraseña / Modificar domicilio) -->
        <div class="col-lg-8 mb-4">
            <div class="card shadow-lg border" style="border-radius: 20px;">
                <div class="card-body">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs mb-3" id="profileTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-pass" data-bs-toggle="tab"
                                data-bs-target="#panel-pass" type="button" role="tab" aria-controls="panel-pass"
                                aria-selected="true">
                                Cambiar contraseña
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-domicilio" data-bs-toggle="tab"
                                data-bs-target="#panel-domicilio" type="button" role="tab"
                                aria-controls="panel-domicilio" aria-selected="false">
                                Modificar domicilio
                            </button>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <!-- Panel: Cambiar contraseña -->
                        <div class="tab-pane fade show active" id="panel-pass" role="tabpanel"
                            aria-labelledby="tab-pass">
                            <form action="{{ route('actualizar_contraseña') }}" method="POST" class="row g-3">
                                @csrf
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="password" class="form-control" id="pass_actual" name="pass_actual"
                                            placeholder="Contraseña actual" required style="border-radius: 12px;">
                                        <label for="pass_actual">Contraseña actual</label>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="password" class="form-control" id="pass_nueva" name="pass_nueva"
                                            placeholder="Nueva contraseña" required style="border-radius: 12px;">
                                        <label for="pass_nueva">Nueva contraseña</label>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="password" class="form-control" id="pass_confirm"
                                            name="pass_confirm" placeholder="Confirmar nueva contraseña" required
                                            style="border-radius: 12px;">
                                        <label for="pass_confirm">Confirmar contraseña</label>
                                    </div>
                                </div>

                                <div class="col-12 text-end">
                                    <button type="submit" class="btn btn-outline-success" style="border-radius: 12px;">
                                        <iconify-icon icon="material-symbols:passkey" width="20"
                                            height="20"></iconify-icon>
                                        Cambiar Contraseña
                                    </button>
                                </div>

                                @if (Session::get('success'))
                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            iziToast.success({
                                                title: 'Éxito!',
                                                message: '{{ Session::get('success') }}',
                                                position: 'topCenter',
                                                timeout: 5000
                                            });
                                        });
                                    </script>
                                @endif

                                @if (Session::get('danger'))
                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            iziToast.error({
                                                title: 'Error!',
                                                message: '{{ Session::get('danger') }}',
                                                position: 'topCenter',
                                                timeout: 5000
                                            });
                                        });
                                    </script>
                                @endif
                            </form>
                        </div>

                        <!-- Panel: Modificar domicilio -->
                        <div class="tab-pane fade" id="panel-domicilio" role="tabpanel" aria-labelledby="tab-domicilio">
                            <form action="{{ route('actualizar.domicilio') }}" method="POST" class="row g-3">
                                @csrf

                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="calle" name="calle"
                                            value="{{ $domicilio['calle'] ?? '' }}" placeholder="Calle" required
                                            style="border-radius: 12px;">
                                        <label for="calle">Calle</label>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="numero_exterior"
                                            name="numero_exterior" value="{{ $domicilio['numero_exterior'] ?? '' }}"
                                            placeholder="No. ext." required style="border-radius: 12px;">
                                        <label for="numero_exterior">No. exterior</label>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="numero_interior"
                                            name="numero_interior" value="{{ $domicilio['numero_interior'] ?? '' }}"
                                            placeholder="No. int." style="border-radius: 12px;">
                                        <label for="numero_interior">No. interior</label>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="colonia" name="colonia"
                                            value="{{ $domicilio['colonia'] ?? '' }}" placeholder="Colonia" required
                                            style="border-radius: 12px;">
                                        <label for="colonia">Colonia</label>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="cp" name="cp"
                                            value="{{ $domicilio['cp'] ?? '' }}" placeholder="C.P." required
                                            style="border-radius: 12px;">
                                        <label for="cp">C.P.</label>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="municipio" name="municipio"
                                            value="{{ $domicilio['municipio'] ?? '' }}" placeholder="Municipio" required
                                            style="border-radius: 12px;">
                                        <label for="municipio">Municipio</label>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="estado" name="estado"
                                            value="{{ $domicilio['estado'] ?? '' }}" placeholder="Estado" required
                                            style="border-radius: 12px;">
                                        <label for="estado">Estado</label>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="pais" name="pais"
                                            value="{{ $domicilio['pais'] ?? 'México' }}" placeholder="País" required
                                            style="border-radius: 12px;">
                                        <label for="pais">País</label>
                                    </div>
                                </div>

                                <div class="col-12 text-end">
                                    <button type="submit" class="btn btn-outline-success" style="border-radius: 12px;">
                                        <iconify-icon icon="material-symbols:edit" width="20"
                                            height="20"></iconify-icon>
                                        Guardar domicilio
                                    </button>
                                </div>

                                @if (Session::get('dom_success'))
                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            iziToast.success({
                                                title: 'Éxito!',
                                                message: '{{ Session::get('dom_success') }}',
                                                position: 'topCenter',
                                                timeout: 5000
                                            });
                                        });
                                    </script>
                                @endif

                                @if (Session::get('dom_error'))
                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            iziToast.error({
                                                title: 'Error!',
                                                message: '{{ Session::get('dom_error') }}',
                                                position: 'topCenter',
                                                timeout: 5000
                                            });
                                        });
                                    </script>
                                @endif
                            </form>
                        </div>
                    </div> {{-- tab-content --}}
                </div>
            </div>
        </div>
    </div>






@endsection


@section('scripts')
    @parent

    <script>
        $(document).ready(function() {
            /*----- Avatars -----*/
            const avatars = ['/antelope.png', '/bat.png', '/bear.png', '/beaver.png', '/bison.png',
                '/buffalo.png', '/bug.png', '/hippo.png', '/frog.png', '/fox.png', '/panda.png',
                '/racoon.png', '/wolf.png', '/shark.png', '/mouse.png', '/monkey.png', '/lion.png',
                '/puma.png', '/rabbit.png', '/tiger.png', '/squirrel.png', '/penguin.png', '/horse.png',
                '/mandrill.png', '/owl.png', '/sheep.png', '/pig.png', '/hedgehog.png', '/german.png',
            ];
            let random = Math.floor(Math.random() * (0, avatars.length));

            //Si no existe el avatar se guarda
            if (localStorage.getItem('avatar')) {
                $('.avatar').attr('src', localStorage.getItem('avatar'));
            } else {
                let urlAvatar = `{{ asset('one_ui/fotos_perfil/') }}${avatars[random]}`;
                localStorage.setItem('avatar', urlAvatar);
                $('.avatar').attr('src', urlAvatar);
            }

            $('.avatar').click(() => {
                let random = Math.floor(Math.random() * (0, avatars.length));
                let urlAvatar = `{{ asset('one_ui/fotos_perfil/') }}${avatars[random]}`;
                localStorage.setItem('avatar', urlAvatar);
                $('.avatar').attr('src', urlAvatar);
            });
        });
    </script>

@endsection