@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">{{ __('Komuditi') }}</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 Komuditi</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" id="pembelian">Pembelian Komuditi</button>
                    </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 Komuditi</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>
<script>
    let api_url = "{{ $api_url }}";
    $(document).ready( function () {
        checkKomuditi();
    });

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

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

    $('#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
                        console.log(komuditi_semasa);
                        if(komuditi_semasa == 0){
                            $('#maklumat_komuditi').hide();
                            $('#tiada_komuditi').show();
                        }else{
                            $('#maklumat_komuditi').show();
                            $('#tiada_komuditi').hide();
                        }
                        $('#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']))
                    }
                })
            }
        });
    }

    $('#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