@extends('layout')

@section('title', ($settings->site_name ?? 'TASK EARNING') . ' - লগইন')

@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>
    .login-wrap{min-height:calc(100vh - 110px);padding-top:95px;padding-bottom:50px; background: #fdfdfd;}
    
    .auth-card-main {
        transition: all .4s ease;
        position: relative;
        overflow: hidden;
        border: 2px solid #2563EB !important; 
        box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
    }
    .auth-card-main:hover {
        transform: translateY(-5px);
        box-shadow: 0 30px 60px rgba(37, 99, 235, 0.25);
    }

    /* Input box border color tuned to strong blue */
    .input-box-premium {
        border: 2px solid #2563EB !important; /* সবসময় নীল বর্ডার থাকবে */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background-color: #ffffff;
    }
    
    /* On focus, show a brighter border */
    .input-box-premium:focus {
        border-color: #1D4ED8 !important; 
        background-color: #fff;
        box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.2) !important;
        outline: none;
    }

    /* Vertical border beside icon also blue */
    .input-icon-divider {
        position: absolute;
        left: 42px;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 24px;
        background-color: #2563EB; /* বর্ডার কালার নীল */
        transition: 0.3s;
        opacity: 0.5;
    }
    
    .input-box-premium:focus + .input-icon-divider {
        opacity: 1;
        background-color: #1D4ED8;
    }

    .badge-gradient {
        background: linear-gradient(90deg, #1E40AF, #1D4ED8, #1E40AF);
        background-size: 200%;
        animation: flow 3s linear infinite;
    }
    
    @keyframes flow { 0%{background-position:0%} 100%{background-position:200%} }

    .btn-premium {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 20px;
        border-radius: 18px;
        font-weight: 800;
        color: #fff;
        text-decoration: none;
        background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);
        box-shadow: 0 10px 20px rgba(30, 64, 175, 0.3);
        transition: .3s;
        border: none;
        cursor: pointer;
    }
    .btn-premium:hover {
        filter: brightness(1.1);
        transform: scale(1.02);
        box-shadow: 0 15px 30px rgba(30, 64, 175, 0.4);
    }
</style>
@endpush

@section('content')
@php($siteLabel = app_site_label())
@php($supportEmail = app_support_email())
@include('layout.partial.flash-messages', ['topOffset' => '78px'])
<div class="login-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-[35px] p-10 auth-card-main">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-16 h-16 rounded-2xl overflow-hidden border-2 border-blue-600 shadow-md">
                            <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' }}</h1>
                            <p class="text-xs font-bold text-blue-600 uppercase tracking-widest">{{ $siteLabel }}</p>
                        </div>
                    </div>

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

                    <div class="mt-8 grid grid-cols-2 gap-4">
                        <a href="{{ url('/') }}" class="btn-premium">হোম পেজ</a>
                        <a href="{{ route('register') }}" class="btn-premium">রেজিস্ট্রেশন</a>
                    </div>

                    <div class="mt-10 p-6 rounded-[25px] bg-blue-50 border-2 border-blue-100">
                        <p class="text-[11px] font-black text-blue-700 uppercase tracking-widest mb-3">Support Center</p>
                        <p class="text-sm font-bold text-slate-800">
                            Email: <a class="text-blue-700 hover:underline" href="mailto:{{ $supportEmail }}">{{ $supportEmail }}</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="w-full max-w-md mx-auto">
                <div class="bg-white rounded-[35px] auth-card-main">
                    <div class="p-8">
                        <div class="flex items-center justify-between mb-8">
                            <div>
                                <div class="inline-block px-4 py-1.5 text-[11px] font-black tracking-widest text-white uppercase bg-blue-600 rounded-lg">
                                    Secure Login
                                </div>
                                <h2 class="mt-4 text-3xl font-black text-slate-900 tracking-tight">লগইন করুন</h2>
                            </div>
                            <div class="w-14 h-14 rounded-2xl bg-blue-600 flex items-center justify-center shadow-lg border-2 border-blue-400">
                                <i class="fas fa-lock text-white text-2xl"></i>
                            </div>
                        </div>

                        <form method="POST" action="{{ route('login') }}" class="space-y-6" novalidate>
                            @csrf

                            <div>
                                <label class="text-xs font-black text-slate-800 uppercase tracking-widest ml-1">মোবাইল নাম্বার</label>
                                <div class="relative mt-2">
                                    <i class="fas fa-phone absolute left-4 top-1/2 -translate-y-1/2 text-blue-700 z-10"></i>
                                    <input type="text" name="login" value="{{ old('login') }}" placeholder="01XXXXXXXXX" required
                                           class="w-full pl-14 pr-4 py-4 rounded-2xl input-box-premium text-slate-900 font-extrabold text-base">
                                    <div class="input-icon-divider"></div>
                                </div>
                            </div>

                            <div>
                                <div class="flex items-center justify-between ml-1">
                                    <label class="text-xs font-black text-slate-800 uppercase tracking-widest">পাসওয়ার্ড</label>
                                    <a href="{{ url('/forgot') }}" class="text-xs font-black text-blue-700 hover:underline uppercase">Forgot?</a>
                                </div>
                                <div class="relative mt-2">
                                    <i class="fas fa-key absolute left-4 top-1/2 -translate-y-1/2 text-blue-700 z-10"></i>
                                    <input id="password" type="password" name="password" placeholder="পাসওয়ার্ড" required
                                           class="w-full pl-14 pr-12 py-4 rounded-2xl input-box-premium text-slate-900 font-extrabold text-base">
                                    <div class="input-icon-divider"></div>
                                    <button type="button" onclick="togglePass('password', this)" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 z-10 hover:text-blue-600">
                                        <i class="fas fa-eye-slash text-lg"></i>
                                    </button>
                                </div>
                            </div>

                            <button type="submit" class="w-full btn-premium text-xl py-4 rounded-2xl gap-3">
                                <i class="fas fa-sign-in-alt"></i>
                                <span>লগইন করুন</span>
                            </button>
                        </form>

                        <div class="pt-8 text-center text-sm font-bold text-slate-600">
                            একাউন্ট নেই?
                            <a href="{{ route('register') }}" class="font-black text-blue-700 border-b-2 border-blue-700 pb-0.5 ml-1">রেজিস্ট্রেশন করুন</a>
                        </div>
                    </div>

                    <div class="px-8 pb-8">
                        <div class="p-5 rounded-[25px] bg-slate-100 border-2 border-white flex items-center justify-between shadow-inner">
                            <div>
                                <div class="text-[10px] font-black uppercase tracking-widest text-slate-500">System Status</div>
                                <div class="text-sm font-black text-slate-900">Encrypted & Secure</div>
                            </div>
                            <div class="badge-gradient text-white text-[10px] font-black uppercase tracking-widest px-4 py-2 rounded-xl border border-blue-400">
                                Verified
                            </div>
                        </div>
                    </div>

                </div>
            </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
