@extends('front.layouts.master')

@section('content')
    <div class="loading_bar"></div>

    <!-- banner section start -->
    <section id="inner-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="inner-breadcrumb">
                        <h2>Contact Us</h2>
                        <ul>
                            <li><a href="{{ route('front.home') }}">Home</a></li>
                            <li>
                                <p>Contact Us</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- banner section end -->
    @php
        $contactSetting = frontContactSetting();
        // print_r($contactSetting); exit;
    @endphp
    <section class="get-in-touch-section py-5">

        <div class="container">
            <div class="row g-5 align-items-start">

                <!-- LEFT — heading + blurb -->
                <div class="col-12 col-md-4 left-col d-flex flex-column justify-content-center">
                    <h2 class="section-heading mb-3">Get in Touch</h2>
                    <p class="section-sub mb-0">
                        {{ $contactSetting->about_us ?? 'We would love to hear from you. Kindly fill the form below and leave us your message. We will get back to you shortly.' }}
                    </p>
                </div>

                <!-- RIGHT — contact items + social -->
                <div class="col-12 col-md-8 right-col">

                    <!-- Row 1: Phone + Email -->
                    <div class="row g-4 mb-4">

                        <!-- Phone -->
                        <div class="col-12 col-sm-6">
                            <div class="d-flex align-items-center gap-3">
                                <div class="icon-circle">
                                    <i class="fa-solid fa-phone"></i>
                                </div>
                                <div>
                                    <p class="contact-label mb-1">Contact Number</p>
                                    {{-- <p class="contact-value mb-0">{{ $contactSetting->contact_numbers ?? '0181 227 2829' }}
                                    </p> --}}
                                    <p class="contact-value mb-0">{{ $setting->call_emergency }}</p>
                                    <p class="contact-value mb-0">+91-9814860339</p>

                                    <p class="contact-value mb-0">+91-9814147339</p>

                                </div>
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="col-12 col-sm-6">
                            <div class="d-flex align-items-center gap-3">
                                <div class="icon-circle">
                                    <i class="fa-solid fa-envelope"></i>
                                </div>
                                <div>
                                    <p class="contact-label mb-1">Email</p>
                                    <p class="contact-value mb-0">
                                        {{ $setting->email }}
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Row 2: Address -->
                    <div class="row g-4 mb-4 mt-3">
                        <div class="col-12">
                            <div class="d-flex align-items-start gap-3">
                                <div class="icon-circle">
                                    <i class="fa-solid fa-location-dot"></i>
                                </div>
                                <div>
                                    <p class="contact-label mb-1">Address</p>
                                    <p class="contact-value mb-0">
                                        {{ $setting->location }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Divider -->
                    <hr class="divider" />

                    <!-- Social -->
                    <div class="d-flex align-items-center flex-wrap gap-3">
                        <span class="contact-label">Follow us on</span>
                        @if (!empty($contactSetting?->facebook_url))
                            <a target="_blank" href="{{ $contactSetting->facebook_url }}" class="social-btn fb">
                                <i class="fa-brands fa-facebook"></i> Facebook
                            </a>
                        @else
                            <a href="#" class="social-btn fb">
                                <i class="fa-brands fa-facebook"></i> Facebook
                            </a>
                        @endif

                        @if (!empty($contactSetting?->instagram_url))
                            <a target="_blank" href="{{ $contactSetting->instagram_url }}" class="social-btn ig">
                                 <i class="fa-brands fa-instagram"></i> Instagram
                            </a>
                        @else
                            <a href="#" class="social-btn ig">
                                <i class="fa-brands fa-instagram"></i> Instagram
                            </a>
                        @endif


                        @if (!empty($contactSetting?->twitter_url))
                            <a target="_blank" href="{{ $contactSetting->twitter_url }}" class="social-btn tw">
                                <i class="fa-brands fa-x-twitter"></i> Twitter
                            </a>
                       
                        @endif


                        @if (!empty($contactSetting?->linkedin_url))
                            <a target="_blank" href="{{ $contactSetting->linkedin_url }}" class="social-btn ig">
                                 <i class="fa-brands fa-linkedin"></i> LinkedIn
                            </a>
                       
                        @endif

                    </div>

                </div>
            </div>
        </div>

    </section>

    <section class="py-5 cotact-form-section">
        <div class="container">
            <div class="row g-4">

                <!-- FORM -->
                <div class="col-lg-6">
                    <div class="contact-card">
                        <h5 class="mb-3">Contact Us</h5>
                        <div id="contact_us_error" class="alert alert-danger" style="display:none"></div>
                        <div id="contact_us_success" class="alert alert-success" style="display:none"></div>
                        
                        {!! Form::open([
                            'route' => 'front.contact-us-submit',
                            'method' => 'POST',
                            'id' => 'ajax-submit',
                        ]) !!}

                        <div class="mb-3">
                            <label>Name</label>
                            <input type="text" class="form-control" name="name" maxlength="50" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')">
                            <input type="hidden" name="subject" value="Contact Us Query">
                        </div>
                        <div class="mb-3">
                            <label>Email</label>
                            <input type="email" class="form-control" name="email">
                        </div>

                        <div class="row">
                            <div class="input-group mb-3 col-md-12">                       
                                <label>Mobile Number</label>
                                <input type="tel" class="form-control contact_country_code" id="contact_country_code"  name="contact_number" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                <input type="hidden" id="contact_dial_code" name="contact_dial_code">
                                <input type="hidden" id="contact_dial_code_iso" name="contact_dial_code_iso">
                            </div>
                            
                        </div>

                        <div class="mb-3">
                            <label>Message</label>
                            <textarea class="form-control" name="message" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')"></textarea>
                        </div>
                        <div class="mb-3">
                            <div class="cf-turnstile"
                                data-sitekey="{{ config('services.turnstile.site_key') }}"
                                data-theme="auto">
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary">
                            SEND MESSAGE
                        </button>

                        {!! Form::close() !!}


                    </div>
                </div>

                <!-- MAP -->
                <div class="col-lg-6">
                    @if (!empty($pageContent->direction_link))
                        <div class="col-md-6 map_link mb-3">
                            <span class="d-none d-lg-block">
                                <a class="btn btn-orange" href="{{ $pageContent->direction_link }}" target="_blank"
                                    title="View Map">
                                    <i class="fa fa fa-share"></i>
                                    Get Direction
                                </a>
                            </span>
                        </div>
                    @endif
                    <div class="map-card">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3408.801946749944!2d75.571384610872!3d31.30921867420421!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a5baac0000001%3A0xd60267ae28b99b3e!2sModern%20Hospital!5e0!3m2!1sen!2sin!4v1780720556055!5m2!1sen!2sin"
                            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>

        </div>
        </div>
    </section>
@endsection

@section('frontend_bottom_script') 
{{-- //account used for captcha is projects.intellisense@gmail.com --}}

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    <script src="{{asset('front/assets/js/contact.js')}}"></script>
@endsection