@extends('main-site.partials.app')

@section('title', __('Contact Us'))

@section('content')

    <!-- Page Banner -->
    <div class="page-banner" style="background-image: url({{ asset('main-site/assets/img/contact-banner.jpg') }});">
        <div class="container position-relative">
            <div class="row justify-content-center">
                <div class="col-xl-7 col-md-10">
                    <div class="banner-content text-center">
                        <h1 class="page-banner-title">
                            {{ __("website_301.contact.Contact1") }}
                            <br>
                            {{ __("website_301.contact.Contact2") }}

                        </h1>
                        <p class="banner-desc mb-0">
                            {{ __("website_301.contact.Contact3") }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-grey">

        @if (session('success'))
            <!-- Modal -->
            <div class="def-modal modal fade show" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true" style="display: block;">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content border-0">
                        <div class="modal-body p-0">
                            <div class="modal-icon text-center">
                                <img src="{{ asset('main-site/assets/img/security.png') }}" class="img-fluid">
                            </div>
                            <h3 class="text-center dark-color fw-600 mb-2">{{ __("website_301.contact.MessageSent") }}</h3>
                            <p class="dark-color text-center opacity-70 fw-500 mb-0">{{ __("website_301.contact.Thanks") }}</p>
                        </div>
                        <div class="modal-footer border-0 p-0 mt-45">
                            <button type="button" class="main-btn" data-bs-dismiss="modal">{{ __("website_301.contact.Ok") }}</button>
                        </div>
                    </div>
                </div>
            </div>
        @endif


        <!-- Contact -->
        <section class="contact-section sec-padding wow fadeInUp">
            <div class="container">
                <div class="row gx-lg-6">
                    <div class="col-lg-6 mb-4 mb-lg-0">
                        <div class="section-title2 mb-45">
                            <h2 class="mb-0">{{ __("website_301.contact.AskHow") }}</h2>
                        </div>
                        <p class="small-text dark-color mb-4">
                            {{ __("website_301.contact.Contact4") }}
                        </p>
                        <p class="small-text dark-color">
                            {{ __("website_301.contact.Contact5") }}
                        </p>
                        <div class="contact-info">
                            <div class="section-title2 mb-45">
                                <h2 class="mb-0"> {{ __("website_301.contact.Contacts") }}</h2>
                            </div>

                            <h5 class="dark-color">{{ __("website_301.contact.Mobile") }}</h5>
                            <a href="tel:{{  \App\Http\Helpers\HelperSetting::get_value('communication_mobile')  }}" class="phone mb-0">{{ \App\Http\Helpers\HelperSetting::get_value('communication_mobile') }}</a>
                            <p class="address mb-0">{{ __("website_301.contact.Jordan") }}</p>
                            <br>
                            <h5 class="dark-color">{{ __("messages.Email") }}</h5>
                            <a href="mailto:{{ \App\Http\Helpers\HelperSetting::get_value('communication_email') }}" class="mail mb-0">{{ \App\Http\Helpers\HelperSetting::get_value('communication_email') }}</a>
                            <br>
                            <h5 class="dark-color"> {{ __("website_301.contact.Support") }}</h5>
                            <a href="mailto:{{ \App\Http\Helpers\HelperSetting::get_value('communication_email') }}" class="mail mb-0">{{ \App\Http\Helpers\HelperSetting::get_value('communication_email') }}</a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="contact-form">
                            <form class="main-form" action="{{ route('contact-us') }}" method="POST">
                                @csrf

                                <div class="row">
                                    <div class="col-lg-6 mb-25">
                                        <label class="form-label"> {{ __("website_301.contact.FirstName") }}</label>
                                        <input type="text" class="form-control" placeholder="{{ __("website_301.contact.FirstName1") }}" name="first_name" value="{{ old('first_name') }}">
                                        @error('first_name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-lg-6 mb-25">
                                        <label class="form-label">{{ __("website_301.contact.LastName") }}</label>
                                        <input type="text" class="form-control" placeholder="{{ __("website_301.contact.LastName1") }}" name="last_name" value="{{ old('last_name') }}">
                                        @error('last_name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-lg-6 mb-25">
                                        <label class="form-label">{{ __("messages.Email") }}</label>
                                        <input type="text" class="form-control" placeholder="{{ __("website_301.contact.Email") }}" name="email" value="{{ old('email') }}">
                                        @error('email')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-lg-6 mb-25">
                                        <label class="form-label">{{ __("website_301.contact.Mobile") }}</label>
                                        <input type="text" class="form-control" placeholder="{{ __("website_301.contact.Mobile1") }}" name="phone" value="{{ old('phone') }}">
                                        @error('phone')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-lg-12 mb-25">
                                        <label class="form-label">{{ __("website_301.contact.Type") }}</label>
                                        <select class="form-select" name="type">
                                            <option selected>{{ __("website_301.contact.Type1") }}</option>
                                            @foreach(config('constants.contact_us_types') as $key => $value)
                                                <option value="{{ $key }}" {{ old('type') == $key ? 'selected' : '' }}>{{ __('website_301.contact.'.$value) }}</option>
                                            @endforeach
                                        </select>
                                        @error('type')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-lg-12 mb-25">
                                        <label class="form-label">{{ __("website_301.contact.Help") }}</label>
                                        <textarea class="form-control" rows="5" placeholder="{{ __("website_301.contact.Help2") }}" name="message">{{ old('message') }}</textarea>
                                        @error('message')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="text-end">
                                    <button type="submit" class="main-btn">{{ __("website_301.contact.Send") }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

@endsection

@section('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var successModalID = document.getElementById('successModal');
            if (successModalID) {
                var modalDismissButton = successModalID.querySelector('button[data-bs-dismiss="modal"]');
                if (modalDismissButton) {
                    modalDismissButton.addEventListener('click', function() {
                        successModalID.style.display = 'none';
                    });
                }
            }
        });
    </script>
@endsection