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

<?php
/*
|--------------------------------------------------------------------------
| Kaiteki Student Portal - Account / Detalles de la cuenta
|--------------------------------------------------------------------------
| Ruta:
| /crm/application/views/themes/perfex/views/account.php
|
| El estudiante NO modifica datos personales/académicos.
| Solo puede:
| - Subir/cambiar foto
| - Cambiar contraseña
|
| Programas académicos leídos desde:
| tblstudent_programs
|--------------------------------------------------------------------------
*/

$CI = &get_instance();

$client_id  = isset($contact->userid) ? (int) $contact->userid : (int) get_client_user_id();
$student_id = $contact->student_id ?? '';
$moodle_username = $contact->moodle_username ?? '';

$student_programs = [];

if ($CI->db->table_exists(db_prefix() . 'student_programs')) {
    $CI->db->where('client_id', $client_id);
    $CI->db->order_by('start_date', 'ASC');
    $student_programs = $CI->db->get(db_prefix() . 'student_programs')->result_array();
}

$profile_image_url = contact_profile_image_url($contact->id, 'thumb');

$is_active = function ($segment) {
    $uri = uri_string();

    if ($segment === 'home') {
        return $uri === 'clients' || $uri === 'clients/';
    }

    return strpos($uri, $segment) !== false;
};
?>

<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-profile-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;
    margin-bottom: 25px;
}

.niu-card-title {
    font-size: 20px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 22px;
}

.niu-profile-photo-box {
    text-align: center;
    margin-bottom: 30px;
}

.niu-profile-photo {
    width: 135px;
    height: 135px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #1028B5;
    box-shadow: 0 8px 24px rgba(16, 40, 181, .18);
    background: #f3f4f6;
}

.niu-photo-note {
    margin-top: 10px;
    color: #6b7280;
    font-size: 13px;
}

.niu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 28px;
}

.niu-field label {
    display: block;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 7px;
}

.niu-field input {
    width: 100%;
    border: 1px solid #dbe3ef;
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 14px;
    color: #111827;
    font-weight: 600;
}

.niu-readonly {
    background: #eef2ff !important;
}

.niu-note {
    text-align: center;
    color: #6b7280;
    margin: 25px 0;
}

.niu-btn {
    background: #1028B5;
    color: #fff !important;
    padding: 12px 35px;
    border-radius: 30px;
    border: none;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(16, 40, 181, .20);
}

.niu-btn-green {
    background: #00734b;
    box-shadow: 0 8px 20px rgba(0, 115, 75, .20);
}

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

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

.niu-program-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f1f1;
    color: #374151;
    vertical-align: middle;
}

.niu-program-name {
    font-weight: 800;
    color: #111827;
}

.niu-status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 800;
    font-size: 12px;
}

.niu-status-pendiente {
    background: #fff7ed;
    color: #c2410c;
}

.niu-status-completado,
.niu-status-egresado {
    background: #eef2ff;
    color: #1028B5;
}

.niu-status-suspendido,
.niu-status-retirado {
    background: #fef2f2;
    color: #dc2626;
}

.niu-empty {
    text-align: center;
    color: #6b7280;
    padding: 25px;
}

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

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

    .niu-program-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;
    }
}

</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/account'); ?>" class="<?= $is_active('clients/account') ? 'active' : ''; ?>">
            <span>Detalles de la cuenta</span><i class="fa fa-user-circle"></i>
        </a>

        <a href="<?= site_url('clients/califications'); ?>">
            <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>
        <div class="niu-profile-wrapper">

            <h2 class="niu-page-title">Detalles de la cuenta</h2>

            <div class="niu-card">

                <?= form_open_multipart('clients/profile', ['autocomplete' => 'off']); ?>
                <?= form_hidden('profile', true); ?>

                <div class="niu-profile-photo-box">
                    <img src="<?= e($profile_image_url); ?>" class="niu-profile-photo" alt="Foto del estudiante">

                    <?php if ($contact->profile_image == null) { ?>
                        <div class="niu-photo-note">Puede cargar una foto de perfil.</div>
                        <div style="max-width: 360px; margin: 15px auto 0;">
                            <input type="file" name="profile_image" class="form-control" id="profile_image">
                        </div>
                    <?php } else { ?>
                        <div class="niu-photo-note">
                            Foto de perfil actual.
                            <a href="<?= site_url('clients/remove_profile_image'); ?>" class="text-danger">
                                Eliminar foto
                            </a>
                        </div>
                    <?php } ?>

                    <input type="hidden" name="firstname" value="<?= e($contact->firstname); ?>">
                    <input type="hidden" name="lastname" value="<?= e($contact->lastname); ?>">
                    <input type="hidden" name="email" value="<?= e($contact->email); ?>">
                    <input type="hidden" name="phonenumber" value="<?= e($contact->phonenumber); ?>">

                    <br>
                    <button type="submit" class="niu-btn niu-btn-green">
                        Guardar foto
                    </button>
                </div>

                <?= form_close(); ?>

                <div class="niu-card-title">Detalles de la cuenta</div>

                <div class="niu-grid">
                    <div class="niu-field">
                        <label>Nombre</label>
                        <input type="text" value="<?= e($contact->firstname); ?>" readonly>
                    </div>

                    <div class="niu-field">
                        <label>Apellidos</label>
                        <input type="text" value="<?= e($contact->lastname); ?>" readonly>
                    </div>

                    <div class="niu-field">
                        <label>Correo electrónico</label>
                        <input type="text" value="<?= e($contact->email); ?>" readonly>
                    </div>

                    <div class="niu-field">
                        <label>Teléfono</label>
                        <input type="text" value="<?= e($contact->phonenumber); ?>" readonly>
                    </div>

                    <div class="niu-field">
                        <label>Código de estudiante</label>
                        <input type="text" class="niu-readonly"
                            value="<?= !empty($student_id) ? e($student_id) : 'No asignado'; ?>" readonly>
                    </div>

                    <div class="niu-field">
                        <label>Usuario Moodle</label>
                        <input type="text" class="niu-readonly"
                            value="<?= !empty($moodle_username) ? e($moodle_username) : 'No asignado'; ?>" readonly>
                    </div>
                </div>

                <p class="niu-note">
                    Para actualizar sus datos personales o académicos, cree un ticket de soporte.
                </p>
            </div>

            <div class="niu-card">
                <div class="niu-card-title">Programas académicos</div>

                <?php if (!empty($student_programs)) { ?>
                    <table class="niu-program-table">
                        <thead>
                            <tr>
                                <th>Programa</th>
                                <th>Nivel</th>
                                <th>Fecha de inicio</th>
                                <th>Fecha de fin</th>
                                <th>Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($student_programs as $sp) { ?>
                                <?php
                                    $status_class = 'niu-status-' . mb_strtolower(trim($sp['status'] ?? 'activo'));
                                ?>
                                <tr>
                                    <td class="niu-program-name"><?= e($sp['program_name'] ?? ''); ?></td>
                                    <td><?= e($sp['credential_level'] ?? '-'); ?></td>
                                    <td><?= !empty($sp['start_date']) ? e(_d($sp['start_date'])) : '-'; ?></td>
                                    <td><?= !empty($sp['end_date']) ? e(_d($sp['end_date'])) : '-'; ?></td>
                                    <td>
                                        <span class="niu-status <?= e($status_class); ?>">
                                            <?= e($sp['status'] ?? 'Activo'); ?>
                                        </span>
                                    </td>
                                </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                <?php } else { ?>
                    <div class="niu-empty">
                        No tiene programas académicos registrados todavía.
                    </div>
                <?php } ?>
            </div>

            <div class="niu-card">
                <div class="niu-card-title">Cambio de contraseña</div>

                <?= form_open('clients/profile'); ?>
                <?= form_hidden('change_password', true); ?>

                <div class="niu-grid">
                    <div class="niu-field">
                        <label for="oldpassword">Contraseña actual</label>
                        <input type="password" name="oldpassword" id="oldpassword">
                        <?= form_error('oldpassword'); ?>
                    </div>

                    <div class="niu-field">
                        <label for="newpassword">Nueva contraseña</label>
                        <input type="password" name="newpassword" id="newpassword">
                        <?= form_error('newpassword'); ?>
                    </div>

                    <div class="niu-field">
                        <label for="newpasswordr">Confirmar nueva contraseña</label>
                        <input type="password" name="newpasswordr" id="newpasswordr">
                        <?= form_error('newpasswordr'); ?>
                    </div>
                </div>

                <br>

                <div class="text-center">
                    <button type="submit" class="niu-btn">
                        Cambiar contraseña
                    </button>
                </div>

                <?= form_close(); ?>
            </div>

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