@extends('layouts.app')

@section('header')
    <title>{{ trans('contact_us.meta.title') }}</title>
    <meta name="title" content="{{ trans('contact_us.meta.title') }}">
    <meta name="description" content="{{ trans('contact_us.meta.description') }}">
    <meta name="keywords" content="">
    <meta name="robots" content="index,follow">

    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ localized_route('contact_page') }}">
    <meta property="og:title" content="{{ trans('contact_us.meta.title') }}">
    <meta property="og:description" content="{{ trans('contact_us.meta.description') }}">
    <meta property="og:image" content="{{ asset(mix('build/images/logo/logo.svg')) }}">

    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="{{ localized_route('contact_page') }}/">
    <meta property="twitter:title" content="{{ trans('contact_us.meta.title') }}">
    <meta property="twitter:description" content="{{ trans('contact_us.meta.description') }}">
    <meta property="twitter:image" content="{{ asset(mix('build/images/logo/logo.svg')) }}">

    <script src='https://js.hcaptcha.com/1/api.js' async defer></script>

    @foreach(locales() as $locale)
        <link rel="alternate" hreflang="{{ config('locales.iso_friendly.' . $locale,$locale) }}" href="{{ current_route($locale) }}"/>
    @endforeach
    <link rel="alternate" hreflang="x-default" href="{{ current_route('en') }}" />
@endsection

@section('content')
    <main class="flex-auto flex flex-col relative pb-[100px] bg-[url('/build/images/bg-logistic-640.jpg')] bg-cover bg-center sm:bg-[url('/build/images/bg-logistic-1024.jpg')] lg:bg-[url('/build/images/bg-logistic-1920.jpg')] 3xl:bg-[url('/build/images/bg-logistic-2560.jpg')]">
        {{--<div class="absolute inset-0 bg-[url('/build/images/logistic-bg.jpg')] bg-cover bg-center z-[-1]"></div>--}}
        {{--<div class="absolute inset-0 bg-[rgba(7,61,109,.63)] backdrop-blur z-[-1]"></div>--}}
        <div class="container">
            <div class="flex-auto p-[16px] md:p-[32px] overflow-hidden">
                <div class="flex flex-col mb-[16px] max-w-screen-xl mx-auto lg:flex-row">
                    <div class="text-white text-shadow-[0px_0px_5px_#435760] lg:w-[50%] lg:pr-[16px]">
                        <h1 class="text-[24px] font-semibold mt-[16px] leading-tight md:text-[28px] lg:text-[32px] xl:text-[40px] 2xl:text-[48px]">{{ trans('contact_us.title') }}</h1>
                        <div class="mt-[32px]e md:text-[18px] lg:text-[20px]">
                            <p class="font-semibold mt-[32px]">AUNOIA Pharma® s.r.o.</p>
                            <p class="">{{ trans('contact_us.company_details.address') }}</p>
                            <p class="">{{ trans('contact_us.company_details.zip') . ' ' . trans('contact_us.company_details.city') }}</p>
                            <p class="">{{ trans('contact_us.company_details.country') }}</p>
                            <p class="mt-[32px]"><span class="font-semibold">{{ trans('contact_us.ico') }}:</span> {{ trans('contact_us.company_details.ico') }}</p>
                            <p><span class="font-semibold">{{ trans('contact_us.dic') }}:</span> {{ trans('contact_us.company_details.dic') }}</p>
                            <p><span class="font-semibold">{{ trans('contact_us.icdph') }}:</span> {{ trans('contact_us.company_details.icdph') }}</p>
                            <p class="mt-[32px]"><span class="font-semibold">{{ trans('contact_us.phone') }}:</span> <a href="tel:{{ trans('contact_us.company_details.phone') }}">{{ trans('contact_us.company_details.phone_formatted') }}</a></p>
                            <p class="font-semibold mt-[32px]">{{ trans('contact_us.warehouse') }}:</p>
                            <p class="">{{ trans('contact_us.company_details.warehouse.address') }}</p>
                            <p class="">{{ trans('contact_us.company_details.warehouse.zip_with_city') }}</p>
                            <p class="font-semibold mt-[32px]">{{ trans('contact_us.opening') }}</p>
                            <p class="">{{ trans('contact_us.opening_text') }}</p>
                        </div>
                    </div>
                    <div class="mt-[48px] lg:mt-0 lg:w-[50%] lg:pl-[16px]">
                        @if(session('result'))
                            <div class="bg-green-50 p-4">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                    <div class="ml-3">
                                        <h3 class="text-sm font-medium text-green-800">{{ trans('contact_us.response.success_text1') }}</h3>
                                        <div class="mt-2 text-sm text-green-700">
                                            <p>{{ trans('contact_us.response.success_text2') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            @if($errors->isNotEmpty())
                                <div class="bg-red-50 p-4 mb-[16px]">
                                    <div class="flex">
                                        <div class="flex-shrink-0">
                                            <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/>
                                            </svg>
                                        </div>
                                        <div class="ml-3">
                                            <h3 class="text-sm font-medium text-red-800">{{ trans('contact_us.response.error') }}</h3>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if(session('contact_captcha_error'))
                                <div class="bg-red-50 p-4 mb-[16px]">
                                    <div class="flex">
                                        <div class="flex-shrink-0">
                                            <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/>
                                            </svg>
                                        </div>
                                        <div class="ml-3">
                                            <h3 class="text-sm font-medium text-red-800">{{ trans('contact_us.response.error_captcha') }}</h3>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            <div class="p-[16px] bg-slate-100 rounded-3xl xl:p-[32px]">
                                <form action="{{ localized_route('contact_page') }}" method="post" enctype="multipart/form-data">
                                    @csrf
                                    <label class="block mt-[16px]">
                                        <span class="{{ $errors->has('first_last_name') ? 'text-red-500 font-semibold' : 'text-slate-700' }}">{{ trans('fields.name_and_surname') }} <span class="text-red-500 font-semibold">*</span></span>
                                        <input type="text" name="first_last_name" class="form-input {{ $errors->has('first_last_name') ? 'border-red-400' : '' }}" value="{{ old('first_last_name','') }}" required>
                                        @error('first_last_name')
                                        <div class="text-red-500 font-semibold">
                                            <small>{{ $message }}</small>
                                        </div>
                                        @enderror
                                    </label>
                                    <label class="block mt-[16px]">
                                        <span class="{{ $errors->has('phone_number') ? 'text-red-500 font-semibold' : 'text-slate-700' }}">{{ trans('fields.phone_number') }} <span class="text-red-500 font-semibold">*</span></span>
                                        <input type="text" name="phone_number" class="form-input {{ $errors->has('phone_number') ? 'border-red-400' : '' }}" value="{{ old('phone_number','') }}" required>
                                        <div class="text-slate-500 leading-tight mt-1">
                                            <small>{{ trans('contact_us.phone_note') }}</small>
                                        </div>
                                        @error('phone_number')
                                        <div class="text-red-500 font-semibold">
                                            <small>{{ $message }}</small>
                                        </div>
                                        @enderror
                                    </label>
                                    <label class="block mt-[16px]">
                                        <span class="{{ $errors->has('email') ? 'text-red-500 font-semibold' : 'text-slate-700' }}">{{ trans('fields.email') }}</span>
                                        <input type="email" name="email" class="form-input {{ $errors->has('email') ? 'border-red-400' : '' }}" value="{{ old('email','') }}" >
                                        <div class="text-slate-500 leading-tight mt-1">
                                            <small>{{ trans('contact_us.email_note') }}</small>
                                        </div>
                                        @error('email')
                                        <div class="text-red-500 font-semibold">
                                            <small>{{ $message }}</small>
                                        </div>
                                        @enderror
                                    </label>
                                    <label class="block mt-[16px]">
                                        <span class="{{ $errors->has('message') ? 'text-red-500 font-semibold' : 'text-slate-700' }}">{{ trans('fields.message') }}</span>
                                        <textarea name="message" class="form-input {{ $errors->has('message') ? 'border-red-400' : '' }}" rows="7">{{ old('message','') }}</textarea>
                                        <div class="text-slate-500">
                                            <small>{{ trans('contact_us.message_note') }}</small>
                                        </div>
                                        @error('message')
                                        <div class="text-red-500 font-semibold">
                                            <small>{{ $message }}</small>
                                        </div>
                                        @enderror
                                    </label>
                                    <div class="mt-[16px]">
                                        <div class="h-captcha" data-sitekey="{{ config('hcaptcha.public') }}"></div>
                                        @error('h-captcha-response')
                                        <div class="text-red-500 font-semibold">
                                            <small>{{ $message }}</small>
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="mt-[32px]">
                                        <button type="submit" class="bg-blue-500 text-white px-[16px] py-[12px] font-semibold w-full">{{ trans('contact_us.send_button') }}</button>
                                    </div>
                                </form>
                            </div>
                        @endif
                        <div class="bg-slate-100 p-[16px] mt-[32px] rounded-3xl lg:mt-[32px]">
                            <div class="max-w-[320px] mx-auto lg:max-w-[400px] ">
                                <img src="{{ asset(mix('build/images/logo/logo.svg')) }}" alt="AUNOIA Pharma® logo" loading="lazy">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection