@extends('layouts.admin')

@section('content')
    <div class="row mb-3">
        <div class="col-md-6">
            <h4 id="page_title">Pembayaran</h4>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <form id="form_pembayaran">
                        @csrf
                        <h5 class="mb-3"># Pilih Anggota</h5>
                        <x-input type="hidden" name="id" :value="$simpanan->id ?? ''" />
                        <x-form-group caption="Anggota">
                            <x-input name="anggota_id" type="hidden" />
                            <x-input name="anggota" caption="Klik untuk memilih anggota" readonly onclick="init_search_anggota('anggota')" />
                        </x-form-group>
                        <div class="row">
                            <div class="col-md-8">
                                <x-form-group caption="Tanggal">
                                    <x-input name="tanggal" class="datepicker" :value="date('d-m-Y')" />
                                </x-form-group>
                            </div>
                            <div class="col-md-4">
                                <label for="">&nbsp;</label>
                                <button type="button" class="btn btn-block btn-primary" onclick="pembayaran_search()">Tampilkan </button>
                            </div>
                        </div>
                        <div id="table_pembayaran"></div>
                    </form>
                </div>
                <div class="col-md-6">
                    <div id="table_riwayat"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let _token = '{{ csrf_token() }}';
        let $table_pembayaran = $('#table_pembayaran'),
            $form_pembayaran = $('#form_pembayaran'),
            $table_riwayat = $('#table_riwayat');

        let pembayaran_search = () => {
            let anggota_id = $('#anggota_id').val();
            $.post("{{ route('koperasi.pembayaran.search') }}", {
                _token, anggota_id
            }, (result) => {
                $table_pembayaran.html(result);
            }).fail((xhr) => {
                $table_pembayaran.html(xhr.responseText);
            });
            search_riwayat();
        }

        let search_riwayat = () => {
            let anggota_id = $('#anggota_id').val(),
                tanggal = $('#tanggal').val();
            $.post("{{ route('koperasi.pembayaran.riwayat') }}", {
                _token, anggota_id, tanggal
            }, (result) => {
                $table_riwayat.html(result);
            }).fail((xhr) => {
                $table_riwayat.html(xhr.responseText);
            });
        }

        let total = 0;
        let hitung = (id) => {
            let nominal = $('#' + id).val();
            nominal = nominal === '' ? 0 : parseInt(remove_commas(nominal));
            if ($('#check_' + id).is(':checked')) {
                total += nominal;
                $('#check_' + id).attr('checked', true);
                $('#' + id).attr('readonly', true);
            } else {
                total -= nominal;
                $('#check_' + id).attr('checked', false);
                $('#' + id).attr('readonly', false);
            }
            $('#td_total').html(add_commas(total.toString()));
        }

        $form_pembayaran.submit((e) => {
            e.preventDefault();

            let data = get_form_data($form_pembayaran);
            $.post("{{ route('koperasi.pembayaran.save') }}", data, (result) => {
                pembayaran_search();
                total = 0;
            }).fail((xhr) => {
                $table_riwayat.html(xhr.responseText)
            });
        });

        let hapus_simpanan = (id) => {
            Swal.fire({
                title: 'Hapus Data ?',
                text: "Data yang dihapus tidak dapat dikembalikan lagi",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Hapus'
            }).then((result) => {
                if (result.value === true) {
                    $.post("{{ route('koperasi.simpanan.delete') }}", {
                        _token, id
                    }, () => {
                        pembayaran_search();
                    }).fail((xhr) => {
                        handle_error(xhr);
                    });
                }
            })
        }

        let hapus_pinjaman = (id) => {
            Swal.fire({
                title: 'Hapus Data ?',
                text: "Data yang dihapus tidak dapat dikembalikan lagi",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Hapus'
            }).then((result) => {
                if (result.value === true) {
                    $.post("{{ route('koperasi.pembayaran_pinjaman.delete') }}", {
                        _token, id
                    }, () => {
                        pembayaran_search();
                    }).fail((xhr) => {
                        handle_error(xhr);
                    });
                }
            })
        }

        init_form_element();
    </script>
@endpush

@include('anggota.search')