@include('partials.head')



<div class="row">

    <div class="col-lg-2"></div>
    <div class="col-lg-8">
        <div class="card">

            <div class="card-body" style="display:none" id="show_thanks">
                <h1 class="card-title text-center text-success "><i class="fas fa-check-circle pt-2"
                        style="font-size:40px;"></i></h1>
                <p class="card-text text-center main-content-label tx-14 tx-medium tx-gray-600">Your form has been
                    submitted <br> You may close this page. Thank You!</p>
            </div>
        </div>
        <div class="card card-body pd-20 pd-md-40 border shadow-none" style="display:none" id="show_form">
            <div class="main-content-label text-center mg-b-5">
                
            </div>

            <form id="Save_form" id="show_result_form">
                <div class="form-row">
                    <div class="col-lg-6 form-group">
                        <label class="main-content-label tx-11 tx-medium tx-gray-600">First Name : <span
                                class="text-danger">
                                *</span></label>
                        <input class="form-control" name="first_name" required type="text"
                            placeholder="Enter  first name">
                    </div>
                
                    <div class="col-lg-6 form-group">
                        <label class="main-content-label  tx-11 tx-medium tx-gray-600 ">last Name : <span
                                class="text-danger">
                                *</span></label>
                        <input class="form-control" name="last_name" required type="text"
                            placeholder="Enter  last name">
                    </div>

                    <div class="col-lg-6 form-group">
                        <label class="main-content-label tx-11 tx-medium tx-gray-600">Email : <span
                                class="text-danger">
                                *</span></label>
                        <input class="form-control" name="email" required type="email"
                            placeholder="Enter email">
                    </div>
                    ​
                    <div class="col-lg-6 form-group">
                        <label class="main-content-label  tx-11 tx-medium tx-gray-600">Phone number : </label>
                        <input class="form-control" name="phone"  type="text"
                            placeholder="Enter phone number">
                    </div>
                    

                </div>
                <button class="btn btn-info justify-content-end" id="btnSubmit"> <i class="fa fa-spinner fa-spin"
                        style="display:none;"></i> Submit</button>
            </form>
        </div>



    </div>
    <div class="col-lg-2"></div>

</div>
<div class="row" id="display">
    <div class="col-lg-3"></div>
    <div class="col-lg-6">
        <div class="modal-content">
            <div class="modal-header flex-column">
             
                <h4 class="modal-title w-100  " style="padding:20px; text-align:center;">Do you need to get the poll results?</h4>
              
            </div>
           
            <div class="modal-footer justify-content-center" style="padding:40px;">
                <button type="button" class="btn btn-danger px-5" data-dismiss="modal" id="No">No </button>
                <button type="button" class="btn btn-success px-5" id="yes">Yes</button>
            </div>
        </div>
    </div>
    <div class="col-lg-3"></div>

</div>
@include('partials.script')
<script>
     $(document).ready(function (e) {
       $("#yes").on("click",function(){
      
         $("#show_form").css("display","inline-block");
         $("#display").css("display","none");
       })

       $("#No").on("click",function(){
      
         $("#show_thanks").css("display","inline-block");
         $("#display").css("display","none");
       })


      //save

        $("#Save_form").on('submit', (function(e) {

            // alert('asd');

            e.preventDefault();

            $.ajax({

                url: "/api/Save/Result/Form",

                type: "post",

                data: new FormData(this),

                dataType: "JSON",

                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

                processData: false,

                contentType: false,

                cache: false,

                beforeSend: function() {

                    $("#btnSubmit").attr('disabled', true);

                    $(".fa-spin").css('display', 'inline-block');

                },

                complete: function() {

                    $("#btnSubmit").attr('disabled', false);

                    $(".fa-spin").css('display', 'none');

                },

                success: function(response) {

                    console.log(response)

                    if (response["status"] == "fail") {

                        toastr.error('Failed', response["msg"])

                    } else if (response["status"] == "success") {

                        toastr.success('Success', response["msg"])

                        $("#Save_form")[0].reset();

                        window.location.href = "{{route('thankyou')}}"



                    } 

                },

                error: function(error) {

                    console.log(error);

                }

            });

        }));



     })

</script>