<x-app-layout>
    <x-slot name="header">Panel de Tesorería</x-slot>

    <div class="card">
        <div class="card-title">Estudiantes Registrados</div>
        <table class="data-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nombre</th>
                    <th>Correo</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($estudiantes as $est)
                    <tr>
                        <td><span class="table-id">#{{ $est->id }}</span></td>
                        <td>{{ $est->name }}</td>
                        <td style="color: var(--muted); font-size:13px;">{{ $est->email }}</td>
                        <td>
                            <a href="#" class="table-btn">
                                <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
                                    <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                Registrar Pago
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="card">
        <div class="card-title">Opciones</div>
        <div class="action-grid">

            <a href="#" class="action-btn">
                <span class="action-icon icon-blue">
                    <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
                        <rect x="2" y="4" width="12" height="9" rx="1.5" stroke="currentColor" stroke-width="1.3"/>
                        <path d="M5 4V3a1 1 0 011-1h4a1 1 0 011 1v1" stroke="currentColor" stroke-width="1.3"/>
                        <path d="M5 9l2 2 4-4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </span>
                Ver Pagos Realizados
            </a>

            <a href="#" class="action-btn">
                <span class="action-icon icon-amber">
                    <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
                        <path d="M4 2h8a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V3a1 1 0 011-1z" stroke="currentColor" stroke-width="1.3"/>
                        <path d="M5 6h6M5 9h6M5 12h4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
                    </svg>
                </span>
                Generar Boleta
            </a>

            <a href="#" class="action-btn">
                <span class="action-icon icon-red">
                    <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
                        <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.3"/>
                        <path d="M8 5v3M8 10.5v.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
                    </svg>
                </span>
                Ver Deudas Pendientes
            </a>

        </div>
    </div>

</x-app-layout>