@extends('layouts.app')

@section('title', 'Kategori Pembayaran')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb">Manajemen SPP <i class="bi bi-chevron-right" aria-hidden="true"></i>Kategori Pembayaran</p>
            <h1 class="pkbm-dashboard__title">Kategori Pembayaran</h1>
            <p class="pkbm-dashboard__subtitle">Atur jenis dan tarif pembayaran untuk tahun ajaran {{ $period->tahun_pelajaran }}.</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <button type="button" class="sp-btn-primary" data-open-category>
                <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah kategori
            </button>
            <form method="POST" action="{{ route('pkbm.spp.categories.copy') }}" onsubmit="return confirm('Salin kategori dari tahun ajaran sebelumnya? Kategori dengan nama yang sama akan dilewati.')">
                @csrf
                <button type="submit" class="sp-btn-secondary"><i class="bi bi-copy" aria-hidden="true"></i>Salin Tahun Lalu</button>
            </form>
        </div>
    </header>

    @if (session('status'))<div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>@endif
    @if ($errors->any())<div role="alert" class="settings-notice settings-notice--error"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><div><p class="font-semibold">Periksa kembali data kategori.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>@endif

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="sp-section-title">Kategori tahun ajaran {{ $period->tahun_pelajaran }}</h2>
                <p class="mt-1 text-xs text-slate-500">Daftar tarif dan kelas yang berlaku untuk setiap kategori.</p>
            </div>
            <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700">{{ $categories->count() }} kategori</span>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table spp-category-table min-w-[48rem]">
                <thead>
                    <tr>
                        <th scope="col">Nama pembayaran</th>
                        <th scope="col">Tipe</th>
                        <th scope="col" class="text-right">Tarif</th>
                        <th scope="col">Kelas berlaku</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($categories as $category)
                        <tr>
                            <th scope="row" class="font-semibold text-slate-800">{{ $category->nama_pembayaran }}</th>
                            <td><span @class(['rounded-full px-2.5 py-1 text-xs font-semibold', 'bg-blue-50 text-blue-700' => $category->tipe === 'rutin', 'bg-slate-100 text-slate-700' => $category->tipe !== 'rutin'])>{{ $category->tipe === 'rutin' ? 'Rutin bulanan' : 'Sekali bayar' }}</span></td>
                            <td class="whitespace-nowrap text-right font-semibold text-slate-800">Rp {{ number_format((int) $category->nominal, 0, ',', '.') }}</td>
                            <td>
                                @if ($category->kelas->isEmpty())<span class="text-slate-500">Semua kelas</span>
                                @else<div class="flex flex-wrap gap-1">@foreach ($category->kelas as $class)<span class="rounded-full bg-slate-100 px-2 py-1 text-xs text-slate-600">{{ $class->nama_kelas }}</span>@endforeach</div>@endif
                            </td>
                            <td class="text-right">
                                <details class="relative inline-block text-left">
                                    <summary class="settings-icon-action ml-auto cursor-pointer list-none" aria-label="Edit kategori {{ $category->nama_pembayaran }}"><i class="bi bi-pencil-square" aria-hidden="true"></i></summary>
                                    <div class="absolute right-0 z-20 mt-2 w-[min(90vw,34rem)] rounded-xl border border-slate-200 bg-white p-4 text-left shadow-xl">
                                        <form method="POST" action="{{ route('pkbm.spp.categories.update', $category->id) }}" class="space-y-3" data-category-money-form>
                                            @csrf @method('PUT')
                                            <label class="block"><span class="sp-form-label">Nama pembayaran</span><input name="nama_pembayaran" maxlength="100" required value="{{ $category->nama_pembayaran }}" class="sp-form-control px-3"></label>
                                            <div class="grid gap-3 sm:grid-cols-2">
                                                <label class="block"><span class="sp-form-label">Tarif (Rp)</span>                                                <input type="text" name="nominal" inputmode="numeric" maxlength="13" required value="{{ number_format((int) $category->nominal, 0, ',', '.') }}" class="sp-form-control px-3 text-right" data-category-money></label>
                                                <label class="block"><span class="sp-form-label">Jenis</span><select name="tipe" class="sp-form-control"><option value="rutin" @selected($category->tipe === 'rutin')>Rutin bulanan</option><option value="sekali" @selected($category->tipe === 'sekali')>Sekali bayar</option></select></label>
                                            </div>
                                            <fieldset><legend class="sp-form-label">Kelas (tanpa centang = semua kelas)</legend><div class="grid gap-2 sm:grid-cols-2">@foreach ($classes as $class)<label class="flex items-center gap-2 text-sm"><input type="checkbox" name="kelas_ids[]" value="{{ $class->id }}" @checked($category->kelas->contains(fn ($linked) => (int) $linked->id === (int) $class->id)) class="rounded border-slate-300 text-blue-600"><span>{{ $class->nama_kelas }}</span></label>@endforeach</div></fieldset>
                                            <div class="flex justify-end"><button class="sp-btn-primary" type="submit">Simpan perubahan</button></div>
                                        </form>
                                    </div>
                                </details>
                                <form method="POST" action="{{ route('pkbm.spp.categories.destroy', $category->id) }}" class="inline" onsubmit="return confirm('Hapus kategori ini? Kategori yang sudah dipakai tidak dapat dihapus.')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="settings-icon-action settings-icon-action--delete ml-1" title="Hapus kategori" aria-label="Hapus {{ $category->nama_pembayaran }}"><i class="bi bi-trash3" aria-hidden="true"></i></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="px-4 py-10 text-center"><i class="bi bi-tags text-2xl text-slate-300" aria-hidden="true"></i><p class="mt-2 font-semibold text-slate-700">Kategori belum tersedia</p><p class="text-sm text-slate-500">Tambahkan kategori untuk tahun ajaran aktif atau salin pola tahun sebelumnya.</p></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

<dialog id="create-category-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="create-category-title">
    <form method="POST" action="{{ route('pkbm.spp.categories.store') }}" data-category-money-form>
        @csrf
        <input type="hidden" name="_form" value="create">
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-tags"></i></span>
                <div>
                    <h2 id="create-category-title" class="sp-section-title">Tambah kategori pembayaran</h2>
                    <p class="mt-1 text-xs text-slate-500">Kategori berlaku untuk tahun ajaran {{ $period->tahun_pelajaran }}.</p>
                </div>
            </div>
            <button type="button" data-close-category class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup">
                <i class="bi bi-x-lg" aria-hidden="true"></i>
            </button>
        </div>
        <div class="space-y-4 p-5">
            <label class="block">
                <span class="sp-form-label">Nama pembayaran</span>
                <input name="nama_pembayaran" maxlength="100" required value="{{ old('nama_pembayaran') }}" class="sp-form-control px-3" placeholder="Contoh: Iuran bulanan">
            </label>
            <div class="grid gap-4 sm:grid-cols-2">
                <label class="block">
                    <span class="sp-form-label">Tarif (Rp)</span>
                    <input type="text" name="nominal" inputmode="numeric" maxlength="13" required value="{{ old('nominal', 0) }}" class="sp-form-control px-3 text-right" data-category-money placeholder="0">
                </label>
                <label class="block">
                    <span class="sp-form-label">Jenis pembayaran</span>
                    <select name="tipe" class="sp-form-control">
                        <option value="rutin" @selected(old('tipe') === 'rutin')>Rutin bulanan</option>
                        <option value="sekali" @selected(old('tipe', 'sekali') === 'sekali')>Sekali bayar</option>
                    </select>
                </label>
            </div>
            <fieldset>
                <legend class="sp-form-label">Berlaku untuk kelas</legend>
                @if ($classes->isEmpty())
                    <p class="text-sm text-slate-500">Belum ada kelas aktif. Kategori akan berlaku umum.</p>
                @else
                    <p class="mb-2 text-xs text-slate-500">Tanpa pilihan kelas, kategori berlaku untuk semua kelas.</p>
                    <div class="grid gap-2 sm:grid-cols-2">
                        @foreach ($classes as $class)
                            <label class="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
                                <input type="checkbox" name="kelas_ids[]" value="{{ $class->id }}" @checked(in_array((string) $class->id, old('kelas_ids', []), true)) class="rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                                <span>{{ $class->nama_kelas }}</span>
                            </label>
                        @endforeach
                    </div>
                @endif
            </fieldset>
        </div>
        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-category class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-plus-lg" aria-hidden="true"></i>Simpan kategori</button>
        </div>
    </form>
</dialog>

@push('scripts')
    <script>
        const categoryDialog = document.querySelector('#create-category-dialog');
        document.querySelector('[data-open-category]')?.addEventListener('click', () => categoryDialog.showModal());
        document.querySelectorAll('[data-close-category]').forEach((button) => {
            button.addEventListener('click', () => categoryDialog.close());
        });

        const formatCategoryMoney = (input) => {
            const rawDigits = input.value.replace(/\D/g, '').slice(0, 10);
            const digitsBeforeCursor = input.value.slice(0, input.selectionStart ?? input.value.length).replace(/\D/g, '').length;
            const digits = rawDigits ? String(Math.min(Number(rawDigits), 2147483647)) : '';
            input.value = digits ? new Intl.NumberFormat('id-ID').format(Number(digits)) : '';
            let cursor = 0;
            let counted = 0;
            while (cursor < input.value.length && counted < digitsBeforeCursor) {
                if (/\d/.test(input.value[cursor])) counted += 1;
                cursor += 1;
            }
            input.setSelectionRange(cursor, cursor);
        };

        document.querySelectorAll('[data-category-money]').forEach((input) => {
            input.addEventListener('input', () => formatCategoryMoney(input));
            formatCategoryMoney(input);
        });
        document.querySelectorAll('[data-category-money-form]').forEach((form) => {
            form.addEventListener('submit', () => {
                form.querySelectorAll('[data-category-money]').forEach((input) => {
                    input.value = input.value.replace(/\D/g, '');
                });
            });
        });

        @if (old('_form') === 'create')
            categoryDialog.showModal();
        @endif
    </script>
@endpush
@endsection