@extends('layout.master')
@section('content')

<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</p>
                </div>
            </div>
        </div>

        <div class="row pt-0 pt-sm-4">
            <div class="col-md-6">
                <div class="title-section">
                    <p>Rate Calculator</p>
                </div>

                <form id="calculate-total-amount" method="post" autocomplete="off">
                    @csrf
                <div class="zone-box">
                    <div class="row">
                        <div class="col-md-6">
                            <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" onblur="pincodeLsp()"> 
                            </div>
                        </div>
                        <div class="col-md-6">
                            <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" onblur="pincodeLsp()"> 
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="weight">Weight</label>
                                <input name="weight"  class="form-control" placeholder="" type="text" value="" id="weight"> 
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="kg">&nbsp;</label>
                                <select class="form-control">
                                    <option value="">kg</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="cft">CFT</label>
                                <input name="cft" class="form-control" placeholder="" type="text" value="" id="cft"> 
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group custom-form-group">
                                <h6 class="heading" style="margin-bottom:20px;">Payments</h6>
                                <div class="row">
                                    <div class="col-md-6 col-7">
                                        <input class="with-gap" name="payment_mode" type="radio" id="number" value="cod" onchange="pincodeLsp()" checked>
                                        <label for="number" class="order-label">COD</label>
                                    </div>
                                    <div class="col-md-6 col-5">
                                        <input class="with-gap" name="payment_mode" type="radio" id="number1" value="prepaid" onchange="pincodeLsp()">
                                        <label for="number1"  class="order-label">Pre-paid</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="inr">INR</label>
                                <input class="form-control" name="inr" placeholder="" type="text" value="" id="inr"> 
                            </div>
                        </div>
                        <div class="col-md-5">
                            <button type="button" class="btn btn-danger mt-3 btn-block" onclick="calculateTotalPrice()">calculate</button>
                        </div>
                    </div>
                   <div id="orderbox">
                   </div>
                </div>
                </form>
            </div>



            <div class="col-md-6">
                <div class="title-section">
                    <p>CFT Calculator</p>
                </div>
                <form id="calculate-foam" method="post" autocomplete="off">
                    @csrf
                    <div class="zone-box">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group custom-form-group">
                                            <label class="form-label" for="height">Length</label>
                                            <input name="length" class="form-control" placeholder="Length" type="text" value="" id="length" required>  
                                        </div>
                                    </div>
                                    <div class="col-md-2 pl-0 ml-0 pr-0 mr-0">
                                        <div class="form-group custom-form-group">
                                            <label class="form-label" for="height">&nbsp;</label>
                                            <select class="form-control">
                                                <option value="">Ft</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group custom-form-group">
                                            <label class="form-label" for="height">Height</label>
                                            <input name="height" class="form-control" placeholder="Height" type="text" value="" id="height" required> 
                                        </div>
                                    </div>
                                    <div class="col-md-2 pl-0 ml-0 pr-0 mr-0">
                                        <div class="form-group custom-form-group">
                                            <label class="form-label" for="height">&nbsp;</label>
                                            <select class="form-control">
                                                <option value="">Ft</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-5">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group custom-form-group">
                                            <label class="form-label" for="height">Width</label>
                                            <input name="width" class="form-control" placeholder="Width" type="text" value="" id="width" required> 
                                        </div>
                                    </div>
                                    <div class="col-md-3 pl-0 ml-0 pr-0 mr-0">
                                        <div class="form-group custom-form-group">
                                            <label class="form-label" for="height">&nbsp;</label>
                                            <select class="form-control">
                                                <option value="">Ft</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- <div class="col-md-6"></div>
                            <div class="col-md-6">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="price">Price per CFT</label>
                                    <input class="form-control" placeholder="" type="text" value=""> 
                                </div>
                            </div> -->

                            <div class="col-md-5">
                                <button type="button" class="btn btn-danger btn-block" onclick="cftCalculate()">Calculate</button>
                            </div>

                            <div class="col-md-12 mb-4">
                                <div class="cft-calculator">
                                    <div class="row">
                                        <!-- <div class="col-md-6 col-5">
                                            <h6>CFT: 352.85</h6>
                                        </div> -->
                                        <div class="col-md-6 col-7">
                                            <h6 class="float-right" id="">Total Price: <span id="totalPrice">0</span></h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <form id="send-mail" method="post" autocomplete="off">
        @csrf
            <div class="row py-4 py-sm-4">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-9">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="first name">Notify Serviceability</label>
                                    <input class="form-control" placeholder="" type="text" value="" name="email" id="email"> 
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="send">&nbsp;</label>
                                    <button type="button" class="btn btn-danger btn-block" onclick="sendMail()">send</button>
                                </div>
                            </div>
                        </div>
                    </div>

                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label" for="send">Label Printing</label><br>
                            <input class="filled-in" name="group1" type="checkbox" id="active" checked>
                            <label for="active"></label>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="first name">Manifest Printing</label>
                                <input class="form-control" placeholder="" type="text" value=""> 
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="send">&nbsp;</label>
                                <button type="button" class="btn btn-danger btn-block">upload</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="row">
            <div class="col-md-3">
                <div class="card-one">
                    <div class="row h-100">
                        <div class="col-6">
                            <img src="images/silver-medal.svg" class="medal-img" alt="">
                        </div>

                        <div class="col-6">
                            <div class="pricingTable-header">
                                <h5 class="title">Free <br><br></h5>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <h6>Basic</h6>
                            <p>Lorem Ipsum is simply dummy text </p>
                            <ul class="list-unstyled">
                                <li> <img src="images/setting1.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/mail.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/car.svg" alt="">Lorem Ipsum is simply dummy  </li>
                            </ul>
                        </div>

                        <div class="col-md-12 mt-auto">
                            <div class="text-center">
                                <button type="button" class="btn btn-danger">sign now</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-md-3">
                <div class="card-one">
                    <div class="row h-100">
                        <div class="col-md-6">
                            <img src="images/silver-medal.svg" class="medal-img" alt="">
                        </div>

                        <div class="col-md-6">
                            <div class="pricingTable-header">
                                <h5 class="title">₹ 1200 per year</h5>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <h6>Silver</h6>
                            <p>Lorem Ipsum is simply dummy text </p>
                            <ul class="list-unstyled">
                                <li> <img src="images/setting1.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/mail.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/car.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/setting1.svg" alt="">Lorem Ipsum is simply dummy  </li>
                            </ul>
                        </div>

                        <div class="col-md-12 mt-auto">
                            <div class="text-center">
                                <button type="button" class="btn btn-danger">sign now</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card-one">
                    <div class="row h-100">
                        <div class="col-md-6">
                            <img src="images/gold-medal.svg" class="medal-img" alt="">
                        </div>

                        <div class="col-md-6">
                            <div class="pricingTable-header">
                                <h5 class="title">₹ 1200 per year</h5>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <h6>Gold</h6>
                            <p>Lorem Ipsum is simply dummy text </p>
                            <ul class="list-unstyled">
                                <li> <img src="images/setting1.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/mail.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/car.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/setting1.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/mail.svg" alt="">Lorem Ipsum is simply dummy  </li>
                            </ul>
                        </div>

                        <div class="col-md-12 mt-auto">
                            <div class="text-center">
                                <button type="button" class="btn btn-danger">Sign now</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card-one">
                    <div class="row h-100">
                        <div class="col-md-6 mb-0">
                            <img src="images/diamond.svg" class="medal-img" alt="">
                        </div>

                        <div class="col-md-6 mb-0">
                            <div class="pricingTable-header">
                                <h5 class="title">₹ 1200 per year</h5>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <h6>Diamond</h6>
                            <p>Lorem Ipsum is simply dummy text </p>
                            <ul class="list-unstyled">
                                <li> <img src="images/setting1.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/mail.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/car.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/setting1.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/mail.svg" alt="">Lorem Ipsum is simply dummy  </li>
                                <li> <img src="images/car.svg" alt="">Lorem Ipsum is simply dummy  </li>
                            </ul>
                        </div>

                        <div class="col-md-12 mt-auto">
                            <div class="text-center">
                                <button type="button" class="btn btn-danger">ADD NEW COURSE</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form>
    </div>
</section>

<script type="text/javascript">
    $(document).ready(function() {
        $("#calculate-foam").validate({
            // myField: { lettersonly: true }

            rules: {
                length: "required",
                height: "required",
                width: "required",
            },
            messages: {
                length: "Please enter length",
                height: "Please enter height",
                width: "Please enter width",

            }
        });
        $("#calculate-total-amount").validate({
            // myField: { lettersonly: true }

            rules: {
                weight: "required",
                cft: "required",
                inr: "required",
            },
            messages: {
                weight: "Please enter weight",
                cft: "Please enter cft",
                inr: "Please enter inr",

            }
        });
        $("#send-mail").validate({
            // myField: { lettersonly: true }

            rules: {
                email: "required",
            },
            messages: {
                email: "Please enter email",

            }
        });
    })

    function pincodeLsp() {

        var data = {
            from_pincode : $('#from_pincode').val(),
            to_pincode: $('#to_pincode').val(),
            paying_method: $('input[name="payment_mode"]:checked').val(),
        }
        // console.log(data); return false;

        $.ajax({
            url: '/pincodes',
            type: 'GET',
            data : data,
            success:function(data) {
                var tableData = "";
                tableData += '<div class="orderbox"  style="margin-top: 20px;"><div class="tabhead"></div><table class="table table-bordered lefttable" cellpadding="0" cellspacing="0">';

                        tableData += '<thead><tr><th>Pincodes</th><th>LSP</th></tr></thead>';

                        tableData += '<tbody>';
                $.each(data, function(i, groups){
                        
                    // console.log(rowData); return false;
                    tableData += "<tr>";

                    tableData += '<td>'+groups.pincode+'</td>';

                    tableData += '<td>'+groups.type+'</td></tr>';
                });

                tableData += '</tbody></table></div></div>';
                $('#orderbox').html(tableData);

            }
        });
    }

    function cftCalculate()
    {
        $("#calculate-foam").valid();

        length = $('#length').val();
        height = $('#height').val();
        width = $('#width').val();
        totalVolumetricWeight = ((height * width * length)/1728);

        cft = $('#cft').val(totalVolumetricWeight);
        
        if(cft >= 0){
            $("#cft").prop('disabled', true);
        }
        $("#cft").prop('disabled', false);
    }
    function calculateTotalPrice()
    {
        $("#calculate-total-amount").valid();
        cft = $('#cft').val();
        weight = $('#weight').val();
        inr = $('#inr').val();
        // console.log(weight); return false;

        if(weight>cft){
            greaterVal = weight;
        }
        else{
            greaterVal = cft;
        }
        // console.log(totalPrice); return false;
        totalPrice = (greaterVal != 0) && (inr != 0) ? (greaterVal*inr) : 0;

        $('#totalPrice').text(totalPrice);

    }
    function sendMail() {

        $("#send-mail").valid();
        // var email = $('#email').val();
        var data = {
            email : $('#email').val()
        }
        // console.log(data); return false;

        $.ajax({
            url: '/mail',
            type: 'GET',
            data : data,
            success:function(data) {
            }
        });
    }
</script>
@endsection