<style>
    .content-wrapper { margin-left: 260px; padding: 20px; font-family: 'Inter', sans-serif; background-color: #f8fafc; min-height: 100vh; box-sizing: border-box; }
    .table-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); width: 100%; overflow: hidden; box-sizing: border-box; margin-bottom: 40px; }
    .table-header { display: flex; justify-content: space-between; align-items: center; background-color: #10b981; color: #ffffff; padding: 18px 24px; }
    .table-title { font-size: 1.15rem; font-weight: 600; color: #ffffff; margin: 0; display: flex; align-items: center; gap: 8px; }
    .table-body { padding: 24px 24px 40px 24px; }
    
    /* Layout Grid agar field kompak dan tersusun rapi */
    .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .form-grid-full { grid-column: span 2; }
    
    .form-group { margin-bottom: 12px; }
    .form-group label { display: block; font-weight: 600; font-size: 0.8rem; color: #475569; margin-bottom: 4px; }
    .form-control { width: 100%; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.85rem; box-sizing: border-box; }
    .form-control:focus { outline: none; border-color: #10b981; }
    textarea.form-control { resize: vertical; min-height: 50px; }
    
    .hidden-field { display: none !important; }

    /* Tombol kembali ke bawah, namun diperkecil dan berdampingan */
    .button-group { display: flex; gap: 10px; align-items: center; margin-top: 20px; border-top: 1px solid #e2e8f0; padding-top: 15px; }
    .btn-save { background-color: #10b981; color: white; border: none; padding: 7px 14px; border-radius: 6px; font-weight: 600; font-size: 0.82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
    .btn-save:hover { background-color: #059669; }
    .btn-cancel { background-color: #ef4444; color: white; border: none; padding: 7px 14px; border-radius: 6px; font-weight: 600; font-size: 0.82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
    .btn-cancel:hover { background-color: #dc2626; }
</style>

<div class="content-wrapper">
    <div class="table-card">
        <div class="table-header">
            <h2 class="table-title"><i class="fas fa-plus"></i> Aumenta Dadus Trabalho Final</h2>
        </div>

        <div class="table-body">
            <form action="<?= site_url('trabalhofinal/salva'); ?>" method="post">
                
                <div class="form-grid">
                    <!-- 1. Tipu Formulariu -->
                    <div class="form-group form-grid-full">
                        <label>Tipu Formulariu</label>
                        <select name="tipu_formulariu" id="tipu_formulariu" class="form-control" required onchange="toggleFormFields(this)">
                            <option value="">Hili Tipu Formulariu</option>
                            <option value="F_orienta">Formulariu orientasaun trabalho final do curso</option>
                            <option value="Protokolu_Ezame">Protokolu Ezame proposta Trabalho final do curso</option>
                            <option value="avalisaunTFC">Formulariu Avalisaun ezame trabalho final do curso</option>
                            <option value="relatoriuestajiu">Formulariu Konsultasaun Relatoriu Estajiu</option>
                        </select>
                    </div>

                    <!-- 2. NRE / Estudante -->
                    <div class="form-group">
                        <label>NRE / Estudante</label>
                        <select name="nre" id="select_nre" class="form-control" required onchange="fillStudentData(this)">
                            <option value="">Hili Estudante</option>
                            <?php if(isset($estudantes)): foreach($estudantes as $est): ?>
                                <?php 
                                    $nre_val  = is_object($est) ? $est->nre : $est['nre'];
                                    $nama_val = is_object($est) ? ($est->nama ?? $est->naran ?? $est->naran_estudante ?? '') : ($est['nama'] ?? $est['naran'] ?? $est['naran_estudante'] ?? '');
                                    $dept_val = is_object($est) ? ($est->departamentu ?? '') : ($est['departamentu'] ?? '');
                                ?>
                                <option value="<?= $nre_val; ?>" 
                                    data-nama="<?= $nama_val; ?>" 
                                    data-departamentu="<?= $dept_val; ?>">
                                    <?= $nre_val; ?>
                                </option>
                            <?php endforeach; endif; ?>
                        </select>
                    </div>

                    <!-- 3. Departamentu -->
                    <div class="form-group">
                        <label>Departamentu</label>
                        <input type="text" name="departamentu" id="departamentu" class="form-control" required readonly>
                    </div>

                    <!-- 4. Naran Estudante -->
                    <div class="form-group form-grid-full">
                        <label>Naran Estudante</label>
                        <input type="text" name="naran_estudante" id="naran_estudante" class="form-control" required readonly>
                    </div>

                    <!-- 5. Títulu -->
                    <div class="form-group form-grid-full">
                        <label>Títulu</label>
                        <textarea name="titulu" class="form-control" rows="2" required></textarea>
                    </div>

                    <!-- 6. Field Dinamis Kompak -->
                    <div class="form-group toggleable-field hidden-field" id="field_fatin">
                        <label>Fatin</label>
                        <input type="text" name="fatin" class="form-control" placeholder="Fatin Estajiu">
                    </div>

                    <div class="form-group toggleable-field hidden-field" id="field_data">
                        <label>Data</label>
                        <input type="date" name="data" class="form-control">
                    </div>

                    <div class="form-group toggleable-field hidden-field" id="field_durasaun">
                        <label>Durasaun Tempu</label>
                        <input type="text" name="durasaun_tempu" class="form-control" placeholder="Ex: 60 minitu">
                    </div>

                    <div class="form-group toggleable-field hidden-field" id="field_orientador_1">
                        <label>Orientador 1</label>
                        <input type="text" name="orientador_1" class="form-control">
                    </div>

                    <div class="form-group toggleable-field hidden-field" id="field_orientador_2">
                        <label>Orientador 2</label>
                        <input type="text" name="orientador_2" class="form-control">
                    </div>

                    <div class="form-group toggleable-field hidden-field" id="field_ezaminador_1">
                        <label>Ezaminador 1</label>
                        <input type="text" name="ezaminador_1" class="form-control">
                    </div>

                    <div class="form-group toggleable-field hidden-field" id="field_ezaminador_2">
                        <label>Ezaminador 2</label>
                        <input type="text" name="ezaminador_2" class="form-control">
                    </div>
                </div>

                <!-- Tombol Save & Cancel di bawah dengan ukuran kecil dan rapi -->
                <div class="button-group form-grid-full">
                    <button type="submit" class="btn-save">
                        <i class="fas fa-save"></i> Rai Dadus
                    </button>
                    <a href="<?= site_url('trabalhofinal'); ?>" class="btn-cancel">
                        <i class="fas fa-times"></i> Cancel
                    </a>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
    function fillStudentData(selectElement) {
        var selectedOption = selectElement.options[selectElement.selectedIndex];
        var nama = selectedOption.getAttribute('data-nama') || '';
        var departamentu = selectedOption.getAttribute('data-departamentu') || '';
        
        document.getElementById('naran_estudante').value = nama;
        document.getElementById('departamentu').value = departamentu;
    }

    function toggleFormFields(selectElement) {
        var value = selectElement.value;
        
        var fFatin = document.getElementById('field_fatin');
        var fOri1 = document.getElementById('field_orientador_1');
        var fOri2 = document.getElementById('field_orientador_2');
        var fEza1 = document.getElementById('field_ezaminador_1');
        var fEza2 = document.getElementById('field_ezaminador_2');
        var fData = document.getElementById('field_data');
        var fDur = document.getElementById('field_durasaun');

        var allFields = [fFatin, fOri1, fOri2, fEza1, fEza2, fData, fDur];
        allFields.forEach(function(el) {
            el.classList.add('hidden-field');
            var input = el.querySelector('input');
            if(input) input.value = '';
        });

        if (value === 'F_orienta') {
            fOri1.classList.remove('hidden-field');
            fOri2.classList.remove('hidden-field');
        } 
        else if (value === 'Protokolu_Ezame') {
            fOri1.classList.remove('hidden-field');
            fOri2.classList.remove('hidden-field');
            fEza1.classList.remove('hidden-field');
            fEza2.classList.remove('hidden-field');
            fData.classList.remove('hidden-field');
            fDur.classList.remove('hidden-field');
        } 
        else if (value === 'avalisaunTFC') {
            fData.classList.remove('hidden-field');
            fDur.classList.remove('hidden-field');
        } 
        else if (value === 'relatoriuestajiu') {
            fFatin.classList.remove('hidden-field');
            fOri1.classList.remove('hidden-field');
        }
    }
</script>