<?php defined('BASEPATH') or exit('No direct script access allowed'); 
$is_active = function ($segment) {
    $uri = uri_string();
    if ($segment === 'home') {
        return $uri === 'clients' || $uri === 'clients/';
    }
    return strpos($uri, $segment) !== false;
};

?>

<?php
$paid_invoices = [];
$pending_invoices = [];

$format_money_niu = function ($amount, $currency) {
    $currency = $currency ?: '';
    return trim($currency . ' ' . number_format((float) $amount, 2));
};

$get_status_niu = function ($status) {
    if ((int) $status === 2) {
        return '<span class="label label-success">Completado</span>';
    }

    if ((int) $status === 3) {
        return '<span class="label label-warning">Pagada parcialmente</span>';
    }

    if ((int) $status === 4) {
        return '<span class="label label-danger">Vencido</span>';
    }

    if ((int) $status === 5) {
        return '<span class="label label-default">Cancelado</span>';
    }

    return '<span class="label label-danger">Pago pendiente</span>';
};

foreach ($invoices as $invoice) {
    if ((int) $invoice['status'] === 2) {
        $paid_invoices[] = $invoice;
    } elseif ((int) $invoice['status'] !== 5) {
        $pending_invoices[] = $invoice;
    }
}
?>

<style>
.niu-payments-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.niu-page-title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    margin: 10px 0 35px;
    color: #1f2937;
}

.niu-section-title {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    margin: 40px 0 25px;
    color: #1f2937;
}

.niu-table {
    width: 100%;
    background: #fff;
    border-collapse: collapse;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .06);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 35px;
}

.niu-table thead tr {
    background: #f7f7f7;
}

.niu-table th,
.niu-table td {
    padding: 18px 20px;
    font-size: 15px;
    color: #4b5563;
    vertical-align: middle;
}

.niu-table th {
    font-weight: 800;
    color: #4b5563;
}

.niu-table tbody tr {
    border-bottom: 1px solid #f1f1f1;
}

.niu-table tbody tr:last-child {
    border-bottom: none;
}

.niu-btn {
    display: inline-block;
    border-radius: 22px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
    border: none;
}

.niu-btn-view {
    background: #f0f0f0;
    color: #222 !important;
}

.niu-btn-pay {
    background: #00734b;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(0, 115, 75, .25);
}

.niu-empty {
    text-align: center;
    padding: 25px;
    color: #6b7280;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .06);
}

@media(max-width: 768px) {
    .niu-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .niu-page-title {
        font-size: 24px;
    }

    .niu-section-title {
        font-size: 21px;
    }
}

.niu-portal-layout {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 38px;
    align-items: start;
}
.niu-sidebar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .07);
    overflow: hidden;
    margin-top: 18px;
}
.niu-sidebar a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 18px;
    color: #2b2b2b !important;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none !important;
    border-bottom: 1px solid #f2f2f2;
}
.niu-sidebar a:last-child { border-bottom: none; }
.niu-sidebar a i { color: #c9c9c9; font-size: 16px; }
.niu-sidebar a.active,
.niu-sidebar a:hover { background: #2b2b2b; color: #fff !important; }
.niu-sidebar a.active i,
.niu-sidebar a:hover i { color: #fff; }
.niu-main { min-width: 0; }

/* =========================
   NIU RESPONSIVE MOBILE FIX
========================= */
.niu-mobile-menu-btn {
    display: none;
    width: 100%;
    border: 0;
    background: #1028B5;
    color: #fff;
    padding: 14px 18px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 16px;
    text-align: left;
}
.niu-mobile-menu-btn i { float: right; margin-top: 3px; }
.niu-sidebar-mobile-title { display: none; }

@media(max-width: 1000px) {
    .niu-portal-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px !important;
    }
    .niu-mobile-menu-btn { display: block !important; }
    .niu-sidebar {
        display: none;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        border-radius: 14px !important;
    }
    .niu-sidebar.niu-sidebar-open { display: block !important; }
    .niu-sidebar-mobile-title {
        display: block;
        padding: 14px 18px;
        font-weight: 900;
        color: #111827;
        background: #f8fafc;
        border-bottom: 1px solid #eef2f7;
    }
    .niu-sidebar a {
        padding: 15px 18px !important;
        font-size: 14px !important;
    }
    .niu-main,
    .niu-dashboard,
    .niu-profile-wrapper,
    .niu-documents-wrapper,
    .niu-payments-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .niu-card,
    .niu-panel {
        padding: 20px !important;
        border-radius: 14px !important;
    }
    .niu-page-title,
    .niu-welcome h2 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    .niu-panel h3,
    .niu-card-title { font-size: 20px !important; }
    .niu-campus-btn,
    .niu-btn,
    .niu-pay-btn,
    .niu-btn-view,
    .niu-btn-pay {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        min-width: 0 !important;
        margin-top: 10px !important;
    }
    .niu-table,
    .niu-program-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .niu-table th,
    .niu-table td,
    .niu-program-table th,
    .niu-program-table td {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }
    .niu-alert {
        display: block !important;
        text-align: center !important;
    }
}
@media(max-width: 650px) {
    #content { padding-top: 18px !important; }
    #content > .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .niu-card-grid,
    .niu-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .niu-card-value { font-size: 18px !important; }
    .niu-profile-photo {
        width: 110px !important;
        height: 110px !important;
    }
}

</style>


<div class="niu-portal-layout">

    <button type="button" class="niu-mobile-menu-btn" onclick="niuToggleSidebar(this)">
        Menú del estudiante <i class="fa fa-bars"></i>
    </button>

    <aside class="niu-sidebar">
        <div class="niu-sidebar-mobile-title">Portal del Estudiante</div>

        <a href="<?= site_url('clients'); ?>" class="<?= $is_active('home') ? 'active' : ''; ?>">
            <span>Escritorio</span><i class="fa fa-home"></i>
        </a>
        <a href="<?= site_url('clients/invoices'); ?>" class="<?= $is_active('clients/invoices') ? 'active' : ''; ?>">
            <span>Pagos</span><i class="fa fa-dollar-sign"></i>
        </a>
        <a href="<?= site_url('clients/profile'); ?>" class="<?= $is_active('clients/profile') ? 'active' : ''; ?>">
            <span>Información del Estudiante</span><i class="fa fa-user"></i>
        </a>
        <a href="<?= site_url('clients/files'); ?>" class="<?= $is_active('clients/files') ? 'active' : ''; ?>">
            <span>Documentos</span><i class="fa fa-file-text"></i>
        </a>
        <a href="<?= site_url('clients/tickets'); ?>" class="<?= $is_active('clients/tickets') ? 'active' : ''; ?>">
            <span>Ticket de soporte</span><i class="fa fa-paperclip"></i>
        </a>
        <a href="<?= site_url('clients/profile'); ?>">
            <span>Detalles de la cuenta</span><i class="fa fa-user-circle"></i>
        </a>
        <a href="#">
            <span>Calificaciones</span><i class="fa fa-table"></i>
        </a>
        <a href="<?= site_url('authentication/logout'); ?>">
            <span>Salir</span><i class="fa fa-sign-out-alt"></i>
        </a>
    </aside>

    <main class="niu-main">

<div class="niu-payments-wrapper">

    <h2 class="niu-page-title">Pagos</h2>

    <table class="niu-table">
        <thead>
            <tr>
                <th>Pago #</th>
                <th>Fecha</th>
                <th>Estado</th>
                <th>Total</th>
                <th class="text-center">Acciones</th>
            </tr>
        </thead>
        <tbody>
            <?php if (count($paid_invoices) > 0) { ?>
                <?php foreach ($paid_invoices as $invoice) { ?>
                    <tr>
                        <td>#<?= e($invoice['id']); ?></td>
                        <td><?= e(_dt($invoice['date'])); ?></td>
                        <td><?= $get_status_niu($invoice['status']); ?></td>
                        <td><?= e($format_money_niu($invoice['total'], $invoice['currency_name'])); ?></td>
                        <td class="text-center">
                            <a href="<?= site_url('invoice/' . $invoice['id'] . '/' . $invoice['hash']); ?>"
                               class="niu-btn niu-btn-view">
                                Ver <i class="fa fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                <?php } ?>
            <?php } else { ?>
                <tr>
                    <td colspan="5" class="text-center">No hay pagos completados.</td>
                </tr>
            <?php } ?>
        </tbody>
    </table>

    <h2 class="niu-section-title">Próximas cuotas</h2>

    <table class="niu-table">
        <thead>
            <tr>
                <th>Cuota</th>
                <th>Fecha de vencimiento</th>
                <th>Total</th>
                <th>Estado</th>
                <th class="text-center">Acción</th>
            </tr>
        </thead>
        <tbody>
            <?php if (count($pending_invoices) > 0) { ?>
                <?php $cuota = 1; ?>
                <?php foreach ($pending_invoices as $invoice) { ?>
                    <tr>
                        <td>#<?= e($cuota); ?></td>
                        <td><?= e(_d($invoice['duedate'])); ?></td>
                        <td><?= e($format_money_niu($invoice['total'], $invoice['currency_name'])); ?></td>
                        <td><?= $get_status_niu($invoice['status']); ?></td>
                        <td class="text-center">
                            <a href="<?= site_url('invoice/' . $invoice['id'] . '/' . $invoice['hash']); ?>"
                               class="niu-btn niu-btn-pay">
                                Pagar
                            </a>
                        </td>
                    </tr>
                    <?php $cuota++; ?>
                <?php } ?>
            <?php } else { ?>
                <tr>
                    <td colspan="5" class="text-center">No tienes cuotas pendientes.</td>
                </tr>
            <?php } ?>
        </tbody>
    </table>

</div>

    </main>
</div>

<script>
function niuToggleSidebar(btn) {
    var layout = btn.closest('.niu-portal-layout');
    if (!layout) return;
    var sidebar = layout.querySelector('.niu-sidebar');
    if (!sidebar) return;
    sidebar.classList.toggle('niu-sidebar-open');
    var icon = btn.querySelector('i');
    if (icon) {
        icon.className = sidebar.classList.contains('niu-sidebar-open') ? 'fa fa-times' : 'fa fa-bars';
    }
}
</script>