@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>
    .register-wrap{min-height:calc(100vh - 110px);padding-top:95px;padding-bottom:50px; background: #fdfdfd;}
    
    /* Main card design (same style as login page) */
    .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 in 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;
    }
    
    .input-box-premium:focus {
        border-color: #1D4ED8 !important; 
        background-color: #fff;
        box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.15) !important;
        outline: none;
    }

    /* Vertical border beside icon (Side Border) */
    .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);
    }

    .tutorial-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 18px;
        margin-bottom: 18px;
        border-radius: 24px;
        border: 2px solid #2563EB;
        background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
        box-shadow: 0 16px 32px rgba(37, 99, 235, 0.14);
    }
    .tutorial-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 40px rgba(37, 99, 235, 0.18);
    }
    .tutorial-badge {
        width: 52px;
        height: 52px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);
        color: #fff;
        font-size: 20px;
        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.24);
    }
    .tutorial-arrow {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        color: #2563EB;
        border: 2px solid rgba(37, 99, 235, .18);
        flex: 0 0 auto;
    }
</style>
@endpush

@section('content')
@php
    $siteLabel = app_site_label();
    $tutorialLink = trim((string) ($currentProjectTutorialLink ?? ''));
    $tutorialType = trim((string) ($currentProjectTutorialPlayerType ?? ''));
    $tutorialSrc = trim((string) ($currentProjectTutorialPlayerSrc ?? ''));
    $tutorialTitle = trim((string) ($currentProjectTutorialTitle ?? '')) ?: 'রেজিস্ট্রেশন ভিডিও';
    $hasTutorialLink = $tutorialLink !== '' && $tutorialLink !== '#' && $tutorialType !== '' && $tutorialSrc !== '';
@endphp
<div class="register-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('login') }}" 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">Welcome Offer</p>
                        <p class="text-sm font-bold text-slate-800">
                            রেজিস্ট্রেশন করে আপনার ক্যারিয়ার যাত্রা শুরু করুন এবং আমাদের প্রিমিয়াম ফিচারের সুবিধা নিন।
                        </p>
                    </div>
                </div>
            </div>

            <div class="w-full max-w-md mx-auto">
                @include('partials.mobile_action_cards', [
                    'primaryVisible' => false,
                    'videoVisible' => $hasTutorialLink,
                    'renderDisabledVideo' => false,
                    'videoLink' => $tutorialLink,
                    'videoType' => $tutorialType,
                    'videoSrc' => $tutorialSrc,
                    'videoTitle' => $tutorialTitle,
                    'videoLabel' => 'ভিডিও',
                    'videoSubtitle' => 'নিয়ম দেখে তারপর ফর্ম পূরণ করুন',
                ])

                <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">
                                    Join Us Now
                                </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-user-plus text-white text-2xl"></i>
                            </div>
                        </div>

                        @if ($errors->any())
                            <div class="mb-6 rounded-2xl border-2 border-red-200 bg-red-50 p-4">
                                <ul class="text-sm font-bold text-red-600 list-disc pl-5">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

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

                            <div>
                                <label class="text-xs font-black text-slate-800 uppercase ml-1">আপনার নাম</label>
                                <div class="relative mt-1.5">
                                    <i class="fas fa-user absolute left-4 top-1/2 -translate-y-1/2 text-blue-700 z-10"></i>
                                    <input type="text" name="name" value="{{ old('name') }}" placeholder="Full Name" required
                                           class="w-full pl-14 pr-4 py-3.5 rounded-2xl input-box-premium text-slate-900 font-extrabold">
                                    <div class="input-icon-divider"></div>
                                </div>
                            </div>

                            <div>
                                <label class="text-xs font-black text-slate-800 uppercase ml-1">ইমেইল</label>
                                <div class="relative mt-1.5">
                                    <i class="fas fa-envelope absolute left-4 top-1/2 -translate-y-1/2 text-blue-700 z-10"></i>
                                    <input type="email" name="email" value="{{ old('email') }}" placeholder="Email Address" required
                                           class="w-full pl-14 pr-4 py-3.5 rounded-2xl input-box-premium text-slate-900 font-extrabold">
                                    <div class="input-icon-divider"></div>
                                </div>
                            </div>

                            <div>
                                <label class="text-xs font-black text-slate-800 uppercase ml-1">মোবাইল নাম্বার</label>
                                <div class="relative mt-1.5">
                                    <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="mobile" value="{{ old('mobile') }}" placeholder="01XXXXXXXXX" required
                                           class="w-full pl-14 pr-4 py-3.5 rounded-2xl input-box-premium text-slate-900 font-extrabold">
                                    <div class="input-icon-divider"></div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 gap-5">
    {{-- Password --}}
    <div>
        <label class="text-xs font-black text-slate-800 uppercase ml-1">পাসওয়ার্ড</label>
        <div class="relative mt-1.5">
            <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 minlength="4"
                   class="w-full pl-14 pr-12 py-3.5 rounded-2xl input-box-premium text-slate-900 font-extrabold">
            <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">
                <i class="fas fa-eye-slash"></i>
            </button>
        </div>
        <p class="mt-2 text-xs font-bold text-slate-500 ml-1">সর্বনিম্ন ৪ অক্ষরের পাসওয়ার্ড দিন।</p>
    </div>

    {{-- Confirm Password --}}
    <div>
        <label class="text-xs font-black text-slate-800 uppercase ml-1">কনফার্ম পাসওয়ার্ড</label>
        <div class="relative mt-1.5">
            <i class="fas fa-key absolute left-4 top-1/2 -translate-y-1/2 text-blue-700 z-10"></i>
            <input id="password_confirmation" type="password" name="password_confirmation" placeholder="একই পাসওয়ার্ড আবার দিন" required minlength="4"
                   class="w-full pl-14 pr-12 py-3.5 rounded-2xl input-box-premium text-slate-900 font-extrabold">
            <div class="input-icon-divider"></div>
            <button type="button" onclick="togglePass('password_confirmation', this)"
                    class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400">
                <i class="fas fa-eye-slash"></i>
            </button>
        </div>
    </div>
</div>

                            <div>
                                <label class="text-xs font-black text-slate-800 uppercase ml-1">রেফার কোড <span class="text-red-500">*</span></label>
                                <div class="relative mt-1.5">
                                    <i class="fas fa-gift absolute left-4 top-1/2 -translate-y-1/2 text-blue-700 z-10"></i>
                                    <input type="text" name="referral_code" value="{{ old('referral_code', $referralCode ?? '') }}" placeholder="Refer Code" required
                                           class="w-full pl-14 pr-4 py-3.5 rounded-2xl input-box-premium text-slate-900 font-extrabold">
                                    <div class="input-icon-divider"></div>
                                </div>
                            </div>

                            <button type="submit" class="w-full btn-premium text-lg py-4 rounded-2xl gap-3 mt-2">
                                <i class="fas fa-user-plus"></i>
                                <span>রেজিস্টার করুন</span>
                            </button>
                        </form>

                        <div class="pt-6 text-center text-sm font-bold text-slate-600">
                            ইতিমধ্যেই একাউন্ট আছে?
                            <a href="{{ route('login') }}" class="font-black text-blue-700 border-b-2 border-blue-700 ml-1">লগইন করুন</a>
                        </div>
                    </div>

                    <div class="px-8 pb-8">
                        <div class="p-4 rounded-[25px] bg-slate-100 border-2 border-white flex items-center justify-between">
                            <div class="text-sm font-black text-slate-900">100% Secure Data</div>
                            <div class="badge-gradient text-white text-[10px] font-black uppercase px-3 py-2 rounded-xl border border-blue-400">
                                Protected
                            </div>
                        </div>
                    </div>

                </div>

                <p class="text-center text-xs mt-6 text-slate-500 font-bold">
                    © {{ date('Y') }} {{ $settings->site_name ?? 'TASK EARNING' }}
                </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
