@extends('layouts.master')
@section('title', 'User')
@push('css')
    <meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')
    {{--    <form method="POST" action="{{ route('user.customerPayment.add') }}" enctype="multipart/form-data">--}}
    {{--        @csrf--}}
    <div class="row" style="border-bottom: 1px solid silver;">
        <div class="col-xl-12">
            <div class="form-horizontal">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-sm-1 control-label" for="username"> Invoice no:</label>
                        <div class="col-sm-2">
                            <input type="number" id="invoice_no" name="invoice_no" class="form-control" value="{{$newInvoice}}" readonly>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-md-12">
            <div class="form-horizontal">
                <fieldset style="border: 1px solid silver;">
                    <legend>Transfer Information</legend>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Transfer date </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <input type="date" id="transfer_date" name="transfer_date" placeholder="Amount" class="form-control" value="2025-12-10">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Transfer By </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <select data-placeholder="Choose a Emplpoyee..."  name="employee_id" class="chosen-select" id="employee_id" tabindex="2">
                                    <option value="" selected disabled>Select Employee</option>
                                    @foreach($employees as $employee)
                                        <option value="{{$employee->id}}">{{$employee->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Transfer To </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <select data-placeholder="Select Branch..."  name="branch_id" class="chosen-select" id="branch_id" tabindex="2">
                                    <option value="" selected disabled>Select Branch</option>
                                    @foreach($branches as $branch)
                                        <option value="{{$branch->id}}">{{$branch->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>




                    </div>

                    <div class="col-sm-5">

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Product </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <select data-placeholder="Choose a Country..."  name="product_id" class="chosen-select" id="product_id" tabindex="2">
                                    <option value="" selected disabled>Select Product</option>
                                    @foreach($products as $product)
                                        <option value="{{$product->id}}">{{$product->product_name}}</option>
                                    @endforeach
                                </select>
                                <input type="hidden" name="product_cat" id="product_cat">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Quantity</label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" id="quantity" name="quantity"  class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Purchase Rate</label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" id="purchase_rate" name="purchase_rate"  class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Total Amount</label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" id="total_amount" name="total_amount" class="form-control" readonly>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-4 control-label" for=""> </label>
                            <label class="col-sm-1 control-label"></label>
                            <div class="col-sm-6">
                                <button type="button" id="add_to_cart" name="btnSubmit" title="Save"
                                        class="btn btn-sm btn-success pull-left">
                                    Add to Cart
                                    <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" id="stockUnit" readonly="readonly" style="border: none; font-size: 12px; width: 100%; text-align: center;" value="Quantity">
                        <br/>
                        <input type="text" id="productStock" readonly="readonly" style="border: none; font-size: 20px; width: 100%; text-align: center; color: green; ">
                        <br/>
                        <input id="purchase_rate_box" type="text" placeholder="purhase rate" readonly="readonly" title="Purchase rate (click &amp; hold)" style="font-size: 12px; width: 100%; text-align: center; background-color: seashell">

                    </div>
                    <div class="col-sm-2">
                        <br/>
                        <button type="button" onclick="submit()" name="btnSubmit" title="Save"
                                class="btn btn-md btn-success pull-left">
                            Save
                            <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
                        </button>
                    </div>

                </fieldset>

            </div>
            <div class="col-xs-12 col-md-12 col-lg-12" style="padding-left: 0px; padding-right: 0px;">
                <div class="table-responsive">
                    <table class="table table-bordered" style="color: rgb(0, 0, 0); margin-bottom: 5px;">
                        <thead>
                        <tr>
                            <th style="width: 4%; color: rgb(0, 0, 0);">SL</th>
                            <th style="width: 20%; color: rgb(0, 0, 0);">Product ID</th>
                            <th style="width: 20%; color: rgb(0, 0, 0);">Product Name</th>
                            <th style="width: 5%; color: rgb(0, 0, 0);">Quantity</th>
                            <th style="width: 13%; color: rgb(0, 0, 0);">Total Amount</th>
                            <th style="width: 20%; color: rgb(0, 0, 0);">Action</th>
                        </tr>
                        </thead>
                        <tbody class="TableBox">


                        </tbody>
                    </table>
                    <table class="table table-bordered" style="color: rgb(0, 0, 0); margin-bottom: 5px;">
                        <tbody >

                        <tr>
                            <td colspan="7"></td>
                        </tr>
                        <tr style="font-weight: bold;">
                            <td colspan="4">Note</td>
                            <td colspan="3">Sub Total</td>
                        </tr>
                        <tr>
                            <td colspan="4"><textarea name="note" id="note" placeholder="Note" style="width: 100%; font-size: 13px;"></textarea></td>
                            <td colspan="3" style="padding-top: 15px; font-size: 18px;">
                                <span id="table_subtotal"> </span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


    </div>
    {{--    </form>--}}

@endsection

@push('js')
    <script>
        $(document).ready(function() {
            var table = $('#example').DataTable( {
                lengthChange: false,
                buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
            } );

            table.buttons().container()
                .appendTo( '#example_wrapper .col-md-6:eq(0)' );
        } );
    </script>
    <script>
        $("#customer_id").change(function () {
            var customer_id = this.value;
            var ttt= 'select customer';
            $.ajax({
                url: '/customer-info/' + customer_id ,
                type: 'GET',
                success:(function(response) {
                    console.log(response);
                    $('#customer_contact').val(response.mobile);
                    $('#customer_address').val(response.address);

                })
            })
        });
        $("#product_id").change(function () {
            var product_id = this.value;
            var ttt= 'select customer';
            $('#sells_rate').val('');
            $('#quantity').val('');
            $('#total_amount').val('');
            $.ajax({
                url: '/product-info/' + product_id ,
                type: 'GET',
                success:(function(response) {
                    console.log(response);
                    $('#purchase_rate').val(response.product.purchase_rate);
                    $('#sells_rate').val(response.product.sales_rate);
                    $('#product_cat').val(response.product.category);
                    $('#purchase_rate_box').val(response.product.purchase_rate);
                    $('#productStock').val(response.currentQuantity);


                })
            })
        });
        $("#quantity").keyup(function () {
            var quantity = parseFloat(this.value);
            var purchase_rate= parseFloat($('#purchase_rate').val()) ;
            var total_amount= quantity * purchase_rate;
            $('#total_amount').val(total_amount);
        });
        $("#amount_vat").keyup(function () {
            calculateVat();
            allTotal();
        });

        function calculateVat(){
            var subtotal = parseFloat($('#amount_subtotal').val());
            var percentage = parseFloat($('#amount_vat').val());
            var percentageAmount = subtotal * (percentage/100);
            $('#calculate_amount_vat').val(percentageAmount);
        }

        $("#amount_discount").keyup(function () {
            allTotal();
        });
        $("#amount_transport").keyup(function () {
            allTotal();
        });
        $("#amount_paid").keyup(function () {
            paidDueCalculation();
            allTotal();

        });
        function paidDueCalculation(){
            var total = parseFloat($('#amount_total').val());
            var paid = parseFloat($('#amount_paid').val());
            var due = total - paid;
            $('#amount_due').val(due);
        }
        function allTotal(){
            calculateVat();
            var subtotal = parseFloat($('#amount_subtotal').val());
            var vat = parseFloat($('#calculate_amount_vat').val());
            var discount = parseFloat($('#amount_discount').val());
            var transport = parseFloat($('#amount_transport').val());
            var allTotal = ( subtotal + vat + transport ) - discount;
            $('#amount_total').val(allTotal);
            paidDueCalculation();
        }

    </script>
    <script>
        let sale_order = [];
        $('#add_to_cart').on('click', function() {
            $('.poBox').empty();
            $('.TableBox').empty();
            // console.log(sale_order)

            let product_id = $('#product_id').val();
            let product_name = $('#product_id option:selected').text();
            let product_cat =  $('#product_cat').val();
            let purchase_rate = $('#purchase_rate').val();
            let sells_rate = $('#sells_rate').val();
            var quantity = $("#quantity").val();
            var total_amount= $('#total_amount').val();

            sale_order.push({
                product_id: product_id,
                category:product_cat,
                product_name: product_name,
                purchase_rate: purchase_rate,
                sells_rate: sells_rate,
                quantity: quantity,
                total: total_amount
            })
            // console.log(sale_order)
            purchaseAllList(sale_order);

        });

        function purchaseAllList(order) {
            var html = '';
            // var TotalAllQty = 0;
            var subtotal = 0;
            // var AllFobValue = 0;
            //
            // $('.poBox').append(html);
            // $('#totalQty').text(TotalAllQty);
            // $('#totalFob').text(TotalAllFob);
            // $('#allFobValue').text(AllFobValue);

            var tablebox = '';
            for (var i = 0; i < order.length; i++) {
                subtotal = subtotal + parseInt(order[i].total) ;
                tablebox += `<tr>
                            <td>${i+1}</td>
                            <td>${order[i].product_id}</td>
                            <td>${order[i].product_name}</td>
                            <td>${order[i].quantity}</td>
                            <td>${order[i].total}</td>
                            <td>
                            <div data-index="${i}" class="btn btn-sm btn-danger qty_remove_list_Table">-</div>
                            </td>

                        </tr>`;
            }
            $('.TableBox').append(tablebox);
            console.log(subtotal);
            $('#table_subtotal').text(subtotal);
            $('#amount_subtotal').val(subtotal);
            allTotal();
        }



        $('.TableBox').on('click', '.qty_remove_list_Table', function() {
            let index = $(this).attr('data-index');
            sale_order.splice(index, 1)
            $('.remove_order_qty' + index).remove();
            $('.TableBox').empty();
            purchaseAllList(sale_order);
            allTotal();
        });


        function submit(){
            let invoice_no = $('#invoice_no').val();
            let transfer_to = $('#branch_id').val();
            let transfer_date = $('#transfer_date').val();
            let employee_id = $('#employee_id').val();
            let note = $('#note').val();

            if(sale_order.length > 0){
                var formData = {
                    'invoice_no' : invoice_no,
                    'transfer_to' : transfer_to,
                    'transfer_date' : transfer_date,
                    'employee_id' : employee_id,
                    'note' : note,
                    'sale_order': JSON.stringify(sale_order),
                };
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "{{ route('user.transferProduct.store') }}",
                    type: "post",
                    data: formData,
                    success: function(response) {
                        console.log(response);
                        location.reload();
                    }
                });

            }
            console.log(formData);

        }

    </script>
@endpush