@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 :: Notify Serviceability</p>
                </div>
            </div>
        </div>

        <div class="row py-4 mb-5 py-sm-4">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-8">
                        <div class="form-group custom-form-group">
                            <label class="form-label" for="first name">Notify Serviceability</label>
                            <input class="form-control" placeholder="Enter your email address" type="text" value="" name="email" id="email"> 
                        </div>
                    </div>

                    <div class="col-md-2">
                        <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>
       

        <!-- <div class="row mt-5">
            <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> -->
    </div>
</section>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function sendMail() {
	$('#custum-loader').removeClass('hidden');
        // var email = $('#email').val();
        var data = {
            email : $('#email').val()
        }

        $.ajax({
            url: '/mail',
            type: 'GET',
            data : data,
            success:function(data) {
                console.log(data);
                if (data == 'success') {
    $('#custum-loader').addClass('hidden');
                    Swal.fire({
                                title: "Success",
                                text: "Notification Sent Successfully!",
                                icon: "success",
                                showCancelButton: true,
                                confirmButtonColor: '#3085d6',
                                // cancelButtonColor: '#d33',
                                // confirmButtonText: 'Yes'
                            })
                    return;

                }
            }
        });
    }
</script>
@endsection