<style>
    /* CSS Styling untuk Form */
    .content-wrapper { margin-left: 260px; padding: 20px; font-family: 'Inter', sans-serif; background-color: #f8fafc; min-height: 100vh; box-sizing: border-box; }
    .form-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); width: 100%; max-width: 100%; margin: 0; overflow: hidden; box-sizing: border-box; }
    .form-header { display: flex; justify-content: space-between; align-items: center; background-color: #10b981; color: #ffffff; padding: 18px 24px; margin-bottom: 0; border-bottom: none; }
    .form-title { font-size: 1.15rem; font-weight: 600; color: #ffffff; margin: 0; display: flex; align-items: center; gap: 8px; }
    .form-body { padding: 20px; }
    
    .row-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-bottom: 10px; }
    .form-group-custom { margin-bottom: 10px; width: 100%; }
    .form-group-full { width: 100%; margin-bottom: 10px; }
    
    .label-custom { display: block; font-size: 0.8rem; font-weight: 600; color: #475569; margin-bottom: 4px; }
    .input-custom { width: 100%; padding: 0.45rem 0.6rem; border: 1.5px solid #cbd5e1; border-radius: 6px; font-size: 0.85rem; transition: all 0.2s; box-sizing: border-box; background-color: #fff; color: #1e293b; }
    .input-custom:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15); outline: none; }
    
    textarea.input-custom { resize: vertical; min-height: 50px; max-height: 100px; }
    
    .hidden-field { display: none !important; }

    .btn-container { display: flex; justify-content: flex-start; gap: 10px; margin-top: 15px; border-top: 1px solid #e2e8f0; padding-top: 15px; }
    .btn-base { padding: 0.5rem 1.2rem; border-radius: 6px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
    .btn-submit { background-color: #10b981; color: #ffffff; }
    .btn-submit:hover { background-color: #059669; }
    .btn-cancel { background-color: #64748b; color: #ffffff; }
    .btn-cancel:hover { background-color: #475569; }

    @media (max-width: 992px) {
        .row-grid-2 { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
        .content-wrapper { margin-left: 0; padding: 10px; }
    }
</style>

<div class="content-wrapper">
    <div class="form-card">
        <div class="form-header">
            <h2 class="form-title"><i class="fas fa-edit"></i> Hadia Dadus Trabalho Final</h2>
        </div>

        <div class="form-body">
            <form method="post" action="<?= site_url('trabalhofinal/atualiza/'.$trabalhofinal->id); ?>" id="editForm">
                
                <!-- Baris 1: Tipu Formulariu & NRE (Hanya NRE saja di dropdown) -->
                <div class="row-grid-2">
                    <div class="form-group-custom">
                        <label class="label-custom">Tipu Formulariu</label>
                        <select name="tipu_formulariu" id="tipu_formulariu" class="input-custom" required onchange="toggleEditFormFields(this)">
                            <option value="">-- Hili Tipu Formulariu --</option>
                            <option value="F_orienta" <?= ($trabalhofinal->tipu_formulariu == 'F_orienta') ? 'selected' : ''; ?>>Formulariu orientasaun trabalho final do curso</option>
                            <option value="Protokolu_Ezame" <?= ($trabalhofinal->tipu_formulariu == 'Protokolu_Ezame' || $trabalhofinal->tipu_formulariu == 'protocoloezame') ? 'selected' : ''; ?>>Protokolu Ezame proposta Trabalho final do curso</option>
                            <option value="avalisaunTFC" <?= ($trabalhofinal->tipu_formulariu == 'avalisaunTFC') ? 'selected' : ''; ?>>Formulariu Avalisaun ezame trabalho final do curso</option>
                            <option value="relatoriuestajiu" <?= ($trabalhofinal->tipu_formulariu == 'relatoriuestajiu') ? 'selected' : ''; ?>>Formulariu Konsultasaun Relatoriu Estajiu</option>
                        </select>
                    </div>
                    <div class="form-group-custom">
                        <label class="label-custom">NRE (Número Registo Estudante)</label>
                        <select name="nre" id="select_nre" class="input-custom" required>
                            <option value="">-- Hili NRE --</option>
                            <?php 
                            $list_mhs = $this->db->get('tb_estudante')->result(); 
                            foreach($list_mhs as $m): 
                                if(!empty($m->nre)):
                            ?>
                                <option value="<?= $m->nre; ?>" <?= ($trabalhofinal->nre == $m->nre) ? 'selected' : ''; ?>>
                                    <?= $m->nre; ?>
                                </option>
                            <?php 
                                endif;
                            endforeach; 
                            ?>
                        </select>
                    </div>
                </div>

                <!-- Baris 2: Naran & Departamentu (Grid 2 Kolom) -->
                <div class="row-grid-2">
                    <div class="form-group-custom">
                        <label class="label-custom">Naran Kompletu Estudante</label>
                        <input type="text" name="naran_estudante" class="input-custom" value="<?= htmlspecialchars($trabalhofinal->naran_estudante); ?>" required>
                    </div>
                    <div class="form-group-custom">
                        <label class="label-custom">Departamentu / Kursu</label>
                        <input type="text" name="departamentu" class="input-custom" value="<?= htmlspecialchars($trabalhofinal->departamentu); ?>" required>
                    </div>
                </div>

                <!-- Baris 3: Títulu Trabalho Final -->
                <div class="form-group-full">
                    <label class="label-custom">Títulu Trabalho Final</label>
                    <textarea name="titulu" class="input-custom" rows="2" required><?= htmlspecialchars($trabalhofinal->titulu); ?></textarea>
                </div>

                <!-- Field Fatin (Khusus Relatoriu Estajiu) -->
                <div class="form-group-full toggleable-field" id="field_fatin">
                    <label class="label-custom">Fatin</label>
                    <input type="text" name="fatin" id="input_fatin" class="input-custom" value="<?= htmlspecialchars($trabalhofinal->fatin ?? ''); ?>" placeholder="Fatin Estajiu">
                </div>

                <!-- Field Orientador 1 & 2 (Grid 2 Kolom) -->
                <div class="row-grid-2 toggleable-field" id="field_orientators">
                    <div class="form-group-custom">
                        <label class="label-custom">Orientador 1</label>
                        <input type="text" name="orientador_1" id="orientador_1" class="input-custom" value="<?= htmlspecialchars($trabalhofinal->orientador_1 ?? ''); ?>">
                    </div>
                    <div class="form-group-custom" id="wrapper_orientador_2">
                        <label class="label-custom">Orientador 2</label>
                        <input type="text" name="orientador_2" id="orientador_2" class="input-custom" value="<?= htmlspecialchars($trabalhofinal->orientador_2 ?? ''); ?>">
                    </div>
                </div>

                <!-- Field Ezaminador 1 & 2 (Grid 2 Kolom) -->
                <div class="row-grid-2 toggleable-field" id="field_ezaminadores">
                    <div class="form-group-custom">
                        <label class="label-custom">Ezaminador 1</label>
                        <input type="text" name="ezaminador_1" id="ezaminador_1" class="input-custom" value="<?= htmlspecialchars($trabalhofinal->ezaminador_1 ?? ''); ?>">
                    </div>
                    <div class="form-group-custom">
                        <label class="label-custom">Ezaminador 2</label>
                        <input type="text" name="ezaminador_2" id="ezaminador_2" class="input-custom" value="<?= htmlspecialchars($trabalhofinal->ezaminador_2 ?? ''); ?>">
                    </div>
                </div>

                <!-- Baris Data & Durasaun Tempu -->
                <div class="form-group-full toggleable-field" id="field_data">
                    <label class="label-custom">Data (Tanggal)</label>
                    <input type="date" name="data" id="tanggal" class="input-custom" value="<?= htmlspecialchars($trabalhofinal->data ?? ''); ?>">
                </div>

                <div class="form-group-full toggleable-field" id="field_durasaun">
                    <label class="label-custom">Durasaun Tempu</label>
                    <input type="text" name="durasaun_tempu" id="durasaun_tempu" class="input-custom" value="<?= htmlspecialchars($trabalhofinal->durasaun_tempu ?? ''); ?>" placeholder="Ex: 60 minitu">
                </div>

                <div class="btn-container">
                    <button type="submit" class="btn-base btn-submit"><i class="fas fa-save"></i> Save</button>
                    <a href="<?= site_url('trabalhofinal'); ?>" class="btn-base btn-cancel"><i class="fas fa-times"></i> Kansela</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function toggleEditFormFields(selectElement) {
        var value = selectElement ? selectElement.value : $('#tipu_formulariu').val();
        
        var fFatin = $('#field_fatin');
        var fOri = $('#field_orientators');
        var wOri2 = $('#wrapper_orientador_2');
        var fEza = $('#field_ezaminadores');
        var fData = $('#field_data');
        var fDur = $('#field_durasaun');

        // Sembunyikan semua field dinamis terlebih dahulu
        fFatin.addClass('hidden-field');
        fOri.addClass('hidden-field');
        wOri2.show(); 
        fEza.addClass('hidden-field');
        fData.addClass('hidden-field');
        fDur.addClass('hidden-field');

        // Atur kemunculan field sesuai jenis formulir
        if (value === 'F_orienta') {
            fOri.removeClass('hidden-field');
        } 
        else if (value === 'Protokolu_Ezame' || value === 'protocoloezame') {
            fOri.removeClass('hidden-field');
            fEza.removeClass('hidden-field');
            fData.removeClass('hidden-field');
            fDur.removeClass('hidden-field');
        } 
        else if (value === 'avalisaunTFC') {
            fData.removeClass('hidden-field');
            fDur.removeClass('hidden-field');
        } 
        else if (value === 'relatoriuestajiu') {
            fFatin.removeClass('hidden-field');
            fOri.removeClass('hidden-field');
            wOri2.hide(); 
        }
    }

    $(document).ready(function(){
        // Jalankan saat halaman edit dimuat pertama kali
        toggleEditFormFields();

        // Jalankan saat dropdown tipu_formulariu diganti nilainya
        $('#tipu_formulariu').change(function(){
            toggleEditFormFields(this);
        });

        // AJAX untuk mengisi otomatis Naran & Departamentu saat NRE dipilih
        $('#select_nre').change(function(){
            var nre = $(this).val();
            if(nre !== '') {
                $.ajax({
                    url: "<?= site_url('trabalhofinal/get_estudante_by_nre'); ?>",
                    method: "POST",
                    data: { nre: nre },
                    dataType: "JSON",
                    success: function(data) {
                        if(data) {
                            $('input[name="naran_estudante"]').val(data.naran_estudante);
                            $('input[name="departamentu"]').val(data.departamentu);
                        }
                    }
                });
            } else {
                $('input[name="naran_estudante"]').val('');
                $('input[name="departamentu"]').val('');
            }
        });
    });
</script>