@extends('layouts.stores_dashboard_layout')

@section('title')
    {{trans('stores_dashboard.contact_us')}}
@endsection

@section('style')

@endsection

@section('content')
            <div  class="table-cont p-2 ">
                <div class="row align-items-center">
                    <div class="dash-title col-md p-0 mt-0">
                        <h6 class="bold">{{trans('stores_dashboard.contact_us')}}</h6>
                        <p class="mb-1">{{trans('stores_dashboard.contact_us_desc')}}</p>
                    </div>
                </div>
 

                <form id="submitForm">
                 @csrf
                    <div class=" white-bg round7 mb-3 mt-2 p-3">
                        <h6 class="bold border-bottom pt-3 pb-3 mb-4">{{trans('stores_dashboard.contact_us')}}</h6>

                        <div class="w-md-75 ">            
            
                            <div class="form-group">
                                <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.name')}}<span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                                <input name="name" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder=" {{trans('stores_dashboard.name')}}">
                            </div>

            
                            <div class="form-group">
                                <label class="bold font14" for="Password1">  {{trans('stores_dashboard.email')}}</label>
                                <input name="email" type="email" class="form-control"  aria-describedby="emailHelp" placeholder=" {{trans('stores_dashboard.email')}}">
                            </div>


                            <div class="form-group">
                                <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.message')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                                <textarea name="message" type="text" rows="6" class="form-control" id="exampleInputEmail1"  placeholder="{{trans('stores_dashboard.message')}} "></textarea>
                            </div>
        
            
                        </div>
                    </div>


                        <button id="submitbtn" type="submit"  class="button1 mt-3 material-button" > {{trans('stores_dashboard.send')}} </button>

                    <script>
                        document.getElementById('form').onsubmit = function(event){
                            event.preventDefault();
                            // $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
                            Swal.fire({
                                icon: 'success',
                                title: '<h5 class="bold">{{trans("stores_dashboard.success_msg")}}</h5>',
                                html : '<a href="#" class="button1 w-100 d-block">{{trans("stores_dashboard.confirm")}}</a>',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        }
                    </script>
                </form>

               
        

            </div>


        </div>
        <!-- end of dashboard body -->

    </div>

    <!-- start page content -->

    

@endsection
@section('scripts')
<script>
            $("#submitbtn").on('click',function(e){
                e.preventDefault();
                var form = $('#submitForm').get(0);
                var formData = new FormData(form);
                var oldText = $(this).text();
                $(this).prop('disabled', true).css({
                    opacity:'0.5'
                }).text("{{trans('stores_dashboard.loading')}}");

                $.ajax({
                    url:"{{route('stores_dashboard.post_contact_us')}}",
                    type:"POST",
                    data: formData,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    cache: false,
                    success:function(data){
                        $('#submitbtn').removeAttr("disabled").css({
                            opacity:'1'
                        }).text(oldText);
                        if(data.key =='success'){
                            Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 15000,
                            type:'success',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                        location.assign(data.url);
                         }else{
                            Swal.fire({
                                title: data.msg,
                                position:'top',
                                timer: 3000,
                                type:'error',
                                showCloseButton: false,
                                showConfirmButton:false,
                                animation: true
                            })
                        }
                    }
                });
            });
    </script>
@endsection