@extends('site.layouts.app')

@section('title','Contact Us')

{{-- SEO Start  --}}
@section('meta_description', 'This is the description for SEO')
@section('meta_keywords', 'SEO, Keywords, Web Development')

{{-- SEO End  --}}
   
@section('content')
<section class="page12-banner">
        <div class="container-fluid px-0">

            <div class="bg3">
                <div class="col-lg-7 page-12-banner mb-4">
                    <h1 class="big">CONTACT US</h1>
                </div>

            </div>
            <div class="brd-crms">
                <div class="container">
                    <nav aria-label="breadcrumb ">
                        <ol class="breadcrumb align-items-baseline ps-4">
                            <li class="breadcrumb-item active" aria-current="page">Home</li>
                            <li class="breadcrumb-item ps-1"><a href="#">Contact Us</a></li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

    </section>
    <section class="contact-us">
        <div class="container">
            <div class="row gap-2 pb-5  mb-4 mt-5 pt-2">
                <div class="col-lg-5 page16-contact-lft ">
                    <h3 class="position-relative text-light text-center">Contact Us</h3>
                    {{-- <div class="page16-phone d-flex align-items-center mt-5 pb-2">
                        <i class="fa fa-phone"></i>
                        <div class="phone-details">
                            <p class="text-center">Call us to get<br> started</p>
                            <a href="tel:+1 872 529 6162">+1 872 529 6162</a>
                        </div>
                    </div> --}}

                    <div class="page16-phone d-flex align-items-center mt-4 pb-3">
                        <i class="fa fa-envelope"></i>
                        <div class="phone-details">
                            <p>Mali us to get started</p>
                            <a href="mailto:crazymaster@cloudcomputingeasy.com">crazymaster@cloudcomputingeasy.com</a>
                        </div>
                    </div>
                    <div class="page16-phone d-flex align-items-start mt-4">
                        <i class="fa fa-location-dot"></i>
                        <div class="phone-details">
                            <p>Address</p>
                            <a href="#">CLOUDCOMPUTINGEASY<br>10/1, Kanchi Nivas,<br>JP Nagar Phase 2,<br>Bangalore - 560041. <br>India.</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="contact-form">
                        <p class="touch">Any queries? <strong>Ask me</strong></p>
                        <br>
                        {{-- <p class="intrest">Intrested to Explore More? Get in touch with our Experts and transpire<br>a
                            complete Digital Marketing Startegy for You</p> --}}

                            <form method="post" action="{{ route('store.message') }}"class="page11-form" id="myForm">
                                @csrf

                               <div class="form-group">
                                    <input type="text" id="name" name="name" @if(Auth::check()) readonly @endif class="form-control"
                                        placeholder="Full Name*" value="{{Auth::user()->name ?? ""}}" required="">
                                </div>
                                <div class="form-group">
                                    <input type="email" id="email" name="email"  @if(Auth::check()) readonly @endif class="form-control "
                                        placeholder="Email Id*" value="{{Auth::user()->email ?? ""}}" required="">
                                </div>
                                <div class="form-group">
                                    <input type="number" id="phone" name="phone"  @if(Auth::check()) readonly @endif class="form-control "
                                        placeholder="Phone Number*" value="{{Auth::user()->mobile_number ?? ""}}" required="">
                                </div>
                                @if(Auth::check())
                                    <div class="form-group">
                                        <input type="text" id="Country"  @if(Auth::check()) readonly @endif class="form-control "
                                            value="{{Auth::user()->country->name ?? ""}}">
                                    </div>
                                @endif
                              <div class="form-group">
                                <select class="form-control" name="enquiry_for">
                                    <option>Select Enquiry</option>
                                    <option value="1">Feedback</option>
                                    <option value="2">Suggestion</option>
                                    <option value="3">Technical enquiry</option>
                                    <option value="4">Payment enquiry</option>
                                    <option value="5">Refund enquiry</option>
                                    <option value="6">Do not disturb enquiry</option>
                                    <option value="7">Resend emails enquiry</option>
                                    <option value="8">General enquiry</option>
                                </select>
                              </div>
                              <div class="form-group">
                                <textarea class="form-control " id="messgae" name="message" row="5" placeholder="Message*">
                                </textarea>
                              </div>
                                {{-- <p class="click-text"> By Clicking on send,you agree to our Terms of use and Privacy Policy</p> --}}
                                <button type="submit">Submit <i class="fa fa-arrow-right"></i></button>
                          </form>
                    </div>
                </div>
            </div>
        </div>
</section>


    <script type="text/javascript">
        $(document).ready(function (){
          
            $('#myForm').validate({
                rules: {
                    name: {
                        required : true,
                        minlength: 3,
                    }, 
                    phone: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 15, 
                    },
                    email: {
                        required: true,
                        email: true, 
                    },
                     enquiry_for: {
                        required: true,
                    }, 
    
                    message: {
                        required: true,
                    },                 
                },
                messages :{
                  name: {
                        required: 'Please Enter Your Name',
                        minlength: 'Name should be at least 3 characters',
                    },
                  phone: {
                        required: 'Please Enter Your Phone Number',
                        digits: 'Phone number should contain only digits',
                        minlength: 'Phone number should be exactly 10 digits',
                        maxlength: 'Phone number should be exactly 15 digits',
                  },
    
                  email: {
                        required: 'Please Enter Your Email',
                        email: 'Please enter a valid email address',
                    },
                     enquiry_for: {
                        required: 'Please Enter a Message',
                  },
                  message: {
                        required: 'Please Enter a Message',
                  },
    
                },
                errorElement : 'span', 
                errorPlacement: function (error,element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight : function(element, errorClass, validClass){
                    $(element).addClass('is-invalid');
                },
                unhighlight : function(element, errorClass, validClass){
                    $(element).removeClass('is-invalid');
                },
            });
        });
        
    </script>

@endsection