@extends('front.layouts.app')

@section('content')
    <main>

        <div class="container contact-info pt-5">
            <div class="main-contact-tiop mt-5 pt-5">
                <h2 class="text-center">{{ \App\Helpers\TranslationHelper::translate('Contact Us') }}</h2>
                <div class="row g-4">
                    <div class="col-md-4 pt-3">
                        <div class="info-box">
                            <div class="icon">
                                <i class="fa-solid fa-location-dot"></i>
                            </div>
                            <h3>{{ \App\Helpers\TranslationHelper::translate('address') }}:</h3>
                            <p>
                                {!! $contact->address !!}
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4 pt-3">
                        <div class="info-box">
                            <div class="icon">
                                <i class="fa-solid fa-phone"></i>
                            </div>
                            <h3>{{ \App\Helpers\TranslationHelper::translate('phone number') }}:</h3>
                            <p>{{ $contact->phono }}</p>
                        </div>
                    </div>
                    <div class="col-md-4 pt-3">
                        <div class="info-box">
                            <div class="icon">
                                <i class="fa-solid fa-envelope"></i>
                            </div>
                            <h3>{{ \App\Helpers\TranslationHelper::translate('mail address') }}:</h3>
                            <p>{{ $contact->x }}</p>
                        </div>
                    </div>
                </div>


                <div class="dev-contact pt-5 pb-5">
                    <section class="contact-section">
                        @if (session('success'))
                            <div class="alert alert-success" id="success-message">
                                {{ session('success') }}
                            </div>
                        @endif

                        <form action="{{ route('create_message') }}" method="POST">
                            @csrf

                            <div class="form-group">
                                <label for="name">{{ \App\Helpers\TranslationHelper::translate('Full Name') }}</label>
                                @error('name')
                                    <div class="text-danger mb-1">{{ $message }}</div>
                                @enderror
                                <input type="text" id="name" name="name"
                                    placeholder="{{ \App\Helpers\TranslationHelper::translate('Enter your full name') }}"
                                    value="{{ old('name') }}" required>
                            </div>

                            <div class="form-group">
                                <label
                                    for="email">{{ \App\Helpers\TranslationHelper::translate('Email Address') }}</label>
                                @error('email')
                                    <div class="text-danger mb-1">{{ $message }}</div>
                                @enderror
                                <input type="email" id="email" name="email"
                                    placeholder="{{ \App\Helpers\TranslationHelper::translate('Enter your email address') }}"
                                    value="{{ old('email') }}" required>
                            </div>

                            <div class="form-group">
                                <label
                                    for="phone">{{ \App\Helpers\TranslationHelper::translate('phone Address') }}</label>
                                @error('phone')
                                    <div class="text-danger mb-1">{{ $message }}</div>
                                @enderror
                                <input type="tel" id="phone" name="phone"
                                    placeholder="{{ \App\Helpers\TranslationHelper::translate('Enter your phone address') }}"
                                    value="{{ old('phone') }}" required>
                            </div>



                            <div class="form-group">
                                <label
                                    for="message">{{ \App\Helpers\TranslationHelper::translate('Your Message') }}</label>
                                @error('message')
                                    <div class="text-danger mb-1">{{ $message }}</div>
                                @enderror
                                <textarea id="message" name="message"
                                    placeholder="{{ \App\Helpers\TranslationHelper::translate('Write your message here') }}" required>{{ old('message') }}</textarea>
                            </div>
                            <button type="submit"
                                class="btn-submit">{{ \App\Helpers\TranslationHelper::translate('Send') }}</button>
                        </form>

                    </section>
                </div>


            </div>
        </div>

    </main>
@endsection

@push('js')
    <script>
        setTimeout(function() {
            var message = document.getElementById('success-message');
            if (message) {
                message.style.transition = "opacity 0.5s ease";
                message.style.opacity = 0;
                setTimeout(function() {
                    message.remove();
                }, 500);
            }
        }, 5000);
    </script>
@endpush