@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>

<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">Mi perfil</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">

        @hasrole('Alumno')

        <div>
            <h5>Expediente</h5>


        </div>

        <livewire:documentos/>

        @endrole

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

        <hr>

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

        <hr>

        @livewire('profile.logout-other-browser-sessions-form')

    </div>
</div>

</div>

<!-- 🔥 MODAL VISOR -->

<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');
    });
});

// 🔥 abrir documento en modal
function verDocumento(url) {
    document.getElementById('visorFrame').src = url + '?t=' + new Date().getTime();

    var modal = new bootstrap.Modal(document.getElementById('visorModal'));
    modal.show();
}

// 🔥 limpiar iframe al cerrar
document.getElementById('visorModal').addEventListener('hidden.bs.modal', function () {
    document.getElementById('visorFrame').src = '';
});
</script>

<script>
function updateFileName(input, targetId) {
    const fileName = input.files[0]?.name || 'Ningún archivo seleccionado';
    document.getElementById(targetId).textContent = fileName;
}
</script>

@endsection