<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 (Hanya untuk Admin) -->
                    <?php if($this->session->userdata('tipe') == 'admin') { ?>
                    <a href="<?= base_url('materia/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>
                    <?php } else { ?>
                    <div></div>
                    <?php } ?>

                    <!-- Form Pencarian & Print -->
                    <form method="get" action="<?= base_url('materia'); ?>" 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="Buka 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('materia'); ?>" class="btn btn-secondary px-3 py-2.5 shadow-sm rounded-pill" title="Reset">
                            <i class="fas fa-redo"></i>
                        </a>

                        <?php if($this->session->userdata('tipe') == 'admin') { ?>
                        <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>
                        <?php } ?>
                    </form>

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

        <!-- 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-book-reader me-2"></i> Lista Dadus 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: 22%; padding: 14px 10px;" class="text-left">Naran Materia</th>
                                <th style="width: 7%; padding: 14px 10px;">Credito</th>
                                <th style="width: 8%; padding: 14px 10px;">Semestre</th>
                                <th style="width: 9%; padding: 14px 10px;">Total Credito</th>
                                <th style="width: 9%; padding: 14px 10px;">Total Materia</th>
                                <th style="width: 8%; padding: 14px 10px;">Tipu</th>
                                <th style="width: 12%; padding: 14px 10px;">Departamentu</th>
                                <th style="width: 8%; padding: 14px 10px;">Aksaun</th>
                            </tr>
                        </thead>
                        <tbody class="text-center">
                            <?php if (!empty($materia)): $nu = 1; foreach ($materia 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; ?></span></td>
                                    <td class="fw-bold text-primary"><?= htmlspecialchars($value->kode_materia); ?></td>
                                    <td class="text-left fw-semibold text-dark"><?= htmlspecialchars($value->naran_materia); ?></td>
                                    <td><?= htmlspecialchars($value->credito); ?></td>
                                    <td><span class="badge bg-secondary text-white rounded-pill px-2.5 py-1"><?= htmlspecialchars($value->semestre); ?></span></td>
                                    <td><?= htmlspecialchars($value->total_credito); ?></td>
                                    <td><?= htmlspecialchars($value->total_materia); ?></td>
                                    <td>
                                        <?php $color = ($value->tipu == 'Geral') ? 'bg-success' : 'bg-warning text-dark'; ?>
                                        <span class="badge <?= $color ?>" style="padding: 5px 10px; border-radius: 6px;">
                                            <?= htmlspecialchars($value->tipu) ?>
                                        </span>
                                    </td>
                                    <td><?= htmlspecialchars($value->departamentu); ?></td>
                                    <td class="text-center">
                                        <div class="d-flex justify-content-center gap-1">
                                            <a href="<?= base_url('materia/hadia/' . $value->id); ?>" 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('materia/hamos/' . $value->id); ?>" 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; 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 -->
<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('materia/report'); ?>" method="get" target="_blank">
        <div class="modal-header border-bottom-0 pb-0">
            <h5 class="modal-title fw-bold text-primary">Hili Filter Semestre</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">Semestre</label>
                <select name="semestre" class="form-control rounded-pill px-3" required>
                    <option value="ALL">Hotu (Semua)</option>
                    <option value="GANJIL">inpar (I, III, V, VII)</option>
                    <option value="GENAP">par (II, IV, VI, VIII)</option>
                </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;
    }
    .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>