@extends('layouts.app_operasi')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">{{ __('Komoditi') }}</div>
                <div class="card-body text-center">
                    <div class="row">
                        <div class="col-2 justify-content-start">
                            <a href="{{ route('komuditi') }}" class="ion-backspace" style="font-size:50px;color:blue;"></a>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-12">
                            <h3>Rekod Transaksi Komoditi</h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-2">Tarikh</div>
                        <div class="col-3"><input class="form-control" autocomplete="off" type="text" placeholder="Tarikh" onchange="fetchRekodKomoditi()" name="tarikh_rekod" id="tarikh_rekod"></div>
                        <div class="col-7 text-right mb-3">
                            <form target="_blank" action="{{ route('komoditi.rekod.print') }}" method="get">
                                <input type="text" hidden name="tarikh_print" id="tarikh_print">
                                <button class="btn btn-primary"><i class="fa fa-print" aria-hidden="true"></i></button>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <table id="rekod_komoditi">
                                <thead>
                                    <tr>
                                        <td>Bil</td>
                                        <td>Cawangan</td>
                                        <td>Jumlah Nilai Komoditi</td>
                                    </tr>
                                </thead>
                            </table>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    let api_url = "{{ $api_url }}";
    var tablerekod = $('#rekod_komoditi').DataTable();
    $('#tarikh_rekod').datepicker({
        format: 'dd/mm/yyyy',
        endDate: new Date()
    });

    $(document).ready( function () {
        fetchRekodKomoditi();
    });

    const formatter = new Intl.NumberFormat('en-US', {
        minimumFractionDigits: 2
    });

    function fetchRekodKomoditi(){
        var tarikh_rekod = $('#tarikh_rekod').val();
        if(tarikh_rekod == ''){
            var current = new Date();
            var current_date = current.getDate();
            var current_month = current.getMonth()+1;
            var current_year = current.getFullYear();
            var tarikh = current_year + '-' +current_month+'-'+current_date;
            $('#tarikh_print').val(tarikh);
        }else{
            var split_date = tarikh_rekod.split('/');
            var tarikh = split_date[2] + '-' + split_date[1] + '-' + split_date[0];
            $('#tarikh_print').val(tarikh);
        }
        tablerekod.clear().draw();
        $.ajax({
            method:'get',
            url: api_url + '/api/komoditi/rekod/transaksi',
            data:{
                'tarikh':tarikh
            },
            success:function(data){
                var count = 0;
                $.each(data,function(index,rekodkomoditi){
                    count++;
                    tablerekod.row.add([
                        count,
                        rekodkomoditi['cawangan'],
                        formatter.format(rekodkomoditi['totalkomoditi'])
                    ]).draw();
                })
            }
        })
    }
</script>
@endsection