@extends('layout.master')
@section('content')
@php
@endphp
<section class="content pb-5">
    <div class="container-fluid">
        <div class="row pt-4">
            <div class="col-md-12">
                <div class="title-section">
                    <p>Tool :: Rate Calculator</p>
                </div>
            </div>
        </div>
        <meta name="csrf-token" content="{!! csrf_token() !!}">
        <div class="row pt-0 mb-5 pt-sm-4">
            <div class="col-md-12">
                <div class="zone-box">
                    <form id="rate_calculator" enctype="multipart/form-data">
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="pincode">From Pincode</label>
                                <input class="form-control" name="from_pincode" placeholder="" type="text" value="" id="from_pincode"> 
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="pincode">To Pincode</label>
                                <input class="form-control" name="to_pincode" placeholder="" type="text" value="" id="to_pincode"> 
                            </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group custom-form-group">
                            <label class="form-label" for="pincode">Type</label>
                             <br>   
                            <input class="with-gap" name="service_type" type="radio" id="service_type_air" value="air" checked="">
                            <label for="service_type_air" class="order-label">Air</label>


                            <input class="with-gap" name="service_type" type="radio" id="service_type_surface" value="surface">
                            <label for="service_type_surface" class="order-label">Surface</label>

                          </div>
                        </div> 
                        </div> 

                        <div class="row mb-3">       
                        <div class="col-md-2">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="weight">Actual Weight</label>
                                <input name="weight"  class="form-control" placeholder="" type="text" value="" id="weight"> 
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="kg">&nbsp;</label>
                                <select class="form-control" name="unit">
                                    <option value="kg">kg</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-2">
                                    <div class="form-group custom-form-group">
                                        <label class="form-label" for="height">Dimensions (Optional)</label>
                                        <input name="length" class="form-control" placeholder="Length" type="text" value="" id="length">  
                                    </div>
                        </div>
                        <div class="col-md-1 pl-0 ml-0 pr-0 mr-0">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="length-unit">&nbsp;</label>
                                <select class="form-control">
                                    <option value="">CM</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                                    <div class="form-group custom-form-group">
                                        <label class="form-label" for="width">&nbsp;</label>
                                        <input name="width" class="form-control" placeholder="Width" type="text" value="" id="width"> 
                                    </div>
                        </div>
                        <div class="col-md-1 pl-0 ml-0 pr-0 mr-0">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="width-unit">&nbsp;</label>
                                <select class="form-control">
                                    <option value="">CM</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="height">&nbsp;</label>
                                <input name="height" class="form-control" placeholder="Height" type="text" value="" id="height"> 
                            </div>
                        </div>
                        <div class="col-md-1 pl-0 ml-0 pr-0 mr-0">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="height-unit">&nbsp;</label>
                                <select class="form-control">
                                    <option value="">CM</option>
                                </select>
                            </div>
                        </div>
                        
                        </div>

                        <div class="row mb-5">
                        <div class="col-md-3">
                          <div class="form-group custom-form-group">
                            <label class="form-label" for="pincode">Payment Type</label>
                             <br>   
                            <input class="with-gap" name="payment_type" type="radio" id="payment_type_cod" value="cod" checked="">
                            <label for="payment_type_cod" class="order-label">Cash on Delivery</label>


                            <input class="with-gap" name="payment_type" type="radio" id="payment_type_prepaid" value="prepaid">
                            <label for="payment_type_prepaid" class="order-label">Prepaid</label>

                          </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="shipment_value">Shipment Value (INR)</label>
                                <input class="form-control" name="shipment_value" placeholder="" type="text" value="" id="shipment_value"> 
                            </div>
                        </div>

                        <div class="col-md-3">
                          <div class="form-group custom-form-group">
                            <label class="form-label" for="shipping_dangerous_goods">Shipping Dangerous Goods ? </label>
                             <br>   
                            <input class="with-gap" name="shipping_dangerous_goods" type="radio" id="shipping_dangerous_goods_yes" value="yes">
                            <label for="shipping_dangerous_goods_yes" class="order-label">Yes</label>


                            <input class="with-gap" name="shipping_dangerous_goods" type="radio" id="shipping_dangerous_goods_no" value="no" checked="">
                            <label for="shipping_dangerous_goods_no" class="order-label">No</label>

                          </div>
                        </div>

                        <div class="col-md-3" id="secure_shipment_id_display">
                          <div class="form-group custom-form-group">
                            <label class="form-label" for="secure_shipment">Secure Shipment </label>
                             <br>   
                            <input class="with-gap" name="secure_shipment" type="radio" id="secure_shipment_yes" value="yes" checked="">
                            <label for="secure_shipment_yes" class="order-label">Yes</label>


                            <input class="with-gap" name="secure_shipment" type="radio" id="secure_shipment_no" value="no">
                            <label for="secure_shipment_no" class="order-label">No</label>

                          </div>
                        </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-5">
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-danger">Calculate</button>
                            </div>
                        </div>
                    
                    </form>
                    </div>
                   <div id="orderbox" class="mb-5 mt-5"></div>
                </div>
        </div>

        @include('tools.membership_featurs_partial')

        
    </div>
</section>

<style>
    .pointer-events-none-class {
        pointer-events: none;
    }
</style>

<script type="text/javascript">

    let userType = '{{ $user_type == "agent" ? 'true' : 'false'}}';

    console.log(userType);

    if (userType == 'true') {

        $('#secure_shipment_id_display').addClass('pointer-events-none-class');
        $(":radio[name='secure_shipment'][value='no']").attr('checked', 'checked');

    }else{
        $('#secure_shipment_id_display').removeClass('pointer-events-none-class');
    }

    $(function(){
    $('#rate_calculator').on('submit',function(e){
      e.preventDefault();
      $.ajax({
          method: 'POST',
          url: '{{route("tools-rates-calculated-list")}}',
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          data: new FormData(this),
          dataType:'HTML',
              contentType: false, // The content type used when sending data to the server.
              cache: false, // To unable request pages to be cached
              processData: false,
              beforeSend: function () { // Before we send the request, remove the .hidden class from the spinner and default to inline-block.
                  $('#custum-loader').removeClass('hidden');
                  $('body').addClass('no-scroll');
              },
              success: function (data) {
                console.log(data);
                $('#orderbox').html(data);
              },
              error: function () {
                    swal({
                        title: "oops!",
                        text: "Invalid Data",
                        type: "error",
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
                    }); 
              },
              complete: function () { // Set our complete callback, adding the .hidden class and hiding the spinner.
                  $('#loader').addClass('hidden');
                  $('body').removeClass('no-scroll');
                  $('#custum-loader').addClass('hidden');
              },
   
        });
        });
    });
</script>
@endsection