<!doctype html>
<html lang="ms">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Officer – Rekod Surat</title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            margin:0;
            font-family:Figtree,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
            background:radial-gradient(circle at top,#1d4ed8,#020617);
            color:#f8fafc;
        }
        .shell{min-height:100vh;padding:24px 18px 28px;display:flex;justify-content:center;}
        .card-glass{
            width:100%;
            max-width:1100px;
            background:rgba(15,23,42,.96);
            border-radius:18px;
            border:1px solid rgba(148,163,184,.35);
            box-shadow:0 24px 80px rgba(0,0,0,.45);
            color:#f8fafc;
        }
        .card-glass .card-body{padding:18px;}
        .card-glass h1,.card-glass h4,.card-glass .h4{color:#f8fafc;}
        .card-glass .text-secondary{color:#94a3b8 !important;}
        .table{color:#f8fafc;}
        .table thead th{color:#cbd5e1;border-color:rgba(55,65,81,.9);font-size:12px;text-transform:uppercase;letter-spacing:.06em;}
        .table td,.table th{color:#f1f5f9;border-color:rgba(55,65,81,.9);vertical-align:middle;}
        .form-control,.form-select{
            background:rgba(30,41,59,.9);
            border-color:rgba(148,163,184,.5);
            color:#f8fafc;
        }
        .form-control::placeholder{color:#94a3b8;opacity:1;}
        .form-control:focus,.form-select:focus{
            background:rgba(30,41,59,.95);
            border-color:rgba(56,189,248,.8);
            box-shadow:0 0 0 .25rem rgba(56,189,248,.18);
            color:#f8fafc;
        }
        .form-select option{background:#1e293b;color:#f8fafc;}
        .btn-gradient{
            border:none;
            background:linear-gradient(135deg,#38bdf8,#0ea5e9);
            color:#0f172a;
            font-weight:700;
        }
        .badge-soft{
            background:rgba(37,99,235,.18);
            border:1px solid rgba(59,130,246,.55);
            color:#bfdbfe;
        }
        .pagination .page-link{background:rgba(30,41,59,.9);border-color:rgba(148,163,184,.5);color:#f8fafc;}
        .pagination .page-link:hover{background:rgba(56,189,248,.2);border-color:rgba(56,189,248,.5);color:#f8fafc;}
        .pagination .page-item.active .page-link{background:linear-gradient(135deg,#38bdf8,#0ea5e9);border-color:#0ea5e9;color:#0f172a;}
    </style>
</head>
<body>
<div class="shell">
    <div class="card card-glass">
        <div class="card-body">
            <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap">
                <div>
                    <h1 class="h4 mb-1">Rekod Surat</h1>
                    <div class="text-secondary">Masukkan surat masuk/keluar untuk paparan dashboard pentadbiran.</div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <a href="<?php echo e(route('officer.letters.create')); ?>" class="btn btn-gradient">
                        + Rekod Surat
                    </a>
                    <form method="post" action="<?php echo e(route('officer.logout')); ?>" class="d-inline">
                        <?php echo csrf_field(); ?>
                        <button type="submit" class="btn btn-danger btn-sm">Logout</button>
                    </form>
                </div>
            </div>

            <?php if(session('status')): ?>
                <div class="alert alert-success mt-3 mb-0"><?php echo e(session('status')); ?></div>
            <?php endif; ?>

            <form class="row g-2 mt-3" method="get" action="<?php echo e(route('officer.letters.index')); ?>">
                <div class="col-12 col-md-6">
                    <input class="form-control" type="text" name="search" value="<?php echo e(request('search')); ?>" placeholder="Cari nombor/nama surat...">
                </div>
                <div class="col-12 col-md-3">
                    <select class="form-select" name="jenis">
                        <option value="">Semua Jenis</option>
                        <option value="masuk" <?php if(request('jenis') === 'masuk'): echo 'selected'; endif; ?>>Surat Masuk</option>
                        <option value="keluar" <?php if(request('jenis') === 'keluar'): echo 'selected'; endif; ?>>Surat Keluar</option>
                    </select>
                </div>
                <div class="col-12 col-md-3 d-flex gap-2">
                    <button class="btn btn-outline-light w-100" type="submit">Tapis</button>
                    <a class="btn btn-outline-secondary w-100" href="<?php echo e(route('officer.letters.index')); ?>">Reset</a>
                </div>
            </form>

            <div class="table-responsive mt-3">
                <table class="table table-dark table-hover align-middle mb-0" style="--bs-table-bg: transparent;">
                    <thead>
                    <tr>
                        <th style="width:70px;">No</th>
                        <th>Nombor Surat</th>
                        <th>Nama Surat</th>
                        <th>Jenis</th>
                        <th>Tarikh</th>
                        <th>Diisi oleh</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php $__empty_1 = true; $__currentLoopData = $letters; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $l): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr>
                            <td class="text-secondary"><?php echo e($letters->firstItem() + $loop->index); ?></td>
                            <td><span class="badge badge-soft"><?php echo e($l->nombor_surat); ?></span></td>
                            <td><?php echo e($l->nama_surat); ?></td>
                            <td>
                                <?php if($l->jenis === 'masuk'): ?>
                                    <span class="badge text-bg-success">Masuk</span>
                                <?php else: ?>
                                    <span class="badge text-bg-warning">Keluar</span>
                                <?php endif; ?>
                            </td>
                            <td><?php echo e(optional($l->tarikh_surat)->format('d/m/Y')); ?></td>
                            <td><?php echo e($l->created_by ?: '-'); ?></td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="6" class="text-secondary py-4">Tiada rekod surat lagi.</td>
                        </tr>
                    <?php endif; ?>
                    </tbody>
                </table>
            </div>

            <div class="mt-3">
                <?php echo e($letters->withQueryString()->links()); ?>

            </div>
        </div>
    </div>
</div>
</body>
</html>

<?php /**PATH C:\xampp\htdocs\dash\resources\views/officer/letters/index.blade.php ENDPATH**/ ?>