<div class="content-wrapper">
    <div class="container-fluid px-4 py-4">
        
        <!-- Action Buttons & Search Card (Paling Atas) -->
        <div class="card shadow-sm mb-4 border-0 rounded-4">
            <div class="card-body px-4 py-3.5">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    
                    <!-- Tombol Aumenta -->
                    <a href="<?= base_url('distribuisaunmateria/aumenta'); ?>" class="btn btn-primary px-4 py-2.5 shadow-sm rounded-pill fw-semibold">
                        <i class="fas fa-plus me-2"></i> Aumenta
                    </a>

                    <!-- Form Pencarian & Print -->
                    <form method="get" action="<?= base_url('distribuisaunmateria'); ?>" class="d-flex align-items-center flex-wrap gap-2 mb-0">
                        <div class="input-group shadow-sm rounded-pill overflow-hidden" style="width: 280px;">
                            <span class="input-group-text bg-white border-end-0 text-primary ps-3"><i class="fas fa-search"></i></span>
                            <input type="text" name="keyword" class="form-control border-start-0 ps-0 shadow-none" placeholder="Cari materia..." value="<?= isset($_GET['keyword']) ? htmlspecialchars($_GET['keyword']) : '' ?>">
                        </div>
                        <button type="submit" class="btn btn-success px-4 py-2.5 shadow-sm rounded-pill fw-semibold">Buka</button>
                        <a href="<?= base_url('distribuisaunmateria'); ?>" class="btn btn-secondary px-3 py-2.5 shadow-sm rounded-pill" title="Reset">
                            <i class="fas fa-redo"></i>
                        </a>
                        <button type="button" class="btn text-white px-3.5 py-2.5 shadow-sm rounded-pill fw-semibold" style="background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);" data-toggle="modal" data-target="#modalPrint" title="Print Report">
                            <i class="fas fa-print"></i>
                        </button>
                    </form>

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

        <!-- Alert -->
        <?php if ($this->session->flashdata('success')): ?>
            <div class="alert alert-success border-0 shadow-sm rounded-4 px-4 py-3 mb-4 d-flex align-items-center">
                <i class="fas fa-check-circle me-2 text-success"></i>
                <div><?= $this->session->flashdata('success'); ?></div>
            </div>
        <?php endif; ?>

        <!-- Judul Halaman di dalam Card (Nempel langsung dengan Card Tabel di bawahnya) -->
        <div class="card shadow-sm border-0 rounded-top-4 rounded-bottom-0 mb-0">
            <div class="card-body px-4 py-3">
                <h5 class="fw-bold text-primary mb-0 d-flex align-items-center">
                    <i class="fas fa-chalkboard-teacher me-2"></i> Lista Dadus Distribuisaun Materia
                </h5>
            </div>
        </div>

        <!-- Table Data (Nempel langsung di bawah card judul) -->
        <div class="card shadow-sm border-0 rounded-top-0 rounded-bottom-4 overflow-hidden mb-5">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <!-- HEADER DENGAN WARNA GRADASI BIRU PROFESIONAL -->
                        <thead class="text-white text-center text-uppercase fs-7" style="background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);">
                            <tr>
                                <th style="width: 5%; padding: 14px 10px;">Nu</th>
                                <th style="width: 5%; padding: 14px 10px;">ID</th>
                                <th style="width: 10%; padding: 14px 10px;">Kode Materia</th>
                                <th style="width: 18%; padding: 14px 10px;" class="text-left">Materia</th>
                                <th style="width: 18%; padding: 14px 10px;" class="text-left">Naran Dosente</th>
                                <th style="width: 8%; padding: 14px 10px;">Semestre</th>
                                <th style="width: 7%; padding: 14px 10px;">Credito</th>
                                <th style="width: 8%; padding: 14px 10px;">Total Credito</th>
                                <th style="width: 8%; padding: 14px 10px;">Total Materia</th>
                                <th style="width: 9%; padding: 14px 10px;">Tinan Akademiku</th>
                                <th style="width: 8%; padding: 14px 10px;">Aksaun</th>
                            </tr>
                        </thead>
                        <tbody class="text-center">
                            <?php if (!empty($distribuisaunmateria)): ?>
                                <?php $nu = 1; foreach ($distribuisaunmateria as $value): ?>
                                <tr>
                                    <td class="font-weight-bold text-muted"><?= $nu++; ?></td>
                                    <td><span class="badge bg-light border px-2 py-1"><?= $value->id_distribuisaun ?></span></td>
                                    <td class="fw-bold text-primary"><?= htmlspecialchars($value->kode_materia); ?></td>
                                    <td class="text-left fw-semibold text-dark"><?= htmlspecialchars($value->materia); ?></td>
                                    <td class="text-left font-weight-semibold"><?= htmlspecialchars($value->naran_dosente); ?></td>
                                    <td><span class="badge bg-secondary text-white rounded-pill px-2.5 py-1"><?= htmlspecialchars($value->semestre); ?></span></td>
                                    <td><?= htmlspecialchars($value->credito); ?></td>
                                    <td><?= htmlspecialchars($value->total_credito); ?></td>
                                    <td><?= htmlspecialchars($value->total_materia); ?></td>
                                    <td><span class="badge bg-light text-dark border px-2 py-1"><?= htmlspecialchars($value->tinan_akademiku); ?></span></td>
                                    <td class="text-center">
                                        <div class="d-flex justify-content-center gap-1">
                                            <a href="<?= base_url('distribuisaunmateria/hadia/' . $value->id_distribuisaun); ?>" class="btn btn-warning btn-sm text-white rounded-circle p-2 d-inline-flex align-items-center justify-content-center" style="width: 32px; height: 32px;" title="Hadia"><i class="fas fa-pen"></i></a>
                                            <a href="<?= base_url('distribuisaunmateria/hamos/' . $value->id_distribuisaun); ?>" class="btn btn-danger btn-sm rounded-circle p-2 d-inline-flex align-items-center justify-content-center" style="width: 32px; height: 32px;" onclick="return confirm('Hakarak hamos dadus ne?');" title="Hamos"><i class="fas fa-trash"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <tr>
                                    <td colspan="11" class="text-center text-muted py-5">
                                        <i class="fas fa-info-circle fa-2x mb-2 d-block text-secondary"></i>
                                        Dados la iha
                                    </td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Print -->
<div class="modal fade" id="modalPrint" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content border-0 rounded-4">
      <form action="<?= base_url('distribuisaunmateria/report'); ?>" method="get" target="_blank">
        <div class="modal-header border-bottom-0 pb-0">
            <h5 class="modal-title fw-bold text-primary">Hili Filter Tinan Akademiku</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body py-4">
            <div class="form-group mb-0">
                <label class="fw-semibold text-secondary mb-1">Tinan</label>
                <select name="tinan_akademiku" class="form-control rounded-pill px-3" required>
                    <option value="ALL">Hotu (Semua Tahun)</option>
                    <?php if(isset($tahun_list)): ?>
                        <?php foreach($tahun_list as $t): ?>
                            <option value="<?= $t->tinan ?>"><?= $t->tinan ?></option>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </select>
            </div>
        </div>
        <div class="modal-footer border-top-0 pt-0">
            <button type="button" class="btn btn-secondary rounded-pill px-4" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary rounded-pill px-4">Print</button>
        </div>
      </form>
    </div>
  </div>
</div>

<style>
    /* Konsistensi Margin dengan Sidebar & Warna Latar */
    .content-wrapper {
        margin-left: 250px; 
        padding-right: 20px;
        background-color: #f4f6f9;
        min-height: 100vh;
        box-sizing: border-box;
    }

    /* Styling Helper untuk BorderRadius Gabungan */
    .rounded-top-4 {
        border-top-left-radius: 0.8rem !important;
        border-top-right-radius: 0.8rem !important;
    }
    .rounded-bottom-0 {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .rounded-top-0 {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }
    .rounded-bottom-4 {
        border-bottom-left-radius: 0.8rem !important;
        border-bottom-right-radius: 0.8rem !important;
    }

    /* Styling Tabel & Elemen Modern */
    .table th, .table td {
        vertical-align: middle;
        font-size: 14px;
        padding: 14px 12px;
    }
    .table thead th {
        color: #ffffff !important;
        border: none;
        font-weight: 600;
        letter-spacing: 0.3px;
    }
    .fs-7 {
        font-size: 12px;
    }
    .rounded-4 {
        border-radius: 0.8rem !important;
    }
    .input-group, .btn {
        transition: all 0.2s ease-in-out;
    }
    .input-group:focus-within {
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25) !important;
    }

    @media (max-width: 768px) {
        .content-wrapper {
            margin-left: 0;
            padding: 10px;
        }
    }
</style>