@extends('layouts.landing')

@section('title', 'Mi perfil')

@section('content')

<style>
.custom-file-upload {
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-file-upload span {
    font-size: 13px;
}
</style>

 @hasrole('Alumno')
<div class="container-fluid">
    <div class="card shadow mb-4">

        <div class="card-header py-3">
            <div class="d-sm-flex align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Expediente</h6>

                @hasrole('Alumno')
                    <button onclick="Livewire.dispatch('documentos')"
                        class="btn btn-sm btn-success shadow-sm">
                        <i class="fas fa-file fa-sm text-white-50"></i> Expediente
                    </button>
                @endrole
            </div>
        </div>

        <div class="card-body">


            <livewire:documentos/>


        </div>
    </div>

</div>

            @endrole


<div class="container-fluid">
    <div class="card shadow mb-4">

        <div class="card-header py-3">
            <div class="d-sm-flex align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Mis Datos</h6>
            </div>
        </div>

        <div class="card-body">


            @livewire('profile.update-profile-information-form')

        </div>
    </div>

</div>


<div class="container-fluid">
    <div class="card shadow mb-4">

        <div class="card-header py-3">
            <div class="d-sm-flex align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Contraseña</h6>
            </div>
        </div>

        <div class="card-body">
            @livewire('profile.update-password-form')

        </div>
    </div>

</div>

<div class="container-fluid">
    <div class="card shadow mb-4">

        <div class="card-header py-3">
            <div class="d-sm-flex align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Sesiones activas</h6>
            </div>
        </div>

        <div class="card-body">
            @livewire('profile.logout-other-browser-sessions-form')

        </div>
    </div>

</div>

<div class="modal fade" id="visorModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title">Vista previa</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="modal-body">
            <iframe id="visorFrame" width="100%" height="600px" style="border:none;"></iframe>
        </div>

        </div>
    </div>

</div>

@endsection

@section('scripts')

<script>
    document.addEventListener('livewire:init', () => {

        Livewire.on('open-documentos-modal', () => {
            $('#exampleModal').modal('show');
        });

        Livewire.on('saved', (event) => {
            const msgs = {
                profile: { title: '¡Guardado!', text: 'Tu perfil ha sido actualizado.' },
                password: { title: '¡Contraseña actualizada!', text: 'Tu contraseña ha sido cambiada correctamente.' },
            };
            const msg = msgs[event[0]?.component] || { title: '¡Guardado!', text: 'Los cambios han sido guardados.' };
            Swal.fire({
                icon: 'success',
                title: msg.title,
                text: msg.text,
                timer: 2500,
                showConfirmButton: false,
            });
        });

        Livewire.on('loggedOut', () => {
            $('#sesionesModal').modal('hide');
            Swal.fire({
                icon: 'success',
                title: '¡Listo!',
                text: 'Se cerraron las otras sesiones correctamente.',
                timer: 2500,
                showConfirmButton: false,
            });
        });

        Livewire.on('photo-updated', () => {
            Swal.fire({
                icon: 'success',
                title: '¡Foto actualizada!',
                text: 'Tu foto de perfil ha sido actualizada.',
                timer: 2500,
                showConfirmButton: false,
            });
        });

    });


    Livewire.on('saved', () => {
    Swal.fire({
        icon: 'success',
        title: '¡Guardado!',
        text: 'Tu perfil ha sido actualizado correctamente.',
        timer: 2500,
        showConfirmButton: false,
    });
});

Livewire.on('photo-updated', () => {
    Swal.fire({
        icon: 'success',
        title: '¡Foto actualizada!',
        text: 'Tu foto de perfil ha sido actualizada.',
        timer: 2500,
        showConfirmButton: false,
    });
});
</script>
@endsection