@extends('layouts.app')

@section('content')

@include('modal.panjar')
@include('modal.denopanjar')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">

                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb pb-3">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Panjar</li>
                    </ol>
                </nav>

                <div class="card-body text-center">

                    @if(Session::has('messageinformation'))
                    @php
                    $session = Session::get("messageinformation");
                    @endphp
                    <script>
                        Swal.fire({
                            icon: '{!! $session["status"] !!}',
                            title: 'Status!',
                            text: '{!! $session["message"] !!}'
                        });
                    </script>
                    @endif

                    @if(Session::has('pampasaninformation'))
                    @php
                    $session = Session::get("pampasaninformation");
                    @endphp
                    <script>
                        onclickPampasan('all');
                    </script>
                    @endif

                    <div class="row mb-4" id="status-filter-container" style="display: none;">
                        <div class="col-12 d-flex justify-content-end align-items-center">
                            <div id="item">
                                <label class="mr-3 mb-0">
                                    <input type="radio" name="status" data-status="all" checked> Semua
                                </label>
                                <label class="mr-3 mb-0">
                                    <input type="radio" name="status" data-status="dituntut"> Dituntut
                                </label>
                                <label class="mr-3 mb-0">
                                    <input type="radio" name="status" data-status="belum-tuntut"> Belum Dituntut
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-5" id="date-range-container">
                        <div class="row">
                            <div class="col-1"></div>
                            <label class="col-3 text-right">Mula</label>
                            {{-- <input type="date" class="form-control col-3"/> --}}
                            <input type="text" class="form-control col-3" placeholder="Pilih Tarikh" aria-label="Tarikh" id="mula" name="mula">
                            <label class="col-1 text-right">Akhir</label>
                            {{-- <input type="date" class="form-control col-3"/> --}}
                            <input type="text" class="form-control col-3" placeholder="Pilih Tarikh" aria-label="Tarikh" id="akhir" name="akhir">
                            <button class="btn btn-primary ml-2" onclick="caritarikh()">Cari</button>
                        </div>
                    </div>

                    <div class="mt-3 col-12">
                        <div class="row">
                            <div class="col-3">
                                <button class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#keraianModal" data-backdrop="static" data-keyboard="false">Keraian</button>
                                <button class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#SelenggaraModal" data-backdrop="static" data-keyboard="false">Selenggara</button>
                                <button class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#BelanjaamModal" data-backdrop="static" data-keyboard="false">Belanja Am</button>
                                <button class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#PerubatanModal" data-backdrop="static" data-keyboard="false">Perubatan</button>
                                <button class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#DapurModal" data-backdrop="static" data-keyboard="false">Dapur</button>
                                <button class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#PosModal" data-backdrop="static" data-keyboard="false">Pos</button>

                                @if(isset($cawangan_info['kodcaw']) && $cawangan_info['kodcaw'] === '011237')
                                <button class="btn btn-warning btn-lg btn-block" id="btnPampasan">Pampasan</button>
                                @endif

                                <button class="btn btn-primary btn-lg btn-block mt-5" data-toggle="modal" data-target="#BakiPerubatanModal" data-backdrop="static" data-keyboard="false">Baki Perubatan</button>
                            </div>
                            <div class="col-9">

                                <div id="default-table-section">
                                    <table class='table table-striped table-hover' id='table-panjar' style="width:100%;">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th>bil</th>
                                                <th>tarikh</th>
                                                <th>deskripsi</th>
                                                <th>kategori</th>
                                                <th>bayaran</th>
                                                <th>tindakan</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>

                                <div id="pampasan-table-section" style="display:none;">
                                    <div class="table-responsive">
                                        <table class='table table-striped table-hover table-sm' id='table-pampasan' style="width:100%; font-size: 0.85rem;">
                                            <thead class="thead-dark">
                                                <tr style="font-size: 0.8rem;">
                                                    <th style="width: 5%; padding: 0.4rem 0.2rem;">bil</th>
                                                    <th style="width: 8%; padding: 0.4rem 0.2rem;">nokp</th>
                                                    <th style="width: 12%; padding: 0.4rem 0.2rem;">norujukan</th>
                                                    <th style="width: 10%; padding: 0.4rem 0.2rem;">pembiayaan</th>
                                                    <th style="width: 10%; padding: 0.4rem 0.2rem;">nilai marhun</th>
                                                    <th style="width: 5%; padding: 0.4rem 0.2rem;">jbg</th>
                                                    <th style="width: 12%; padding: 0.4rem 0.2rem;">status</th>
                                                    <th style="width: 18%; padding: 0.4rem 0.2rem;">tindakan</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('js/main.js') }}"></script>
<script>
    var api_url = "<?php echo $api_url ?>";
    var kodcaw = "<?php echo $cawangan_info['kodcaw'] ?>";

    $(".modal.fade").on("show.bs.modal", function(e) {

        $.ajax({
            method: 'get',
            url: api_url + '/api/SenaraiPanjar/list/' + kodcaw,
            success: function(data) {
                let today = new Date();
                let dd = String(today.getDate()).padStart(2, '0');
                let mm = String(today.getMonth() + 1).padStart(2, '0'); //Januari Keno Wak 0 Macei Array La
                let yyyy = String(today.getFullYear());

                let yy = yyyy.substring(2, 4);
                let recno = data.recno ?? 0;
                let baucerno = 'B' + yy + mm + dd + '-' + String(recno).padStart(4, '0');

                $('#' + e.currentTarget.id + ' .baucer').val(baucerno);
            }
        });

    });

    var tablepanjar = $('#table-panjar').DataTable({
        "scrollX": true
    });

    var tablebakiperubatan = $('#table-bakiperubatan').DataTable({
        //   "scrollX": true
    });

    $(document).ready(function() {

        $('#mula').datepicker({
            format: 'dd-mm-yyyy'
        });

        $('#akhir').datepicker({
            format: 'dd-mm-yyyy'
        });

        $.ajax({
            method: 'get',
            url: api_url + '/api/SenaraiPanjar/' + kodcaw,
            success: function(panjar) {
                listtable(panjar);
            },
            error: function(xhRequest, ErrorText, thrownError) {
                Swal.fire({
                    icon: 'error',
                    title: 'Amaran!',
                    text: 'Panjar Tak Berjaya'
                });
                console.log(xhRequest);
            }

        });

    });

    function listtable(data) {

        var counter = 1;
        tablepanjar.clear().draw();

        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
        var yyyy = today.getFullYear();

        today = yyyy + '-' + mm + '-' + dd;

        $.each(data, function(index, panjar) {

            // Check if deskripsi starts with "BAYARAN PAMPASAN" to hide trash button
            const showTrashButton = !panjar['deskripsi'].startsWith('BAYARAN PAMPASAN');
            
            if (today === panjar['tarikh']) {
                tablepanjar.row.add([
                    counter,
                    panjar['tarikh'],
                    panjar['deskripsi'],
                    panjar['kategori'],
                    panjar['bayaran'],
                    showTrashButton ? '<button onclick="deletepanjar(this);" data-baucer="' + panjar['nobaucer'] + '" data-recno="' + panjar['recno'] + '" class="btn btn-danger fas fa-trash-alt"></button>' : ''
                ]).draw();
            } else {
                tablepanjar.row.add([
                    counter,
                    panjar['tarikh'],
                    panjar['deskripsi'],
                    panjar['kategori'],
                    panjar['bayaran'],
                    showTrashButton ? '<button data-baucer="' + panjar['nobaucer'] + '" data-recno="' + panjar['recno'] + '" class="btn btn-secondary fas fa-trash-alt"></button>' : ''
                ]).draw();
            }

            counter = counter + 1;



        });

    }

    function deletepanjar(e) {
        let rec_no = $(e).data('recno');
        let no_baucer = $(e).data('baucer');


        Swal.fire({
            title: 'Adakah anda pasti?',
            text: "Anda tidak dapat untuk mengembalinya kembali!",
            icon: 'warning',
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Teruskan!'
        }).then((result) => {
            if (result.isConfirmed) {

                $.ajax({
                    method: 'post',
                    url: '{{ route("khazanah.deletepanjar") }}',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        'recno': rec_no,
                        'nobaucer': no_baucer
                    },
                    success: function(data) {

                        if (data === 'berjaya') {
                            location.reload();

                        } else {
                            Swal.fire(
                                'Tidak Berjaya!',
                                'Data tidak berjaya dihapuskan.',
                                'error'
                            )
                        }

                    }
                });





            }
        });
    }

    function caritarikh() {
        let mula = $('#mula').val();
        let akhir = $('#akhir').val();

        if (mula == '' || akhir == '') {
            Swal.fire({
                icon: 'error',
                title: 'Amaran!',
                text: 'Mesti letakkan kedua-dua input'
            });
        } else {
            //date

            let split_date = mula.split('-');
            let mula_date = split_date[2] + '-' + split_date[1] + '-' + split_date[0];
            split_date = akhir.split('-');
            let akhir_date = split_date[2] + '-' + split_date[1] + '-' + split_date[0];

            //enddate

            $.ajax({
                method: 'get',
                url: api_url + '/api/SenaraiPanjar/' + kodcaw + '/' + mula_date + '/' + akhir_date,
                success: function(panjar) {
                    listtable(panjar);
                },
                error: function(xhRequest, ErrorText, thrownError) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Amaran!',
                        text: 'Panjar Tidak Berjaya'
                    });
                    console.log(xhRequest);
                }

            });
        }

    }

    function kiraanpanjar(datakeyin) {
        var idkey = $(datakeyin).attr('id');
        var valkey = $(datakeyin).val();
        var amount = 0;
        let amountkiraan = 0;

        var validate = parseFloat($(datakeyin).data('amaun'));

        $.each(arrayambilan, function(index, arr) {
            if (arr[0] == idkey) {

                arrayambilan[index][1] = totalamount(idkey, valkey);
            }

            amount += arr[1];
        });

        if (Number(valkey) > Number(validate)) {
            Swal.fire({
                icon: 'error',
                title: 'Amaran',
                text: 'Jumlah denominasi melebihi kadar'
            });
            $(datakeyin).val('');
        } else {

            $('#amaunkiraan').val(amount);

        }

        switch (idkey) {
            case 'bundle1':
                amountkiraan += (valkey * 100);
                $('#totalb1').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'bundle20':
                amountkiraan += (valkey * 1000);
                $('#totalb20').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'bundle5':
                amountkiraan += (valkey * 500);
                $('#totalb5').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'bundle50':
                amountkiraan += (valkey * 5000);
                $('#totalb50').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'bundle10':
                amountkiraan += (valkey * 1000);
                $('#totalb10').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'bundle100':
                amountkiraan += (valkey * 5000);
                $('#totalb100').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'sen1':
                amountkiraan += (valkey * 0.01);
                $('#totalsen1').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'sen5':
                amountkiraan += (valkey * 0.05);
                $('#totalsen5').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'sen10':
                amountkiraan += (valkey * 0.10);
                $('#totalsen10').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'sen20':
                amountkiraan += (valkey * 0.20);
                $('#totalsen20').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'sen50':
                amountkiraan += (valkey * 0.50);
                $('#totalsen50').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'ringgit1':
                amountkiraan += (valkey * 1);
                $('#totalring1').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'ringgit5':
                amountkiraan += (valkey * 5);
                $('#totalring5').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'ringgit10':
                amountkiraan += (valkey * 10);
                $('#totalring10').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'ringgit20':
                amountkiraan += (valkey * 20);
                $('#totalring20').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'ringgit50':
                amountkiraan += (valkey * 50);
                $('#totalring50').val(formatter.format(amountkiraan.toFixed(2)));
                break;
            case 'ringgit100':
                amountkiraan += (valkey * 100);
                $('#totalring100').val(formatter.format(amountkiraan.toFixed(2)));
                break;
        }

    }

    function checkformpanjar(formdata) {
        $("#terima_transaksi_keraian").prop('disabled', true);
        $("#terima_transaksi_selenggara").prop('disabled', true);
        $("#terima_transaksi_belanjaam").prop('disabled', true);
        $("#terima_transaksi_perubatan").prop('disabled', true);
        $("#terima_transaksi_dapur").prop('disabled', true);
        $("#terima_transaksi_pos").prop('disabled', true);


        // let keraian = $('#KeraianForm').hasClass('in'); //-- check dapur only for tuntutan;

        let baucer = $(formdata).find("[name='baucer']").val();
        let tarikh = $(formdata).find("[name='tarikh']").val();
        // let tuntutan = $(formdata).find("[name='tuntutan']").val();
        let tarikhbil = $(formdata).find("[name='tarikhbil']").val();
        let deskripsi = $(formdata).find("[name='deskripsi']").val();
        let bayaran = $(formdata).find("[name='bayaran']").val();


        let booltarikh = true;
        let booltarikhbil = true;
        let booldeskripsi = true;
        let boolbayaran = true;

        if (!tarikh) {
            $(formdata).find("[name='errortarikh']").show();
            $(formdata).find("[name='errortarikh']").text("*Isikan tarikh dalam input!");
            $(formdata).find("[name='tarikh']").addClass('is-invalid');
            $(formdata).find("[name='tarikh']").parent().removeClass("mb-4");

            booltarikh = false;
        } else {
            $(formdata).find("[name='errortarikh']").hide();
            $(formdata).find("[name='tarikh']").removeClass('is-invalid');
            $(formdata).find("[name='tarikh']").parent().addClass("mb-4");

            booltarikh = true;
        }

        if (!tarikhbil) {
            $(formdata).find("[name='errorbil']").show();
            $(formdata).find("[name='errorbil']").text("*Isikan tarikh bil dalam input!");
            $(formdata).find("[name='tarikhbil']").addClass('is-invalid');
            $(formdata).find("[name='tarikhbil']").parent().removeClass("mb-4");

            booltarikhbil = false;

        } else {
            $(formdata).find("[name='errorbil']").hide();
            $(formdata).find("[name='tarikhbil']").removeClass('is-invalid');
            $(formdata).find("[name='tarikhbil']").parent().addClass("mb-4");

            booltarikhbil = true;
        }

        if (!$.trim(deskripsi)) {
            $(formdata).find("[name='errordeskripsi']").show();
            $(formdata).find("[name='errordeskripsi']").text("*Isikan tarikh deskripsi dalam input!");
            $(formdata).find("[name='deskripsi']").addClass('is-invalid');
            $(formdata).find("[name='deskripsi']").parent().removeClass("mb-4");

            booldeskripsi = false;
        } else {
            $(formdata).find("[name='errordeskripsi']").hide();
            $(formdata).find("[name='deskripsi']").removeClass('is-invalid');
            $(formdata).find("[name='deskripsi']").parent().addClass("mb-4");

            booldeskripsi = true;
        }

        if (!bayaran) {
            $(formdata).find("[name='errorbayaran']").show();
            $(formdata).find("[name='errorbayaran']").text("*Isikan bayaran dalam input!");
            $(formdata).find("[name='bayaran']").addClass('is-invalid');
            $(formdata).find("[name='bayaran']").parent().removeClass("mb-4");

            boolbayaran = false;
        } else {
            $(formdata).find("[name='errorbayaran']").hide();
            $(formdata).find("[name='bayaran']").removeClass('is-invalid');
            $(formdata).find("[name='bayaran']").parent().addClass("mb-4");

            boolbayaran = true;
        }

        let errorbaucer = $(formdata).find("[name='errorbaucer']").text();
        let errortarikh = $(formdata).find("[name='errortarikh']").text();
        let errortuntutan = $(formdata).find("[name='errortuntutan']").text();
        let errortarikhbil = $(formdata).find("[name='errorbil']").text();
        let errordeskripsi = $(formdata).find("[name='errordeskripsi']").text();
        let errorbayaran = $(formdata).find("[name='errorbayaran']").text();

        if (booltarikh === true && booltarikhbil === true && booldeskripsi === true && boolbayaran === true) {


            return true;
        } else {

            $("#terima_transaksi_keraian").prop('disabled', false);
            $("#terima_transaksi_selenggara").prop('disabled', false);
            $("#terima_transaksi_belanjaam").prop('disabled', false);
            $("#terima_transaksi_perubatan").prop('disabled', false);
            $("#terima_transaksi_dapur").prop('disabled', false);
            $("#terima_transaksi_pos").prop('disabled', false);

            event.preventDefault();
            return;
        }

        event.preventDefault();
        return;


    }

    function openupdeno() {

        $('#denominasipanjar').modal('show');
    }

    function terimadeno() {

        // alert($('#keraianModal').hasClass('in')); --> nak tahu modal mano huk shown lagi
        // $keraian = $('#keraianModal').hasClass('in');
        // $selenggara = $('#SelenggaraModal').hasClass('in');
        // $belanjaam = $('#BelanjaamModal').hasClass('in');
        // $perubatan = $('#PerubatanModal').hasClass('in');
        // $dapur = $('#DapurModal').hasClass('in');

        // if($keraian == true)

        // if($selenggara == true)

        // if($belanjaam == true)

        // if($perubatan == true)

        // if($dapur == true)

        let amaunkiraan = $('#amaunkiraan').val();

        $('input[name="bayaran"]').val(amaunkiraan);
        $('#denominasipanjar').modal('hide');

        // console.log($('input[name="ambilsen1"]').val());
        $('input[name="ambilansen1"]').val($('input[name="ambilsen1"]').val());
        $('input[name="ambilansen5"]').val($('input[name="ambilsen5"]').val());
        $('input[name="ambilansen10"]').val($('input[name="ambilsen10"]').val());
        $('input[name="ambilansen20"]').val($('input[name="ambilsen20"]').val());
        $('input[name="ambilansen50"]').val($('input[name="ambilsen50"]').val());

        $('input[name="ambilanring1"]').val($('input[name="ambilring1"]').val());
        $('input[name="ambilanring5"]').val($('input[name="ambilring5"]').val());
        $('input[name="ambilanring10"]').val($('input[name="ambilring10"]').val());
        $('input[name="ambilanring20"]').val($('input[name="ambilring20"]').val());
        $('input[name="ambilanring50"]').val($('input[name="ambilring50"]').val());
        $('input[name="ambilanring100"]').val($('input[name="ambilring100"]').val());

        // $('#amaunkiraan').val(0);
    }

    //Modal Reset

    $('#keraianModal').on('hidden.bs.modal', function(e) {
        $(this)
            .find("input,textarea,select")
            .val('')
            .end()
            .find("input[type=checkbox], input[type=radio]")
            .prop("checked", "")
            .end();

        $(this).find("[name='errortarikh']").hide();
        $(this).find("[name='tarikh']").removeClass('is-invalid');
        $(this).find("[name='tarikh']").parent().addClass("mb-4");

        $(this).find("[name='errortuntutan']").hide();
        $(this).find("[name='tuntutan']").removeClass('is-invalid');
        $(this).find("[name='tuntutan']").parent().addClass("mb-4");

        $(this).find("[name='errorbil']").hide();
        $(this).find("[name='tarikhbil']").removeClass('is-invalid');
        $(this).find("[name='tarikhbil']").parent().addClass("mb-4");

        $(this).find("[name='errordeskripsi']").hide();
        $(this).find("[name='deskripsi']").removeClass('is-invalid');
        $(this).find("[name='deskripsi']").parent().addClass("mb-4");

        $(this).find("[name='errorbayaran']").hide();
        $(this).find("[name='bayaran']").removeClass('is-invalid');
        $(this).find("[name='bayaran']").parent().addClass("mb-4");
        $("#terima_transaksi_keraian").prop('disabled', false);
        $("#terima_transaksi_selenggara").prop('disabled', false);
        $("#terima_transaksi_belanjaam").prop('disabled', false);
        $("#terima_transaksi_perubatan").prop('disabled', false);
        $("#terima_transaksi_dapur").prop('disabled', false);
        $("#terima_transaksi_pos").prop('disabled', false);


    });

    $('#SelenggaraModal').on('hidden.bs.modal', function(e) {
        $(this)
            .find("input,textarea,select")
            .val('')
            .end()
            .find("input[type=checkbox], input[type=radio]")
            .prop("checked", "")
            .end();

        $(this).find("[name='errortarikh']").hide();
        $(this).find("[name='tarikh']").removeClass('is-invalid');
        $(this).find("[name='tarikh']").parent().addClass("mb-4");

        $(this).find("[name='errortuntutan']").hide();
        $(this).find("[name='tuntutan']").removeClass('is-invalid');
        $(this).find("[name='tuntutan']").parent().addClass("mb-4");

        $(this).find("[name='errorbil']").hide();
        $(this).find("[name='tarikhbil']").removeClass('is-invalid');
        $(this).find("[name='tarikhbil']").parent().addClass("mb-4");

        $(this).find("[name='errordeskripsi']").hide();
        $(this).find("[name='deskripsi']").removeClass('is-invalid');
        $(this).find("[name='deskripsi']").parent().addClass("mb-4");

        $(this).find("[name='errorbayaran']").hide();
        $(this).find("[name='bayaran']").removeClass('is-invalid');
        $(this).find("[name='bayaran']").parent().addClass("mb-4");
        $("#terima_transaksi_keraian").prop('disabled', false);
        $("#terima_transaksi_selenggara").prop('disabled', false);
        $("#terima_transaksi_belanjaam").prop('disabled', false);
        $("#terima_transaksi_perubatan").prop('disabled', false);
        $("#terima_transaksi_dapur").prop('disabled', false);
        $("#terima_transaksi_pos").prop('disabled', false);

    });

    $('#BelanjaamModal').on('hidden.bs.modal', function(e) {
        $(this)
            .find("input,textarea,select")
            .val('')
            .end()
            .find("input[type=checkbox], input[type=radio]")
            .prop("checked", "")
            .end();

        $(this).find("[name='errortarikh']").hide();
        $(this).find("[name='tarikh']").removeClass('is-invalid');
        $(this).find("[name='tarikh']").parent().addClass("mb-4");

        $(this).find("[name='errortuntutan']").hide();
        $(this).find("[name='tuntutan']").removeClass('is-invalid');
        $(this).find("[name='tuntutan']").parent().addClass("mb-4");

        $(this).find("[name='errorbil']").hide();
        $(this).find("[name='tarikhbil']").removeClass('is-invalid');
        $(this).find("[name='tarikhbil']").parent().addClass("mb-4");

        $(this).find("[name='errordeskripsi']").hide();
        $(this).find("[name='deskripsi']").removeClass('is-invalid');
        $(this).find("[name='deskripsi']").parent().addClass("mb-4");

        $(this).find("[name='errorbayaran']").hide();
        $(this).find("[name='bayaran']").removeClass('is-invalid');
        $(this).find("[name='bayaran']").parent().addClass("mb-4");
        $("#terima_transaksi_keraian").prop('disabled', false);
        $("#terima_transaksi_selenggara").prop('disabled', false);
        $("#terima_transaksi_belanjaam").prop('disabled', false);
        $("#terima_transaksi_perubatan").prop('disabled', false);
        $("#terima_transaksi_dapur").prop('disabled', false);
        $("#terima_transaksi_pos").prop('disabled', false);

    });

    $('#PerubatanModal').on('hidden.bs.modal', function(e) {
        $(this)
            .find("input,textarea,select")
            .val('')
            .end()
            .find("input[type=checkbox], input[type=radio]")
            .prop("checked", "")
            .end();

        $(this).find("[name='errortarikh']").hide();
        $(this).find("[name='tarikh']").removeClass('is-invalid');
        $(this).find("[name='tarikh']").parent().addClass("mb-4");

        $(this).find("[name='errortuntutan']").hide();
        $(this).find("[name='tuntutan']").removeClass('is-invalid');
        $(this).find("[name='tuntutan']").parent().addClass("mb-4");

        $(this).find("[name='errorbil']").hide();
        $(this).find("[name='tarikhbil']").removeClass('is-invalid');
        $(this).find("[name='tarikhbil']").parent().addClass("mb-4");

        $(this).find("[name='errordeskripsi']").hide();
        $(this).find("[name='deskripsi']").removeClass('is-invalid');
        $(this).find("[name='deskripsi']").parent().addClass("mb-4");

        $(this).find("[name='errorbayaran']").hide();
        $(this).find("[name='bayaran']").removeClass('is-invalid');
        $(this).find("[name='bayaran']").parent().addClass("mb-4");
        $("#terima_transaksi_keraian").prop('disabled', false);
        $("#terima_transaksi_selenggara").prop('disabled', false);
        $("#terima_transaksi_belanjaam").prop('disabled', false);
        $("#terima_transaksi_perubatan").prop('disabled', false);
        $("#terima_transaksi_dapur").prop('disabled', false);
        $("#terima_transaksi_pos").prop('disabled', false);

    });


    $('#DapurModal').on('hidden.bs.modal', function(e) {
        $(this)
            .find("input,textarea,select")
            .val('')
            .end()
            .find("input[type=checkbox], input[type=radio]")
            .prop("checked", "")
            .end();

        $(this).find("[name='errortarikh']").hide();
        $(this).find("[name='tarikh']").removeClass('is-invalid');
        $(this).find("[name='tarikh']").parent().addClass("mb-4");

        $(this).find("[name='errortuntutan']").hide();
        $(this).find("[name='tuntutan']").removeClass('is-invalid');
        $(this).find("[name='tuntutan']").parent().addClass("mb-4");

        $(this).find("[name='errorbil']").hide();
        $(this).find("[name='tarikhbil']").removeClass('is-invalid');
        $(this).find("[name='tarikhbil']").parent().addClass("mb-4");

        $(this).find("[name='errordeskripsi']").hide();
        $(this).find("[name='deskripsi']").removeClass('is-invalid');
        $(this).find("[name='deskripsi']").parent().addClass("mb-4");

        $(this).find("[name='errorbayaran']").hide();
        $(this).find("[name='bayaran']").removeClass('is-invalid');
        $(this).find("[name='bayaran']").parent().addClass("mb-4");
        $("#terima_transaksi_keraian").prop('disabled', false);
        $("#terima_transaksi_selenggara").prop('disabled', false);
        $("#terima_transaksi_belanjaam").prop('disabled', false);
        $("#terima_transaksi_perubatan").prop('disabled', false);
        $("#terima_transaksi_dapur").prop('disabled', false);
        $("#terima_transaksi_pos").prop('disabled', false);

    });

    // $('#denominasipanjar').on('hidden.bs.modal', function (e) {
    //     $(this)
    //         .find(".kosong")
    //         .val('')
    //         .end();

    //     $('#amaunkiraan').val(0);
    // });

    //End Modal Reset

    $('#btnPampasan').on('click', function() {
        onclickPampasan('all');
    });

    // Initialize tooltips for dynamic content
    function initializeTooltips() {
        $('[data-toggle="tooltip"]').tooltip('dispose').tooltip();
    }

    function onclickPampasan(status) {

        $('#default-table-section').hide();
        $('#pampasan-table-section').show();

        $('#mula').hide();
        $('#akhir').hide();
        $('#date-range-container').hide();
        $('#status-filter-container').fadeIn();

        // Get kodcaw and date range
        let kodcaw = "<?php echo $cawangan_info['kodcaw'] ?>";
        let tarikh_mula = $('#mula').val();
        let tarikh_akhir = $('#akhir').val();

        // If datepickers are empty, use today as default
        if (!tarikh_mula || !tarikh_akhir) {
            let today = new Date();
            let dd = String(today.getDate()).padStart(2, '0');
            let mm = String(today.getMonth() + 1).padStart(2, '0');
            let yyyy = today.getFullYear();
            let todayStr = yyyy + '-' + mm + '-' + dd;
            tarikh_mula = todayStr;
            tarikh_akhir = todayStr;
        } else {
            // Convert dd-mm-yyyy to yyyy-mm-dd if needed
            let mulaSplit = tarikh_mula.split('-');
            tarikh_mula = mulaSplit[2] + '-' + mulaSplit[1] + '-' + mulaSplit[0];
            let akhirSplit = tarikh_akhir.split('-');
            tarikh_akhir = akhirSplit[2] + '-' + akhirSplit[1] + '-' + akhirSplit[0];
        }

        let targetUrl =  api_url + '/api/palsu/laporan';

        if (status == 'all') {
            targetUrl = targetUrl + '?status=all';
        } else if (status == 'dituntut') {
            targetUrl = targetUrl + '?status=dituntut';
        } else {
            targetUrl = targetUrl + '?status=belum-tuntut';
        }

        console.log(targetUrl);

        $.ajax({
            method: 'get',
            url: targetUrl,
            data: {
                kodcaw: '011237',
            },

            success: function(data) {
                console.log(data);
                const options = {
                    style: 'currency',
                    currency: 'MYR',
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                };

                let tbody = $('#table-pampasan tbody');
                tbody.empty();
                let bil = 1;
                let sudahTuntutSecaraManual = [
                    '011237240719-0015',
                    '011237240806-0011',
                    '011237240828-0001',
                    '011237240731-0026',
                    '011237240912-0009'
                ];

                data.forEach(function(row) {

                    let gadaianBelumTebus = row.gadaian_sudah_tebus == false;
                    let status = '';
                    let printSuratPerjanjian = 'disabled';
                    let prosesTebus = 'disabled';

                    if (gadaianBelumTebus) {
                        status = '<span class="badge badge-secondary">belum tebus</span>';
                        printSuratPerjanjian = 'disabled';
                        prosesTebus = 'disabled';
                    } else {

                        status = row.status == "1" ?
                            '<span class="badge badge-success">dituntut</span>' :
                            '<span class="badge badge-danger">belum tuntut</span>';

                        printSuratPerjanjian = row.status == "1" ?
                            'disabled' :
                            '';

                        prosesTebus = row.status == "1" ?
                            'disabled' :
                            '';
                    }

                    // create a logic here if row.norujukan is part of sudahTuntutManual, then status will be badge dituntut, printSuratPerjanjian will be disabled and also prosesTebus will be disabled
                    if (sudahTuntutSecaraManual.includes(row.norujukan)) {
                        status = '<span class="badge badge-warning">dituntut manual</span>';
                        printSuratPerjanjian = 'disabled';
                        prosesTebus = 'disabled';
                    } 


                    tbody.append(`
                        <tr style="font-size: 0.85rem;">
                            <td style="padding: 0.4rem 0.2rem;">${bil}</td>
                            <td style="padding: 0.4rem 0.2rem;">${row.nokp}</td>
                            <td style="padding: 0.4rem 0.2rem; font-size: 0.8rem;">${row.norujukan}</td>
                            <td style="padding: 0.4rem 0.2rem;">${row.pembiayaan ? parseFloat(row.pembiayaan).toLocaleString('en-MY', options) : '-'}</td>
                            <td style="padding: 0.4rem 0.2rem;">${row.nilaimarhun ? parseFloat(row.nilaimarhun).toLocaleString('en-MY', options) : '-'}</td>
                            <td style="padding: 0.4rem 0.2rem;">${row.jbg}</td>
                            <td style="padding: 0.4rem 0.2rem;">${status}</td>
                            <td style="padding: 0.4rem 0.2rem;">
                                <button class="btn btn-link btn-proses-pampasan" data-norujukan="${row.norujukan}" ${prosesTebus} title="Proses Tuntutan" data-toggle="tooltip" data-placement="top">
                                    <i class="fas fa-arrow-circle-right fa-lg" style="pointer-events: none; color: ${prosesTebus === 'disabled' ? '#6c757d' : 'green'};"></i>
                                </button>
                                <button class="btn btn-link" ${printSuratPerjanjian} title="Cetak Surat Perjanjian" data-toggle="tooltip" data-placement="top" 
                                    onclick="${printSuratPerjanjian === 'disabled' ? '' : `window.open('/pampasan/surat/${row.norujukan}', '_blank')`}">
                                    <i class="fas fa-print fa-lg" style="pointer-events: none; ${printSuratPerjanjian === 'disabled' ? 'color: #6c757d;' : ''}"></i>
                                </button>
                            </td>
                        </tr>
                    `);
                    bil++;
                });
                
                // Initialize tooltips for dynamically added buttons
                initializeTooltips();
            }
        });
    }

    // When any other modal is opened, show the default table again
    $('.btn[data-target^="#"][data-target!="#PampasanModal"]').on('click', function() {
        $('#default-table-section').show();
        $('#pampasan-table-section').hide();

        $('#mula').show();
        $('#akhir').show();
        $('#date-range-container').show();
        $('#status-filter-container').fadeOut();
    });

    // Also, when Pampasan modal is closed, show the default table again
    $('#PampasanModal').on('hidden.bs.modal', function() {
        $('#default-table-section').show();
        $('#pampasan-table-section').hide();

        $('#mula').show();
        $('#akhir').show();
        $('#date-range-container').show();
        $('#status-filter-container').fadeOut();
    });

    const companyInfo = {
        name: "KOPERASI PERMODALAN KELANTAN BERHAD",
        address: "Lot PT 448, Tingkat 1, Jalan Kuala Krai, Batu 3<br> Wakaf Che Yeh, 15150 Kota Bharu, Kelantan",
        phone: "09-741 4331 /  4334",
        website: "www.koppkb.com",
        email: "admin@koppkb.com"
    };

    // Simpan norujukan global untuk redirect
    let currentNorujukan = null;

    function askOperasiApproval(gadaianDetail) {
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false
        });

        swalWithBootstrapButtons.fire({
            title: 'Dapatkan Pengesahan Operasi',
            text: 'Kelulusan Pengeluaran Pampasan',
            icon: 'info',
            showCancelButton: true,
            confirmButtonText: 'Hantar',
            cancelButtonText: 'Batal',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {

                let norujukan = gadaianDetail.norujukan;
                let nm = gadaianDetail.nilaimarhun;
                let ber = gadaianDetail.berat;
                let marg = gadaianDetail.margin_semasa;
                let status = 'Kelulusan Pengeluaran Pampasan';
                let jumpinjam = gadaianDetail.pinjaman;
                let teller = "{{ Auth::user()->name }}";

                Swal.fire({
                    title: 'Tunggu Pengesahan Daripada Operasi.',
                    icon: 'info',
                    width: 600,
                    padding: '3em',
                    background: '#fffff',
                    showCancelButton: false,
                    showConfirmButton: false,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    allowEnterKey: false
                })
                let siricreated = 0;
                $.ajax({
                    method: 'post',
                    url: "{{ route('operasi.createkelulusan-by-khazanah') }}",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "norujukan": norujukan,
                        "komen": '',
                        "margin": marg,
                        "berat": ber,
                        "nilaimarhun": nm,
                        "status": status,
                        "jumpinjam": jumpinjam,
                        "teller": teller,
                        "pelulus": 'operasi'
                    },
                    success: function(data) {
                        siricreated = data;
                    },
                    error: function(xhr, status, error) {
                        var err = eval("(" + xhr.responseText + ")");
                        alert(xhr.responseText);
                    }
                });

                var pusher = new Pusher("{{ env('PUSHER_APP_KEY') }}", {
                    cluster: 'ap1',
                    encrypted: true
                });

                var channel = pusher.subscribe('notice-kelulusan');
                channel.bind('my-kelulusan', function(data) {

                    
                    if (data.norujukan == norujukan && data.siri == siricreated && data.teller == teller) {
                        console.log(data);
                        if (data.kelulusan == 'lulus') {
                            let komen = data.komen == null ? 'tiada' : data.komen;
                            Swal.fire({
                                icon: 'success',
                                title: 'Telah Disahkan',
                                text: `Komen : ${komen}`
                            }).then(function() {
                                window.location.href = '/pampasan/detail/' + norujukan;
                            });

                        } else if (data.kelulusan == 'batal') {
                            let komen = data.komen == null ? 'tiada' : data.komen;
                            Swal.fire({
                                icon: 'warning',
                                title: 'Telah Dibatalkan',
                                text: `Komen : ${komen}`
                            }).then(function() {
                                return false;
                            });
                        }
                    }
                });


            } else if (result.dismiss === Swal.DismissReason.cancel) {
                $("#terima_gadai").prop('disabled', false);
                swalWithBootstrapButtons.fire(
                    'Batal',
                    'Maklumat Pembiayaan Tidak Berjaya Disimpan',
                    'error'
                )
            }

        })
    }

    document.addEventListener('click', async function(e) {
        const suratBtn = e.target.closest('.btn-proses-pampasan');

        if (suratBtn) {
            const norujukan = suratBtn.getAttribute('data-norujukan');

            let gadaianDetail = await fetch("{{ config('api.url') }}" + `/api/gadai/norujukankodcaw/${kodcaw}/${norujukan}`)
                                    .then(response => response.json());

            askOperasiApproval(gadaianDetail[0][0]);

        }
    });

    document.addEventListener("DOMContentLoaded", function() {
        const params = new URLSearchParams(window.location.search);

        let pampasanExist = params.get("pampasan");

        if (pampasanExist) {
            document.getElementById('btnPampasan').click();
        }
    });

    document.addEventListener('DOMContentLoaded', function() {
        let radioStatusAll = document.querySelector('input[type="radio"][data-status="all"]');
        let radioStatusDituntut = document.querySelector('input[type="radio"][data-status="dituntut"]');
        let radioStatusBelumTuntut = document.querySelector('input[type="radio"][data-status="belum-tuntut"]');


        radioStatusAll.addEventListener('click', function() {
            onclickPampasan('all');
        })

        radioStatusDituntut.addEventListener('click', function() {
            onclickPampasan('dituntut');
        })

        radioStatusBelumTuntut.addEventListener('click', function() {
            onclickPampasan('belum-tuntut');
        })

        // Check if Bootstrap tooltip is available, if not, load it
        if (typeof $().tooltip === 'undefined') {
            console.log('Bootstrap tooltip not available, using title attributes instead');
            return;
        }
        
        // Initialize tooltips on page load
        initializeTooltips();

        // Re-initialize tooltips when new content is added via AJAX
        $(document).on('DOMNodeInserted', function() {
            setTimeout(initializeTooltips, 100);
        });

    });
</script>


@endsection