<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
    
    body { 
        background-color: #f8fafc; 
        font-family: 'Plus Jakarta Sans', sans-serif; 
        color: #334155; 
    }
    
    /* Spasi dari Sidebar agar konsisten */
    .content-wrapper {
        margin-left: 250px; 
        padding: 24px;
        background-color: #f4f6f9; 
        min-height: 100vh; 
        box-sizing: border-box;
    }

    /* Card Styling */
    .card-custom {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
        border: 1px solid #e2e8f0;
        margin-bottom: 24px;
    }

    /* Tabel Profesional & Kompak */
    .table-compact { 
        font-size: 0.8rem !important; 
    }
    .table-compact th {
        background: linear-gradient(135deg, #4e73df 0%, #224abe 100%) !important;
        color: #ffffff !important;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.72rem;
        letter-spacing: 0.03em;
        border: none !important;
        padding: 12px 10px !important;
        white-space: nowrap; 
    }
    .table-compact td { 
        padding: 12px 10px !important; 
        vertical-align: middle !important; 
        color: #334155;
        border-bottom: 1px solid #f1f5f9;
    }

    .btn-xs { 
        padding: 0.25rem 0.45rem; 
        font-size: 0.7rem; 
        border-radius: 50rem;
    }
    
    .table-responsive { 
        overflow-x: auto; 
        border-radius: 0 0 16px 16px;
    }

    /* Form Controls & Inputs */
    .form-control-sm, .btn-sm {
        border-radius: 50rem;
    }

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

<div class="content-wrapper">
    <div class="container-fluid px-0">
        
        <!-- Header & Search Card -->
        <div class="card card-custom border-0">
            <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('kartatama/aumenta'); ?>" class="btn btn-primary btn-sm px-4 py-2.5 shadow-sm rounded-pill fw-semibold">
                        <i class="fas fa-plus me-1"></i> Aumenta Dadus
                    </a>

                    <!-- Form Pencarian -->
                    <form method="get" action="<?= base_url('kartatama'); ?>" class="d-flex align-items-center flex-wrap gap-2 mb-0">
                        <div class="input-group shadow-sm rounded-pill overflow-hidden" style="width: 260px;">
                            <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 form-control-sm" placeholder="Buka karta..." value="<?= isset($_GET['keyword']) ? htmlspecialchars($_GET['keyword']) : '' ?>">
                        </div>
                        <button type="submit" class="btn btn-success btn-sm px-3.5 py-2.5 shadow-sm rounded-pill fw-semibold"><i class="fas fa-search me-1"></i> Buka</button>
                        <a href="<?= base_url('kartatama'); ?>" class="btn btn-secondary btn-sm px-3 py-2.5 shadow-sm rounded-pill" title="Reset">
                            <i class="fas fa-redo"></i>
                        </a>
                    </form>

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

        <!-- Alert -->
        <?php if ($this->session->flashdata('success')): ?>
            <div class="alert alert-success alert-dismissible fade show py-2 mb-3 shadow-sm border-0 rounded-4" role="alert">
                <i class="fas fa-check-circle me-2"></i><?= $this->session->flashdata('success'); ?>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        <?php endif; ?>

        <!-- Table Card -->
        <div class="card card-custom border-0 overflow-hidden mb-5">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 table-compact">
                        <thead>
                            <tr>
                                <th class="text-center" style="width: 50px;">Nu</th>
                                <th>Numeru Kartatama</th>
                                <th>Asuntu</th>
                                <th>Hatoba</th>
                                <th>Deskrisaun</th>
                                <th class="text-center">Data Tama</th>
                                <th>Simu Husi</th>
                                <th class="text-center" style="width: 130px;">Aksaun</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (!empty($kartatama)): ?>
                                <?php $nu = 1; foreach ($kartatama as $value): ?>
                                    <tr>
                                        <td class="text-center font-weight-bold text-muted"><?= $nu++; ?></td>
                                        <td><strong class="text-dark"><span class="badge bg-light border px-2 py-1"><?= htmlspecialchars($value->numeru_kartatama); ?></span></strong></td>
                                        <td><?= htmlspecialchars($value->asuntu); ?></td>
                                        <td><?= htmlspecialchars($value->hatoba); ?></td>
                                        <td><?= htmlspecialchars($value->deskrisaun); ?></td>
                                        <td class="text-center"><?= htmlspecialchars($value->data_tama); ?></td>
                                        <td><?= htmlspecialchars($value->simu_husi); ?></td>
                                        <td class="text-center">
                                            <div class="d-flex justify-content-center gap-1">
                                                <a href="<?= base_url('kartatama/hadia/' . $value->numeru_kartatama); ?>" class="btn btn-warning btn-sm btn-xs text-white shadow-sm rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 28px; height: 28px;" title="Hadia">
                                                    <i class="fas fa-edit" style="font-size: 10px;"></i>
                                                </a>
                                                <a href="<?= base_url('kartatama/hamos/' . $value->numeru_kartatama); ?>" class="btn btn-danger btn-sm btn-xs shadow-sm rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 28px; height: 28px;" onclick="return confirm('Hakarak hamos dadus ne?');" title="Hamos">
                                                    <i class="fas fa-trash" style="font-size: 10px;"></i>
                                                </a>
                                                <a href="<?= base_url('kartatama/print_karta/' . $value->numeru_kartatama); ?>" target="_blank" class="btn btn-info btn-sm btn-xs text-white shadow-sm rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 28px; height: 28px;" title="Print">
                                                    <i class="fas fa-print" style="font-size: 10px;"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <tr>
                                    <td colspan="8" class="py-5 text-muted font-italic text-center">
                                        <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>