@extends('layouts.app')

@section('content')

@include('modal.panjar')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">{{ __('Perbelanjaan') }}</div>

                <div class="card-body text-center">
                    
                    <div class="row mb-4">
                        <div class="col-2 justify-content-start">
                        <a href="{{ url('/') }}" class="ion-backspace" style="font-size:50px;color:blue;"></a>
                        </div>
                        <div class="col-8 mt-3 justify-content-center">
                            <h3>Panjar</h3>
                        </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-info 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-info btn-lg btn-block"  data-toggle="modal" data-target="#keraianModal" data-backdrop="static" data-keyboard="false">Keraian</button>
                                <button class="btn btn-info btn-lg btn-block"  data-toggle="modal" data-target="#SelenggaraModal" data-backdrop="static" data-keyboard="false">Selenggara</button>
                                <button class="btn btn-info btn-lg btn-block"  data-toggle="modal" data-target="#BelanjaamModal" data-backdrop="static" data-keyboard="false">Belanja Am</button>
                                <button class="btn btn-info btn-lg btn-block"  data-toggle="modal" data-target="#PerubatanModal" data-backdrop="static" data-keyboard="false">Perubatan</button>
                                <button class="btn btn-info btn-lg btn-block"  data-toggle="modal" data-target="#DapurModal" data-backdrop="static" data-keyboard="false">Dapur</button>
                                <button class="btn btn-info 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 mt-4' id='table-panjar' style="width:100%;">
                                    <thead>
                                        <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>

   

    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'); //January is 0!
                    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 panjaransubmit()
    {
        let baucer = $('input[name').val();
        console.log('test');
    }

</script>

@endsection