@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="{{ url('/') }}" class="ion-backspace" style="font-size:50px;color:blue;"></a>
                        </div>
                    </div>
                    <div class="row form-group justify-content-start" id="maklumat_komuditi">
                        <div class="col-md-4">
                            <div class="row form-group">
                                <div class="col-md-4">No Sijil : </div>
                                <div class="col-md-8"><span id="nosijil_span"></span></div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-4">Harga : </div>
                                <div class="col-md-8"><span id="harga_span"></span></div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="row form-group">
                                <div class="col-md-4">Kod Produk / Diskripsi : </div>
                                <div class="col-md-8"><span id="produk_span"></span></div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-4">Unit : </div>
                                <div class="col-md-8"><span id="unit_span"></span></div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-4">Nilai : </div>
                                <div class="col-md-8"><span id="nilai_span"></span></div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center" id="tiada_komuditi">
                        <div class="col-12">
                            <p>Tiada Komoditi</p>
                        </div>
                    </div>
                    <div class="row form-group justify-content-center">
                        <input type="hidden" value="{{ $user_name }}" id="user_name" name="user_name">
                        <button class="btn btn-primary mr-2" id="pembelian">Pembelian Komoditi</button>
                        <button class="btn btn-danger" id="penjualan">Penjualan Komoditi</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">{{ __('Rekod Pembelian/Penjualan Komoditi') }}</div>
                <div class="card-body text-center">
                    <div class="row">
                        <div class="col-md-12">
                            <table id="rekod_komuditi">
                                <thead>
                                    <tr>
                                        <th>Bil</th>
                                        <th>No Sijil</th>
                                        <th>Tarikh</th>
                                        <th>Masa</th>
                                        <th>Nilai Komoditi</th>
                                        <th>Transaksi Oleh</th>
                                        <th>Transaksi</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="pembelian_modal" tabindex="-1" data-backdrop="static"  aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalLabel">Pembelian Komoditi</h5>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row form-group">
                            <div class="col-md-4">No Sijil</div>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="nosijil" name="nosijil">
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-4">Produk</div>
                            @php
                                $produk = Http::get($api_url . '/api/komuditi/produk')->json();
                            @endphp
                            <div class="col-md-8">
                                <select name="produk" id="produk" class="form-control">
                                    <option disabled selected> -- Pilih Produk -- </option>
                                    @foreach($produk as $index=>$product)
                                        <option value="{{ $product['kodproduk'] }}">{{ $product['description'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-4">Unit</div>
                            <div class="col-md-8">
                                <input type="text" readonly class="form-control" id="unit" name="unit">
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-4">Harga</div>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="harga" name="harga">
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-4">Nilai</div>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="nilai" name="nilai">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-group row">
                    <button type="button" class="btn btn-primary mr-md-2" name="terima_komuditi" id="terima_komuditi">Sahkan</button>
                    <button type="button" class="btn btn-danger" name="batal_komuditi" id="batal_komuditi" data-dismiss="modal">Batal</button>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="detail_komuditi" tabindex="-1" data-backdrop="static"  aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalLabel">Detail Komoditi</h5>
            </div>
            <div class="modal-body">
                <div class="row form-group">
                    <div class="col-md-4">Kod Produk / Diskripsi : </div>
                    <div class="col-md-8"><span id="produk_span_modal"></span></div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4">Unit : </div>
                    <div class="col-md-8"><span id="unit_span_modal"></span></div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4">Harga : </div>
                    <div class="col-md-8"><span id="harga_span_modal"></span></div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-group row">
                    <button type="button" class="btn btn-danger" name="tutup_komuditi" id="tutup_komuditi" data-dismiss="modal">Tutup</button>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
<script>
    let api_url = "{{ $api_url }}";

    var tablerekod = $('#rekod_komuditi').DataTable();

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

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

    $('#pembelian').on('click',function(){
        $('#pembelian_modal').modal('show');
    });

    $('#penjualan').on('click',function(){
        var nosijil = $('#nosijil_span').text();
        console.log(nosijil);
        $.ajax({
            method:'post',
            url: api_url + '/api/komuditi/jual',
            datatype:'json',
            data:{
                'purchased_by': "{{ $user_name }}",
                'nosijil': nosijil
            },
            success:function(data){
                if(data == 1){
                    checkKomuditi();
                    Swal.fire({
                        icon: 'success',
                        title: 'Berjaya!',
                        text: 'Penjualan Unit Komuditi Berjaya'
                    });
                }else{
                    checkKomuditi();
                    Swal.fire({
                        icon: 'error',
                        title: 'Amaran!',
                        text: 'Penjualan Unit Komuditi Tidak Berjaya'
                    });
                }
            }
        })
    });

    $('#produk').change(function(){
        var produk = $('#produk').val();
        $.ajax({
            method:'get',
            url : api_url + '/api/komuditi/unit',
            dataType: 'json',
            data: {
                'kodproduk':produk
            },
            success:function(data){
                $('#unit').val(data)
            }
        });
    })

    function checkKomuditi(){
        $.ajax({
            method:'get',
            url: api_url + '/api/komuditi/check',
            success:function(data){
                var kodproduk = data['kodproduct'];
                $.ajax({
                    method:'get',
                    url : api_url + '/api/komuditi/description',
                    dataType : 'json',
                    data:{
                        'kodproduk': kodproduk
                    },
                    success:function(description){
                        var komuditi_semasa = Object.keys(description).length

                        if(komuditi_semasa == 0){
                            $('#maklumat_komuditi').hide();
                            $('#tiada_komuditi').show();
                            $('#penjualan').prop('disabled', true);
                            $('#pembelian').prop('disabled', false);
                        }else{
                            $('#maklumat_komuditi').show();
                            $('#tiada_komuditi').hide();
                            if(data['unit_komuditi'] == 0){
                                $('#penjualan').prop('disabled', true);
                                $('#pembelian').prop('disabled', false);
                            }else{
                                $('#penjualan').prop('disabled', false);
                                $('#pembelian').prop('disabled', true);
                            }
                        }
                        $('#nosijil_span').text(data['no_sijil'])
                        $('#harga_span').text('RM ' + formatter.format(data['nilai']))
                        $('#produk_span').text(description['kodproduk'] + ' / ' + description['description'])
                        $('#unit_span').text(description['unit'])
                        $('#nilai_span').text('RM ' + formatter.format(data['unit_komuditi']))
                    }
                })
            }
        });
        tablerekod.clear().draw();
        $.ajax({
            method:'get',
            url: api_url + '/api/komuditi/rekodkomuditi',
            success:function(rekod){
                var bilcount = 0;
                $.each(rekod,function(index,rekod_transaksi){
                    bilcount ++
                    tablerekod.row.add([
                        bilcount,
                        "<a data-toggle='modal' data-kodproduk='"+ rekod_transaksi['kodproduk'] +"' data-harga='" + rekod_transaksi['harga'] +"' data-target='#detail_komuditi' >"+rekod_transaksi['nosijil'] + '</a>',
                        rekod_transaksi['date_purchase'],
                        rekod_transaksi['time_purchase'],
                        formatter.format(rekod_transaksi['unit_komuditi']),
                        rekod_transaksi['transaction_by'],
                        rekod_transaksi['transaction_type']
                    ]).draw();
                })
            }
        })
    }

    $('#detail_komuditi').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget);
        var kodproduk = button.data('kodproduk');
        var harga = button.data('harga');

        $.ajax({
            method:'get',
            url : api_url + '/api/komuditi/description',
            dataType : 'json',
            data:{
                'kodproduk': kodproduk
            },
            success:function(description){
                $('#harga_span_modal').text('RM ' + formatter.format(harga));
                $('#produk_span_modal').text(description['kodproduk'] + ' / ' + description['description']);
                $('#unit_span_modal').text(description['unit']);
            }
        })
    })

    $('#terima_komuditi').on('click',function(){
        var nosijil = $('#nosijil').val();
        var produk = $('#produk').val();
        var unit = $('#unit').val();
        var harga = $('#harga').val();
        var nilai = $('#nilai').val();

        $.ajax({
            method:'post',
            url: api_url + '/api/komuditi/pembelian',
            dataType : 'json',
            data:{
                'unit_komuditi' : nilai,
                'nilai' : harga,
                'nosijil' : nosijil,
                'kodproduct' : produk,
                'purchased_by' : "{{ $user_name }}"
            },
            success:function(data){
                checkKomuditi();
                $('#nosijil').val('');
                $("#produk").prop("selected", false);
                $('#unit').val('');
                $('#harga').val('');
                $('#nilai').val('');
                Swal.fire({
                    icon: 'success',
                    title: 'Berjaya!',
                    text: 'Pendahuluan Unit Komuditi Berjaya'
                });
                $('#pembelian_modal').modal('hide');
            }
        });
    });

</script>
@endsection