@extends('layouts.app')

@section('content')
    <div class="page-content pt-xxl">
        <div class="mb-xl">
            <div class="container">
                <h2 class="title-xxl title-animation font-primary-bd text-primary-color mb-md"><span>
                        @lang('site.contact_us')
                        <span class="text-secondary-color">.</span></span></h2>
                <div class="row">
                    <div class="col-lg-5">
                        <div class="mb-lg-0 mb-xl">
                            <div class="mb-md">
                                <p class="text-xl wow fadeInUp">
                                    @lang('site.our_friendly_team_would_love_to_hear_from_you')
                                </p>
                            </div>

                            @if (session('success'))
                                <div class="alert bg-success text-white border-0 text-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16"
                                        height="16" fill="currentColor">
                                        <path
                                            d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                                    </svg>

                                    {{ session('success') }}
                                </div>
                            @endif

                            <form action="{{ route('contacts.store') }}" method="post">
                                @csrf
                                <div class="row row-gap-4">
                                    <div class="col-sm-12">
                                        <div class="wow fadeInUp">
                                            <label class="mb-2">@lang('site.full_name')</label>
                                            <input class="form-control rounded-0  @error('name') is-invalid @enderror"
                                                placeholder="@lang('site.full_name')"type="text" name="name"
                                                value="{{ old('name') }}" required autofocus>
                                            @error('name')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-sm-12">
                                        <div class="wow fadeInUp">
                                            <label class="mb-2">@lang('main.email')</label>
                                            <input type="email"
                                                class="form-control rounded-0 @error('email') is-invalid @enderror"
                                                placeholder="@lang('main.email')" name="email" value="{{ old('email') }}"
                                                required>
                                            @error('email')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="wow fadeInUp">
                                            <label class="mb-2">@lang('main.phone')</label>
                                            <input type="tel"
                                                class="form-control rounded-0 @error('phone') is-invalid @enderror"
                                                placeholder="@lang('main.phone')" name="phone" value="{{ old('phone') }}"
                                                required>

                                            @error('phone')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="wow fadeInUp">
                                            <label class="mb-2">@lang('site.message')</label>
                                            <textarea name="message" class="form-control rounded-0 @error('message') is-invalid @enderror"
                                                placeholder="@lang('site.message')" rows="6" required>{{ old('message') }}</textarea>
                                            @error('message')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>

                                </div>
                                <div class="mt-md wow fadeInUp">
                                    <button type="submit" class="btn btn-hover btn-secondary-color w-100 py-3">
                                        @lang('site.send_message')
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-6 offset-lg-1">
                        <img src="./assets/media/contact.png" alt="contact" loading="lazy">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection