@extends('layouts.app')
@section('title', 'Penyaluran Dana')

@section('content')
<div class="nk-content">
    <div class="container-fluid">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <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 Ajuan Droping Pengeluaran</h3>
                        </div>
                    </div>
                </div>

                {{-- Tabs --}}
                <ul class="nav nav-tabs mt-4 mb-4 border-bottom-0">
                    <li class="nav-item">
                        <a class="nav-link {{ $status === 'belum' ? 'active' : '' }}"
                        href="{{ route('yayasan.transaksi.penyaluran-dana.index', array_merge(request()->except('page'), ['status' => 'belum'])) }}">
                        Belum Disalurkan
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $status === 'sudah' ? 'active' : '' }}"
                    href="{{ route('yayasan.transaksi.penyaluran-dana.index', array_merge(request()->except('page'), ['status' => 'sudah'])) }}">
                    Sudah Disalurkan
                </a>
            </li>
        </ul>

        <div class="nk-block">
            
            {{-- Filter Form --}}
            <div class="card card-bordered mb-4">
                <div class="card-inner">
                    <form method="GET" class="row g-3">
                        <input type="hidden" name="status" value="{{ $status }}">
                        <div class="col-md-5">
                            <label class="form-label">Unit</label>
                            <div class="form-control-wrap">
                                <select class="form-select js-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>
                        <div class="col-md-5">
                            <label class="form-label">Bulan</label>
                            <div class="form-control-wrap">
                                <select class="form-select js-select2" name="bulan">
                                    <option value="">-- Semua Bulan --</option>
                                    @foreach (range(1, 12) as $m)
                                    <option value="{{ $m }}" {{ request('bulan') == $m ? 'selected' : '' }}>
                                        {{ \Carbon\Carbon::createFromFormat('!m', $m)->format('F') }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">
                                <em class="icon ni ni-filter me-1"></em> Filter
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Alert --}}
            @if(session('success'))
            <div class="alert alert-success mt-2">
                {{ session('success') }}
            </div>
            @endif

            {{-- Table --}}
            <div class="card card-preview">
                <div class="card-inner border-bottom">
                    <div class="card-title-group">
                        <div class="card-title">
                            <h5 class="title">Daftar Penyaluran Dana</h5>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-custom">
                        <thead>
                            <tr>
                                <th width="5%" class="text-center">#</th>
                                <th>No Referensi</th>
                                <th>Tanggal</th>
                                <th>Unit</th>
                                <th class="text-end">Total Kredit</th>
                                <th class="text-center" width="10%">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $no = $jurnalGrouped->firstItem();
                            @endphp
                            @forelse ($jurnalGrouped as $i => $row)
                            <tr>
                                <td class="text-center">{{ $no++ }}</td>
                                <td>
                                    <span class="badge badge-dim bg-outline-primary">{{ $row->no_referensi ?? '-' }}</span>
                                </td>
                                <td>
                                    {{ \Carbon\Carbon::parse($row->tanggal)->format('d-m-Y') }}
                                </td>
                                <td>
                                    {{ $row->nama_unit ?? '-' }}
                                </td>
                                <td class="text-end fw-bold">
                                    {{ number_format($row->total_kredit, 0, ',', '.') }}
                                </td>

                                <td class="text-center">
                                   @if ($status === 'belum')
                                            @if($row->no_referensi)
                                            <a href="{{ route('yayasan.transaksi.penyaluran-dana.wizardStep1', ['noReferensi' => $row->no_referensi]) }}" class="btn btn-sm btn-primary">
                                                Proses
                                            </a>
                                            @endif
                                    @else
                                        <span class="badge badge-dot bg-success">Selesai</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr> 
                                <td colspan="6" class="text-center p-4 text-muted">
                                    Tidak ada data penyaluran dana.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                <div class="card-inner border-top">
                    <div class="d-flex justify-content-end">
                         {{ $jurnalGrouped->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsectionv>
</div>
                                @endsection

                                @push('scripts')
                                <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
                                <script type="text/javascript">
                                    $(document).ready(function() {

                // const actualDataRowsCount = $('#datatable-penyaluran tbody tr').not('.no-data-row').length;

                // const isDataTableInitialized = $.fn.DataTable.isDataTable('#datatable-penyaluran');

                // if (actualDataRowsCount > 0 && !isDataTableInitialized) {
                //     $('#datatable-penyaluran').DataTable({
                //         paging: false,    
                //         searching: false,
                //         info: false,     
                //         ordering: true,  
                //         autoWidth: false, 
                //         language: {

                //             emptyTable: "Tidak ada data tersedia"
                //         },
                //         columnDefs: [
                //         { orderable: false, targets: -1 }
                //         ]
                //     });
                // }

                // else if (actualDataRowsCount === 0 && isDataTableInitialized) {

                //     $('#datatable-penyaluran').DataTable().destroy();
                //     $('#datatable-penyaluran').removeClass('dataTable no-footer');
                // }

            });

                                    function proses(noRef) {
                                        Swal.fire({
                                            title: 'Proses Penyaluran?',
                                            text: 'Proses seluruh jurnal dengan No Referensi ' + noRef + '?',
                                            icon: 'warning',
                                            showCancelButton: true,
                                            confirmButtonText: 'Ya, Proses',
                                            cancelButtonText: 'Batal',
                                            customClass: {
                                                confirmButton: 'btn btn-success',
                                                cancelButton: 'btn btn-danger'
                                            },
                                            buttonsStyling: false
                                        }).then((result) => {
                                            if (result.isConfirmed) {
                                                document.getElementById('form-proses-' + noRef).submit();
                                            }
                                        });
                                    }
                                </script>
                                @endpush