@extends('layout')

@section('title', ($settings->site_name ?? 'TASK EARNING BD') . ' — OTP যাচাই')

@push('head')
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet" />
<style>
    .page-wrap{min-height:calc(100vh - 110px);padding-top:95px;padding-bottom:50px}
    .auth-card{transition:all .5s ease;position:relative;overflow:hidden}
    .auth-card:hover{transform:translateY(-5px);box-shadow:0 25px 50px rgba(0,0,0,.15)}
    .ring-soft{box-shadow:0 0 0 1px rgba(15,23,42,.08), 0 20px 60px rgba(2,6,23,.10)}
    .input-soft{border-color:rgba(148,163,184,.6)}
    .input-soft:focus{border-color:rgba(249,115,22,.9);box-shadow:0 0 0 3px rgba(249,115,22,.18)}
</style>
@endpush

@section('content')
@php($siteLabel = app_site_label())
@php($supportEmail = app_support_email())
<div class="page-wrap px-4 pt-4">
    <div class="max-w-5xl mx-auto">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">

            <div class="hidden lg:block">
                <div class="bg-white rounded-[30px] border border-gray-100 p-10 auth-card ring-soft">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-16 h-16 rounded-2xl overflow-hidden border-2 border-white shadow-lg bg-slate-100">
                            <img src="{{ !empty($settings->logo) ? asset(ltrim($settings->logo,'/')) : 'https://via.placeholder.com/120x120?text=Logo' }}" class="w-full h-full object-cover" alt="Logo">
                        </div>
                        <div>
                            <h1 class="text-2xl font-black text-slate-900 leading-tight">{{ $settings->site_name ?? 'TASK EARNING BD' }}</h1>
                            <p class="text-xs font-bold text-slate-500 uppercase tracking-widest">{{ $siteLabel }}</p>
                        </div>
                    </div>

                    <p class="text-slate-700 font-bold leading-relaxed">
                        {{ $settings->site_description ?? 'আপনার ক্যারিয়ার গড়ার জন্য একটি স্মার্ট ডিজিটাল প্ল্যাটফর্ম।' }}
                    </p>

                    <div class="mt-8 grid grid-cols-2 gap-4">
                        <a href="{{ route('password.otp.request') }}" class="btn-main text-center">OTP আবার পাঠান</a>
                        <a href="{{ route('login.form') }}" class="btn-main text-center">লগইন</a>
                    </div>

                    <div class="mt-10 p-6 rounded-[25px] bg-gradient-to-br from-orange-50 to-white border border-orange-100 shadow-sm">
                        <p class="text-[10px] font-black text-orange-600 uppercase tracking-widest mb-3">Support</p>
                        <p class="text-sm font-bold text-slate-700">
                            Email: <a class="text-orange-600 hover:underline" href="mailto:{{ $supportEmail }}">{{ $supportEmail }}</a>
                        </p>
                        @if(!empty($settings->support_general))
                            <p class="text-sm font-bold text-slate-700 mt-1">Helpline: {{ $settings->support_general }}</p>
                        @endif
                    </div>
                </div>
            </div>

            <div class="w-full max-w-md mx-auto">
                <div class="bg-white rounded-[30px] border border-gray-100 auth-card ring-soft">
                    <div class="p-8">
                        <div class="flex items-center justify-between mb-6">
                            <div>
                                <div class="inline-block px-3 py-1 text-[10px] font-black tracking-widest text-indigo-600 uppercase bg-indigo-50 rounded-full">
                                    Verify OTP
                                </div>
                                <h2 class="mt-3 text-2xl font-black text-slate-900 tracking-tight">পাসওয়ার্ড পরিবর্তন</h2>
                                <p class="text-sm font-bold text-slate-500 mt-1">OTP দিয়ে নতুন পাসওয়ার্ড সেট করুন</p>
                            </div>
                            <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-indigo-600 to-blue-500 flex items-center justify-center shadow-lg">
                                <i class="fa-solid fa-rotate text-white text-xl"></i>
                            </div>
                        </div>

                        @if(session('status'))
                            <div class="mb-5 rounded-2xl border border-blue-100 bg-blue-50 p-4">
                                <div class="text-sm font-black text-blue-700">{{ session('status') }}</div>
                            </div>
                        @endif

                        @if($errors->any())
                            <div class="mb-5 rounded-2xl border border-red-100 bg-red-50 p-4">
                                <div class="text-sm font-black text-red-700">{{ $errors->first() }}</div>
                            </div>
                        @endif

                        <form method="POST" action="{{ route('password.otp.verify') }}" class="space-y-5" novalidate>
                            @csrf

                            <div>
                                <label class="text-xs font-black text-slate-700 uppercase tracking-widest">ইমেইল</label>
                                <div class="relative mt-2">
                                    <i class="fas fa-envelope absolute left-4 top-1/2 -translate-y-1/2 text-orange-500"></i>
                                    <input type="email" name="email" value="{{ old('email', $email ?? request('email')) }}" required
                                           class="w-full pl-12 pr-4 py-3 rounded-2xl border input-soft focus:outline-none transition bg-white text-slate-900 font-bold">
                                </div>
                            </div>

                            <div>
                                <label class="text-xs font-black text-slate-700 uppercase tracking-widest">OTP (৬ সংখ্যা)</label>
                                <div class="relative mt-2">
                                    <i class="fas fa-key absolute left-4 top-1/2 -translate-y-1/2 text-orange-500"></i>
                                    <input type="text" name="otp" inputmode="numeric" maxlength="6" required placeholder="******"
                                           class="tracking-[0.35em] text-center w-full pl-12 pr-4 py-3 rounded-2xl border input-soft focus:outline-none transition bg-white text-slate-900 font-black">
                                </div>
                            </div>

                            <div>
                                <label class="text-xs font-black text-slate-700 uppercase tracking-widest">নতুন পাসওয়ার্ড</label>
                                <div class="relative mt-2">
                                    <i class="fas fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-orange-500"></i>
                                    <input id="password" type="password" name="password" required placeholder="কমপক্ষে ৬ অক্ষর"
                                           class="w-full pl-12 pr-12 py-3 rounded-2xl border input-soft focus:outline-none transition bg-white text-slate-900 font-bold">
                                    <button type="button" onclick="togglePass('password', this)" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500">
                                        <i class="fas fa-eye-slash"></i>
                                    </button>
                                </div>
                            </div>

                            <div>
                                <label class="text-xs font-black text-slate-700 uppercase tracking-widest">কনফার্ম পাসওয়ার্ড</label>
                                <div class="relative mt-2">
                                    <i class="fas fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-orange-500"></i>
                                    <input id="password_confirmation" type="password" name="password_confirmation" required placeholder="পাসওয়ার্ড আবার লিখুন"
                                           class="w-full pl-12 pr-12 py-3 rounded-2xl border input-soft focus:outline-none transition bg-white text-slate-900 font-bold">
                                    <button type="button" onclick="togglePass('password_confirmation', this)" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500">
                                        <i class="fas fa-eye-slash"></i>
                                    </button>
                                </div>
                            </div>

                            <button type="submit"
                                    class="w-full py-3 rounded-2xl text-white font-extrabold text-lg transition flex items-center justify-center gap-2 bg-gradient-to-r from-orange-500 to-pink-600 shadow-xl hover:scale-[1.02] active:scale-95">
                                <i class="fa-solid fa-rotate"></i>
                                <span>পাসওয়ার্ড পরিবর্তন</span>
                            </button>

                            <div class="text-center text-sm font-bold text-slate-600 pt-1">
                                <a href="{{ route('password.otp.request') }}" class="font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-pink-600">
                                    আবার OTP পাঠান
                                </a>
                                <span class="mx-2 text-slate-300">|</span>
                                <a href="{{ route('login.form') }}" class="font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-pink-600">
                                    লগইন
                                </a>
                            </div>
                        </form>
                    </div>

                    <div class="px-8 pb-8">
                        <div class="p-5 rounded-[25px] bg-slate-50 border border-slate-100 flex items-center justify-between">
                            <div>
                                <div class="text-[10px] font-black uppercase tracking-widest text-slate-500">One-time Code</div>
                                <div class="text-sm font-extrabold text-slate-900">{{ $settings->site_name ?? 'TASK EARNING BD' }}</div>
                            </div>
                            <div class="text-white text-[10px] font-black uppercase tracking-widest px-3 py-2 rounded-xl bg-gradient-to-r from-indigo-600 to-blue-500">
                                OTP
                            </div>
                        </div>
                    </div>

                </div>

                <p class="text-center text-xs mt-4 text-slate-500 font-bold">
                    © {{ date('Y') }} {{ $settings->site_name ?? 'TASK EARNING BD' }} — {{ $siteLabel }}
                </p>
            </div>

        </div>
    </div>
</div>

@push('scripts')
<script>
    function togglePass(inputId, button) {
        const input = document.getElementById(inputId);
        const icon = button.querySelector("i");
        const isHidden = input.type === "password";
        input.type = isHidden ? "text" : "password";
        icon.classList.toggle("fa-eye-slash", !isHidden);
        icon.classList.toggle("fa-eye", isHidden);
    }
</script>
@endpush
@endsection
