@extends('layouts.front')

@push('css')

@endpush

@section('content')
    <!-- Banner -->
    <section class="banner-section bg--gradient overflow-hidden position-relative border-bottom">
        <div class="hero-bg bg_img" data-img="{{ asset('assets/images/'.$gs->breadcumb_banner) }}"></div>
        <div class="container">
            <div class="hero-text">
                <h2 class="hero-text-title">@lang('Contact US')</h2>
                <ul class="breadcrumb">
                    <li>
                        <a href="{{ route('front.index') }}">@lang('Home')</a>
                    </li>
                    <li>
                        @lang('Contact US')
                    </li>
                </ul>
            </div>
        </div>
        </div>
    </section>
    <!-- Banner -->


    <!-- Contact Section -->
    <section class="contact-section overflow-hidden bg--gradient-light pb-100 pt-100 border-bottom">
        <div class="container">
            <div class="row gy-5 flex-wrap-reverse">
                <div class="col-lg-6">
                    <div class="mapouter">
                        <div class="gmap_canvas">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d21005.90201398969!2d2.378955768990538!3d48.84414074705701!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e672106bc8d2ad%3A0xa63cb793f7d9a3e4!2s5%20Rue%20Roland-Barthes%2C%2075012%20Paris%2C%20France!5e0!3m2!1sen!2sus!4v1749792366166!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                            </iframe>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="ms-xl-4 ms-xxl-5">
                        <div class="section-header">
                            <h6 class="section-header__subtitle mt-0">@lang('Contact us')</h6>
                            <h4 class="section-header__title">{{ $ps->side_title }}</h4>
                            <p>
                                {{ $ps->side_text }}
                            </p>
                        </div>
                        <div class="contact-area">
                            <div class="contact__item">
                                <div class="contact__item-icon">
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                                <div class="contact__item-cont">
                                    <h6 class="contact__item-cont-title">@lang('Headquarters')</h6>
                                    <span class="text--base">
                                        {{$ps->street}}
                                    </span>
                                </div>
                            </div>
                            <div class="contact__item">
                                <div class="contact__item-icon">
                                    <i class="fas fa-phone"></i>
                                </div>
                                <div class="contact__item-cont">
                                    <h6 class="contact__item-cont-title">@lang('Call us')</h6>
                                    <a href="{{ $ps->phone}}" class="text--base">{{ $ps->phone}}</a>
                                </div>
                            </div>
                            <div class="contact__item">
                                <div class="contact__item-icon">
                                    <i class="fas fa-envelope"></i>
                                </div>
                                <div class="contact__item-cont">
                                    <h6 class="contact__item-cont-title">@lang('Email us')</h6>
                                    <a href="mailto:{{$ps->email}}" class="text--base">{{$ps->email}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-5">
                <div class="contact-wrapper bg--body border rounded">
                    <div class="section-header">
                        <h4 class="section-header__subtitle mb-0">@lang('Send Your Message to Get in Touch With Us')</h4>
                    </div>
                    <form class="row g-4" action="{{route('front.contact.submit')}}" id="contactform">
                        @includeIf('includes.user.form-both')
                        @csrf
                        <div class="col-sm-6 form-group">
                            <label for="name" class="form-label">@lang('Name') <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control bg--section" id="name" maxlength="100" required>
                        </div>

                        <div class="col-sm-6 form-group">
                            <label for="email" class="form-label">@lang('Email') <span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control bg--section" id="email" maxlength="150" required>
                        </div>

                        <div class="col-sm-6 form-group">
                            <label for="phone" class="form-label">@lang('Phone  (optional)')</label>
                            <input type="text" name="phone" class="form-control bg--section" id="phone" maxlength="20">
                        </div>

                        <div class="col-sm-6 form-group">
                            <label for="subject" class="form-label">@lang('Subject') <span class="text-danger">*</span></label>
                            <input type="text" name="subject" class="form-control bg--section" id="subject" maxlength="150" required>
                        </div>

                        <div class="col-sm-12 form-group">
                            <label for="phone" class="form-label">@lang('Message') <span class="text-danger">*</span></label>
                            <textarea name="message" id="message" class="form-control bg--section" maxlength="2000" required></textarea>
                        </div>

                        <div class="col-sm-12">
                            <button class="cmn--btn w-100" type="submit">
                                @lang('Send Message')
                            <div class="spinner-border formSpin" role="status"></div>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- Contact Section -->

    <!-- Payment Gateways -->
    <!-- @includeIf('partials.front.payment') -->
    <!-- Payment Gateways -->

@endsection

@push('js')

@endpush