<header class="headerMainClass text-white py-3">
    <nav class="d-flex justify-content-between align-items-center w-100 h-100">

        {{-- Logo + Saludo --}}
        <div class="d-flex align-items-center gap-3">
            <a href="{{ route('homePage') }}" class="d-inline-block h-100">
                <img src="{{ asset('img/dailyStudyLogo.png') }}" alt="DailyStudy Logo" class="img-fluid" style="height: 50px;">
            </a>
            @php
                $user = Auth::user();
            @endphp
            <span class="fw-bold text-black hide" style="font-size: 1.4rem;">
                Hello, {{ $user->name . ' ' . $user->surname }}!
            </span>
        </div>

        {{-- Botones de acción --}}
        <div class="d-flex align-items-center gap-2">
            @if (Auth::user()->role_id == 1)
                <a href="{{route('crudUsuarios')}}" class="btn btn1 d-flex align-items-center justify-content-center btnHeader" title="My cart">Users CRUD</a>
                <a href="{{route('admin.teacher.requests')}}" class="btn btn1 d-flex align-items-center justify-content-center btnHeader" title="My cart">Teacher Requests</a>
            @endif
            <a href="{{route('myCartPage')}}" class="btn btn1 d-flex align-items-center justify-content-center btnHeader" title="My cart">
                <i class="bi bi-cart fs-6"></i>
            </a>
            <a href="{{ route('myProfilePage') }}" class="btn btn2 fw-bold btnHeader">
                <i class="fa fa-user fs-6"></i>
            </a>
        </div>
    </nav>
</header>
<!-- Botón flotante (bottom right) -->
<button id="quickNotes-button" title="Quick notes">
<i class="bi bi-journal-text fs-4"></i>
</button>
<!-- Modal de confirmación de eliminación -->
<div class="modal fade" id="deleteNoteModal" tabindex="-1" aria-labelledby="deleteNoteModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content border-0">
        <div class="modal-header bg-danger text-white">
            <h5 class="modal-title" id="deleteNoteModalLabel">¿Eliminar nota?</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
            Estás a punto de eliminar la nota:
            <span class="fw-bold d-block mt-2" id="noteToDeleteTitle"></span>
            <p class="mb-0 mt-2">¿Estás seguro de que deseas continuar?</p>
        </div>
        <div class="modal-footer d-flex justify-content-between">
            <button type="button" class="btn btn1" data-bs-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn4" id="confirmDeleteBtn">Eliminar</button>
        </div>
    </div>
</div>
</div>
<!-- Modal para ver el contenido de la nota -->
<div class="modal fade" id="viewNoteModal" tabindex="-1" aria-labelledby="viewNoteModalLabel" aria-hidden="true" data-bs-backdrop="false" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog2 modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="viewNoteModalLabel">Detalles de la Nota</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="noteContent">
            <!-- El contenido de la nota se cargará aquí -->
        </div>
    </div>
</div>
</div>

<div id="notasContainer" class="notes-sidebar shadow-lg">
<div class="notes-header p-2 text-end bg-white border-bottom sticky-top">
    <button class="btn btn4">
        <i class="fas fa-times"></i> Cerrar
    </button>

</div>
<div id="notesContent" class="p-3 overflow-auto h-100">
    <!-- Aquí se insertarán las notas -->
</div>
</div>