@extends('layouts.app')
@section('content')
@section('title', __('titles.contact us') . ' - KompaParis')
@section('description',
    'Contact us for any inquiries, feedback, or support. We are here to assist you with your
    needs.')
@section('keywords', 'contact, support, inquiries, feedback, kompaparis, kompa, music, radio')

<div class="page-title-area">
    <div class="container">
        <div class="page-title-content">
            <h2>{{ __('titles.contact us') }}</h2>
            <ul>
                <li><a href="{{ route('home.index') }}">Home</a></li>
                <li>Contact</li>
            </ul>
        </div>
    </div>
</div>

<section class="contact-area ptb-50">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif
            </div>
            <div class="col-lg-8">

                <h3 class="widget-title">{{ __('titles.Ready to get started?') }}</h3>
                <div class="contact-form">
                    <div class="title">
                        <p>{{ __('messages.your email address will not be published') }}</p>
                    </div>

                    <form action="{{ route('contact.send') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" name="name"
                                        value="{{ old('name') }}" id="name" required
                                        data-error="Please enter your name" placeholder="Name *">
                                    <div class="help-block with-errors">
                                        @error('name')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" name="email"
                                        value="{{ old('email') }}" id="email" required
                                        data-error="Please enter your email" placeholder="email *">
                                    <div class="help-block with-errors">
                                        @error('email')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control"
                                        name="phone_number' value="{{ old('phone_number') }}"
                                        id="phone_number
                                            data-error="Please
                                        enter your phone_number placeholder="Phone number">
                                    <div class="help-block with-errors">
                                        @error('phone_number')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control"
                                        name="Subject' value="{{ old('Subject') }}"
                                        id="Subject
                                            data-error="Please enter
                                        your Subject placeholder="Subject">
                                    <div class="help-block with-errors">
                                        @error('Subject')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12">
                                <div class="form-group">
                                    <textarea name="message" id="message" class="form-control" cols="30" rows="6" required
                                        data-error="Please enter your message" placeholder="{{ __('messages.write your message.') }}">{{ old('message') }}</textarea>
                                    <div class="help-block with-errors">
                                        @error('message')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                {!! NoCaptcha::display(['hl' => app()->getLocale()]) !!}
                                <div class="form-check"></div>
                            </div>

                            <div class="col-lg-12 col-md-12">
                                <button type="submit" class="default-btn">{{ __('messages.send Message') }}</button>
                                <div id="msgSubmit" class="h3 text-center hidden"></div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="col-lg-4">
                <aside class="widget-area">
                    <section class="widget widget_stay_connected">
                        <h3 class="widget-title">{{ __('titles.stay connected') }}</h3>

                        {{-- <ul class="stay-connected-list">
                                    <li>
                                        <a href="#">
                                            <i class='bx bxl-facebook'></i>
                                            120,345 Fans
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="twitter">
                                            <i class='bx bxl-twitter'></i>
                                            25,321 Followers
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="linkedin">
                                            <i class='bx bxl-linkedin'></i>
                                            7,519 Connect
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="youtube">
                                            <i class='bx bxl-youtube'></i>
                                            101,545 Subscribers
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="instagram">
                                            <i class='bx bxl-instagram'></i>
                                            10,129 Followers
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="wifi">
                                            <i class='bx bx-wifi'></i>
                                            952 Subscribers
                                        </a>
                                    </li>
                                </ul> --}}
                    </section>

                    <section class="widget widget_newsletter">
                        <div class="newsletter-content">
                            <h3>{{ __('titles.subscribe to our newsletter') }}</h3>
                            <p>{{ __('messages.subscribe to our newsletter') }}</p>
                        </div>

                        <form action="{{ route('newsletter.subscribe') }}" method="POST" class="newsletter-form"
                            data-toggle="validator">
                            @csrf
                            <input type="email" name="email" class="input-newsletter"
                                placeholder="{{ __('Email Address') }}" required autocomplete="off">
                            <div class="help-block with-errors">
                                @error('email')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <button type="submit">{{ __('titles.subscribe') }}</button>
                            <div id="validator-newsletter" class="form-result"></div>
                        </form>
                    </section>
                </aside>
            </div>
        </div>
    </div>
</section>
<br>
@endsection

@push('scripts')
<script src="https://www.google.com/recaptcha/api.js?hl={{ app()->getLocale() }}" async defer></script>
@endpush