@extends('layouts.app')

@section('content')
<form class="form" id="inventoryInvoiceForm">
<div class="row" id="delivery_data">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="pt-3 px-3">
                    <form class="form">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="client_id">Select Client</label>
                                    <select id="client_id" name="client_id" class="form-control">
                                        <option selected disabled="">Select Client</option>
                                        @foreach ($clients as $client)
                                            <option data-details="{{$client->phone}}-{{$client->email}}" value="{{$client->id}}">{{$client->client_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="date">Select Date</label>
                                    <input type="date" name="date" id="date" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="invoice_no">Invoice No</label>
                                    <input type="number" name="invoice_no" id="invoice_no" class="form-control" value="{{$invoice_no}}">
                                </div>
                            </div>
                        </div>
                        <div class="row d-none" id="invoice_window">
                            <div class="col-md-12">
                                <h4>Invoice</h4>
                                <label>Bill To:</label>
                                
                            </div>
                            <div class="col-md-6">
                                <div class="card bg-blue-grey text-white p-3">
                                    <blockquote class="blockquote mb-0">
                                        <p class="mb-0 client_name"></p>
                                        <footer class="blockquote-footer white">
                                        <small class="white client_details">
                                        </small>
                                        </footer>
                                    </blockquote>
                                </div>
                            </div>
                            <div class="col-md-6 d-none d-md-block">
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="account_id">Select Item</label>
                                    <select name="account_id[]" class="form-control account_id" data-count="0">
                                        <option selected disabled="">Select Item</option>
                                        @foreach ($inventory_item as $item)
                                            <option 
                                                data-qty="{{$item->qty}}" 
                                                data-purchase="{{$item->qty!=0 ? round($item->total_bill/$item->qty,2) : 0}}" 
                                                data-balance="{{$item->total_bill}}" value="{{$item->item->id}}">  {{$item->item->item_name}}{{$item->item->is_sub_account=="Yes" ? '-'.$item->item->sub_account : ''}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="qty_hand">Qty on hand</label>
                                    <input type="text" name="qty_hand[]" id="qty_hand_0" class="form-control" readonly>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="avg_cost">Average Cost</label>
                                    <input type="text" name="avg_cost[]" id="avg_cost_0" class="form-control" readonly>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="desc">Description</label>
                                    <input type="text" name="description[]" id="desc_0" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="qty_sell">Qty Sell</label>
                                    <input type="number" name="qty[]" id="qty_sell_0" class="form-control qty_sell">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="rate">Rate</label>
                                    <input type="number" name="rate[]" id="rate_0" class="form-control rate">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="amount">Amount</label>
                                    <input type="text" name="amount[]" id="amount_0" class="form-control amount_item">
                                </div>
                            </div>
                            
                        </div>
                        <div id="records"></div>
                        <div class="row d-none" id="addMoreDiv">
                            <div class="col-md-12">
                                <button type="button" class="btn btn-success addMore">
                                    <i class="icon-plus"></i> Add More
                                </button>
                            </div>
                        </div>
                        <div class="row form-actions d-none">
                            <div class="col-md-3"></div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="tax_id">Tax</label>
                                    <a class="float-right" href="#addTax" data-toggle="modal" data-keyboard="false">Add Tax</a>
                                    <select name="tax_id" id="tax_id" class="form-control tax_lists">
                                        <option value="" disabled selected>Select Tax</option>
                                        @foreach ($tax as $taxes)
                                            <option data-tax="{{$taxes->tax}}" value="{{$taxes->id}}">{{$taxes->type}}-{{$taxes->tax}}%</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="total_amount">Tax Amount</label>
                                    <input type="number" name="tax_amount" value="0" id="tax_amount" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="total_amount">Total Amount</label>
                                    <input type="number" name="total_amount" id="total_amount" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="form-actions d-none">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                            <button type="button" class="btn btn-success" id="saveBtn">
                                <i class="icon-note"></i> Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</form>

<div class="modal fade text-left" id="addTax" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gradient-green-tea">
                <h3 class="modal-title text-white" id="myModalLabel3">Add Tax</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" id="taxForm">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="text-bold-500" for="type"> Type: </label>
                                <input type="text" class="form-control border-primary" name="type">
                            </div>
                            <div class="form-group">
                                <label class="text-bold-500" for="tax"> Tax: </label>
                                <input type="text" class="form-control border-primary" name="tax">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pt-2">
                        <a href="javascript:;" data-dismiss="modal">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                        </a>
                        <button type="button" class="btn btn-raised btn-success" id="addTaxForm">
                            <i class="icon-note"></i> Save
                        </button>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>
@endsection
@section('afterScript')
    <script>
        $(document).ready(function(){
            var count =1;
            $('.account_id').select2();

            // $('#tax_id').change(function(){
            //     var total=0;
            //     var value=$(this).val();
            //     $('#tax_amount').val(value);
            //     if(value==''){
            //         value=0;
            //     }

            //     $('.amount_item').each(function(){
            //         var amount=$(this).val();
            //         total+=parseInt(amount);
            //     });
            //     var total_with_tax=0;
            //     var tax=0;
            //     if(value!=0){
            //         tax=total*parseInt(value/100);
            //     }
            //     else{
            //         tax=0;
            //     }
            //     total_with_tax=total+tax;
            //     $('#total_amount').val(total_with_tax);

            // })

            $('#client_id').select2().on('change',function(){
                $('#invoice_window,#addMoreDiv,.form-actions').removeClass('d-none');
                $('.client_name').text('Client Name: '+ $('#client_id option:selected').text());
                $('.client_details').text('Contact Information: '+$('#client_id option:selected').attr('data-details'));
            });

            $(document).on('click',"#addTaxForm", function(e){
                e.preventDefault();
            
                var form_data = new FormData($("#taxForm")[0]);
                $.ajaxSetup({
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url : "{{ route('sales_tax.store') }}",
                    type: "POST",
                    data : form_data,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function (res) {
                        swal("Inserted!", "Tax has been Added Successfully!", "success");
                        $('.tax_lists').append('<option data-tax="'+res.tax+'" value="'+res.id+'">'+res.type+'  - '+res.tax+'%</option>');
                        $('#addTax').modal('hide');
                        $('#taxForm')[0].reset();
                        $('.tax_lists').val(res.id).trigger('change');
                    },
                    error: function(err) {
                        swal('Not Valid',err.responseJSON.message,'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);
                    
                    }
                });
            });


            $(document).on('click','.addMore',function(e){
            e.preventDefault();

            var html='<div class="row" id="record_'+count+'">';
                html +='<div class="col-md-3">';
                html +='<div class="form-group">';
                html +='<label for="account_id">Select Item</label>';
                html +='<select name="account_id[]" class="form-control account_id" data-count='+count+'>';
                html +='<option selected disabled="">Select Item</option>';
                html +='@foreach ($items as $item)';
                html +='<option data-qty="{{$item->qty_hand}}" data-purchase="{{$item->qty_hand!=0 ? round($item->accountInventory->balance/$item->qty_hand,2) : 0}}" data-balance="{{$item->accountInventory->balance}}" value="{{$item->id}}">{{$item->item_name}}{{$item->is_sub_account=="Yes" ? '-'.$item->sub_account : ''}}';
                html +='</option>';
                html +='@endforeach';
                html +='</select>';
                html +='</div>';
                html +='</div>';
                html +='<div class="col-md-3">';
                html +='<div class="form-group">';
                html +='<label for="qty_hand">Qty on hand</label>';
                html +='<input type="text" name="qty_hand[]" id="qty_hand_'+count+'" class="form-control" readonly>';
                html +='</div>';
                html +='</div>';
                html +='<div class="col-md-3">';
                html +='<div class="form-group">';
                html +='<label for="avg_cost">Average Cost</label>';
                html +='<input type="text" name="avg_cost[]" id="avg_cost_'+count+'" class="form-control" readonly>';
                html +='</div>';
                html +='</div>';
                html +='<div class="col-md-3">';
                html +='<div class="form-group">';
                html +='<label for="desc">Description</label>';
                html +='<input type="text" name="description[]" id="desc_'+count+'" class="form-control">';
                html +='</div>';
                html +='</div>';
                html +='<div class="col-md-3">';
                html +='<div class="form-group">';
                html +='<label for="qty_sell">Qty Sell</label>';
                html +='<input type="number" name="qty[]" id="qty_sell_'+count+'" class="form-control qty_sell">';
                html +='</div>';
                html +='</div>';
                html +='<div class="col-md-3">';
                html +='<div class="form-group">';
                html +='<label for="rate">Rate</label>';
                html +='<input type="number" name="rate[]" id="rate_'+count+'" class="form-control rate">';
                html +='</div>';
                html +='</div>';
                html +='<div class="col-md-3">';
                html +='<div class="form-group">';
                html +='<label for="amount">Amount</label>';
                html +='<input type="text" name="amount[]" id="amount_'+count+'" class="form-control">';
                html +='</div>';
                html +='</div>';
                html +='<div class="col-md-3 text-left text-md-right" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">';
                html +='<button class="btn btn-danger removeRecord" data-id="'+count+'">Remove</button>'
                html +='</div>';
                html +='</div>';

                $('#records').append(html);
                count=count+1;
                $('.account_id').select2();

        });

        $(document).on('click','.removeRecord',function(e){
            e.preventDefault();

            var data_id =$(this).attr('data-id');
            $('#record_'+data_id).remove();
        });

        $(document).on('change','.account_id',function(){
            var attr = $(this).attr('data-count');
            var qty_hand = $('[data-count='+attr+'] option:selected').attr('data-qty');
            var purchase = $('[data-count='+attr+'] option:selected').attr('data-purchase');
            var balance = $('[data-count='+attr+'] option:selected').attr('data-balance');
            var desc = $('[data-count='+attr+'] option:selected').text();
            console.log(desc);
            $('#qty_hand_'+attr).val(qty_hand);
            $('#avg_cost_'+attr).val(purchase);
            $('#desc_'+attr).val(desc);
            $('#qty_sell_'+attr).attr('max',qty_hand);
        });

        $(document).on('keyup','.qty_sell',function(){
            var attr=$(this).attr('id').split("_");
            var value = $(this).val();
            if(parseInt(value) > parseInt($('#qty_hand_'+attr[2]).val())){
                swal('Not Valid','Quantity cannot be more than quantity on hand','error');
                $(this).val(null)
            } else {
                if($('#rate_'+attr[2]).val()!="" || $('#rate_'+attr[2]).val()!=null) {
                    var amount_item = value * $('#rate_'+attr[2]).val();
                    $('#amount_'+attr[2]).val(amount_item)
                    var total_amount = 0;
                    for (let index = 0; index < $("input[name='amount[]']").length; index++) {
                        total_amount= total_amount + parseInt($("input[name='amount[]']")[index].value);
                        $('#total_amount').val(total_amount);
                    }
                }
            }
        });

        $(document).on('keyup','.rate',function(){
            var attr=$(this).attr('id').split("_");
            var value = $(this).val();
            console.log(attr[1]);
            if($('#qty_sell_'+attr[1]).val()!="" || $('#qty_sell_'+attr[1]).val()!=null) {
                var amount_item = value * $('#qty_sell_'+attr[1]).val();
                $('#amount_'+attr[1]).val(amount_item)
                var total_amount = 0;
                for (let index = 0; index < $("input[name='amount[]']").length; index++) {
                    total_amount= total_amount + parseInt($("input[name='amount[]']")[index].value);
                    $('#total_amount').val(total_amount);
                }
            }
        });

        $(document).on('change',"#tax_id",function(){
            net_invoice=0;
            var attr = $('#tax_id option:selected').attr('data-tax');
            var total = $('#total_amount').val();
            var sales_tax = (parseInt(total) * (parseInt(attr)/100));
            var net_invoice = parseInt(total) + sales_tax;
            $('#total_amount').val(net_invoice);
            $('#tax_amount').val(sales_tax);
        })

    
        $(document).on('click',"#saveBtn", function(e){
            e.preventDefault();
        
            var form_data = new FormData($("#inventoryInvoiceForm")[0]);
            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url : "{{ route('add_client_invoice_inventory.store') }}",
                type: "POST",
                data : form_data,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function (res) {
                    swal("Inserted!", "Data has been Added Successfully!", "success");
                     setTimeout(function() { 
                        location.reload();
                    }, 1000);
                    // $('#inventoryInvoiceForm')[0].reset();
                },
                error: function(err) {
                    swal('Not Valid',err.responseJSON.message,'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);
                
                }
            });
        });

        $(document).on('click','.prepare',function(){
            $('#generate_invoice').removeClass('d-none');
            $('html, body').animate({
                scrollTop: $('#generate_invoice').offset().top
            }, 800);
        })

    })
</script>
@endsection