@extends('layouts.app', ['page' => __('Add Proposal'), 'pageSlug' => 'Proposal'])
 
@section('content')
<style>
    option:checked{
  color: rgb(246, 250, 0);
  background-color: rgb(5, 26, 1);
}
.table {
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
    border-style: none !important;
    style:none !important
}
.table th, .table td {
    border-top: 0px;
}
</style>
<div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="title">Add Proposal</h5>
                </div>
                <form method="POST" action="{{ route('proposal.store') }}" autocomplete="off">
                    <div class="card-body">
                        @csrf
                        @include('alerts.success')
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Proposal Number</label>
                                    <input type="number" class="form-control{{ $errors->has('proposal_number') ? ' is-invalid' : '' }}" placeholder="" id="proposal_number" name="proposal_number" value="">
                                    @include('alerts.feedback', ['field' => 'proposal_number'])
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Date</label>
                                    <input type="text" class="form-control{{ $errors->has('date') ? ' is-invalid' : '' }}" data-provide="datepicker" placeholder="" id="propsal_date" name="propsal_date" value="">
                                    @include('alerts.feedback', ['field' => 'date'])
                                </div>
                            </div>
                        </div>
                    <div class="row">
                            <div class="col-md-4">
                            <div class="form-group">
                                <label>Select Customer</label>
                                <div class="@error('customer_id')border border-danger rounded-3 @enderror">
                                    <select class="form-control" id="customer_id" name="customer_id" >
                                    <option value="">Select Customer</option>
                                    @foreach($customers as $data)
                                    <option value="{{$data->id}}">{{$data->fullname}}</option>
                                    @endforeach
                                    </select>
                                </div>
                            </div></div>
                            <div class="col-md-4">
                            <div class="form-group">
                                <label>Customer Phone</label>
                                <input type="text" class="form-control{{ $errors->has('customer_phone') ? ' is-invalid' : '' }}" placeholder="" id="customer_phone" name="customer_phone" value="">
                                @include('alerts.feedback', ['field' => 'customer_phone'])
                            </div>
                            </div>

                            <div class="col-md-4">
                            <div class="form-group">
                                <label>Customer Email</label>
                                <input type="text" class="form-control{{ $errors->has('customer_email') ? ' is-invalid' : '' }}" placeholder="" id="customer_email" name="customer_email" value="">
                                <input type="hidden" name="customer_name" id="customer_name" value="">
                                @include('alerts.feedback', ['field' => 'customer_email'])
                            </div></div>

                            </div> 
                    <div class="row">
                    <div class="col-md-6">
                            <div class="form-group">
                                <label>Service Address</label>
                                <textarea  class="form-control{{ $errors->has('customer_service_address') ? ' is-invalid' : '' }}" placeholder="Service Address" id="customer_service_address" name="customer_service_address" value="">
                                </textarea>
                                <input type="text" class="form-control{{ $errors->has('customer_phone') ? ' is-invalid' : '' }}" placeholder="Service City" name="cityname" id="cityname" value="" required><br>
                                <input type="text" class="form-control{{ $errors->has('customer_phone') ? ' is-invalid' : '' }}" placeholder="Service State" name="statename" id="statename" value="" required>
 
                                @include('alerts.feedback', ['field' => 'customer_service_address'])
                            </div>
                        </div>
                      
                      <div class="col-md-6">
                            <div class="form-group">
                                <label>Billing Address</label>
                                <textarea  class="form-control{{ $errors->has('customer_billing_address') ? ' is-invalid' : '' }}" placeholder="Billing Address" id="customer_billing_address" name="customer_billing_address" value=""></textarea> 
                                <input type="text" class="form-control{{ $errors->has('customer_phone') ? ' is-invalid' : '' }}" placeholder="Billing City" name="city" id="city" value="" required><br>
                                <input type="text" class="form-control{{ $errors->has('customer_phone') ? ' is-invalid' : '' }}" placeholder="Billing State" name="state" id="state" value="" required>

                                @include('alerts.feedback', ['field' => 'customer_billing_address'])
                            </div>
                        </div>
                      </div>   

                     <div class="row">
                     <div class="col-md-6">
                            <div class="form-group">
                                <label>Additional Notes</label>
                                <textarea class="form-control{{ $errors->has('additional_note') ? ' is-invalid' : '' }}" placeholder="Additional Notes" id="additional_note" name="additional_note" value="">
                                </textarea>
                                @include('alerts.feedback', ['field' => 'additional_note'])
                            </div>
                        </div>
                      
                      <div class="col-md-6">
                            <div class="form-group">
                                <label>Terms & Conditions</label>
                                <textarea name="terms" class="form-control{{ $errors->has('terms') ? ' is-invalid' : '' }}" placeholder="Terms & Conditions" id="terms_condition" name="terms_condition" value=""></textarea> 
                                @include('alerts.feedback', ['field' => 'terms'])
                            </div>
                        </div>
                      </div>   
                  <div class="row">
                    <div class="col-md-6">
                        <label>Select Products</label>
                        <select class="form-control" id="productsname">
                            <option value="">Select Products</option>
                            @foreach($products as $data)
                            <option value="{{$data->id}}">{{$data->productname}}({{$data->productcode}})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                    <button type="button"  class="btn btn-info btn-md mt-4 mb-4 add"  onclick="addrow();">{{ 'Add' }}</button>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-md-12">
                        <table class="table" id="item_table">
                        </table>
                    </div>
                     </div>

                      <div class="row">
                     <div class="col-md-4">
                            <div class="form-group">
                                <label>Sub Total</label>
                                <input type="text" onkeyup="calculation();"  class="form-control{{ $errors->has('subtotal') ? ' is-invalid' : '' }}" placeholder="0" id="subtotal" name="subtotal" value="0">
                                @include('alerts.feedback', ['field' => 'subtotal'])
                            </div>
                        </div>
                      
                      <div class="col-md-4">
                            <div class="form-group">
                            <label>Discount</label>
                                <input type="text" onkeyup="calculation();" class="form-control{{ $errors->has('discount') ? ' is-invalid' : '' }}" placeholder="0" id="discount" name="discount" value="0">
                                @include('alerts.feedback', ['field' => 'discount'])
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Discount Type</label>
                                <select id="discount_type" name="discount_type" class="form-control" onchange="calculation();">
                                 <option value="1">%</option>
                                 <option value="2">Flat</option>
                                </select>
                                @include('alerts.feedback', ['field' => 'discount_type'])
                            </div>
                        </div>
                      </div>   

                      <div class="row">
                     <div class="col-md-4">
                            <div class="form-group">
                                <label>Other Tax</label>
                                <input type="text" class="form-control{{ $errors->has('tax') ? ' is-invalid' : '' }}" placeholder="0" id="tax" name="tax" value="0" onkeyup="calculation();">
                                @include('alerts.feedback', ['field' => 'tax'])
                            </div>
                        </div>
                      
                      <div class="col-md-4">
                            <div class="form-group">
                            <label>Shipping Other</label>
                                <input type="text" class="form-control{{ $errors->has('shipping_other') ? ' is-invalid' : '' }}" placeholder="0" id="shipping_other" name="shipping_other" value="0" onkeyup="calculation();">
                                @include('alerts.feedback', ['field' => 'shipping_other'])
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                            <label>Total</label>
                                <input type="text" class="form-control{{ $errors->has('total') ? ' is-invalid' : '' }}" placeholder="" id="total" name="total" value="">
                                @include('alerts.feedback', ['field' => 'total'])
                           
                            </div>
                        </div>
                      </div>   


                    <div class="row">
                    <div class="col-md-7">
                    <div class="d-flex justify-content-end">
                            <button type="submit" class="btn bg-gradient-dark btn-md mt-4 mb-4">{{ 'Add Proposal' }}</button>
                        </div>
                  </div>
                  </div>
                </form>
            </div>

        @push('js')
            <script>
                var date = new Date();
                var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());               

                $('#propsal_date').datepicker({
                            format: 'dd-mm-yyyy',
                            todayHighlight: true,
                            startDate: today,
                            autoclose: true
                });
                $('#propsal_date').datepicker('setDate', today);

                $('#productsname').select2();

                var product_row = 1;
                $('#customer_id').on('change', function() {
                    var customerid=this.value;
                    
                    $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });

                        $.ajax({
                            type: 'POST',
                            url: "{{ route('proposal.customerdata') }}",
                            data: {
                                customerid: customerid,
                            },
                            success: function(data) {

                                var val=JSON.parse(data);
                                var cityvalue=val.model.city
                                
                                console.log(val.model.city);
                                $("#customer_phone").val(val.model.mobile);
                                $("#customer_name").val(val.model.fullname);
                                $("#additional_note").val(' We have a proposed pricing for '+ val.model.fullname +'. Products/Services and price are enlisted below. If you have any question regarding this proposal, please let us know. Thank you!');
                                $("#terms_condition").val(' We have a proposed pricing for '+ val.model.fullname +'. Products/Services and price are enlisted below. If you have any question regarding this proposal, please let us know. Thank you!');
                                $("#customer_email").val(val.model.email);
                                $("#customer_service_address").html(val.model.service_address);
                                $("#city").val(val.model.billing_city);
                                $("#state").val(val.model.billing_state);
                                $("#cityname").val(val.model.city);
                                $("#statename").val(val.model.state);
                                $("#customer_billing_address").html(val.model.billing_address);
                               

                            }
                        });

                    });
                    
                       

            </script>
            <script>
                 function calculation()
                        {
                            var subtotal=$("#subtotal").val();
                            var discount=$("#discount").val();
                            var discount_type=$("#discount_type").val();
                            var tax=$("#tax").val();
                            var shipping_other=$("#shipping_other").val();
                            var total=$("#total").val();
                            // var pdf=$("#pdf").val();

                            var discount_amount = 0;

                            if(discount_type=="1")
                            {
                                discount_amount = subtotal * (discount/100);
                            }
                            else if(discount_type=="2")
                            {
                                discount_amount = discount;
                            }
                            else{
                                discount_amount = 0;
                            }

                            var tax_amount = 0;

                            if(tax!="")
                            {
                                tax_amount = subtotal * (tax/100);
                            }
                            else{
                                tax_amount = 0;
                            }

                            var shipping_amount = 0;

                            if(shipping_other!="")
                            {
                                shipping_amount = shipping_other;
                            }
                            else{
                                shipping_amount = 0;
                            }


                            var total_amount = subtotal - discount_amount + tax_amount + parseFloat(shipping_amount);
                            $("#total").val(total_amount.toFixed(2));

                        }

                        // function quantity(row)
                        //     {
                        //         var qty = $('#quantity_'+row).val();
                        //         var price = $('#price_'+row).val();
                                
                        //         var total = price * qty;
                        //         $('#price_total_'+row).val(total.toFixed(2));


                        //         var total_box_list = document.getElementsByClassName("totalvalue");
                        //         var total_products_amount = 0;
                        //         for (let i = 0; i < total_box_list.length; i++) {
                        //             total_products_amount += parseFloat(total_box_list[i].value);
                        //         }

                        //         $('#subtotal').val(total_products_amount.toFixed(2));
                        //         calculation();
                        //     }


                        function quantity(row)
                        {
                            var qty = parseFloat($('#quantity_' + row).val());
                            var price = parseFloat($('#price_' + row).val());
                            var gst = parseFloat($('#gsthidden_' + row).val());

                            // var total_tax_product = price * (gst / 100);

                            var total_price = price + gst;

                            var total = qty * total_price;
                            
                            var gstkey = qty * gst;
                            // console.log(gst);

                            

                            $('#price_total_' + row).val(total.toFixed(2));
                            
                            $('#gst_' + row).val(gstkey.toFixed(2));


                            var total_box_list = document.getElementsByClassName("totalvalue");
                            var total_products_amount = 0;
                            for (let i = 0; i < total_box_list.length; i++) {
                                total_products_amount += parseFloat(total_box_list[i].value);
                            }

                            $('#subtotal').val(total_products_amount.toFixed(2));
                            calculation();
                        }


                        //dynamic add remove
                        function addrow(){
               
                           var id= $("#productsname").val();
                           
                           if(id=="")
                           {
                            demo.showNotification('top','right','Please Select Product Name!!!',3);
                           }
                           else
                           {
                                 $.ajaxSetup({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                        }
                                    });

                                $(".save").show();
                                $.ajax({
                                    url: "{{ route('addrow') }}" ,
                                    type: 'POST',
                                    data:{
                                        "id":id,
                                    },
                                    success:function(data)
                                    {
                                        var val=JSON.parse(data);
                                        var product_name=val.model.productname;
                                        var cgst=val.model.cgst;
                                        var sgst=val.model.sgst;
                                        var igst=val.model.igst;
                                        var price=val.model.price;
                                        var GST=val.model.gst;

                                        var cgst=val.model.cgst;
                                        var sgst=val.model.sgst;
                                        var igst=val.model.igst;

                                        var total_tax_product = (parseFloat(price)*(parseFloat(cgst)/100)) + 
                                                                (parseFloat(price)*(parseFloat(sgst)/100)) + 
                                                                (parseFloat(price)*(parseFloat(igst)/100));
                                        var total_prod_price = price + total_tax_product;
                                        var gstAmount = parseFloat(price)*(parseFloat(GST)/100);
                                        gstAmount = gstAmount.toFixed(2);
                                       
                                        var intialQty = 1;
                                        var initialTotal = (parseFloat(price * intialQty)) + (parseFloat(gstAmount));

                                        var html = '';
                                            html += '<tr>';
                                            html += '<td><input type="hidden" id="product" name="product[]" class="form-control item_quantity" value="'+id+'"/></td>';
                                            html += '<td><label>Product</label><input type="text" id="product_name" name="product_name[]" class="form-control item_quantity" value="'+product_name+'"/></td>';
                                            html += '<td><label>Quantity</label><input type="text" id="quantity_'+product_row+'" name="quantity[]" onkeyup="quantity('+product_row+');" class="form-control item_quantity" value="'+intialQty+'"/></td>';
                                            // html += '<td><label>Price</label><input type="text" id="price_'+product_row+'" name="price[]" class="form-control item_quantity" value="'+total_prod_price.toFixed(2)+'"/></td>';
                                            html += '<td><label>Price</label><input type="text" id="price_'+product_row+'" name="price[]" class="form-control item_quantity" value="'+price+'" /></td>';
                                            html += '<td><label>GST - '+GST+'%</label><input type="text" id="gst_'+product_row+'" name="gst[]" class="form-control item_quantity gst" value="'+gstAmount+'" /></td>';//disabled
                                            html += '<td><input type="hidden" id="gsthidden_'+product_row+'" class="form-control item_quantity gst" value="'+gstAmount+'"/></td>';
                                            html += '<td><label>Total Price</label><div class="row"><div class="col-md-6"><input type="text" id="price_total_'+product_row+'" name="price_total[]" onkeyup="totalval();" class="form-control item_quantity totalvalue" value="'+initialTotal+'"/></div><div class="col-md-2"><button type="button" name="remove" class="btn btn-danger btn-sm remove">Remove</button></div></div></td>';
                                            html += '</tr>';
                                        $('#item_table').append(html);
                                        product_row = product_row + 1;
                                        
                                        var total_box_list = document.getElementsByClassName("totalvalue");
                                        var total_products_amount = 0;
                                        for (let i = 0; i < total_box_list.length; i++) {
                                            total_products_amount += parseFloat(total_box_list[i].value);
                                        }

                                        $('#subtotal').val(total_products_amount.toFixed(2));
                                        calculation();
                                        
                                    }
                                });
                                
                                

                                $('#productsname').val(null).trigger('change');
                           
                            }

                            $(document).on('click', '.remove', function(){
                            $(this).closest('tr').remove();
                            });

                            

                        
                            }

                    

                        </script>
        @endpush

@endsection