@extends('layout.admin')

@section('content')
@php
    $user = $user ?? null;
    $lookupReferralCode = old('referral_code', $lookupReferralCode ?? '');
    $lookupAttempted = (bool) ($lookupAttempted ?? false);
    $withdrawHold = (int) ($user?->withdraw_hold ?? 0);
    $withdrawHoldReason = old('withdraw_hold_reason', $user?->withdraw_hold_reason);
@endphp

<div class="max-w-2xl mx-auto p-6 bg-white rounded shadow-md">
    <div class="flex items-center justify-between gap-3 mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Withdraw Hold</h2>
            <p class="text-sm text-gray-500 mt-1">রেফার কোড দিয়ে search করে user hold / unhold করুন</p>
        </div>
        <a href="{{ route('admin.users.withdraw-hold.index') }}"
           class="inline-flex items-center rounded-lg border border-gray-300 px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition">
            Reset
        </a>
    </div>

    @if(session('success'))
        <div class="mb-4 p-3 rounded bg-green-50 text-green-700 border border-green-200">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 p-3 rounded bg-red-50 text-red-700 border border-red-200">
            {{ session('error') }}
        </div>
    @endif

    <form method="GET" action="{{ route('admin.users.withdraw-hold.index') }}" class="mb-5 rounded-xl border border-blue-200 bg-blue-50 p-4">
        <label class="block mb-1 font-medium text-gray-700">Referral Code Search</label>
        <div class="flex flex-col gap-3 sm:flex-row">
            <input type="text" name="referral_code"
                   value="{{ $lookupReferralCode }}"
                   class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-blue-500"
                   placeholder="রেফার কোড লিখুন">
            <button type="submit"
                    class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700 transition">
                Search
            </button>
        </div>
        <p class="mt-2 text-xs text-gray-500">সার্চের পরে নিচে user detail আসবে, তারপর সেখান থেকেই hold/unhold submit করতে পারবেন।</p>
    </form>

    @if($lookupAttempted && !$user)
        <div class="mb-4 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
            এই referral code-এ কোনো user পাওয়া যায়নি।
        </div>
    @endif

    @if($user)
        <div class="mb-4 rounded-xl border border-orange-200 bg-orange-50 p-4">
            <div class="grid gap-2 text-sm text-gray-700 sm:grid-cols-2">
                <div><span class="font-semibold">Name:</span> {{ $user->name }}</div>
                <div><span class="font-semibold">User ID:</span> {{ $user->id }}</div>
                <div><span class="font-semibold">Referral:</span> {{ $user->referral_code ?: '—' }}</div>
                <div><span class="font-semibold">Mobile:</span> {{ $user->mobile ?: '—' }}</div>
            </div>
            <div class="mt-3 text-sm font-bold {{ $withdrawHold === 1 ? 'text-red-600' : 'text-green-600' }}">
                {{ $withdrawHold === 1 ? 'Withdraw Hold Active' : 'Withdraw Unhold Active' }}
            </div>
            @if(!empty($user->withdraw_hold_reason))
                <div class="mt-2 text-sm text-gray-700">
                    <span class="font-semibold">Current Reason:</span> {{ $user->withdraw_hold_reason }}
                </div>
            @endif
        </div>

        <form method="POST" action="{{ route('admin.users.withdraw-hold.update', $user->id) }}">
            @csrf

            <div class="mb-4">
                <label class="block mb-1 font-medium text-gray-700">Withdraw Hold</label>
                <select name="withdraw_hold"
                        class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-orange-500">
                    <option value="0" {{ $withdrawHold !== 1 ? 'selected' : '' }}>Withdraw Unhold</option>
                    <option value="1" {{ $withdrawHold === 1 ? 'selected' : '' }}>Withdraw Hold</option>
                </select>
                <p class="mt-2 text-xs text-gray-500">Hold করা থাকলে user withdraw submit করতে পারবে না।</p>
            </div>

            <div class="mb-4">
                <label class="block mb-1 font-medium text-gray-700">Withdraw Hold Reason</label>
                <textarea name="withdraw_hold_reason" rows="4"
                          class="w-full border rounded p-2 focus:ring-2 focus:ring-orange-500"
                          placeholder="Write why this account cannot withdraw">{{ $withdrawHoldReason }}</textarea>
                <p class="mt-2 text-xs text-gray-500">Hold থাকলে এই reason user withdraw page-এ দেখতে পাবে।</p>
            </div>

            <button type="submit"
                    class="w-full bg-orange-600 text-white font-semibold py-2 rounded hover:bg-orange-700 transition">
                Save Withdraw Hold
            </button>
        </form>
    @else
        <div class="rounded-xl border border-gray-200 bg-gray-50 p-5 text-sm text-gray-600">
            উপরে referral code লিখে search করুন, তারপর selected user-কে এখান থেকেই hold/unhold করতে পারবেন।
        </div>
    @endif
</div>

<script>
    (function () {
        const withdrawHoldSelect = document.querySelector('select[name="withdraw_hold"]');
        const withdrawHoldReason = document.querySelector('textarea[name="withdraw_hold_reason"]');

        const syncWithdrawHold = () => {
            if (!withdrawHoldSelect || !withdrawHoldReason) return;

            const isHeld = withdrawHoldSelect.value === '1';
            withdrawHoldReason.required = isHeld;
            withdrawHoldReason.placeholder = isHeld
                ? 'Write why this account cannot withdraw'
                : 'Select Withdraw Hold to write a reason';
            withdrawHoldReason.classList.toggle('bg-gray-100', !isHeld);
        };

        if (withdrawHoldSelect && withdrawHoldReason) {
            withdrawHoldSelect.addEventListener('change', syncWithdrawHold);
            syncWithdrawHold();
        }
    })();
</script>
@endsection
