@extends('website.layouts.main')
@section('title')
    @lang('website.links.navigation.labels.contact_us') | Sale Y Vale
@endsection
@section('content')
    <!-- ========= Inner Breabcrumb ======= -->
    <section id="breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-sm-6">
                    <div class="page-title">
                        <h3>@lang('website.links.navigation.labels.contact_us')</h3>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="page-path">
                        <ul>
                            <li><a href="{{ route('website.home') }}">@lang('website.links.navigation.labels.home')</a></li>
                            <li>
                                <p>@lang('website.links.navigation.labels.contact_us')</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ========= Inner Page ======= -->
    <section id="inner-page">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="location-map mb-3">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d224026.70838076746!2d-106.0569963!3d28.6771606!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86ea449d5d484033%3A0xb7f1a7a706dd1d7b!2sChihuahua%2C%20Mexico!5e0!3m2!1sen!2sin!4v1759232133762!5m2!1sen!2sin"
                            width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <div class="contact-details">
                        <h4>@lang('website.contact_us.title')</h4>
                        <div class="get-touch-box">
                            <div class="contact-list">
                                <div class="contact-icon">
                                    <i class="fa-solid fa-location-dot"></i>
                                </div>
                                <div class="contact-icon-text">
                                    <p>Chihuahua City</p>
                                </div>
                            </div>
                            <div class="contact-list">
                                <div class="contact-icon">
                                    <i class="fa-solid fa-phone-volume"></i>
                                </div>
                                <div class="contact-icon-text">
                                    <p>+52 625 111 8245</p>
                                </div>
                            </div>
                            <div class="contact-list">
                                <div class="contact-icon">
                                    <i class="fa-solid fa-envelope"></i>
                                </div>
                                <div class="contact-icon-text">
                                    <p>contacto@saleyvale.com</p>
                                </div>
                            </div>
                        </div>
                        <div class="social-media-contact">
                            <div class="social-media">
                                <ul>
                                    <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-sm-6">
                    <div class="contact-form">
                        <form id="contactForm" method="post" action="{{ route('website.contactSubmit') }}">
                            @csrf
                            <div class="mb-3">
                                <label for="contact-user-name" class="form-label">@lang('website.contact_us.label.name')</label>
                                <input type="text" class="form-control" name="name" id="contact_user_name"
                                    aria-describedby="contact-user-name">
                            </div>
                            <div class="mb-3">
                                <label for="contact-email" class="form-label">@lang('website.contact_us.label.email')</label>
                                <input type="email" class="form-control" name="email" id="contact_email">
                            </div>
                            <div class="mb-3">
                                <label for="phone" class="form-label">@lang('website.contact_us.label.phone')</label><br>
                                <input type="tel" id="phone" name="mobile_number" class="form-control"
                                    value="{{ old('mobile_number') }}">

                                <input type="hidden" name="dial_code" id="dial_code" value="+52">
                                <input type="hidden" name="dial_code_iso" id="dial_code_iso" value="MX">
                            </div>

                            <div class="mb-3">
                                <label for="contact-message" class="form-label">@lang('website.contact_us.label.message')</label>
                                <textarea rows="4" class="form-control" name="contact_message" id="contact_message"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">@lang('website.contact_us.send_message')</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@section('scripts')
    <script>
        $(document).ready(function() {
            $("#contactForm").on("submit", function(e) {
                e.preventDefault();
                submitContactForm($(this));
            });
        });
    </script>
@endsection
@endsection