{{-- resources/views/yayasan/transaksi/pengeluaran-kas/index.blade.php --}}

@extends('layouts.app')

@section('title', 'Daftar Ajuan Pengeluaran Kas')

@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">
                        <div class="nk-block-between">
                            <div class="nk-block-head-content">
                                <h3 class="nk-block-title page-title">Daftar Ajuan Pengeluaran Kas Gaji</h3>
                                <div class="nk-block-des text-soft">
                                    <p>Manajemen data transaksi pengeluaran kas gaji.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="row align-items-center">
                            <div class="col-10">
                                <div class="row">

                                    <form method="GET" action="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.index') }}"
                                        class="row g-2 align-items-end">
                                        <div class="col-md-2">
                                            <select class="form-select select-2" name="status" style="min-width: 150px;">
                                                <option value="">Semua Status</option>
                                                <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>
                                                    Draft</option>
                                                <option value="approval"
                                                    {{ request('status') == 'approval' ? 'selected' : '' }}>Disetujui</option>
                                                <option value="reject" {{ request('status') == 'reject' ? 'selected' : '' }}>
                                                    Ditolak</option>
                                                <option value="revision"
                                                    {{ request('status') == 'revision' ? 'selected' : '' }}>Revisi</option>
                                                <option value="process" {{ request('status') == 'process' ? 'selected' : '' }}>
                                                    Proses</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2 col-adv-filter">
                                            <button type="button" class="btn btn-outline-secondary w-100 text-center"
                                                id="toggle-advanced-filter">
                                                <em class="icon ni ni-filter-alt"></em>
                                                <span>Filter Lanjutan</span>
                                            </button>
                                        </div>
                                        <div class="col-md-2 d-none adv-filter">
                                            <input type="text" class="form-control" id="tanggal" name="tanggal"
                                                placeholder="Tanggal" value="{{ request('tanggal') }}">
                                        </div>
                                        <div class="col-md-2 d-none adv-filter">
                                            <input type="text" class="form-control" name="no_referensi"
                                                placeholder="No Referensi" value="{{ request('no_referensi') }}">
                                        </div>
                                        <div class="col-md-2 d-none adv-filter">
                                            <input type="text" class="form-control" name="deskripsi" placeholder="Deskripsi"
                                                value="{{ request('deskripsi') }}">
                                        </div>
                                        <div class="col-md-2 d-none adv-filter">
                                            <select class="form-select select-2" 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-md-8">
                                            <button type="submit" class="btn btn-primary" id="search-btn">
                                                <em class="icon ni ni-search"></em>
                                                <span>Cari</span>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="col-2">

                                        <!-- Tombol Import Data -->
                                        <button type="button" class="ml-2 btn btn-info" data-bs-toggle="modal" data-bs-target="#modalImportExcel">
                                            <em class="icon ni ni-file"></em>
                                            <span>Import Data</span>
                                        </button>
                                        <button type="button" id="btnSyncRkasGaji" class="ml-2 btn btn-primary">
                                            <em class="icon ni ni-sync"></em>
                                            <span>Sync RKAS</span>
                                        </button>
                                        <span id="syncStatusGaji" class="text-muted ms-2" style="display:none;"></span>

                                        <!-- Modal Import Excel -->
                                        <div class="modal fade" id="modalImportExcel" tabindex="-1" aria-labelledby="modalImportExcelLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <form action="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.import') }}" method="POST" enctype="multipart/form-data">
                                                        @csrf
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="modalImportExcelLabel">Import Data Pengeluaran Kas Gaji(Excel)</h5>
                                                            <a href="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.template') }}" class="btn btn-sm btn-outline-primary ms-3">
                                                                <em class="icon ni ni-download"></em> Template
                                                            </a>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="form-group mb-3">
                                                                <label for="file">Pilih File Excel (.xlsx, .xls):</label>
                                                                <input type="file" class="form-control" id="file" name="file" accept=".xlsx,.xls" required>
                                                            </div>
                                                            <div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                                                            <button type="submit" class="btn btn-primary">Import</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>

                            </div>

                            @push('scripts')
                                <script>
                                    document.addEventListener('DOMContentLoaded', function() {
                                        const toggleBtn = document.getElementById('toggle-advanced-filter');
                                        const advFields = document.querySelectorAll('.adv-filter');
                                        const searchBtn = document.getElementById('search-btn');
                                        let advancedVisible = false;

                                        toggleBtn.addEventListener('click', function() {
                                            advancedVisible = !advancedVisible;
                                            advFields.forEach(function(field) {
                                                field.classList.toggle('d-none', !advancedVisible);
                                            });

                                            if (advancedVisible) {
                                                searchBtn.classList.add('d-none');
                                            } else {
                                                searchBtn.classList.remove('d-none');
                                            }

                                            const colAdvFilter = document.querySelector('.col-adv-filter');
                                            if (colAdvFilter) {
                                                colAdvFilter.classList.remove('col-adv-filter');
                                            }
                                        });
                                    });
                                </script>
                            @endpush
                        </div>
                    </div>
                    @push('scripts')
                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                const toggleBtn = document.getElementById('toggle-advanced-filter');
                                const advForm = document.getElementById('advanced-filter-form');
                                if (toggleBtn && advForm) {
                                    toggleBtn.addEventListener('click', function() {
                                        advForm.style.display = advForm.style.display === 'none' ? 'flex' : 'none';
                                    });
                                }
                            });
                        </script>
                    @endpush
                </div>

                <div class="mb-3">

                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert" id="success-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" role="alert" id="error-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">Riwayat Pengeluaran Kas Gaji</h5>
                                </div>
                                <div class="card-tools me-n1">
                                    <ul class="btn-toolbar gx-1">
                                        {{-- Tools if needed --}}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-custom">
                                <thead>
                                    <tr>
                                        <th width="5%" class="text-center">#</th>
                                        <th>Tanggal</th>
                                        <th>No. Ref</th>
                                        <th>Deskripsi</th>
                                        <th>Unit</th>
                                        <th class="text-end">Nominal</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center" width="15%">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($pengeluaranKas as $transaksi)
                                    <tr>
                                        <td class="text-center">
                                            {{ ($pengeluaranKas->currentPage() - 1) * $pengeluaranKas->perPage() + $loop->iteration }}
                                        </td>
                                        <td>{{ $transaksi->tanggal->format('d-m-Y') }}</td>
                                        <td><span class="badge badge-dim bg-outline-secondary">{{ $transaksi->no_referensi ?? '-' }}</span></td>
                                        <td>{{ $transaksi->deskripsi }}</td>
                                        <td>{{ $transaksi->unit->nama_unit ?? '-' }}</td>
                                        <td class="text-end fw-bold">{{ number_format($transaksi->nominal, 0, ',', '.') }}</td>
                                        <td class="text-center">
                                            @if ($transaksi->status == 'draft')
                                                <span class="badge bg-secondary">Draft</span>
                                            @elseif ($transaksi->status == 'approval')
                                                <span class="badge bg-success">Disetujui</span>
                                            @elseif ($transaksi->status == 'reject')
                                                <span class="badge bg-danger">Ditolak</span>
                                            @elseif ($transaksi->status == 'revision')
                                                <span class="badge bg-warning">Revisi</span>
                                            @elseif ($transaksi->status == 'process')
                                                <span class="badge bg-info">Proses</span>
                                            @else
                                                <span class="badge bg-light">{{ ucfirst($transaksi->status) }}</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            <div class="d-flex justify-content-center gap-2">
                                                <a href="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.show', $transaksi->id) }}" class="btn-action btn-action-view" title="Lihat Detail">
                                                    <em class="icon ni ni-eye"></em>
                                                </a>

                                                @if ($transaksi->status == 'draft' || $transaksi->status == 'revision')
                                                    <a href="javascript:void(0)" class="btn-action btn-action-edit" title="Submit Transaksi" onclick="event.preventDefault();
                                                        Swal.fire({
                                                            title: 'Submit Transaksi?',
                                                            text: 'Apakah Anda yakin ingin mengajukan transaksi ini?',
                                                            icon: 'warning',
                                                            showCancelButton: true,
                                                            confirmButtonText: 'Ya, ajukan!',
                                                            cancelButtonText: 'Batal'
                                                        }).then((result) => {
                                                            if (result.isConfirmed) {
                                                                document.getElementById('submit-form-{{ $transaksi->id }}').submit();
                                                            }
                                                        });">
                                                        <em class="icon ni ni-telegram"></em>
                                                    </a>
                                                    <form id="submit-form-{{ $transaksi->id }}" action="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.approval-process', $transaksi->id) }}" method="POST" class="d-none">
                                                        @csrf
                                                    </form>
                                                @endif

                                                @if ($transaksi->status == 'approval')
                                                    <button type="button" class="btn-action btn-action-delete disabled" disabled title="Tidak dapat dihapus" style="opacity: 0.5; cursor: not-allowed;">
                                                        <em class="icon ni ni-trash"></em>
                                                    </button>
                                                @else
                                                    <button type="button" class="btn-action btn-action-delete" title="Hapus" onclick="event.preventDefault();
                                                        Swal.fire({
                                                            title: 'Hapus Data?',
                                                            text: 'Data yang dihapus tidak dapat dikembalikan.',
                                                            icon: 'warning',
                                                            showCancelButton: true,
                                                            confirmButtonText: 'Ya, hapus!',
                                                            cancelButtonText: 'Batal'
                                                        }).then((result) => {
                                                            if (result.isConfirmed) {
                                                                document.getElementById('delete-form-{{ $transaksi->id }}').submit();
                                                            }
                                                        });">
                                                        <em class="icon ni ni-trash"></em>
                                                    </button>
                                                    <form id="delete-form-{{ $transaksi->id }}" action="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.destroy', $transaksi->id) }}" method="POST" class="d-none">
                                                        @csrf
                                                        @method('DELETE')
                                                    </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="8" class="text-center p-4 text-muted">Tidak ada data pengeluaran kas gaji.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        {{ $pengeluaranKas->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css">

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const modalPembayaran = document.getElementById('modalPembayaran');
            const form = document.getElementById('form-submit');

            modalPembayaran.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;
                const transaksiId = button.getAttribute('data-id');
                const url = button.getAttribute('data-url');

                form.action = url;
            });
            const btnSync = document.getElementById('btnSyncRkasGaji');
            const statusEl = document.getElementById('syncStatusGaji');
            if (btnSync) {
                btnSync.addEventListener('click', async function () {
                    const csrf = '{{ csrf_token() }}';
                    const url = '{{ route('yayasan.transaksi.pengeluaran-kas.sync') }}';
                    let limit = 200;
                    let offset = 0;
                    btnSync.disabled = true;
                    statusEl.style.display = 'inline';
                    statusEl.textContent = 'Memulai sinkronisasi...';

                    try {
                        while (true) {
                            statusEl.textContent = `Memproses offset ${offset} (limit ${limit})...`;
                            const resp = await fetch(url, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': csrf,
                                    'Accept': 'application/json'
                                },
                                body: JSON.stringify({ limit, offset })
                            });
                            const data = await resp.json();
                            if (!resp.ok || data.success === false) {
                                throw new Error(data.message || 'Gagal sinkronisasi');
                            }
                            const total = data.total ?? 0;
                            const processed = data.processed ?? 0;
                            const nextOffset = data.next_offset;
                            statusEl.textContent = `Total: ${total}, Diproses: ${processed}, Next Offset: ${nextOffset ?? '-'}.`;
                            if (nextOffset === null) break;
                            offset = nextOffset;
                        }
                        statusEl.textContent = 'Sinkronisasi selesai.';
                    } catch (e) {
                        statusEl.textContent = `Error: ${e.message}`;
                    } finally {
                        btnSync.disabled = false;
                    }
                });
            }
        });
        document.addEventListener('DOMContentLoaded', function() {
            if (window.flatpickr) {
                flatpickr("#tanggal", {
                    plugins: [
                        new monthSelectPlugin({
                            shorthand: true,
                            dateFormat: "m-Y",
                            altFormat: "F Y"
                        })
                    ],
                    allowInput: true
                });
            }
        });

        // select2 untuk dropdown status
        $(document).ready(function() {


            $('.select-2').select2({
                allowClear: true
            });
        });
        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);
            }
        });
        $(function() { // Shorthand for $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            console.log('AJAX Setup configured in index.blade.php:', $.ajaxSetup().headers); // Log untuk debugging
        });


    </script>
@endpush