@extends('frontend.layout_2')

@section('sub_layout')
    <style>
        :root {
            --primary:#DC3431;
            --primary-soft:#fee2e2;
            --bg:#f3f4f6;
        }
        * { box-sizing:border-box;margin:0;padding:0; }
        body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg); }

        .page { max-width:900px;margin:30px auto 150px;padding:0 12px; }

        .card {
            background:#ffffff;
            border-radius:18px;
            padding:16px 18px;
            box-shadow:0 10px 25px rgba(15,23,42,.06);
            border:1px solid #e5e7eb;
            margin-bottom:14px;
        }

        .flex { display:flex;gap:16px;flex-wrap:wrap; }

        .box {
            flex:1 1 250px;
            border-radius:18px;
            padding:16px;
            background:linear-gradient(135deg,#ffffff,#f9fafb);
            border:1px solid #e5e7eb;
            box-shadow:0 10px 25px rgba(15,23,42,.07);
        }

        .box-title {
            font-size:13px;
            color:#6b7280;
            margin-bottom:6px;
            text-transform:uppercase;
            letter-spacing:.05em;
            display:flex;
            align-items:center;
            gap:6px;
        }
        .box-title i{ font-size:15px;color:var(--primary); }

        .box-big { font-size:22px;font-weight:700;color:#111827; }

        .btn-row { display:flex;gap:12px;margin-top:12px;flex-wrap:wrap; }

        .btn {
            border:none;
            border-radius:999px;
            padding:10px 16px;
            font-size:14px;
            cursor:pointer;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:6px;
            transition:all .18s ease;
            box-shadow:0 4px 10px rgba(15,23,42,.08);
            white-space:nowrap;
        }
        .btn i{ font-size:16px; }

        .btn-white {
            background:#ffffff;
            border:1px solid #e5e7eb;
            color:#374151;
        }
        .btn-white:hover {
            background:#f3f4f6;
            transform:translateY(-1px);
            box-shadow:0 6px 14px rgba(15,23,42,.12);
        }

        .btn-primary {
            background:var(--primary);
            color:#fff;
            flex:1;
        }
        .btn-primary:hover {
            background:#b91c1c;
            transform:translateY(-1px);
            box-shadow:0 6px 14px rgba(220,38,38,.45);
        }

        .methods-section-title{
            font-size:13px;
            font-weight:600;
            color:#4b5563;
            margin:10px 0 6px;
        }

        .methods { display:flex;gap:12px;margin-top:4px;flex-wrap:wrap; }

        .method {
            flex:1 1 130px;
            border-radius:16px;
            background:#ffffff;
            border:1px solid #e5e7eb;
            padding:14px 10px;
            text-align:center;
            cursor:pointer;
            transition:all .18s ease;
            position:relative;
            font-size:13px;
            font-weight:600;
            color:#111827;
        }
        .method img{
            display:block;
            margin:0 auto 6px;
            max-height:30px;
        }
        .method small{
            display:block;
            font-size:11px;
            color:#6b7280;
            margin-top:1px;
        }
        .method::after{
            content:"";
            position:absolute;
            inset:0;
            border-radius:inherit;
            pointer-events:none;
            opacity:0;
            border:2px solid var(--primary);
            transition:opacity .18s ease;
        }
        .method:hover{
            transform:translateY(-1px);
            box-shadow:0 8px 18px rgba(15,23,42,.08);
        }
        .method.active{
            background:#fff;
            border-color:var(--primary-soft);
            box-shadow:0 10px 22px rgba(220,38,38,.12);
        }
        .method.active::after{ opacity:1; }

        .method.error-border{ border-color:#dc2626 !important; }

        .form-group { margin-top:10px; }

        .label {
            font-size:13px;
            color:#4b5563;
            margin-bottom:4px;
            display:block;
            font-weight:500;
        }

        .input-box {
            background:#f9fafb;
            color:#111827;
            border-radius:12px;
            padding:10px 14px;
            font-size:15px;
            border:1px solid #e5e7eb;
            display:flex;
            align-items:center;
            transition:all .18s ease;
        }
        .input-box input {
            border:none;
            background:transparent;
            color:#111827;
            width:100%;
            font-size:15px;
        }
        .input-box input::placeholder{ color:#9ca3af; }
        .input-box input:focus { outline:none; }
        .input-box:focus-within{
            border-color:var(--primary);
            box-shadow:0 0 0 1px rgba(220,38,38,.15),0 10px 24px rgba(15,23,42,.10);
            background:#ffffff;
        }

        .hint { font-size:11px;color:#9ca3af;margin-top:4px; }

        .main-btn {
            width:100%;
            margin-top:16px;
            border:none;
            border-radius:999px;
            padding:14px;
            font-size:16px;
            font-weight:600;
            background:linear-gradient(135deg,#ef4444,#dc2626);
            color:#fff;
            cursor:pointer;
            box-shadow:0 12px 28px rgba(220,38,38,.35);
            transition:all .2s ease;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:8px;
        }
        .main-btn i{ font-size:18px; }
        .main-btn:hover{
            transform:translateY(-1px);
            box-shadow:0 16px 34px rgba(185,28,28,.45);
        }
        .main-btn:active{
            transform:translateY(0);
            box-shadow:0 8px 18px rgba(185,28,28,.35);
        }

        .error { margin-top:8px;font-size:13px;color:#dc2626; }

        @media (max-width:640px){
            .box{ flex:1 1 100%; }
        }
    </style>

    <div class="page">
        {{-- balance cards --}}
        <div class="flex" style="margin-bottom: 20px;">
            <div class="box">
                <div class="box-title">
                    <i class="bi bi-wallet2"></i>
                    <span>Available Balance</span>
                </div>
                <div class="box-big">{{ number_format($availableBalance, 2) }} BDT</div>
                <div class="btn-row">
                    <button type="button" class="btn btn-white" onclick="setPercent(50)">
                        <i class="bi bi-arrow-down-circle"></i>
                        <span>Withdraw 50%</span>
                    </button>
                    <button type="button" class="btn btn-primary" onclick="setPercent(100)">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Withdraw All</span>
                    </button>
                </div>
            </div>

            <div class="box">
                <div class="box-title">
                    <i class="bi bi-arrow-up-right-circle"></i>
                    <span>Total Withdrawn</span>
                </div>
                <div class="box-big">{{ number_format($totalWithdrawn, 2) }} BDT</div>
                <div style="font-size:11px;color:#777;margin-top:4px;">Your lifetime withdrawn</div>
            </div>
        </div>

        <form action="{{ route('withdraw.store') }}" method="POST" id="withdrawForm">
            @csrf

            {{-- payment method --}}
            <div class="card">
                <div style="font-weight:600;margin-bottom:4px;">পেমেন্ট মেথড সিলেক্ট করুন</div>

                {{-- Mobile methods --}}
                @if($mobileMethods->count())
                    <div class="methods-section-title">Mobile Banking Withdraw</div>
                    <div class="methods">
                        @foreach($mobileMethods as $m)
                            @php
                                $value   = 'mobile:'.$m->slug;
                                $logo    = $m->logo ? (preg_match('/^(https?:\/\/|\/)/i',$m->logo) ? $m->logo : asset('storage/'.$m->logo)) : null;
                                $checked = old('method') === $value;
                            @endphp
                            <label class="method {{ $checked ? 'active' : '' }}" data-type="mobile">
                                @if($logo)
                                    <img src="{{ $logo }}" alt="{{ $m->name }}">
                                @endif
                                <span>{{ $m->name }}</span>
                                <small>Mobile</small>
                                <input type="radio" name="method" value="{{ $value }}" style="display:none"
                                       {{ $checked ? 'checked' : '' }}>
                            </label>
                        @endforeach
                    </div>
                @endif

                {{-- Bank methods --}}
                @if($bankMethods->count())
                    <div class="methods-section-title" style="margin-top:12px;">Bank Withdraw</div>
                    <div class="methods">
                        @foreach($bankMethods as $b)
                            @php
                                $value   = 'bank:'.$b->slug;
                                $logo    = $b->logo ? (preg_match('/^(https?:\/\/|\/)/i',$b->logo) ? $b->logo : asset('storage/'.$b->logo)) : null;
                                $checked = old('method') === $value;
                            @endphp
                            <label class="method {{ $checked ? 'active' : '' }}" data-type="bank">
                                @if($logo)
                                    <img src="{{ $logo }}" alt="{{ $b->bank_name }}">
                                @endif
                                <span>{{ $b->bank_name }}</span>
                                <small>Bank</small>
                                <input type="radio" name="method" value="{{ $value }}" style="display:none"
                                       {{ $checked ? 'checked' : '' }}>
                            </label>
                        @endforeach
                    </div>
                @endif

                <div class="error" id="methodError">
                    @error('method')
                        {{ $message }}
                    @enderror
                </div>
            </div>

            {{-- account fields --}}
            <div class="card">
                <div class="form-group">
                    <span class="label">একাউন্ট / মোবাইল নম্বর</span>
                    <div class="input-box">
                        <input type="text" name="account_number"
                               value="{{ old('account_number', auth()->user()->phone) }}"
                               placeholder="আপনার একাউন্ট / মোবাইল নম্বর লিখুন">
                    </div>
                    <div class="hint" id="accountHintMobile">
                        মোবাইল হলে ১১ ডিজিট নম্বর দিন।
                    </div>
                    <div class="hint" id="accountHintBank" style="display:none;">
                        ব্যাংক হলে সম্পূর্ণ অ্যাকাউন্ট নম্বর লিখুন।
                    </div>
                    @error('account_number')
                        <div class="error">{{ $message }}</div>
                    @enderror
                </div>

                {{-- শুধু bank এর জন্য extra field --}}
                <div class="form-group bank-only" style="display:none;">
                    <span class="label">Account holder (Bank)</span>
                    <div class="input-box">
                        <input type="text" name="account_holder"
                               value="{{ old('account_holder') }}"
                               placeholder="Account holder নাম লিখুন">
                    </div>
                    @error('account_holder')
                        <div class="error">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group bank-only" style="display:none;">
                    <span class="label">Branch name</span>
                    <div class="input-box">
                        <input type="text" name="branch_name"
                               value="{{ old('branch_name') }}"
                               placeholder="Branch নাম লিখুন">
                    </div>
                    @error('branch_name')
                        <div class="error">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            {{-- amount --}}
            <div class="card">
                <div class="form-group">
                    <span class="label">এমাউন্ট (BDT)</span>
                    <div class="input-box">
                        <input type="number" name="amount" id="amountInput"
                               value="{{ old('amount') }}" placeholder="e.g. 500">
                    </div>
                    <div class="hint">
                        Minimum 50 BDT • আপনার ব্যালেন্স: {{ number_format($availableBalance, 2) }} BDT
                    </div>
                    @error('amount')
                        <div class="error">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <button type="submit" class="main-btn">
                <i class="bi bi-cash-stack"></i>
                <span>Withdraw</span>
            </button>
        </form>
    </div>

    <script>
        function setPercent(percent) {
            var max = {{ (int)$availableBalance }};
            var input = document.getElementById('amountInput');
            input.value = Math.floor(max * percent / 100);
        }

        const methods = document.querySelectorAll('.method');
        const methodError = document.getElementById('methodError');
        const bankOnlyEls = document.querySelectorAll('.bank-only');
        const accountHintMobile = document.getElementById('accountHintMobile');
        const accountHintBank   = document.getElementById('accountHintBank');

        function updateAccountFields() {
            const selected = document.querySelector('input[name="method"]:checked');
            const isBank   = selected && selected.value.startsWith('bank:');

            bankOnlyEls.forEach(el => el.style.display = isBank ? 'block' : 'none');
            if (accountHintMobile && accountHintBank) {
                accountHintMobile.style.display = isBank ? 'none' : 'block';
                accountHintBank.style.display   = isBank ? 'block' : 'none';
            }
        }

        methods.forEach(m => {
            m.addEventListener('click', function () {
                methods.forEach(x => {
                    x.classList.remove('active');
                    x.classList.remove('error-border');
                });
                this.classList.add('active');
                const radio = this.querySelector('input[type=radio]');
                if (radio) radio.checked = true;

                if (methodError) methodError.textContent = '';

                updateAccountFields();
            });
        });

        // ফর্ম সাবমিটের আগে method চেক
        const withdrawForm = document.getElementById('withdrawForm');
        withdrawForm.addEventListener('submit', function (e) {
            const selected = document.querySelector('input[name="method"]:checked');
            if (!selected) {
                e.preventDefault();
                if (methodError) {
                    methodError.textContent = 'অনুগ্রহ করে একটি পেমেন্ট মেথড সিলেক্ট করুন।';
                }
                methods.forEach(x => x.classList.add('error-border'));
            }
        });

        // পেজ লোডে (old value থাকলে) update করো
        document.addEventListener('DOMContentLoaded', updateAccountFields);
    </script>
@endsection