@extends('layout.user')

@section('title', 'মাসিক বেতন')

@section('content')

<div class="py-4 px-3 sm:px-6 lg:px-8 min-h-screen">

    <!-- Balance Card Box -->
    <div class="max-w-md mx-auto bg-white border border-yellow-300 shadow rounded-2xl p-5 flex items-center justify-between mb-8">
        <div>
            <h2 class="text-lg font-bold text-gray-700">মাসিক বেতন</h2>
            <p class="text-2xl font-extrabold text-green-600">৳ ২০০০</p>
        </div>
        <div class="text-blue-500 text-4xl">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a4 4 0 00-8 0v2M5 13h14l1 9H4l1-9z" />
            </svg>
        </div>
    </div>

    <!-- Step 1 -->
    <div class="max-w-md mx-auto bg-white border border-gray-200 shadow-sm rounded-2xl mb-6">
        <div class="flex justify-between items-center px-4 py-3">
            <div class="text-sm font-bold text-gray-700">⏱️ স্টেপ ১</div>
            <div class="text-sm font-semibold text-green-600">{{ number_format(($step1Count / 12) * 100, 2) }}% সম্পন্ন</div>
        </div>
        <div class="px-4 pb-4">
            <p class="text-gray-700 text-sm mb-3">✨ আপনার প্রথম লেভেলে আপনার রেফার কোড ব্যবহার করে ১২ জন অ্যাক্টিভ মেম্বার রেজিস্টার করান।</p>

            <div class="bg-gray-100 rounded-lg p-3 space-y-2">
                <div class="flex justify-between text-sm font-medium">
                    <span>লেভেল ১ এক্টিভ:</span>
                    <span>{{ $step1Count }}</span>
                </div>
                <div class="flex justify-between text-sm font-medium">
                    <span>আরো লাগবে:</span>
                    <span>{{ max(0, 12 - $step1Count) }}</span>
                </div>
            </div>

            <div class="w-full h-3 bg-gray-200 rounded-full mt-4">
                <div class="h-3 bg-yellow-500 rounded-full transition-all duration-500" style="width: {{ min(100, ($step1Count / 12) * 100) }}%;"></div>
            </div>

            <a href="{{ route('salary.step1.members') }}" class="mt-4 inline-block text-center w-full text-sm bg-blue-500 hover:bg-green-600 text-white py-2 rounded-lg font-semibold">লেভেল ১ এক্টিভ মেম্বার লিস্ট</a>
        </div>
    </div>

    <!-- Step 2 -->
    <div class="max-w-md mx-auto bg-white border border-gray-200 shadow-sm rounded-2xl">
        <div class="flex justify-between items-center px-4 py-3">
            <div class="text-sm font-bold text-gray-700">⏱️ স্টেপ ২</div>
            <div class="text-sm font-semibold text-green-600">{{ number_format(($step2Count / 50) * 100, 2) }}% সম্পন্ন</div>
        </div>
        <div class="px-4 pb-4">
            <p class="text-gray-700 text-sm mb-3">✨ আপনার ১ম লেভেলে যারা আছে তারা মিলে মোট ৫০ জন অ্যাক্টিভ মেম্বার রেফার করলেই এই ধাপ সম্পন্ন হবে।</p>

            <div class="bg-gray-100 rounded-lg p-3 space-y-2">
                <div class="flex justify-between text-sm font-medium">
                    <span>লেভেল ২ এক্টিভ রেফার:</span>
                    <span>{{ $step2Count }}</span>
                </div>
                <div class="flex justify-between text-sm font-medium">
                    <span>আরো লাগবে:</span>
                    <span>{{ max(0, 50 - $step2Count) }}</span>
                </div>
            </div>

            <div class="w-full h-3 bg-gray-200 rounded-full mt-4">
                <div class="h-3 bg-yellow-500 rounded-full transition-all duration-500" style="width: {{ min(100, ($step2Count / 50) * 100) }}%;"></div>
            </div>

            <a href="{{ route('salary.step2.members') }}" class="mt-4 inline-block text-center w-full text-sm bg-green-500 hover:bg-blue-600 text-white py-2 rounded-lg font-semibold">লেভেল ২ এক্টিভ মেম্বার লিস্ট</a>
        </div>
    </div>

    <!-- Claim Section -->
    @if($canClaim)
    <div class="max-w-md mx-auto bg-green-50 border border-green-300 rounded-2xl p-6 text-center shadow-md mt-6">
        <h3 class="text-xl font-bold text-green-700 mb-2">অভিনন্দন! 🎉</h3>
        <p class="text-gray-800 mb-4 text-sm">আপনি দুইটি ধাপ সফলভাবে সম্পন্ন করেছেন। এখন আপনি মাসিক বেতন ক্লেইম করতে পারেন।</p>
        <form method="POST" action="{{ route('claim.salary') }}">
            @csrf
            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full shadow transition transform hover:scale-105">
                মাসিক বেতন ক্লেইম করুন
            </button>
        </form>
    </div>
    @endif

    <!-- Flash Messages -->
    @if(session('success'))
        <div class="max-w-md mx-auto mt-5 text-center text-green-700 font-semibold">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="max-w-md mx-auto mt-5 text-center text-red-600 font-semibold">
            {{ session('error') }}
        </div>
    @endif

</div>

@endsection