<!DOCTYPE html>
<html>
<head>
    <title>Hadia Dadus Karta Sai</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
        body { background-color: #f8fafc; font-family: 'Plus Jakarta Sans', sans-serif; color: #334155; }
        .content-wrapper { max-width: 850px; margin: 30px auto; padding: 0 15px; }
        .form-card { background: #ffffff; border-radius: 16px; padding: 30px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08); border: 1px solid #e2e8f0; }
        .card-title { font-size: 1.35rem; font-weight: 700; color: #0f172a; margin-bottom: 20px; border-bottom: 2px solid #f1f5f9; padding-bottom: 12px; }
        .form-group-custom { margin-bottom: 14px; }
        .form-label { display: block; font-size: 0.825rem; font-weight: 650; color: #475569; margin-bottom: 5px; }
        .form-control-custom { width: 100%; padding: 8px 12px; font-size: 0.9rem; border: 1.5px solid #cbd5e1; border-radius: 8px; transition: all 0.2s ease; background-color: #f8fafc; box-sizing: border-box; }
        .form-control-custom:focus { border-color: #38bdf8; background-color: #ffffff; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15); outline: none; }
        .form-control-custom[readonly] { background-color: #f1f5f9; color: #64748b; cursor: not-allowed; }
        .row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .btn-container { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
        .btn-action { padding: 9px 20px; font-size: 0.875rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s; border: none; text-decoration: none; display: inline-flex; align-items: center; }
        .btn-success { background-color: #10b981; color: #ffffff; }
        .btn-success:hover { background-color: #059669; }
        .btn-secondary { background-color: #e2e8f0; color: #475569; }
        .btn-secondary:hover { background-color: #cbd5e1; }
        .dynamic-field { display: none; }
        @media (max-width: 600px) { .row-grid { grid-template-columns: 1fr; } }
    </style>
</head>
<body>

<div class="content-wrapper">
    <div class="form-card">
        <h5 class="card-title">Hadia Dadus Karta Sai</h5>

        <form action="<?= base_url('kartasai/atualiza/' . $kartasai->id); ?>" method="post">
            
            <!-- Baris 1: Tipu Kartasai & Pilih NRE -->
            <div class="row-grid">
                <div class="form-group-custom">
                    <label class="form-label">Tipu Kartasai</label>
                    <select name="tipu_kartasai" id="tipu_kartasai" class="form-control-custom" required>
                        <option value="">-- Hili Tipu Kartasai --</option>
                        <option value="disponibilidade" <?= ($kartasai->tipu_kartasai == 'disponibilidade') ? 'selected' : ''; ?>>Karta Disponibilidade atu orienta trabalho final do curso</option>
                        <option value="revizaun" <?= ($kartasai->tipu_kartasai == 'revizaun') ? 'selected' : ''; ?>>Karta revizaun ezame proposta trabalho final do curso</option>
                         <option value="revizaun_tfc" <?= ($kartasai->tipu_kartasai == 'revizaun_tfc') ? 'selected' : ''; ?>>Karta revizaun ezame trabalho final do curso</option>
                        <option value="despacho_EP" <?= ($kartasai->tipu_kartasai == 'despacho_EP') ? 'selected' : ''; ?>>Karta despacho orienta ba estajiu profissional</option>
                        <option value="despacho_dosente" <?= ($kartasai->tipu_kartasai == 'despacho_dosente') ? 'selected' : ''; ?>>Karta despacho dosente da turma ba estudante foun</option>
                        <option value="despacho_tfc" <?= ($kartasai->tipu_kartasai == 'despacho_tfc') ? 'selected' : ''; ?>>Karta despacho orientador trabalho final do curso</option>
                        <option value="autorizasaun_estajiu" <?= ($kartasai->tipu_kartasai == 'autorizasaun_estajiu') ? 'selected' : ''; ?>>Pedidu autorizasaun_estajiu</option>
                       
                    </select>
                </div>
                <div class="form-group-custom dynamic-field field-nre">
                    <label class="form-label">Pilih NRE</label>
                    <select name="nre" id="nre" class="form-control-custom">
                        <option value="">-- Hili NRE --</option>
                        <?php if(isset($estudante_list)): ?>
                            <?php foreach($estudante_list as $e): ?>
                                <option value="<?= $e->nre; ?>" <?= (trim($kartasai->nre) == trim($e->nre)) ? 'selected' : ''; ?>><?= $e->nre; ?></option>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </select>
                </div>
            </div>

            <!-- Baris 2: Naran Estudante -->
            <div class="row-grid dynamic-field field-estudante-info">
                <div class="form-group-custom">
                    <label class="form-label">Naran Estudante</label>
                    <input type="text" name="naran_estudante" id="naran_estudante" class="form-control-custom" value="<?= htmlspecialchars($kartasai->naran_estudante); ?>" placeholder="Otomatis..." readonly>
                </div>
            </div>

            <!-- Baris 3: Departamentu & Titulu -->
            <div class="row-grid">
                <div class="form-group-custom dynamic-field field-departamentu">
                    <label class="form-label">Departamentu</label>
                    <input type="text" name="departamentu" id="departamentu" class="form-control-custom" value="<?= htmlspecialchars($kartasai->departamentu); ?>" placeholder="Otomatis..." readonly>
                </div>
                <div class="form-group-custom dynamic-field field-titulu">
                    <label class="form-label">Titulu</label>
                    <input type="text" name="titulu" id="input_titulu" class="form-control-custom" value="<?= htmlspecialchars($kartasai->titulu); ?>" placeholder="Hatama titulu...">
                </div>
            </div>

            <!-- Baris 4: Naran Dosente & Posisaun -->
            <div class="row-grid dynamic-field field-dosente">
                <div class="form-group-custom">
                    <label class="form-label">Naran Dosente</label>
                    <select name="naran_dosente" id="dosen_select" class="form-control-custom">
                        <option value="">-- Hili Naran Dosente --</option>
                        <?php if(isset($dosente_list)): ?>
                            <?php foreach($dosente_list as $d): ?>
                                <option value="<?= $d->naran_dosente; ?>" data-posisi="<?= $d->posisaun; ?>" <?= ($kartasai->naran_dosente == $d->naran_dosente) ? 'selected' : ''; ?>>
                                    <?= $d->naran_dosente; ?>
                                </option>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </select>
                </div>
                <div class="form-group-custom">
                    <label class="form-label">Posisaun</label>
                    <input type="text" name="posisaun" id="posisaun_input" class="form-control-custom" value="<?= htmlspecialchars($kartasai->posisaun); ?>" placeholder="Otomatis..." readonly>
                </div>
            </div>

            <!-- Baris 5: Orientador 1 & Orientador 2 -->
            <div class="row-grid dynamic-field field-orientador">
                <div class="form-group-custom">
                    <label class="form-label">Orientador 1</label>
                    <input type="text" name="orientador_1" id="orintador_1_input" class="form-control-custom" value="<?= htmlspecialchars($kartasai->orientador_1 ?? ''); ?>" placeholder="Hatama orientador 1...">
                </div>
                <div class="form-group-custom">
                    <label class="form-label">Orientador 2</label>
                    <input type="text" name="orientador_2" id="orintador_2_input" class="form-control-custom" value="<?= htmlspecialchars($kartasai->orientador_2 ?? ''); ?>" placeholder="Hatama orientador 2...">
                </div>
            </div>

            <!-- Baris 5 alternatif: Ezaminador 1 & Ezaminador 2 -->
            <div class="row-grid dynamic-field field-ezaminador">
                <div class="form-group-custom">
                    <label class="form-label">Ezaminador 1</label>
                    <input type="text" name="ezaminador_1" id="ezaminador_1_input" class="form-control-custom" value="<?= htmlspecialchars($kartasai->ezaminador_1 ?? ''); ?>" placeholder="Hatama ezaminador 1...">
                </div>
                <div class="form-group-custom">
                    <label class="form-label">Ezaminador 2</label>
                    <input type="text" name="ezaminador_2" id="ezaminador_2_input" class="form-control-custom" value="<?= htmlspecialchars($kartasai->ezaminador_2 ?? ''); ?>" placeholder="Hatama ezaminador 2...">
                </div>
            </div>

            <!-- Baris 6: Asuntu & Hatoba -->
            <div class="row-grid">
                <div class="form-group-custom dynamic-field field-asuntu">
                    <label class="form-label">Asuntu</label>
                    <input type="text" name="asuntu" id="input_asuntu" class="form-control-custom" value="<?= htmlspecialchars($kartasai->asuntu ?? ''); ?>" placeholder="Hatama asuntu...">
                </div>
                <div class="form-group-custom dynamic-field field-hatoba">
                    <label class="form-label">Hatoba</label>
                    <input type="text" name="hatoba" id="input_hatoba" class="form-control-custom" value="<?= htmlspecialchars($kartasai->hatoba ?? ''); ?>" placeholder="Hatama hatoba...">
                </div>
            </div>

            <!-- Baris 7: Anexu -->
            <div class="form-group-custom dynamic-field field-anexu">
                <label class="form-label">Anexu</label>
                <input type="text" name="anexu" id="input_anexu" class="form-control-custom" value="<?= htmlspecialchars($kartasai->anexu ?? ''); ?>" placeholder="Hatama anexu...">
            </div>

            <!-- Tombol Aksi -->
            <div class="btn-container">
                <a href="<?= base_url('kartasai'); ?>" class="btn-action btn-secondary">Kansela</a>
                <button type="submit" class="btn-action btn-success">Update</button>
            </div>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    function adjustFormFields() {
        var tipu = $('#tipu_kartasai').val();
        
        // Hide all dynamic elements and remove required attributes first
        $('.dynamic-field').hide();
        $('.dynamic-field').find('input, select').removeAttr('required');

        // Configure visibility and requirements based on letter type (Tipu Kartasai)
        if (tipu === 'disponibilidade') {
            $('.field-nre, .field-estudante-info, .field-departamentu, .field-titulu, .field-orientador, .field-dosente').show();
            $('#nre, #input_titulu, #orintador_1_input, #orintador_2_input, #dosen_select, #posisaun_input').attr('required', 'required');
        } 
        else if (tipu === 'revizaun') {
            $('.field-nre, .field-estudante-info, .field-departamentu, .field-titulu, .field-ezaminador').show();
            $('#nre, #input_titulu, #ezaminador_1_input, #ezaminador_2_input').attr('required', 'required');
        } 
        else if (tipu === 'revizaun_tfc') {
            // Memunculkan NRE, Naran Estudante, Departamentu, Titulu, Orientador 1 & 2, serta Ezaminador 1 & 2
            $('.field-nre, .field-estudante-info, .field-departamentu, .field-titulu, .field-orientador, .field-ezaminador').show();
            $('#nre, #input_titulu, #orintador_1_input, #orintador_2_input, #ezaminador_1_input, #ezaminador_2_input').attr('required', 'required');
        }
        else if (tipu === 'despacho_EP' || tipu === 'despacho_dosente' || tipu === 'despacho_tfc') {
            $('.field-asuntu, .field-hatoba, .field-anexu').show();
            $('#input_asuntu, #input_hatoba').attr('required', 'required');
        } 
        else if (tipu === 'autorizasaun_estajiu') {
            $('.field-asuntu, .field-hatoba, .field-anexu').show();
            $('#input_asuntu, #input_hatoba').attr('required', 'required');
        }
    }

    // Jalankan saat halaman pertama kali dimuat
    adjustFormFields();

    $('#tipu_kartasai').change(function(){
        adjustFormFields();
    });

    $('#nre').change(function(){
        var nre = $(this).val();
        if(nre != '') {
            $.ajax({
                url: "<?= base_url('kartasai/get_estudante_ajax'); ?>",
                method: "POST",
                data: {nre: nre},
                dataType: "JSON",
                success: function(data) {
                    if(data) {
                        $('#naran_estudante').val(data.naran_estudante);
                        $('#departamentu').val(data.departamentu);
                    }
                }
            });
        } else {
            $('#naran_estudante, #departamentu').val('');
        }
    });

    $('#dosen_select').change(function(){
        var posisi = $(this).find(':selected').data('posisi');
        $('#posisaun_input').val(posisi);
    });
});
</script>

</body>
</html>