@extends('template.content')

@section('title', 'Pengeluaran')

@push('script')
    <script>
        $(document).ready(function () {
            $('#cari').on('keypress', function (e) {
                // Cek apakah tombol yang ditekan adalah Enter (key code 13)
                if (e.which == 13) {
                    // Submit form saat tombol Enter ditekan
                    $('#searchForm').submit();
                }
            });

            // Handle tombol hapus
            $('.btn-delete').on('click', function () {
                var id = $(this).data('id');
                var name = $(this).data('name');
                var url = $(this).data('url');

                Swal.fire({
                    title: 'Konfirmasi Hapus',
                    html: `Apakah Anda yakin ingin menghapus data ini?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Batal',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Buat form delete dinamis
                        var form = $('<form>').attr({
                            'method': 'POST',
                            'action': url
                        }).append(
                            $('<input>').attr({
                                'type': 'hidden',
                                'name': '_token',
                                'value': '{{ csrf_token() }}'
                            }),
                            $('<input>').attr({
                                'type': 'hidden',
                                'name': '_method',
                                'value': 'DELETE'
                            })
                        ).appendTo('body');

                        // Submit form
                        form.submit();
                    }
                });
            });

            // Elemen filter
            const searchInput = $('#cari');
            const bulanFilter = $('#filterBulan');
            const tahunFilter = $('#filterTahun');
            const userFilter = $('#filterUserid');

            // Fungsi untuk submit form filter
            function applyFilters() {
                const params = new URLSearchParams(window.location.search);

                // Update parameter pencarian
                if (searchInput.val()) {
                    params.set('cari', searchInput.val());
                } else {
                    params.delete('cari');
                }

                // Update parameter pencarian
                if (userFilter.val()) {
                    params.set('user', userFilter.val());
                } else {
                    params.delete('user');
                }

                // Update parameter bulan
                if (bulanFilter.val()) {
                    params.set('bulan', bulanFilter.val());
                } else {
                    params.delete('bulan');
                }

                // Update parameter tahun
                if (tahunFilter.val()) {
                    params.set('tahun', tahunFilter.val());
                } else {
                    params.delete('tahun');
                }

                // Reset page ke 1 saat filter berubah
                params.delete('page');

                // Redirect dengan parameter baru
                window.location.href = window.location.pathname + '?' + params.toString();
            }

            // Event listener untuk input pencarian (dengan debounce)
            let searchTimer;
            searchInput.on('keyup', function () {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(applyFilters, 1000);
            });

            // Event listener untuk select bulan dan tahun
            bulanFilter.on('change', applyFilters);
            tahunFilter.on('change', applyFilters);
            userFilter.on('change', applyFilters);
        });
    </script>
@endpush

@section('content')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">@yield('title')</h4>
        </div>
        <div class="col-md-7 align-self-center text-end">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active">@yield('title')</li>
                </ol>
                <a href="{{ route('pengeluaran.create') }}" class="btn btn-info d-lg-block m-l-15 text-white"><i
                        class="fa fa-plus-circle"></i> Tambah Pengeluaran</a>
            </div>
        </div>
    </div>

    <div class="row g-0">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="mb-3">
                                <h2><strong>Rp. {{ number_format($total_pengeluaran, 0, ',', '.') }}</strong></h2>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <form method="GET" id="searchForm">
                                    <input type="text" class="form-control" name="cari" id="cari"
                                        placeholder="Cari Pengeluaran" value="{{ request()->get('cari') }}">
                                </form>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <div class="form-group">
                                    <select id="filterBulan" class="form-control" name="bulan">
                                        <option value="">Semua Bulan</option>
                                        @php
                                            $currentMonth = date('m');
                                            $bulanIndonesia = [
                                                '01' => 'Januari',
                                                '02' => 'Februari',
                                                '03' => 'Maret',
                                                '04' => 'April',
                                                '05' => 'Mei',
                                                '06' => 'Juni',
                                                '07' => 'Juli',
                                                '08' => 'Agustus',
                                                '09' => 'September',
                                                '10' => 'Oktober',
                                                '11' => 'November',
                                                '12' => 'Desember'
                                            ];
                                        @endphp
                                        @foreach($bulanIndonesia as $key => $bulan)
                                            <option value="{{ $key }}"
                                                {{ (request()->get('bulan') ?: $currentMonth) == $key ? 'selected' : '' }}>
                                                {{ $bulan }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <div class="form-group">
                                    <select id="filterTahun" class="form-control" name="tahun">
                                        <option value="">Semua Tahun</option>
                                        @php
                                            $currentYear = date('Y');
                                            $selectedYear = request()->get('tahun') ?: $currentYear;
                                            $startYear = $currentYear - 10;
                                        @endphp
                                        @for($year = $currentYear; $year >= $startYear; $year--)
                                            <option value="{{ $year }}" {{ $selectedYear == $year ? 'selected' : '' }}>
                                                {{ $year }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <div class="form-group">
                                    <select id="filterUserid" class="form-control" name="user_id">
                                        <option value="">Oleh</option>
                                        @php
                                            $oleh = \App\Models\User::all();
                                        @endphp
                                        @foreach ($oleh as $ol)
                                            <option value="{{ $ol->id }}"
                                                {{ request()->get('user') == $ol->id ? 'selected' : '' }}>{{ $ol->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Aksi</th>
                                    <th>Tanggal</th>
                                    <th>Deskripsi</th>
                                    <th>Metode Pembayaran</th>
                                    <th>Kode Akun</th>
                                    <th>Jumlah</th>
                                    @if (auth()->user()->level == 'admin')
                                        <th>Oleh</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($pengeluaran as $peng)
                                    <tr>
                                        <td>
                                            <a href="{{ route('pengeluaran.edit', $peng->id) }}"
                                                class="btn btn-sm btn-warning"><i class="fas fa-edit"></i></a>
                                            <button class="btn btn-sm btn-danger btn-delete" data-id="{{ $peng->id }}"
                                                data-name="{{ $peng->deskripsi }}"
                                                data-url="{{ route('pengeluaran.destroy', $peng->id) }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                        <td>{{ $peng->created_at ? $peng->created_at->format('d-m-Y H:i') : '-' }}</td>
                                        <td>{{ $peng->deskripsi }}</td>
                                        <td>{{ $peng->metode_pembayaran }}</td>
                                        <td>{{ $peng->akun->kode_akun ?? "-" }}</td>
                                        <td>Rp. {{ number_format($peng->jumlah, 0, ",", ".") }}</td>
                                        @if (auth()->user()->level == 'admin')
                                            <td>{{ $peng->user->name }}</td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        {{ $pengeluaran->appends(request()->only(['cari', 'bulan', 'tahun', 'user']))->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection