@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">
                    
                    <div class="row mb-4">
                        <div class="col-2 justify-content-start">
                        </div>
                        <div class="col-8 mt-3 justify-content-center">
                        </div>
                        <div class="col-2">
                        </div>
                    </div>

                    <div class="mb-5">
                        <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>
                            </div>
                            <div class="col-9">
                                <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>
                                        </tr>
                                    </thead>
                                </table>
                            </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 baucerno = 'B' + yy + mm + dd + '-' + String(data.recno).padStart(4, '0');
            
                    $('#' + e.currentTarget.id + ' .baucer').val(baucerno);
                }
            });
            
    });

    var tablepanjar = $('#table-panjar').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: 'Tambah Marhun Tidak Berjaya'
                });
                console.log(xhRequest);
            }
        
        });

    });

    function listtable(data){
       
        var counter = 1;
        tablepanjar.clear().draw();

        $.each(data,function(index,panjar){
          
                    tablepanjar.row.add([
                        counter,
                        panjar['tarikh'],
                        panjar['deskripsi'],
                        panjar['kategori'],
                        panjar['bayaran']
                    ]).draw();
                    counter = counter + 1;
           
        });
        
    }

    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: 'Tambah Marhun Tidak Berjaya'
                    });
                    console.log(xhRequest);
                }
            
            });
        }

    }

    function checkformpanjar(formdata)
    {

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

        // //Variable Initialize
        // 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();

        // var validation = Array.prototype.filter.call(formdata, function(form) {
        //     if (form.checkValidity() === false) {
        //         event.preventDefault();
        //         event.stopPropagation();
        //     }
        //         form.classList.add('is-invalid');
        // });

        // if(!tarikh)
        // {
        //     console.log('tarikh xleh');
        // }

        // if(!tarikhbil)
        // {
        //     console.log('tarikh xde');
        // }

        // if(dapur === false)
        // {  
        //     if(!tuntutan)
        //         console.log('tututan xde');
        // }

        // if(deskripsi === '' || deskripsi === null)
        // {
        //     console.log('deskripsi xde');
        // }

        // if(bayaran === null || bayaran === '')
        // {
        //     console.log('bayaran xde');
        // }
        
        // return false;
    }

    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();
    });

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

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

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


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

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

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

    //End Modal Reset

</script>

@endsection