@extends('layouts.public.app')

@section('title', 'Contact Us | Chemical Wholesale')

@section('content')
    <div class="contact-page pb-4 bg-light">
        <div class="search-keywords">
            <div class="container-fluid">
                <p class="search-keywords-text"> Contact Us</p>
                <p class="small text-secondary">Home > Contact</p>
            </div>
        </div>
        {{--
        <div class="map-div">
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.25279991722!2d-74.1444877707482!3d40.69763123338159!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sin!4v1724178281762!5m2!1sen!2sin"
                width="100%" height="350" style="border:0;margin:0;padding:0" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div> --}}
        <div class="contact-info mt-5">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-8 col-md-6 mb-5 order-1 order-lg-1">

                        <div class="card">
                            <div class="card-body">
                                <div class="">
                                    <form action="{{ route('public.store_contact') }}" method="post" autocomplete="off"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-12 mb-3">
                                                <label class="cwinput-label">Your Full Name</label>
                                                
                                                <input type="text" class="form-control cw-input" name="name"
                                                maxlength="50" placeholder="Your Full Name" value="{{ old('name') }}" autofocus required>
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label class="cwinput-label">Email Address</label>
                                                
                                                <input type="email" class="form-control cw-input" name="email"
                                                maxlength="100" placeholder="Email Address" value="{{ old('email') }}" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="cwinput-label">Phone Number</label>
                                                
                                                <input type="text" class="form-control cw-input" name="phone"
                                                onkeyup="this.value = this.value.replace(/[^0-9\s\-\(\)]/g, '')"
                                                minlength="10" placeholder="Phone Number" maxlength="20" value="{{ old('phone') }}" required>
                                            </div>
                                        </div>
                                        <div class="row pb-2">
                                            <div class="col-12">
                                                <label class="cwinput-label">Your Message</label>
                                                <textarea class="form-control contact-textarea cw-input" placeholder="Your Message" name="message" required>{{ old('message') }} </textarea>
                                            </div>
                                        </div>

                                        <!-- reCAPTCHA -->
                                        <div class="form-group mb-3">
                                            <div class="g-recaptcha"
                                                data-sitekey="6Leyy4YqAAAAAAaLUubwodqmmDusU0QF-xzOrVSD">
                                            </div>
                                        </div>

                                        <div class="row pb-0">
                                            <div class="col-12">
                                                <button id="submitButton" type="submit"
                                                    class="btn-viewall border-0"><b>Submit</b></button>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6 order-2 order-lg-2">

                        <div class="card">
                            <div class="card-body pb-0">
                                @if (@$info['company_phone'])
                                    <div class="contact-card d-flex">
                                        <div class="contact-card-icon">
                                            <i class="bi bi-telephone"></i>
                                        </div>
                                        <div class="contact-card-body">
                                            <h3>Call Us</h3>
                                            <p class="contact-sub-text">Week days</p>
                                            <p class="contact-detail">{{ @$info['company_phone'] }}</p>
                                            <p class="contact-detail">{{ @$info['support_phone'] }}</p>
                                        </div>
                                    </div>
                                @endif

                                @if (@$info['company_email'] || @$info['support_email'])
                                    <div class="contact-card d-flex">
                                        <div class="contact-card-icon">
                                            <i class="bi bi-chat-dots"></i>
                                        </div>
                                        <div class="contact-card-body">
                                            <h3>Connect with Us</h3>
                                            <p class="contact-sub-text">We are here to help.</p>
                                            <p class="contact-detail">{{ @$info['company_email'] }}</p>
                                            <p class="contact-detail">{{ @$info['support_email'] }}</p>
                                        </div>
                                    </div>
                                @endif

                                @if (@$info['address_1'])
                                    <div class="contact-card d-flex">
                                        <div class="contact-card-icon">
                                            <i class="bi bi-geo-alt"></i>
                                        </div>
                                        <div class="contact-card-body">
                                            <h3>Visit Us</h3>
                                            <p class="contact-sub-text">Come say hello at our office.</p>
                                            <p class="contact-detail">
                                                {{ @$info['address_1'] }} {{ @$info['address_2'] }} {{ @$info['city'] }}
                                                {{ @$info['state'] }}, {{ @$info['getcountry']['name_en'] }}
                                            </p>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                        @if (@$info['facebook_link'] || @$info['twitter_link'] || @$info['instagram_link'] || @$info['linkedin_link'])
                            <div class="card mt-3">
                                <div class="card-body">
                                    <div class="rounded px-4 py-3" style="background: #eee">
                                        <label class="contact-label">Follow us on Social Media</label>
                                        <div class="social-icons">
                                            @if (@$info['twitter_link'])
                                                <a href="{{ @$info['twitter_link'] }}" target="_blank"
                                                    class="social-icon twitter-icon">
                                                    <i class="bi bi-twitter"></i>
                                                </a>
                                            @endif
                                            @if (@$info['facebook_link'])
                                                <a href="{{ @$info['facebook_link'] }}" target="_blank"
                                                    class="social-icon facebook-icon">
                                                    <i class="bi bi-facebook"></i>
                                                </a>
                                            @endif
                                            @if (@$info['linkedin_link'])
                                                <a href="{{ @$info['linkedin_link'] }}" target="_blank"
                                                    class="social-icon linkedin-icon">
                                                    <i class="bi bi-linkedin"></i>
                                                </a>
                                            @endif
                                            @if (@$info['instagram_link'])
                                                <a href="{{ @$info['instagram_link'] }}" target="_blank"
                                                    class="social-icon instagram-icon">
                                                    <i class="bi bi-instagram"></i>
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
@endpush
@push('js')
    <script src="{{ asset('assets/js/maxlength.js') }}"></script>
    <script>
        $('input[maxlength]').maxlength({
            alwaysShow: true,
            threshold: 10,
            warningClass: "maxlength",
            limitReachedClass: "maxlength-red"
        });
    </script>
    @if (session('message'))
        <script>
            alertify.success("{{ session('message') }}");
        </script>
    @endif
    <script>
        $('form').submit(function(e) {
            var submitBtn = $(this).find('button[type="submit"]');
            submitBtn.html('<span class="spinner me-2"></span>Saving');
            setTimeout(function() {
                submitBtn.removeAttr('disabled');
                submitBtn.html('Submit');
            }, 1000);
        });
    </script>
@endpush