<div class="content-wrapper">
    <div class="container-fluid mt-4">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="card card-custom shadow-sm mb-4 border-0">
                    <div class="card-header bg-success text-white py-3 px-4">
                        <h6 class="mb-0 fw-bold fs-6">
                            <i class="fas fa-edit me-2"></i> Hadia Dadus Distribuisaun Materia
                        </h6>
                    </div>

                    <div class="card-body p-4">
                        <form method="post" action="<?= base_url('distribuisaunmateria/atualiza/'.$distribuisaunmateria->id_distribuisaun); ?>">

                            <!-- Row 1: Kode & Nama Materia -->
                            <div class="row">
                                <div class="col-md-6 form-group mb-3">
                                    <label class="form-label font-weight-bold text-secondary">Kode Materia</label>
                                    <select name="kode_materia" id="kode_materia" class="form-select custom-input" required>
                                        <option value="">-- Hili Kode Materia --</option>
                                        <?php foreach($materia_list as $m): ?>
                                            <option value="<?= $m->kode_materia; ?>" <?= ($distribuisaunmateria->kode_materia == $m->kode_materia) ? 'selected' : ''; ?>>
                                                <?= $m->kode_materia; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-6 form-group mb-3">
                                    <label class="form-label font-weight-bold text-secondary">Materia</label>
                                    <input type="text" name="materia" id="materia" class="form-control custom-input bg-readonly" value="<?= htmlspecialchars($distribuisaunmateria->materia); ?>" readonly required>
                                </div>
                            </div>

                            <!-- Row 2: Detail Akademik (Auto-filled) -->
                            <div class="row">
                                <div class="col-md-3 col-sm-6 form-group mb-3">
                                    <label class="form-label font-weight-bold text-secondary">Semestre</label>
                                    <input type="text" name="semestre" id="semestre" class="form-control custom-input bg-readonly text-center" value="<?= htmlspecialchars($distribuisaunmateria->semestre); ?>" readonly required>
                                </div>
                                <div class="col-md-3 col-sm-6 form-group mb-3">
                                    <label class="form-label font-weight-bold text-secondary">Credito</label>
                                    <input type="text" name="credito" id="credito" class="form-control custom-input bg-readonly text-center" value="<?= htmlspecialchars($distribuisaunmateria->credito); ?>" readonly required>
                                </div>
                                <div class="col-md-3 col-sm-6 form-group mb-3">
                                    <label class="form-label font-weight-bold text-secondary">Total Crédito</label>
                                    <input type="text" name="total_credito" id="total_credito" class="form-control custom-input bg-readonly text-center" value="<?= htmlspecialchars($distribuisaunmateria->total_credito); ?>" readonly required>
                                </div>
                                <div class="col-md-3 col-sm-6 form-group mb-3">
                                    <label class="form-label font-weight-bold text-secondary">Total Materia</label>
                                    <input type="text" name="total_materia" id="total_materia" class="form-control custom-input bg-readonly text-center" value="<?= htmlspecialchars($distribuisaunmateria->total_materia); ?>" readonly required>
                                </div>
                            </div>

                            <!-- Row 3: Dosente & Tahun Akademik -->
                            <div class="row">
                                <div class="col-md-6 form-group mb-3">
                                    <label class="form-label font-weight-bold text-secondary">Naran Dosente</label>
                                    <select name="naran_dosente" class="form-select custom-input" required>
                                        <option value="">-- Hili Dosente --</option>
                                        <?php foreach($dosente_list as $d): ?>
                                            <option value="<?= $d->naran_dosente; ?>" <?= (trim($distribuisaunmateria->naran_dosente) == trim($d->naran_dosente)) ? 'selected' : ''; ?>>
                                                <?= $d->naran_dosente; ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-6 form-group mb-3">
                                    <label class="form-label font-weight-bold text-secondary">Tinan Akademiku</label>
                                    <input type="text" name="tinan_akademiku" class="form-control custom-input" value="<?= htmlspecialchars($distribuisaunmateria->tinan_akademiku); ?>" required placeholder="ex: 2023/2024">
                                </div>
                            </div>

                            <hr class="my-4 text-muted border-top opacity-25">

                            <!-- Action Buttons -->
                            <div class="d-flex justify-content-start gap-2">
                                <button type="submit" class="btn btn-success px-4 py-2 shadow-sm fw-semibold btn-action">
                                    <i class="fas fa-save me-2"></i>Save
                                </button>
                                <a href="<?= base_url('distribuisaunmateria'); ?>" class="btn btn-outline-secondary px-4 py-2 shadow-sm fw-semibold btn-action">
                                    <i class="fas fa-times me-2"></i>Kansela
                                </a>
                            </div>

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

<script>
$(document).ready(function() {
    $('#kode_materia').on('change', function() {
        var kode = $(this).val();
        
        if(kode !== "") {
            $.ajax({
                url: "<?= base_url('distribuisaunmateria/get_materia_ajax'); ?>",
                type: "POST",
                data: { kode: kode },
                dataType: "json",
                success: function(data) {
                    if(data) {
                        $('#materia').val(data.naran_materia || '');
                        $('#semestre').val(data.semestre || '');
                        $('#credito').val(data.credito || ''); 
                        $('#total_credito').val(data.total_credito || '');
                        $('#total_materia').val(data.total_materia || '');
                    }
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error Status:", status);
                    console.error("AJAX Error Msg:", error);
                }
            });
        } else {
            $('#materia, #semestre, #credito, #total_credito, #total_materia').val('');
        }
    });
});
</script>

<style>
    .content-wrapper {
        margin-left: 230px; 
        padding: 20px;
        transition: all 0.3s ease;
        background-color: #f8fafc;
        min-height: 100vh;
    }
    .card-custom {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
    }
    .card-header {
        border-bottom: none;
        background-color: #10b981 !important;
    }
    .form-label {
        font-size: 0.825rem;
        font-weight: 650;
        letter-spacing: 0.3px;
        margin-bottom: 6px;
        color: #475569;
    }
    .custom-input {
        border-radius: 8px;
        border: 1.5px solid #cbd5e1;
        padding: 8px 12px;
        font-size: 0.9rem;
        background-color: #f8fafc;
        transition: all 0.2s ease-in-out;
    }
    .custom-input:focus {
        border-color: #38bdf8;
        background-color: #ffffff;
        box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
        outline: none;
    }
    .bg-readonly {
        background-color: #f1f5f9 !important;
        color: #64748b;
        cursor: not-allowed;
    }
    .btn-action {
        border-radius: 8px;
        transition: all 0.2s ease;
    }
    .btn-action:hover {
        transform: translateY(-1px);
    }
    @media (max-width: 768px) {
        .content-wrapper {
            margin-left: 0;
            padding: 10px;
        }
    }
</style>