@extends('layouts.master')
@section('title', __('messages.Contact Us'))
@push('css')
    <style>
        .contact {
            background: #ededed;
        }
        .recaptcha-container {
            margin-top: 20px;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
        }
        .g-recaptcha {
            transform: scale(1);
            transform-origin: "0 0";
        }
        .form input ,
        .form textarea {
            font-size:medium;
        }
    </style>
    <script async src="https://www.google.com/recaptcha/api.js" defer></script>
@endpush
@section('content')
    <section class="contact padding-section">
        <div class="container">
            <div class="row align-items-center">
                <h2 class="section-title" style="padding-bottom: 55px;" data-aos="fade-up" data-aos-duration="1000">
                    {{ __('messages.Contact Us') }}
                </h2>
                <div class="form col-12" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
                    @if (session('success'))
                        <div class="alert alert-success" data-aos="fade-up" data-aos-duration="1000">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if (session('error'))
                        <div class="alert alert-danger" data-aos="fade-up" data-aos-duration="1000">
                            {{ session('error') }}
                        </div>
                    @endif

                    <form action="{{ route('contact.store') }}" method="post" id="contactForm">
                        @csrf
                        <div class="form-group" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
                            <input type="text" name="name" class="form-control" placeholder="{{ __('messages.name') }}" required>
                            @error('name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
                            <input type="email" name="email" class="form-control" placeholder="{{ __('messages.email') }}" required>
                            @error('email')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
                            <input type="text" name="subject" class="form-control" placeholder="{{ __('messages.subject') }}" required>
                            @error('subject')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group" data-aos="fade-up" data-aos-delay="500" data-aos-duration="1000">
                            <input type="number" name="phone" class="form-control" placeholder="{{ __('messages.phone') }}">
                            @error('phone')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group" data-aos="fade-up" data-aos-delay="500" data-aos-duration="1000">
                            <textarea name="message" class="form-control" rows="10" placeholder="{{ __('messages.message') }}" required></textarea>
                            @error('message')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Google reCAPTCHA Widget -->
                        <div class="recaptcha-container" data-aos="fade-up" data-aos-delay="300" data-aos-duration="100">
                            <div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.key') }}"></div>
                        </div>
                        @error('g-recaptcha-response')
                            <p class="text-danger">{{ $message }}</p>
                        @enderror

                        <div class="form-group text-center" data-aos="fade-up" data-aos-delay="300" data-aos-duration="100">
                            <button type="submit" class="btn-primary">
                                {{ __('messages.send') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection