@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"> Purchase For </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="purchase_date" name="purchase_date" placeholder="Amount"
                                class="form-control" value="2025-12-11">
                        </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">Supplier & Product Information:</legend>
                    <div class="col-sm-5">

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Supplier </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <select data-placeholder="Choose a Country..." name="supplier_id" class="chosen-select"
                                    id="supplier_id" tabindex="2">
                                    <option value="" selected disabled>Select Supplier</option>
                                    @foreach ($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}">{{ $supplier->supplier_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-1">
                                <a href="/administration/supplier" 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="supplier_contact" id="supplier_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="supplier_address" id="supplier_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"> 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"> 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="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">
                            <label class="col-sm-4 control-label" for="username">Barcode</label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="text" id="barcode" name="barcode" placeholder="scan barcode here" 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>
                            <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="color:#25476a; border: none; font-size: 12px; width: 100%; text-align: center;"
                            value="Available Quantity">
                        <br />
                        <input type="text" id="productStock" readonly="readonly"
                            style="border: none; font-size: 20px; width: 100%; text-align: center; color: green; ">

                    </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=" 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">Purchase 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 table-hover table-striped">


                        </tbody>
                    </table>
                    <table class="table table-bordered" style="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 style="background-color: #000;color:white" 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" 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-3 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;">
                            Purchase
                        </button>
                        <button type="button" onclick="submit()" name="btnSubmit" title="Save"
                            class="btn btn-sm btn-success pull-left">
                            New Purchase
                        </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>
        $("#supplier_id").change(function() {
            var supplier_id = this.value;
            var ttt = 'select Supplier';
            $.ajax({
                url: '/supplier-info/' + supplier_id,
                type: 'GET',
                success: (function(response) {
                    console.log(response);
                    $('#supplier_contact').val(response.contact_number);
                    $('#supplier_address').val(response.address);

                })
            })
        });
        $("#product_id").change(function() {
            var product_id = this.value;
            var ttt = 'select Supplier';
            $('#sells_rate').val('');
            $('#purchase_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);
                    $('#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 purchase_order = [];
        $('#add_to_cart').on('click', function() {
            $('.poBox').empty();
            $('.TableBox').empty();
            // console.log(purchase_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();
            var quantity = $("#quantity").val();
            var total_amount = $('#total_amount').val();
            var barcode = $('#barcode').val();

            purchase_order.push({
                product_id: product_id,
                category: product_cat,
                product_name: product_name,
                purchase_rate: purchase_rate,
                quantity: quantity,
                total: total_amount,
                barcode: barcode
            })
            // console.log(purchase_order)
            purchaseAllList(purchase_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}</br>
                                <span>${order[i].barcode}</span>
                            </td>

                            <td>${order[i].purchase_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');
            purchase_order.splice(index, 1)
            $('.remove_order_qty' + index).remove();
            $('.TableBox').empty();
            purchaseAllList(purchase_order);
            allTotal();
        });


        function submit() {
            let invoice_no = $('#invoice_no').val();
            let branch_id = $('#branch_id').val();
            let purchase_date = $('#purchase_date').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 supplier_id = $('#supplier_id').val();
            let supplier_contact = $('#supplier_contact').val();
            let supplier_address = $('#supplier_address').val();

            if (purchase_order.length > 0) {
                var formData = {
                    'invoice_no': invoice_no,
                    'branch_id': branch_id,
                    'purchase_date': purchase_date,
                    'subtotal': subtotal,
                    'percentage': percentage,
                    'calculate_amount_vat': calculate_amount_vat,
                    'discount': discount,
                    'transport': transport,
                    'total': total,
                    'paid': paid,
                    'due': due,
                    'note': note,
                    'supplier_id': supplier_id,
                    'supplier_contact': supplier_contact,
                    'supplier_address': supplier_address,
                    'purchase_order': JSON.stringify(purchase_order),
                };
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "{{ route('user.purchaseEntry.store') }}",
                    type: "post",
                    data: formData,
                    success: function(response) {
                        console.log(response);
                        location.reload();
                    }
                });

            }
            console.log(formData);

        }
    </script>
@endpush