@extends('admin.template.layout')
@section('content')
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <!--begin::Toolbar container-->
        <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack">
            <!--begin::Page title-->
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <!--begin::Title-->
                <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                    Riwayat Pembayaran
                </h1>
                <!--end::Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted">
                        <a class="text-muted">Data riwayat pembayaran biaya pendidikan siswa</a>
                    </li>
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted"></li>
                    <!--end::Item-->
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page title-->
        </div>
        <!--end::Toolbar container-->
    </div>
    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-5">

            <div class="d-flex flex-column flex-md-row gap-4 align-items-end">
                <div class="mb-5 mb-md-0 min-w-250px">
                    <label for="filter_siswa" class="form-label">Siswa</label>
                    <select id="filter_siswa" class="form-select filter" data-control="select2">
                        <option value="">Semua</option>
                        @foreach ($data_siswa as $siswa)
                            <option value="{{ $siswa->id }}">{{ $siswa->namaSiswa }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-5 mb-md-0">
                    <label for="filter_jenis_pembayaran" class="form-label">Jenis Pembayaran</label>
                    <select id="filter_jenis_pembayaran" class="form-select filter" data-control="select2">
                        <option value="">Semua</option>
                        <option value="Cicilan">Cicilan</option>
                        <option value="Lunas">Lunas</option>
                        <option value="Talangan">Talangan</option>
                    </select>
                </div>
                <div class="mb-5 mb-md-0 mw-150px">
                    <label for="filter_status" class="form-label">Metode Pembayaran</label>
                    <select id="filter_status" class="form-select filter" data-control="select2">
                        <option value="">Semua</option>
                        <option value="1">Tunai</option>
                        <option value="0">Non Tunai</option>
                    </select>
                </div>
                <div class="mb-5 mb-md-0">
                    <input type="text" placeholder="Tanggal Awal" id="filter_tanggal_awal" class="form-control filter datePicker" />
                </div>
                <div class="mb-5 mb-md-0">
                    <input type="text" placeholder="Tanggal Akhir" id="filter_tanggal_akhir" class="form-control filter datePicker" />
                </div>
            </div>
            <div class="d-flex align-items-end position-relative">
                <div class="d-flex align-items-center position-relative">
                    <i class="ki-duotone ki-magnifier fs-1 position-absolute ms-6"><span class="path1"></span><span
                        class="path2"></span></i>
                    <input type="text" id="searchTable" class="form-control form-control-solid w-250px ps-15"
                        placeholder="Cari data" autocomplete="off" />
                </div>
            </div>
            <div class="card-toolbar gap-4 d-flex justify-content-end align-items-end">
                <!--begin::Action-->
                <div class="">
                    <button type="button" id="kt_datatable_export" class="btn btn-light-warning btn-sm">
                        <i class="ki-duotone ki-exit-down fs-2">
                        <span class="path1"></span>
                        <span class="path2"></span>
                        </i>Export</button>
                </div>
                <!--end::Action-->
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="myTable" class="table table-row-bordered align-middle fw-bold table-striped">
                    <thead>
                        <tr class="fw-bold text-muted bg-secondary">
                            <th class="text-start ps-7">No</th>
                            <th>Nama Siswa</th>
                            <th>NIS</th>
                            <th>Pembayaran</th>
                            <th>Tanggal Bayar</th>
                            <th>Total Tagihan</th>
                            <th>Nominal Dibayarkan</th>
                            <th>Saldo / Sisa Belum Dibayarkan</th>
                            <th>Jenis dan Metode Pembayaran</th>
                            <th class="">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="table-striped">
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection
@section('script')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <script>
        $(".datePicker").flatpickr({
            locale: "id",
        });
        $(document).ready(function() {
            $('#kt_datatable_export').click(function(e) {
                e.preventDefault();

                // Get all filter values
                var siswa_id = $('#filter_siswa').val();
                var jenis_pembayaran = $('#filter_jenis_pembayaran').val();
                var status = $('#filter_status').val();
                var tanggal_awal = $('#filter_tanggal_awal').val();
                var tanggal_akhir = $('#filter_tanggal_akhir').val();

                // Prepare query params
                var params = $.param({
                    siswa_id: siswa_id,
                    jenis_pembayaran: jenis_pembayaran,
                    status: status,
                    tanggal_awal: tanggal_awal,
                    tanggal_akhir: tanggal_akhir
                });

                // Create a hidden link to force download
                var downloadUrl = "{{ route('master-keuangan.export') }}?" + params;

                var link = document.createElement('a');
                link.href = downloadUrl;
                link.target = '_blank'; // Open in new tab (optional)
                link.click();
            });
            $('#tahun').on('input', function() {
                this.value = this.value.replace(/[^0-9]/g, '');
            });

            var table = $("#myTable").DataTable({
                responsive: true,
                "order": [],
                "ajax": {
                    url: '{{ route('master-keuangan.data') }}',
                    type: 'GET',
                    data: function(data) {}
                },
                "columns": [{
                        data: null, // Use null for the index column
                        render: function(data, type, row, meta) {
                            return meta.row + 1; // Use row index + 1 for the "No" column
                        },
                        className: 'text-start ps-7'
                    },
                    {
                        data: 'nama_siswa'
                    },
                    {
                        data: 'nis'
                    },
                    {
                        data: 'pembayaran'
                    },
                    {
                        data: 'tanggal_bayar'
                    },
                    {
                        data: 'total_tagihan'
                    },
                    {
                        data: 'nominal_dibayarkan'
                    },
                    {
                        data: 'sisa_pembayaran'
                    },
                    {
                        data: 'jenis_pembayaran'
                    },
                    {
                        data: 'action'
                    }

                ],
                "columnDefs": [{
                        className: 'px-7',
                        targets: 0
                    },
                    {
                        className: 'text-start ps-4', // Add text-end class to action column
                        targets: 2
                    }
                ]
            });

            table.on('draw', function() {
                $('[data-toggle="tooltip"]').tooltip();
            });

            $(".filter").on('change', function() {
                var siswa_id = $("#filter_siswa").val();
                var jenis_pembayaran = $("#filter_jenis_pembayaran").val();
                var metode_pembayaran = $("#filter_status").val();
                var tanggal_awal = $("#filter_tanggal_awal").val();
                var tanggal_akhir = $("#filter_tanggal_akhir").val();

                table.ajax.url(
                    `{{ route('master-keuangan.data') }}?jenis_pembayaran=${jenis_pembayaran}&metode_pembayaran=${metode_pembayaran}&tanggal_awal=${tanggal_awal}&tanggal_akhir=${tanggal_akhir}&siswa_id=${siswa_id}`
                ).load();
            });

            //delete
            $('#myTable').on('click', '.btn-hapus', function() {
                var kode = $(this).data('id');
                var nama = $(this).data('nama');

                Swal.fire({
                    title: "Apakah anda yakin?",
                    text: "Untuk menghapus data: " + nama,
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Ya, hapus data!",
                    cancelButtonText: 'Tidak, batalkan',
                    customClass: {
                        confirmButton: "btn btn-primary",
                        cancelButton: 'btn btn-danger'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: 'DELETE',
                            url: `{{ route('master-post.destroy', ':id') }}`
                                .replace(':id', kode),
                            dataType: 'json',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                if (response.status == true) {
                                    Swal.fire({
                                        title: "Success!",
                                        text: "Berhasil Menghapus Data",
                                        icon: "success"
                                    }).then(function() {
                                        location.reload(true);
                                    });
                                } else {
                                    Swal.fire("Hapus Data Gagal!", "", "warning");
                                }
                            },
                            error: function() {
                                Swal.fire("ERROR", "Hapus Data Gagal.", "error");
                            }
                        });
                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                        Swal.fire("Cancelled", "Hapus Data Dibatalkan.", "error");
                    }
                });
            });

            $("#searchTable").on("keyup", debounce(function() {
                // Get the search value from the input
                let searchValue = $(this).val();

                // Perform the search and redraw the table
                table.search(searchValue).draw();
            }, 300));

        });
    </script>
@endsection