@extends('layouts.admin')

@section('title', 'Kode Akses Pendataan')
@section('page_title', 'Kode Akses Pendataan')

@section('style')
    <style>
        .master-panel {
            margin-bottom: 1rem;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            box-shadow: none;
            overflow: hidden;
        }

        .master-panel .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.15rem;
            color: #4a3728;
            background: #ffffff;
            border-bottom: 1px solid #e8edf2;
            border-radius: 0;
        }

        .master-panel .card-header h5 {
            margin: 0;
            font-size: 1rem;
            font-weight: 750;
        }

        .panel-subtitle {
            margin-top: 0.2rem;
            color: #64748b;
            font-size: 0.8rem;
        }

        .form-surface {
            padding: 1rem;
            margin-bottom: 0;
            background: #ffffff;
            border-bottom: 1px solid #e7ecf1;
        }

        .table-clean {
            margin: 0;
        }

        .table-clean thead th {
            padding: 0.85rem;
            color: #637181;
            background: #ffffff;
            border-bottom: 2px solid #e7ecf1;
            font-size: 0.8rem;
            text-transform: uppercase;
            white-space: nowrap;
            vertical-align: middle;
        }

        .table-clean tbody td {
            padding: 0.9rem 0.85rem;
            color: #4a3728;
            border-color: rgba(0, 0, 0, 0.05);
            vertical-align: middle;
        }

        .name-strong {
            color: #334155;
            font-weight: 700;
        }

        .meta-text {
            color: #64748b;
            font-size: 0.8rem;
        }

        .status-pill {
            display: inline-flex;
            padding: 0.3rem 0.55rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .status-pill.active {
            color: #4a6348;
            background: #dce5da;
        }

        .status-pill.inactive {
            color: #8c6a28;
            background: #f2e7c9;
        }

        .status-pill.quota {
            color: #8a4843;
            background: #f2d5d3;
        }

        .empty-state {
            padding: 2rem 1rem;
            color: #64748b;
            text-align: center;
        }

        .action-group {
            display: flex;
            gap: 0.4rem;
            justify-content: flex-end;
        }

        @media (max-width: 575.98px) {}
    </style>
@endsection

@section('content')
    <section class="page-hero">
        <div>
            <h3><i class="fas fa-key"></i> Kode Akses Pendataan</h3>
            <p>Buat dan kelola kode akses untuk pendataan pegawai per unit kerja.</p>
        </div>
    </section>

    <div class="card master-panel">
        <div class="card-header">
            <div>
                <h5>Buat Kode Kantor</h5>
                <div class="panel-subtitle">Kode baru akan aktif sesuai batas waktu dan kuota yang ditentukan.</div>
            </div>
        </div>
        <div class="form-surface">
            <form action="{{ route('admin.kode-akses-kantor.store') }}" method="POST">
                @csrf
                <div class="row g-3">
                    <div class="col-lg-4">
                        <label for="unit_kerja_id" class="form-label">Unit Kerja</label>
                        <select id="unit_kerja_id" name="unit_kerja_id" class="form-select" required>
                            <option value="" disabled @selected(!old('unit_kerja_id'))>Pilih Unit Kerja...</option>
                            @foreach ($unitKerjaList as $unit)
                                <option value="{{ $unit->id }}" @selected((int) old('unit_kerja_id') === $unit->id)>
                                    {{ $unit->nama_unit }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3">
                        <label for="kode" class="form-label">Kode</label>
                        <input type="text" id="kode" name="kode" class="form-control text-uppercase"
                            value="{{ old('kode') }}" placeholder="Kosongkan untuk otomatis">
                    </div>
                    <div class="col-lg-2">
                        <label for="batas_penggunaan" class="form-label">Batas Penggunaan</label>
                        <input type="number" id="batas_penggunaan" name="batas_penggunaan" class="form-control" min="1"
                            max="10000" value="{{ old('batas_penggunaan', 50) }}" required>
                    </div>
                    <div class="col-lg-3">
                        <label for="kedaluwarsa_pada" class="form-label">Berlaku Sampai</label>
                        <input type="datetime-local" id="kedaluwarsa_pada" name="kedaluwarsa_pada" class="form-control"
                            value="{{ old('kedaluwarsa_pada', now()->addDays(7)->format('Y-m-d\TH:i')) }}" required>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-sage">
                            <i class="fas fa-plus"></i> Buat Kode
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card master-panel">
        <div class="card-header">
            <div>
                <h5>Daftar Kode Kantor</h5>
                <div class="panel-subtitle">Kode yang sudah kedaluwarsa atau kuota habis tidak dapat digunakan.</div>
            </div>
        </div>
        <div class="form-surface">
            <form action="{{ route('admin.kode-akses-kantor.index') }}" method="GET">
                <div class="row g-3">
                    <div class="col-lg-4 col-md-12">
                        <label class="form-label">Pencarian</label>
                        <div class="input-group">
                            <span class="input-group-text bg-transparent text-muted border-end-0"><i
                                    class="fas fa-search"></i></span>
                            <input type="text" name="search" class="form-control border-start-0 ps-0 js-auto-search"
                                placeholder="Cari kode/unit kerja..." value="{{ request('search') }}">
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div id="ajax-content">
            <div class="table-responsive">
                <table class="table table-clean">
                    <thead>
                        <tr>
                            <th>Kode</th>
                            <th>Unit Kerja</th>
                            <th class="text-center">Pemakaian</th>
                            <th class="text-center">Kedaluwarsa</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Dibuat Oleh</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($kodeAkses as $item)
                            @php
                                $pillClass = match ($item->status_label) {
                                    'Aktif' => 'active',
                                    'Kuota Habis' => 'quota',
                                    default => 'inactive',
                                };
                            @endphp
                            <tr>
                                <td><span class="name-strong font-monospace">{{ $item->kode }}</span></td>
                                <td>{{ $item->unitKerja->nama_unit }}</td>
                                <td class="text-center">
                                    <div class="name-strong">{{ $item->jumlah_digunakan }} / {{ $item->batas_penggunaan }}</div>
                                    <div class="meta-text">Sisa {{ $item->sisa_penggunaan }}</div>
                                </td>
                                <td class="text-center">
                                    <div class="meta-text">{{ $item->kedaluwarsa_pada->format('d-m-Y H:i') }}</div>
                                </td>
                                <td class="text-center"><span class="status-pill {{ $pillClass }}">{{ $item->status_label }}</span></td>
                                <td class="text-center">
                                    <div class="meta-text">{{ $item->pembuat->name }}</div>
                                </td>
                                <td class="text-center">
                                    <div class="action-group">
                                        <form action="{{ route('admin.kode-akses-kantor.toggle', $item) }}" method="POST"
                                            class="d-inline">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit"
                                                class="btn btn-sm btn-outline-{{ $item->aktif ? 'warning' : 'success' }}"
                                                title="{{ $item->aktif ? 'Nonaktifkan' : 'Aktifkan' }}">
                                                <i class="fas fa-{{ $item->aktif ? 'pause' : 'play' }}"></i>
                                            </button>
                                        </form>
                                        <form action="{{ route('admin.kode-akses-kantor.destroy', $item) }}" method="POST"
                                            class="d-inline" onsubmit="return confirm('Hapus kode kantor ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Hapus">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="empty-state"><i class="fas fa-inbox d-block mb-2 fs-4"></i>Belum ada kode
                                    kantor.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($kodeAkses->hasPages())
                {{ $kodeAkses->links() }}
            @endif
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.querySelector('form[method="GET"], .filter-card form');
            if (!form) return;

            const contentContainer = document.getElementById('ajax-content');

            const submitFilter = function () {
                const url = new URL(form.action || window.location.href);
                const formData = new FormData(form);
                const params = new URLSearchParams(formData);
                url.search = params.toString();

                if (contentContainer) contentContainer.style.opacity = '0.5';

                fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                    .then(response => response.text())
                    .then(html => {
                        const parser = new DOMParser();
                        const doc = parser.parseFromString(html, 'text/html');

                        const newContent = doc.getElementById('ajax-content');
                        if (newContent && contentContainer) {
                            contentContainer.innerHTML = newContent.innerHTML;
                            contentContainer.style.opacity = '1';
                        }

                        window.history.replaceState({}, '', url);
                    })
                    .catch(() => { if (contentContainer) contentContainer.style.opacity = '1'; });
            };

            form.addEventListener('submit', function (e) {
                e.preventDefault();
                submitFilter();
            });

            form.querySelectorAll('select, .js-auto-filter').forEach(function (input) {
                input.addEventListener('change', submitFilter);
            });

            let searchTimer;
            form.querySelectorAll('.js-auto-search').forEach(function (input) {
                input.addEventListener('input', function () {
                    clearTimeout(searchTimer);
                    searchTimer = setTimeout(submitFilter, 500);
                });
            });
        });
    </script>
@endsection