{{-- resources/views/yayasan/transaksi/non-program/index.blade.php --}}

@extends('layouts.app')

@section('title', 'Daftar Transaksi Non Program')

@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 Transaksi Non Program</h3>
                                <div class="nk-block-des text-soft">
                                    <p>Manajemen data transaksi non program.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="row align-items-center">
                            <div class="col-12">
                                <form method="GET" action="{{ route('yayasan.transaksi.non-program.index') }}"
                                    class="row g-2 align-items-end">
                                    <div class="col-md-2">
                                        <input type="text" class="form-control" id="tanggal" name="tanggal"
                                            placeholder="Tanggal" value="{{ request('tanggal') }}">
                                    </div>
                                    <div class="col-md-2">
                                        <input type="text" class="form-control" name="no_referensi"
                                            placeholder="No Referensi" value="{{ request('no_referensi') }}">
                                    </div>
                                    <div class="col-md-2">
                                        <input type="text" class="form-control" name="deskripsi" placeholder="Deskripsi"
                                            value="{{ request('deskripsi') }}">
                                    </div>
                                    <div class="col-md-2">
                                        <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-4">
                                        <button type="submit" class="btn btn-primary" id="search-btn">
                                            <em class="icon ni ni-search"></em>
                                            <span>Cari</span>
                                        </button>
                                        <!-- Modal Import Excel -->
                                        <a href="{{ route('yayasan.transaksi.non-program.create') }}"
                                            class="ml-2 btn btn-success">
                                            <em class="icon ni ni-plus"></em>
                                            <span>Tambah Baru</span>
                                        </a>


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

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

                                            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">Daftar Transaksi Non Program</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">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($nonProgram as $transaksi)
                                    <tr>
                                        <td class="text-center">
                                            {{ ($nonProgram->currentPage() - 1) * $nonProgram->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">
                                            <a href="{{ route('yayasan.transaksi.non-program.show', $transaksi->id) }}" class="btn-action btn-action-view" title="Detail">
                                                <em class="icon ni ni-eye"></em>
                                            </a>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="7" class="text-center p-4 text-muted">Tidak ada data transaksi non program.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        {{ $nonProgram->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;
            });
        });
        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