<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<?php
/*
|--------------------------------------------------------------------------
| NIU Student Portal - Documentos
|--------------------------------------------------------------------------
| Ruta:
| /crm/application/views/themes/perfex/views/files.php
|
| Cambios:
| - Oculta el dropzone de Perfex.
| - El estudiante NO sube archivos aquí.
| - Solo visualiza documentos cargados por administración.
| - Vista tipo portal: Documento / Fecha / Estado / Acción.
|--------------------------------------------------------------------------
*/

$is_active = function ($segment) {
    $uri = uri_string();
    if ($segment === 'home') {
        return $uri === 'clients' || $uri === 'clients/';
    }
    return strpos($uri, $segment) !== false;
};

$get_file_url = function ($file) {
    $url = site_url() . 'download/file/client/';

    if (!isset($file['external'])) {
        return $url . $file['attachment_key'];
    }

    if (isset($file['external']) && !empty($file['external'])) {
        return $file['external_link'];
    }

    return '#';
};

$get_document_status = function ($file) {
    $status = $file['academic_status'] ?? '';

    if (empty($status)) {
        $status = 'Recibido';
    }

    $notes = $file['academic_notes'] ?? '';

    if (empty($notes)) {
        $notes = 'Documento cargado en el expediente.';
    }

    $class = 'niu-status-info';

    if ($status === 'Aprobado') {
        $class = 'niu-status-success';
    } elseif ($status === 'Rechazado') {
        $class = 'niu-status-danger';
    } elseif ($status === 'Observado') {
        $class = 'niu-status-warning';
    } elseif ($status === 'Pendiente') {
        $class = 'niu-status-pending';
    }

    return [
        'label' => $status,
        'class' => $class,
        'note'  => $notes,
    ];
};
?>

<style>
.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-documents-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.niu-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .07);
    border: 1px solid #eef2f7;
}

.niu-table {
    width: 100%;
    border-collapse: collapse;
}

.niu-table th {
    background: #f7f7f7;
    color: #4b5563;
    font-weight: 800;
    padding: 16px 18px;
    text-align: left;
}

.niu-table td {
    padding: 16px 18px;
    color: #4b5563;
    border-bottom: 1px solid #f1f1f1;
    vertical-align: middle;
}

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

.niu-doc-name {
    font-weight: 800;
    color: #1f2937;
}

.niu-doc-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.niu-status {
    display: inline-block;
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 800;
}

.niu-status-info {
    background: #eef2ff;
    color: #1028B5;
}

.niu-status-success {
    background: #ecfdf5;
    color: #047857;
}

.niu-status-danger {
    background: #fef2f2;
    color: #dc2626;
}

.niu-status-warning {
    background: #fff7ed;
    color: #c2410c;
}
.niu-status-pending {
    background: #f3f4f6;
    color: #4b5563;
}


.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-empty {
    text-align: center;
    color: #6b7280;
    padding: 35px;
}

.niu-help-box {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #f8fafc;
    color: #4b5563;
    text-align: center;
}

@media(max-width: 1000px) {
    .niu-portal-layout {
        grid-template-columns: 1fr;
    }
}

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

/* =========================
   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;
    }
}


.niu-upload-box {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 24px;
}

.niu-upload-title {
    font-weight: 900;
    color: #1f2937;
    margin-bottom: 8px;
}

.niu-upload-text {
    color: #6b7280;
    margin-bottom: 14px;
}

.niu-upload-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.niu-btn-delete {
    background: #fee2e2;
    color: #b91c1c !important;
    margin-top: 8px;
}

.niu-approved-lock {
    display: block;
    font-size: 12px;
    color: #047857;
    margin-top: 8px;
    font-weight: 800;
}

</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-documents-wrapper">

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

            <div class="niu-card">

                <div class="niu-upload-box">
                    <div class="niu-upload-title">Subir documento</div>
                    <div class="niu-upload-text">
                        Puede subir documentos para revisión académica. Mientras estén en estado pendiente, observado o rechazado, podrá eliminarlos y volver a cargarlos. Una vez aprobados, ya no podrán eliminarse.
                    </div>

                    <?= form_open_multipart(site_url('clients/upload_student_document')); ?>
                        <div class="niu-upload-actions">
                            <input type="file" name="file" class="form-control" required>
                            <button type="submit" class="niu-btn niu-btn-view">
                                Subir documento
                            </button>
                        </div>
                    <?= form_close(); ?>
                </div>

                <?php if (count($files) == 0) { ?>
                    <div class="niu-empty">
                        No hay documentos cargados en su expediente.
                    </div>
                <?php } else { ?>
                    <table class="niu-table">
                        <thead>
                            <tr>
                                <th>Documento</th>
                                <th>Fecha cargado</th>
                                <th>Estado</th>
                                <th>Observación</th>
                                <th class="text-center">Acción</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($files as $file) { ?>
                                <?php
                                $attachment_url = $get_file_url($file);
                                $status = $get_document_status($file);
                                ?>
                                <tr>
                                    <td>
                                        <div class="niu-doc-name">
                                            <?= e($file['file_name']); ?>
                                        </div>
                                        <div class="niu-doc-note">
                                            Documento del expediente académico.
                                        </div>
                                    </td>

                                    <td data-order="<?= e($file['dateadded']); ?>">
                                        <?= e(_dt($file['dateadded'])); ?>
                                    </td>

                                    <td>
                                        <span class="niu-status <?= e($status['class']); ?>">
                                            <?= e($status['label']); ?>
                                        </span>
                                    </td>

                                    <td>
                                        <?= e($status['note']); ?>
                                    </td>

                                    <td class="text-center">
                                        <a href="<?= e($attachment_url); ?>"
                                            <?= isset($file['external']) && !empty($file['external']) ? 'target="_blank"' : ''; ?>
                                            class="niu-btn niu-btn-view">
                                            Ver documento
                                        </a>

                                        <?php if (($file['academic_status'] ?? '') === 'Aprobado') { ?>
                                            <span class="niu-approved-lock">
                                                <i class="fa fa-lock"></i> Aprobado
                                            </span>
                                        <?php } else { ?>
                                            <a href="<?= site_url('clients/delete_student_document/' . $file['id']); ?>"
                                               class="niu-btn niu-btn-delete"
                                               onclick="return confirm('¿Desea eliminar este documento?');">
                                                Eliminar
                                            </a>
                                        <?php } ?>
                                    </td>
                                </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                <?php } ?>

                <div class="niu-help-box">
                    Para solicitar correcciones, actualización de documentos o revisión de estado, cree un ticket de soporte.
                </div>
            </div>

        </div>
    </main>

</div>

<?php hooks()->do_action('after_customers_area_files'); ?>

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