@extends('layouts.guest')

@section('content')
    <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="flex items-center justify-center min-h-screen">
        <div
            class="relative flex flex-col m-6 space-y-8 border shadow-md shadow-teheme_third_gray border-theme_secondary_gray bg-theme_secondary_black rounded-2xl md:flex-row md:space-y-0">
            <form method="POST" action="{{ route('user.sendEmail') }}" onsubmit="showLoading()">
                <div class="p-8">
                    <h1 class="text-xl mb-4 font-bold text-theme_white">
                        Email / Telefon
                    </h1>
                    <div class="flex flex-col justify-center">
                        <label class="mb-2 text-md text-gray-400">
                            Şifresini Yenilemek İstediğiniz Email Adresini /<br/> Telefon Numarasını Giriniz
                        </label>
                        <input type="text" class="input-1" name="email" placeholder="Email / Telefon Numarası" />
                    </div>
                    <div class="my-4 flex gap-2 flex-col">
                        <span class="text-sm font-medium hidden rounded-lg p-2 bg-red-700 text-white" id="error"></span>
                        <span class="text-sm font-medium hidden rounded-lg p-2 bg-red-700 text-white" id="error2"></span>
                        <span class="text-sm font-medium hidden rounded-lg p-2 bg-green-700 text-white" id="success">Yeni
                            Kod
                            Gönderildi</span>
                    </div>
                    <div class="w-full flex items-center justify-between">
                        @csrf
                        <button
                            class="text-gray-300 px-4 inline-flex justify-center items-center gap-3 border rounded-[10px] hover:bg-theme_gray transition-all delay-100 hover:text-theme_black font-bold h-[42px]">
                            Gönder
                        </button>
                    </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