@extends('includes.master')
@section('title', 'Services')


@section('style-section')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <style type="text/css">
        .custom-form-control {
            padding: 1rem 0.75rem;
            border: 1px solid #758085;
            margin: 5px;
        }

        .contact-icons {
            color: white;
            border-radius: 50%;
            background-color: var(--headerFooter);
            font-size: 19px;
            text-align: center;
            padding: 11px 11px;
            height: 41px;
            width: 41px;
        }

        .custom-form-select {
            height: 59px !important;
            color: #758085 !important;
        }

        #g-recaptcha-response {
            display: block !important;
            position: absolute;
            margin: -78px 0 0 0 !important;
            width: 302px !important;
            height: 76px !important;
            z-index: -999999;
            opacity: 0
        }

        .clearbtn:hover {
            box-shadow: 1px 1px 10px red !important;
        }

        .submitbtn:hover {
            box-shadow: 1px 1px 10px #8AB4F8 !important;
        }

        .icon {
            color: white;
            background-color: #b02135;
            font-size: 20px;
            padding: 14px;
        }
    </style>
@section('content')
    @php
        $conatctus_data = getWebSyncsData('Contactus Settings', 'contactusSettings', '');
    @endphp

    <section class="" style="background-color:var(--page-wrapper-bg-color)!important">
        <div style="padding:0px 50px">
            <!--Section heading-->
            <div class="row m-0 p-0">
                <!--Grid column-->
                <div class="col-md-4 m-0 p-0">
                    <div class="row m-0 p-0" id="service-data">
                        <center>
                            <h2 id="temple-services" class="text-center bottomborder p-4">GET IN TOUCH</h2>
                        </center><br>
                        <div class="col-md-12 py-2">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row mx-4">
                                        <div class="col-md-12">
                                            <h4><b>{{ GetProjectName() }}</b></h4>
                                        </div>
                                    </div>
                                    <div class="row m-4">
                                        <div class="col-md-3"><i class="contact-icons fa fa-map-marker icon"></i></div>
                                        <div class="col-md-9">
                                            {!! (isset($conatctus_data[0]['refDataName']) && $conatctus_data[0]['refDataName']) != ''
                                                ? $conatctus_data[0]['refDataName']
                                                : '' !!}
                                        </div>
                                    </div>
                                    <div class="row m-4">
                                        <div class="col-md-3"><i class="contact-icons fa fa-phone icon"></i></div>
                                        <div class="col-md-9">
                                            {{ (isset($conatctus_data[0]['templePhone']) && $conatctus_data[0]['templePhone']) != '' ? '+1 ' . formatPhoneNumber($conatctus_data[0]['templePhone']) : '' }}
                                        </div>
                                    </div>
                                    <div class="row m-4">
                                        <div class="col-md-3"><i class="contact-icons fa fa-envelope icon"></i></div>
                                        <div class="col-md-9">
                                            {{ (isset($conatctus_data[0]['templeEmail']) && $conatctus_data[0]['templeEmail']) != '' ? $conatctus_data[0]['templeEmail'] : '' }}
                                        </div>
                                    </div>
                                    <div class="row m-4">
                                        

                                        

                                        
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="col-md-12 mx-2">
                            <h4><b>FOLLOW US</b></h4>
                            <span class=""
                                style="position:absolute!important;margin-top: -12px!important; width: 50px!important;"></span>
                            <a
                                href="{{ (isset($conatctus_data[0]['facebookLink']) && $conatctus_data[0]['facebookLink']) != '' ? $conatctus_data[0]['facebookLink'] : 'javascript:void(0)' }}"><i
                                    class="contact-icons fa fa-facebook icon"></i></a>

                            <a
                                href="{{ (isset($conatctus_data[0]['youtubeLink']) && $conatctus_data[0]['youtubeLink']) != '' ? $conatctus_data[0]['youtubeLink'] : 'javascript:void(0)' }}"><i
                                    class="contact-icons fa fa-youtube icon"></i></a>


                        </div>
                    </div>

                </div>
                <!--Grid column-->
                <div class="col-md-8 mb-0 p-0">
                    <h2 id="temple-services" class="text-center bottomborder p-4"> CONTACT US</h2>
                    <form id="contact-form" name="contact-form" action="{{ url('your-query') }}" method="POST">
                        @csrf
                        @if (session()->has('failure'))
                            <div class="alert alert-danger alert-dismissible fade show text-center">
                                <strong>Failed!</strong> {{ session('failure') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        @if (session()->has('success'))
                            <div class="alert alert-success alert-dismissible fade show text-center">
                                <strong>Success!</strong> {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        <!--Grid row-->
                        <div class="row">
                            <!--Grid column-->
                            <div class="col-md-6">
                                <div class="md-form mb-0">
                                    <input type="text" id="fname" name="fname"
                                        class="custom-form-control form-control" placeholder="First Name*" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="md-form mb-0">
                                    <input type="text" id="lname" name="lname"
                                        class="custom-form-control form-control" placeholder="Last Name*">
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="md-form mb-0">
                                    <input type="email" id="email" name="email"
                                        class="custom-form-control form-control" placeholder="Email*" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="md-form mb-0">
                                    <input id="phone" type="text" name="phone"
                                        class="custom-form-control form-control" placeholder="Phone Number*" required />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">

                                <div class="md-form mb-0">
                                    <input type="text" class="form-control" name="address" id="address"
                                        placeholder="Address" required />
                                </div>

                            </div>
                        </div>
                        <div class="row mt-3">

                            <div class="col-md-4">
                                <div class="md-form mb-0">
                                    <select class="form-control form-select " name="state" id="stateSelect">
                                        <option value="" selected disabled>Select State</option>