@extends('layouts.app')

@section('content')
<div class="nk-block-head nk-block-head-sm">
    <div class="nk-block-between">
        <div class="nk-block-head-content">
            <h3 class="nk-block-title page-title">Daftar Kas Bon</h3>
            <div class="nk-block-des text-soft">
                <p>Manajemen data transaksi kas bon.</p>
            </div>
        </div>
    </div>
</div>

{{-- Filter Section --}}
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" action="{{ route('yayasan.transaksi.kas-bon.index') }}" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">Tanggal</label>
                <input type="date" class="form-control" name="tanggal" value="{{ request('tanggal') }}">
            </div>
            <div class="col-md-3">
                <label class="form-label">No Referensi</label>
                <input type="text" class="form-control" name="no_referensi" placeholder="Masukkan no referensi" value="{{ request('no_referensi') }}">
            </div>
            <div class="col-md-3">
                <label class="form-label">Deskripsi</label>
                <input type="text" class="form-control" name="deskripsi" placeholder="Masukkan deskripsi" value="{{ request('deskripsi') }}">
            </div>
            <div class="col-md-3">
                <label class="form-label">Unit</label>
                <select class="form-select select2" name="unit">
                    <option value="">Semua Unit</option>
                    @foreach ($units as $unit)
                        <option value="{{ $unit->id }}" {{ request('unit') == $unit->id ? 'selected' : '' }}>
                            {{ $unit->nama_unit }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 text-end">
                <button type="submit" class="btn btn-primary">
                    <em class="icon ni ni-search"></em>
                    <span>Cari Data</span>
                </button>
                <a href="{{ route('yayasan.transaksi.kas-bon.index') }}" class="btn btn-light">
                    <em class="icon ni ni-refresh"></em>
                    <span>Reset</span>
                </a>
            </div>
        </form>
    </div>
</div>

<div class="card card-preview">
    <div class="card-inner border-bottom">
        <div class="card-title-group">
            <div class="card-title">
                <h5 class="title">Daftar Kas Bon</h5>
            </div>
            <div class="card-tools me-n1">
                <ul class="btn-toolbar gx-1">
                    <li>
                        <a href="{{ route('yayasan.transaksi.kas-bon.create') }}" class="btn btn-primary-custom">
                            <em class="icon ni ni-plus"></em>
                            <span>Tambah Data</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-custom">
            <thead>
                <tr>
                    <th width="5%">No</th>
                    <th>Tanggal</th>
                    <th>No Referensi</th>
                    <th>Unit</th>
                    <th>Program Kegiatan</th>
                    <th>Deskripsi</th>
                    <th class="text-end">Nominal</th>
                    <th>Status</th>
                    <th class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($kasBon as $index => $item)
                <tr>
                    <td class="text-center">{{ $kasBon->firstItem() + $index }}</td>
                    <td>{{ \Carbon\Carbon::parse($item->tanggal)->format('d/m/Y') }}</td>
                    <td><span class="badge badge-dim bg-outline-secondary">{{ $item->no_referensi }}</span></td>
                    <td>{{ $item->unit->nama_unit ?? '-' }}</td>
                    <td>{{ $item->programKegiatan->nama ?? '-' }}</td>
                    <td>{{ $item->deskripsi }}</td>
                    <td class="text-end fw-bold">Rp {{ number_format($item->nominal, 0, ',', '.') }}</td>
                    <td>
                        @if($item->status == 'approval')
                            <span class="badge bg-success">Disetujui</span>
                        @elseif($item->status == 'process')
                            <span class="badge bg-info">Proses</span>
                        @elseif($item->status == 'draft')
                            <span class="badge bg-secondary">Draft</span>
                        @else
                            <span class="badge bg-warning">{{ ucfirst($item->status) }}</span>
                        @endif
                    </td>
                    <td class="text-center">
                        <div class="d-flex justify-content-center gap-2">
                            <a href="{{ route('yayasan.transaksi.kas-bon.show', $item->id) }}" class="btn-action btn-action-view" title="Lihat Detail">
                                <em class="icon ni ni-eye"></em>
                            </a>
                            <a href="{{ route('yayasan.transaksi.kas-bon.edit', $item->id) }}" class="btn-action btn-action-edit" title="Edit">
                                <em class="icon ni ni-edit"></em>
                            </a>
                            <button type="button" class="btn-action btn-action-delete" title="Hapus" onclick="if(confirm('Apakah Anda yakin ingin menghapus data ini?')) { document.getElementById('delete-form-{{ $item->id }}').submit(); }">
                                <em class="icon ni ni-trash"></em>
                            </button>
                            <form id="delete-form-{{ $item->id }}" action="{{ route('yayasan.transaksi.kas-bon.destroy', $item->id) }}" method="POST" class="d-none">
                                @csrf
                                @method('DELETE')
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="9" class="text-center p-4 text-muted">Tidak ada data kas bon.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($kasBon->hasPages())
    <div class="card-inner">
        <div class="d-flex justify-content-end">
            {{ $kasBon->links() }}
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Select2
        $('.select2').select2({
            placeholder: 'Pilih opsi...',
            allowClear: true,
            width: '100%'
        });

        const successAlert = document.getElementById('success-alert');
        const errorAlert = document.getElementById('error-alert');

        if (successAlert) {
            setTimeout(function() {
                successAlert.style.display = 'none';
            }, 5000);
        }

        if (errorAlert) {
            setTimeout(function() {
                errorAlert.style.display = 'none';
            }, 5000);
        }
    });
</script>
@endpush