@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.corporatequotationEntry.store')}}" enctype="multipart/form-data">
        @csrf
            <div class="row" style="border-bottom: 1px solid silver;">
        <div class="form-horizontal">
        <div class="col-md-5">
            <div class="form-group">
                <label for="date" class="col-md-3">Date</label>
                <div class="col-md-9"><input type="date" name="date" class="form-control" value="2025-12-12"></div>
                <input type="hidden" name="invoice_no" value="{{$newInvoice}}">
            </div>
            <div class="form-group">
                <label class="col-sm-3 "> Customer </label>
                <div class="col-sm-8">
                    <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 for="date" class="col-md-3">To Information</label>
                <div class="col-md-9"><textarea rows="4" id="toINFO" name="toInformation" placeholder="Header information" required="required" readonly="readonly" class="form-control"></textarea></div>
            </div>
            <div class="form-group">
                <label for="date" class="col-md-3">Subject</label>
                <div class="col-md-9"><input type="text" placeholder="Subject" name="subject" required="required" class="form-control"></div>
            </div>
            <div class="form-group">
                <label for="date" class="col-md-3">Dear</label>
                <div class="col-md-9"><input type="text" placeholder="Dear" name="dear" required="required" class="form-control"></div>
            </div>
            <div class="form-group">
                <label for="date" class="col-md-3">Terms &amp; Condition</label>
                <div class="col-md-9"><textarea rows="6" placeholder="Quotation body" name="term" required="required" class="form-control"></textarea></div>
            </div>
            <div class="form-group">
                <label for="date" class="col-md-3"></label>
                <div class="col-md-9"><input type="submit"  value="Save" class="btn btn-sm btn-block btn-success"></div>
            </div>
        </div>

            <div class="col-md-7">
                <div style="text-align: right">
                    <button type="button" id="add_to_cart" name="btnSubmit" title="Save"
                            class="btn btn-sm btn-success pull-left">
                        Add
                        <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
                    </button>
                </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: 20%; color: rgb(0, 0, 0);">Description</th>
                                <th style="width: 13%; color: rgb(0, 0, 0);">Unit</th>
                                <th style="width: 8%; color: rgb(0, 0, 0);">Brand</th>
                                <th style="width: 5%; color: rgb(0, 0, 0);">QTY</th>
                                <th style="width: 5%; color: rgb(0, 0, 0);">Rate</th>
                                <th style="width: 13%; color: rgb(0, 0, 0);">Total </th>
                                <th style="width: 20%; color: rgb(0, 0, 0);">Remarks</th>
                                <th style="width: 5%;"></th>

                            </tr>
                            </thead>
                            <tbody class="TableBox">


                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


</form>
    {{--    </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);
                    $('#toINFO').val(response.customer_name+',' + response.area+',' +response.mobile );

                })
            })
        });
        $("#product_id").change(function () {
            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.purchase_rate);
                    $('#sells_rate').val(response.sales_rate);
                    $('#product_cat').val(response.category);
                    $('#purchase_rate_box').val(response.purchase_rate);

                })
            })
        });
        $("#quantity").keyup(function () {
            var quantity = parseFloat(this.value);
            var purchase_rate= parseFloat($('#sells_rate').val()) ;
            var total_amount= quantity * purchase_rate;
            $('#total_amount').val(total_amount);
        });
        $("#amount_vat").keyup(function () {
            calculateVat();
            allTotal();
        });
        $("#amount_discount").keyup(function () {
            calculateDiscount();
            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);
        }
        function calculateDiscount(){
            var subtotal = parseFloat($('#amount_subtotal').val());
            var percentage = parseFloat($('#amount_discount').val());
            var percentageAmount = subtotal * (percentage/100);
            $('#calculate_amount_discount').val(percentageAmount);
        }


        $("#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();
            calculateDiscount();
            var subtotal = parseFloat($('#amount_subtotal').val());
            var vat = parseFloat($('#calculate_amount_vat').val());
            var discount = parseFloat($('#calculate_amount_discount').val());
            var allTotal = ( subtotal + vat ) - discount;
            $('#amount_total').val(allTotal);
            paidDueCalculation();
        }

    </script>
    <script>
        let corporateQuotation = [];
        let i=0;
        $('#add_to_cart').on('click', function() {
            // $('.TableBox').empty();
            let tableIndex=0;
            i++;
            corporateQuotation.push({
                index:tableIndex+1,
            })
            // console.log(sale_order)
            purchaseAllList(corporateQuotation,i);

        });

        function purchaseAllList(order,i) {
            var tablebox = '';

            tablebox += `<tr>
                        <td><input type="text"  name="description[]" style="width: 70%"></td>
                        <td><input type="text"  name="unit[]" style="width: 60%"></td>
                        <td><input type="text"  name="brand[]" style="width: 90%"></td>
                        <td><input type="text" class="cQty${i}" onkeyup="calCulateTotal('${i}')" name="qty[]" style="width: 90%"></td>
                        <td><input type="text" class="cRate${i}" onkeyup="calCulateTotal('${i}')" name="rate[]" style="width: 90%"></td>
                        <td><input type="text" class="cTotal${i}" name="total[]" style="width: 90%"></td>
                        <td><input type="text" class="cRemarks${i}" name="remarks[]" style="width: 90%"></td>
                        <td>
                        <div data-index="${i}" class="btn btn-sm btn-danger qty_remove_list_Table">-</div>
                        </td>

                    </tr>`;

            // corporateQuotation.map((data,i)=>{
            //     tablebox += `<tr>
            //             <td><input type="text" class="cQty${i}" name="description[]" style="width: 70%"></td>
            //             <td><input type="text" class="cQty${i}" name="unit[]" style="width: 60%"></td>
            //             <td><input type="text" class="cQty${i}" name="brand[]" style="width: 90%"></td>
            //             <td><input type="text" class="cQty${i}" onkeyup="calCulateTotal('${i}')" name="qty[]" style="width: 90%"></td>
            //             <td><input type="text" class="cRate${i}" onkeyup="calCulateTotal('${i}')" name="rate[]" style="width: 90%"></td>
            //             <td><input type="text" class="cTotal${i}" name="total[]" style="width: 90%"></td>
            //             <td><input type="text" class="cRemarks${i}" name="remarks[]" style="width: 90%"></td>
            //             <td>
            //             <div data-index="${i}" class="btn btn-sm btn-danger qty_remove_list_Table">-</div>
            //             </td>
            //
            //         </tr>`;
            // });

            $('.TableBox').append(tablebox);
        }

        function calCulateTotal(index){
            console.log(index);
            var qty = $('.cQty'+index).val();
            var rate = $('.cRate'+index).val();
            console.log(qty);
            console.log(rate);
            var totalZ = qty * rate;

            $('.cTotal'+index).val(totalZ);
        }

        $('.TableBox').on('click', '.qty_remove_list_Table', function() {
            let index = $(this).attr('data-index');
            $(this).parent().parent().remove();
        });

        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();


            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,
            };
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ route('user.corporatequotationEntry.store') }}",
                type: "post",
                data: formData,
                success: function(response) {
                    console.log(response);
                    // location.reload();
                }
            });


            console.log(formData);

        }


    </script>
@endpush