@extends('front.include.app')
@section('content')
    <section class="contact-sec">
        <div class="container">
            <div class="contact-overlay">
                <div class="contact-top">
                    <h3>Contact Us</h3>
                    <p>We help brands big and small think up great  ideas and transform them into videos</p>
                </div>
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <form class="contact-form" action="{{ route('front.contact.store') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" name="name" class="form-control" placeholder="Name" required >
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="email" name="email" class="form-control" placeholder="Email" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" name="service" class="form-control" placeholder="Type Service you need" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" id="phone" name="phone" class="form-control" placeholder="Phone No" required>
                                        <div id="phone-error" style="color: red; display: none; margin-top: 5px;"></div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <textarea type="text" name="message" required  class="form-control" placeholder="your message"></textarea>
                                    </div>
                                </div>
                                <div class="col-md-12 text-center">
                                    <button class="themeBtn" id="submitBtn">Send Message</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <section class="brand-sec contact-brand">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-12" data-aos="fade-up" data-duration="4000">
                    <div class="brand-content">
                        <h2 class="mainHead text-white">We Help Brands Big And Small Think Up Great Ideas And Transform Them
                            <br> Into Videos And Marketing Tactics <br> That Work
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="insta-sec">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-5">
                    <div class="insta-content" data-aos="fade-up" data-duration="4000">
                        <a href="">follow on instagram<i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const input = document.getElementById("phone");
            const errorDiv = document.getElementById("phone-error");
            const submitBtn = document.getElementById("submitBtn");

            input.addEventListener("input", function() {
                this.value = this.value.replace(/\D/g, '');

                if (this.value.length < 10) {
                    errorDiv.textContent = "Phone number must be at least 10 digits.";
                    errorDiv.style.display = "block";
                    input.style.borderColor = "red";
                    submitBtn.disabled = true;
                } else {
                    errorDiv.style.display = "none";
                    input.style.borderColor = "green";
                    submitBtn.disabled = false;
                }
            });

            input.addEventListener("blur", function() {
                if (this.value.length > 10) {
                    this.value = this.value.slice(0, 10);
                }
            });
        });
    </script>
@endpush