@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>

                        <label class="col-sm-1 control-label" for="username"> Sales By: </label>
                        <div class="col-sm-2">
                            <select data-placeholder="Choose a Country..."  name="employee_id" class="chosen-select" id="employee_id" tabindex="2">
                                <option value="" selected disabled>Select customer</option>
                                @foreach($employees as $employee)
                                    <option value="{{$employee->id}}">{{$employee->name}}</option>
                                @endforeach
                            </select>
                        </div>

                        <label class="col-sm-1 control-label" for="username"> Sales From </label>
                        <div class="col-sm-2">
                            <input type="text" id="branch_id" name="branch_id" placeholder="" class="form-control" value="{{auth()->user()->branch_id}}" readonly>
                        </div>

                        <label class="col-sm-1 control-label" for="username"> Date </label>
                        <div class="col-sm-2">
                            <input type="date" id="sale_date" name="sale_date" placeholder="Amount" class="form-control" value="2025-12-12">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-md-9">
            <div class="form-horizontal">
                <fieldset style="border: 1px solid silver;">
                    <legend>customer & Product Information:</legend>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Sales Type </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <input id="demo-inline-form-radio-2" class="magic-radio" type="radio" name="sale_type" value="retail" checked>
                                <label for="demo-inline-form-radio-2">Retail   </label>

                                <input id="demo-inline-form-radio-3" class="magic-radio" type="radio" name="sale_type" value="wholesale">
                                <label for="demo-inline-form-radio-3">Wholesale</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> customer </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <select data-placeholder="Choose a Country..."  name="customer_id" class="chosen-select" id="customer_id" tabindex="2">
                                    <option value="" selected disabled>Select customer</option>
                                    @foreach($customers as $customer)
                                        <option value="{{$customer->id}}">{{$customer->customer_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-1">
                                <a href="/administration/customer" target="_blank" title="Add New Customer" class="btn btn-xs btn-danger" style="height: 31px; border: 0px; width: 27px; margin-left: -20px;"><i aria-hidden="true" class="fa fa-plus" style="margin-top: 10px;"></i></a>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="txtFirstName"> Mobile No </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="text" name="customer_contact" id="customer_contact" placeholder="" value=""
                                       class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="txtFirstName"> Address </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="text" name="customer_address" id="customer_address" placeholder="" value=""
                                       class="form-control" readonly>
                            </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-6">
                                <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 class="col-sm-1">
                                <a href="/administration/product" target="_blank" title="Add New Customer" class="btn btn-xs btn-danger" style="height: 31px; border: 0px; width: 27px; margin-left: -20px;"><i aria-hidden="true" class="fa fa-plus" style="margin-top: 10px;"></i></a>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Selling Price</label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" id="sells_rate" name="sells_rate" class="form-control">
                            </div>
                        </div>

                        <div class="form-group" style="display: none">
                            <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="hidden" id="purchase_rate" name="purchase_rate" class="form-control">
                            </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"> 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>
                </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 Name</th>
                            <th style="width: 13%; color: rgb(0, 0, 0);">Category</th>
                            <th style="width: 8%; color: rgb(0, 0, 0);">Sales Rate</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 class="col-md-3">
            <div class="form-horizontal">
                <fieldset style="border: 1px solid silver;">
                    <legend>Amount Details:</legend>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="txtFirstName"> Sub Total </label>
                        <div class="col-sm-6">
                            <input type="text" name="amount_subtotal" id="amount_subtotal" placeholder="" value=""
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="txtFirstName"> Vat </label>
                        <div class="col-sm-6 d-flex">
                            <input type="text" name="amount_vat" id="amount_vat" value="0"
                                   class="form-control">
                            <input type="text" name="calculate_amount_vat" id="calculate_amount_vat"
                                   class="form-control" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="txtFirstName"> Discount </label>
                        <div class="col-sm-6">
                            <input type="text" name="amount_discount" id="amount_discount" placeholder="" value="0"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="txtFirstName"> Transport Cost</label>
                        <div class="col-sm-6">
                            <input type="text" name="amount_transport" id="amount_transport" placeholder="" value="0"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="txtFirstName">Total</label>
                        <div class="col-sm-6">
                            <input type="text" name="amount_total" id="amount_total" placeholder="" value="0"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="txtFirstName">Paid</label>
                        <div class="col-sm-6">
                            <input type="text" name="amount_paid" id="amount_paid" placeholder="" value="0"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="txtFirstName">Due</label>
                        <div class="col-sm-6">
                            <input type="text" name="amount_due" id="amount_due" placeholder="" value=""
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" for=""> </label>


                        <button type="button" onclick="submit()" name="btnSubmit" title="Save"
                                class="btn btn-sm btn-success pull-left" style="margin-right: 10px;">
                            Sale
                        </button>
                        <button type="button" onclick="submit()" name="btnSubmit" title="Save"
                                class="btn btn-sm btn-success pull-left">
                            New Sale
                        </button>


                    </div>
                </fieldset>
            </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 type= $("input[name='sale_type']:checked").val();
            var product_id = this.value;
            var ttt= 'select customer';
            $.ajax({
                url: '/product-info/' + product_id ,
                type: 'GET',
                success:(function(response) {
                    console.log(response);
                    $('#purchase_rate').val(response.product.purchase_rate);
                    if (type === 'retail'){
                        $('#sells_rate').val(response.product.sales_rate);
                    }else {
                        $('#sells_rate').val(response.product.wholesale_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 productStock = parseFloat($('#productStock').val());
            var purchase_rate= parseFloat($('#sells_rate').val()) ;
            if (quantity > productStock){
                alert('Insufficient stock for this item');
                $('#quantity').val('');
                $('#total_amount').val('');
            }else {
                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_name}</td>
                            <td>${order[i].category}</td>
                            <td>${order[i].sells_rate}</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>
                            <div data-index="${i}" class="btn btn-sm btn-info qty_edit_purchase_style"><i class="far fa-edit"></i></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 branch_id = $('#branch_id').val();
            let sale_date = $('#sale_date').val();
            let sale_type = $('#sale_type').val();
            let employee_id = $('#employee_id').val();
            let subtotal = $('#amount_subtotal').val();
            let percentage = parseFloat($('#amount_vat').val());
            let calculate_amount_vat=  $('#calculate_amount_vat').val();
            let discount = parseFloat($('#amount_discount').val());
            let transport = parseFloat($('#amount_transport').val());
            let total = $('#amount_total').val();
            let paid = parseFloat($('#amount_paid').val());
            let due = $('#amount_due').val();
            let note = $('#note').val();

            let customer_id = $('#customer_id').val();
            let customer_contact = $('#customer_contact').val();
            let customer_address = $('#customer_address').val();

            if(sale_order.length > 0){
                var formData = {
                    'invoice_no' : invoice_no,
                    'branch_id' : branch_id,
                    'sale_date' : sale_date,
                    'sale_type' : sale_type,
                    'employee_id' : employee_id,
                    'subtotal' : subtotal,
                    'percentage' : percentage,
                    'calculate_amount_vat' : calculate_amount_vat,
                    'discount' : discount,
                    'transport' : transport,
                    'total' : total,
                    'paid' : paid,
                    'due' : due,
                    'note' : note,
                    'customer_id': customer_id,
                    'customer_contact': customer_contact,
                    'customer_address': customer_address,
                    'sale_order': JSON.stringify(sale_order),
                };
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "{{ route('user.serviceEntry.store') }}",
                    type: "post",
                    data: formData,
                    success: function(response) {
                        console.log(response);
                        //location.reload();
                    }
                });

            }
            console.log(formData);

        }

    </script>
@endpush