@extends('layouts.guest')

@section('content')
    <div class="flex items-center justify-center min-h-screen bg-theme_black md:relative overflow-hidden">
        {{-- <video class="hidden sm:block absolute top-0 left-0 w-full h-full object-cover" autoplay muted loop src="{{ asset('assets/bg-video.mp4') }}"></video> --}}
        <img class="sm:block absolute top-0 left-0 w-full h-full object-cover" src="{{ asset('assets/bg-3.png') }}">
        <img class="sm:hidden absolute top-0 left-0 w-full h-full object-cover" src="{{ asset('assets/bg-mobil-2.png') }}">
        <div
            class="relative flex flex-col m-6 space-y-8 drop-shadow-md shadow-black shadow-sm bg-black/50 rounded-2xl md:flex-row md:space-y-0 backdrop-blur-sm border border-gray-300/30">

            <form action="{{ route('guest.sendContact') }}" method="POST" onsubmit="showLoading()">
                @csrf
                <div class="flex flex-col justify-center">
                    <div class="flex flex-col p-4 3xl:p-8 text-sm 3xl:text-base">
                        <div class="py-2 flex flex-col">
                            <span class="mb-2 text-md text-theme_white">Name</span>
                            <input type="text" class="input-2 bg-transparent border-white/70" id="name"
                                name="name" value="{{ old('name') }}" />
                        </div>
                        <div class="py-2 flex flex-col">
                            <span class="mb-2 text-md text-theme_white">Surname</span>
                            <input type="text" class="input-2 bg-transparent border-white/70" id="surname"
                                name="surname" value="{{ old('surname') }}" />
                        </div>

                        <div class="py-2 flex flex-col">
                            <span class="mb-2 text-md text-theme_white">Email</span>
                            <input type="email" class="input-2 bg-transparent border-white/70" name="email"
                                value="{{ old('email') }}" />
                        </div>
                        <div class="py-2 flex flex-col">
                            <span class="mb-2 text-md text-theme_white">Message</span>
                            <textarea class="input-2 bg-transparent border-white/70" name="message"></textarea>
                        </div>

                        <div class="w-full flex items-center justify-between mt-4">
                            <div class="text-xs text-gray-300">
                                <a class="pl-1 hover:underline hover:text-blue-500" href="{{ route('login') }}">
                                    Login
                                </a>
                            </div>
                            <button type="submit" class="text-gray-300 button-2 mt-2 border-white/70">
                                Send
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    @if (session('error'))
        @include('components.error-modal')
    @endif
    @if (session('success'))
        @include('components.success-modal')
    @endif
@endsection