@extends('website.layouts.app')

@section('content')
    <!-- ---------------------------Privacy Policy-SECTION----------------------------- -->

    <section id="contact-us" class="contact-us my-md-5 my-2">
        <div class="container-fluid max_width">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-lg-10" id="term">
                    <div class="row d-flex justify-content-center align-items-center">
                        <div class="col-lg-10">
                            <div class="top_title">
                                <h2>Contact Us</h2>
                                <div class="term_condition">
                                    {{-- <p>
                    We are at your service, and we are happy to answer your
                    inquiries and provide the necessary support to ensure a
                    unique shopping experience
                  </p> --}}
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row d-flex justify-content-center align-items-center my-lg-4 my-3 mt-lg-4 mt-0">
                        <div class="col-lg-10 col-md-12 col-12">
                            <div id="form-display ">
                                <form method="POST" action="{{ route('contact.store') }}" id="contactForm">
                                    @csrf
                                    <div class="row d-flex justify-content-between align-items-center mt-md-3 mt-0">
                                        <!-- Name Field -->
                                        <div class="col-lg-12 mb-3">
                                            <input type="hidden" name="recaptcha_token" id="recaptcha_token">
                                            <label for="name" class="form-label">Your Name</label>
                                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                                name="name" id="name" placeholder="Your Name"
                                                value="{{ old('name') }}" required>
                                            @error('name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Email Field -->
                                        <div class="col-lg-12 mb-3">
                                            <label class="form-label mb-1">Email Address</label>
                                            <input type="email" name="email" id="email"
                                                class="form-control @error('email') is-invalid @enderror"
                                                placeholder="Email Address" value="{{ old('email') }}" required>
                                            @error('email')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Phone Field -->
                                        <div class="col-lg-12 mb-3">
                                            <label class="form-label mb-1">Phone Number</label>
                                            <input type="tel" name="phone" id="phone"
                                                class="form-control @error('phone') is-invalid @enderror"
                                                placeholder="Phone Number" value="{{ old('phone') }}">
                                            @error('phone')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Message Field -->
                                        <div class="mb-3">
                                            <label class="form-label mb-1">Your message</label>
                                            <textarea name="message" id="message" class="form-control @error('message') is-invalid @enderror"
                                                placeholder="Your message" rows="5" required>{{ old('message') }}</textarea>
                                            @error('message')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3">
                                            <div class="g-recaptcha" data-sitekey="6LdRbH8rAAAAAOcL7ZaRm3SekPc_tySFmDBCmOAG" data-callback="enableSubmitBtn"></div>
                                        </div>
                                        <!-- Submit Button -->
                                        <div class="mb-3 g-count-btn row d-flex justify-content-between align-items-center">
                                            <div class="col-lg-3 col-md-3 col-3">
                                                <div class="contact_button">
                                                    <button type="submit" class="btn btn-primary" id="submitBtn" disabled="disabled">
                                                        Submit
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


<script>
    function enableSubmitBtn(){
        document.getElementById("submitBtn").disabled = false;
    }
</script>
{{-- @section('scriptJs')
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}"></script>
    <script>
        grecaptcha.ready(function() {
            grecaptcha.execute('{{ config('services.recaptcha.site_key') }}', {
                action: 'submit'
            }).then(function(token) {
                document.getElementById('recaptcha_token').value = token;
            });
        });
    </script>
@endsection --}}

{{-- <script>
    document.addEventListener('DOMContentLoaded', function() {
        const profileInput = document.getElementById('profile_photo');

        document.querySelectorAll('.trigger-upload').forEach(el => {
            el.addEventListener('click', function() {
                profileInput.click();
            });
        });

        document.querySelector('.delete-photo')?.addEventListener('click', function() {
            // Optional: reset the file input and preview image
            profileInput.value = '';
            document.getElementById('profile_preview').src =
            '{{ asset('website/images/big-dp.png') }}';
        });

        // Optional: Preview selected image
        profileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('profile_preview').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    });
</script> --}}