@extends('layouts.master')
@section('title', 'User')
@push('css')
    <meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
    <style>
        thead th,
        td,
        th {
            color: #fff;
            font-weight: bold
        }

        #container .table-bordered,
        #container .table-bordered td,
        #container .table-bordered th {
            border-color: #b7c51c;
            text-align: center;
            color: white;

        }

    </style>
@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="{{ invoiceNo() }}" 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 Employee</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->name }}" 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"
                style="background-color: #25476a;color: white;font-weight: bold;padding:15px;margin-top: 15px;">
                <fieldset style="border: 1px solid silver;padding:15px">
                    <legend style="color:#fff">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"-->
                        <!--        style="padding: 8px 10px;background-color: #fff;color: #000;border-radius: 3px;">-->
                        <!--        <input id="demo-inline-form-radio-2" class="magic-radio sale_type" 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 sale_type" 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"> --}}
                        {{-- <div class="col-sm-7"> --}}
                        {{-- <input id="demo-inline-form-radio-4" class="magic-radio" type="radio" name="sale_item"> --}}
                        {{-- <label for="demo-inline-form-radio-4">Product</label> --}}

                        {{-- <input id="demo-inline-form-radio-5" class="magic-radio" type="radio" name="sale_item"> --}}
                        {{-- <label for="demo-inline-form-radio-5">Serial</label> --}}
                        {{-- </div> --}}
                        {{-- </div> --}}
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Search Type </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7"
                                style="padding: 8px 10px;background-color: #fff;color: #000;border-radius: 3px;">
                                <!--<input id="barcode" class="magic-radio sale_type" type="radio" name="search_type"-->
                                <!--    value="barcode" checked>-->
                                <!--<label for="barcode">Scan Barcode </label>-->
                                <input id="search_product" class="magic-radio sale_type" type="radio" name="search_type"
                                    value="product_search">
                                <label for="search_product">Product Search</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Product Search </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <div id="select2product" style="display:none">
                                    <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>
                                </div>
                                <input type="text" id="barcode_number" placeholder="Scan Barcode" name="product_id"
                                    class="form-control">
                                <input type="hidden" name="product_cat" id="product_cat">
                                <input type="hidden" name="product_id_number" id="product_id_number">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Product Name </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="text" id="product_name" placeholder="name" readonly name="product_id"
                                    class="form-control">
                                <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;color:#25476a; 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="password" placeholder="purhase rate" readonly="readonly"
                            title="Purchase rate (click &amp; hold)"
                            style="font-size: 12px;color:#25476a; width: 100%; text-align: center; background-color: seashell">
                    </div>
                </fieldset>

            </div>
            <div class="col-xs-12 col-md-12 col-lg-12" style="margin-top: 50px;background-color:#25476a;padding:15px">
                <div class="table-responsive">
                    <table class="table table-bordered" style="color: rgb(0, 0, 0); margin-bottom: 5px;">
                        <thead style="background-color: #b7c51c;">
                            <tr>
                                <th style="width: 4%;color:white" class="text-center">SL</th>
                                <th style="width: 4%;color:white" class="text-center">Product Name</th>
                                {{-- <th style="width: 4%;color:white" class="text-center">Category</th> --}}
                                <th style="width: 4%;color:white" class="text-center">Sales Rate</th>
                                <th style="width: 4%;color:white" class="text-center">Quantity</th>
                                <th style="width: 4%;color:white" class="text-center">Total Amount</th>
                                <th style="width: 4%;color:white" class="text-center">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%;color:black; font-size: 13px;padding:15px;"></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" style="font-weight: bold;overflow:hidden">
                <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" style="background-color: #000;color: white;font-weight: bold;">
                        <label class="col-sm-4 control-label" for="txtFirstName">Total</label>
                        <div class="col-sm-6">
                            <input type="text" style="background-color: #000;color:white" 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" style="background-color: #25476a;color: white;" name="amount_paid"
                                id="amount_paid" placeholder="" value="0" class="form-control">
                        </div>
                    </div>
                    <div class="form-group" style="background-color: rgb(255, 10, 10);color: white;font-weight: bold;">
                        <label class="col-sm-4 control-label" for="txtFirstName">Due</label>
                        <div class="col-sm-6">
                            <input style="background-color: rgb(255, 10, 10);color: white;" 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>
                        <label class="col-sm-1 control-label"></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" 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>
        $('#purchase_rate_box').mouseenter(function() {
            $('#purchase_rate_box').attr('type', 'text');
        });
        $('#purchase_rate_box').mouseleave(function() {
            $('#purchase_rate_box').attr('type', 'password');
        });
    </script>
    <script>
        $(document).ready(function() {
            // search type check
            searhType();

            var table = $('#example').DataTable({
                lengthChange: false,
                buttons: ['copy', 'excel', 'pdf', 'colvis']
            });

            table.buttons().container()
                .appendTo('#example_wrapper .col-md-6:eq(0)');
        });

        function searhType() {
            $('input[type=radio][name=search_type]').change(function() {
                if (this.value == 'barcode') {
                    $('#barcode_number').show();
                    $('#select2product').hide()
                } else if (this.value == 'product_search') {
                    $('#barcode_number').hide();
                    $('#select2product').show();
                }
            });
        }
    </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);

                })
            })
        });
        $("#barcode_number").keyup(function() {
            var type = $("input[name='sale_type']:checked").val();
            var barcode = $(this).val();
            $.ajax({
                url: '/product-info/searcch/by/barcode/' + barcode,
                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);
                    $('#product_name').val(response.product.product_name);
                    $('#product_id_number').val(response.product.id);
                })
            })
        });
        $("#product_id").change(function() {
            var type = $("input[name='sale_type']:checked").val();
            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);
                    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);
                    $('#product_name').val(response.product.product_name);
                    $('#product_id_number').val(response.product.id);

                })
            })
        });
        $("#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_number').val();
            // let product_name = $('#product_id option:selected').text();
            let product_name = $('#product_name').val();
            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].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>
                            </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.salesEntry.store') }}",
                    type: "post",
                    data: formData,
                    success: function(response) {
                       window.location.href = "/sales/invoice/"+response;
                    }
                });

            }
            console.log(formData);

        }
    </script>
@endpush