{{-- resources/views/yayasan/master/jenis-pendanaan/index.blade.php --}}

@extends('layouts.app')

@section('title', 'Master Jenis Pendanaan')

@push('styles')
{{-- Link CSS DataTables --}}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
{{-- Link CSS DataTables Bootstrap 5 (opsional, jika menggunakan styling Bootstrap) --}}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
@endpush

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-xl">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm pb-4">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">Master Jenis Pendanaan</h3>
                            <div class="nk-block-des text-soft">
                                <p>Kelola kategori sumber pendanaan yayasan.</p>
                            </div>
                        </div>
                        <div class="nk-block-head-content">
                            <a href="{{ route('yayasan.master.jenis-pendanaan.create') }}" class="btn btn-primary-custom">
                                <em class="icon ni ni-plus"></em>
                                <span>Tambah Jenis Pendanaan</span>
                            </a>
                        </div>
                    </div>
                </div>

                @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @endif

                @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @endif
                
                <div class="card card-preview">
                    <div class="card-inner border-bottom">
                        <div class="card-title-group">
                            <div class="card-title">
                                <h5 class="title">Daftar Jenis Pendanaan</h5>
                            </div>
                            <div class="card-tools me-n1">
                                <ul class="btn-toolbar gx-1">
                                    <li>
                                        <div class="form-control-wrap">
                                            <div class="form-icon form-icon-left"><em class="icon ni ni-search"></em></div>
                                            <input type="text" class="form-control" placeholder="Cari...">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                            {{-- Tabel Daftar Jenis Pendanaan --}}
                            <table class="table table-custom" id="jenis-pendanaan-table">
                                <thead>
                                    <tr>
                                        <th width="5%">#</th>
                                        <th width="15%">Kode</th>
                                        <th width="20%">Unit</th>
                                        <th width="30%">Kode Akun</th>
                                        <th width="20%">Deskripsi</th>
                                        <th class="text-center" width="15%">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($jenisPendanaans as $jenisPendanaan)
                                    <tr>
                                        <td class="text-center">{{ $jenisPendanaans->firstItem() + $loop->index }}</td>
                                        <td class="fw-medium">{{ $jenisPendanaan->kode_pendanaan }}</td>
                                        <td>{{ $jenisPendanaan->unit->nama_unit }}</td>
                                        <td>
                                            <span class="badge badge-dim bg-outline-secondary">{{ $jenisPendanaan->kode_akun }}</span> 
                                            <span class="ms-1">{{ $jenisPendanaan->akun->nama_akun }}</span>
                                        </td>
                                        <td>{{ $jenisPendanaan->deskripsi ?? '-' }}</td>
                                        <td class="text-center">
                                            <div class="d-flex justify-content-center gap-2">
                                                <a href="{{ route('yayasan.master.jenis-pendanaan.show', $jenisPendanaan->id) }}" class="btn-action btn-action-view" title="Detail">
                                                    <em class="icon ni ni-eye"></em>
                                                </a>
                                                <a href="{{ route('yayasan.master.jenis-pendanaan.edit', $jenisPendanaan->id) }}" class="btn-action btn-action-edit" title="Edit">
                                                    <em class="icon ni ni-edit"></em>
                                                </a>
                                                <form id="delete-form-{{ $jenisPendanaan->id }}" action="{{ route('yayasan.master.jenis-pendanaan.destroy', $jenisPendanaan->id) }}" method="POST" class="d-none">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                                <button type="button" class="btn-action btn-action-delete btn-delete" data-url="{{ route('yayasan.master.jenis-pendanaan.destroy', $jenisPendanaan->id) }}" title="Hapus">
                                                    <em class="icon ni ni-trash"></em>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="6" class="text-center p-4 text-muted">Tidak ada data jenis pendanaan.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                    </div>
                    <div class="card-inner">
                        <div class="d-flex justify-content-end">
                            {{ $jenisPendanaans->links('pagination::bootstrap-4') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
{{-- Pastikan jQuery dimuat sebelum DataTables. Jika belum dimuat di layout utama, tambahkan di sini --}}
{{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
{{-- Link JS DataTables --}}
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
{{-- Link JS DataTables Bootstrap 5 (opsional, jika menggunakan styling Bootstrap) --}}
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
{{-- Script Inisialisasi DataTables --}}
<script>
    $(document).ready(function() {
        $('#jenis-pendanaan-table').DataTable({
                 "language": { // Opsi bahasa (sesuaikan jika perlu)
                    "url": "//cdn.datatables.net/plug-ins/1.11.5/i18n/Indonesian.json" // Gunakan bahasa Indonesia
                }
            });
    });
</script>

{{-- Script SweetAlert untuk konfirmasi delete --}}
{{-- Pastikan SweetAlert sudah dimuat di layout utama atau di sini --}}
{{-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.btn-delete').forEach(function (el) {
            el.addEventListener('click', function (e) {
                e.preventDefault();
                const url = this.getAttribute('data-url');

                Swal.fire({
                    title: 'Yakin ingin menghapus?',
                    text: "Data tidak bisa dikembalikan!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#e3342f',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = url;

                        const csrf = document.createElement('input');
                        csrf.type = 'hidden';
                        csrf.name = '_token';
                        csrf.value = '{{ csrf_token() }}';
                        form.appendChild(csrf);

                        const method = document.createElement('input');
                        method.type = 'hidden';
                        method.name = '_method';
                        method.value = 'DELETE';
                        form.appendChild(method);

                        document.body.appendChild(form);
                        form.submit();
                    }
                });
            });
        });
    });


    document.addEventListener('DOMContentLoaded', function() {
        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