@extends('backend.master')
@section('title','Balance Adjust')

@section('content')
    {{-- Bootstrap Icons + Font Awesome চাইলে --}}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
          integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
          crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        :root{
            --primary:#e53935;
            --bg:#f5f5f5;
            --ink:#111827;
            --muted:#6b7280;
        }
        *{box-sizing:border-box;}
        body{background:var(--bg);}
        .page-wrap{
            max-width:960px;
            margin:20px auto 40px;
            padding:0 12px;
        }
        .card-main{
            background:#fff;
            border-radius:20px;
            padding:18px 18px 20px;
            box-shadow:0 12px 32px rgba(15,23,42,.10);
            border:1px solid #e5e7eb;
        }
        .card-header-custom{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:14px;
        }
        .title{
            font-size:18px;
            font-weight:700;
            color:var(--ink);
        }
        .subtitle{
            font-size:13px;
            color:var(--muted);
        }

        .search-bar{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin:10px 0 16px;
        }
        .search-input{
            flex:1 1 220px;
        }
        .avatar-sm{
            width:52px;height:52px;border-radius:999px;overflow:hidden;
            background:#fee2e2;display:flex;align-items:center;justify-content:center;
            font-weight:700;color:#b91c1c;
        }
        .avatar-sm img{width:100%;height:100%;object-fit:cover;}
        .badge-role{
            display:inline-flex;align-items:center;gap:6px;
            border-radius:999px;padding:3px 10px;font-size:11px;
            background:#fef2f2;color:#b91c1c;
        }
        .stat-pill{
            display:inline-flex;flex-direction:column;
            padding:8px 12px;border-radius:14px;background:#f9fafb;
            border:1px solid #e5e7eb;font-size:12px;min-width:120px;
        }
        .stat-label{color:#6b7280;font-size:11px;}
        .stat-value{font-weight:700;color:#111827;font-size:14px;}

        .type-toggle{
            display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;
        }
        .type-btn{
            border-radius:999px;border:1px solid #e5e7eb;
            padding:7px 14px;font-size:13px;font-weight:600;
            cursor:pointer;background:#fff;display:inline-flex;align-items:center;gap:6px;
        }
        .type-btn i{font-size:14px;}
        .type-btn.active{
            border-color:#fed7d7;
            background:linear-gradient(135deg,#ff6b6b,#e11d48);
            color:#fff;
            box-shadow:0 10px 24px rgba(248,113,113,.45);
        }

        .flash-success{
            margin-bottom:10px;border-radius:10px;padding:8px 12px;
            background:#ecfdf5;color:#166534;font-size:13px;border:1px solid #bbf7d0;
        }
        .flash-error{
            margin-bottom:10px;border-radius:10px;padding:8px 12px;
            background:#fef2f2;color:#b91c1c;font-size:13px;border:1px solid #fecaca;
        }

        .btn-submit{
            border:none;border-radius:999px;padding:10px 18px;
            font-size:14px;font-weight:600;color:#fff;
            background:linear-gradient(135deg,#ef4444,#e11d48);
            box-shadow:0 10px 26px rgba(248,113,113,.45);
        }
        .btn-submit:hover{filter:brightness(1.04);}
    </style>

    <div class="page-wrap">
        <div class="card-main">

            <div class="card-header-custom">
                <div>
                    <div class="title">
                        <i class="fa-solid fa-wallet"></i> Balance Adjust
                    </div>
                    <div class="subtitle">
                        Admin panel থেকে user balance <strong>add (credit)</strong> অথবা <strong>return (debit)</strong> করতে পারবে।
                    </div>
                </div>
            </div>

            {{-- flash --}}
            @if(session('success'))
                <div class="flash-success">
                    <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
                </div>
            @endif
            @if($errors->has('amount'))
                <div class="flash-error">
                    <i class="fa-solid fa-triangle-exclamation"></i> {{ $errors->first('amount') }}
                </div>
            @endif

            {{-- Search user --}}
            <form method="GET" class="search-bar">
                <div class="search-input">
                    <label class="form-label mb-1" style="font-size:13px;font-weight:600;">
                        User খুঁজুন (Phone / Email / ID)
                    </label>
                    <input type="text"
                           name="q"
                           value="{{ $query }}"
                           class="form-control form-control-sm"
                           placeholder="e.g. 017xxxxxxxx / user@mail.com / 5">
                </div>
                <div style="align-self:flex-end;">
                    <button class="btn btn-sm btn-outline-secondary">
                        <i class="fa-solid fa-magnifying-glass"></i> Search
                    </button>
                </div>
            </form>

            @if($query && ! $user)
                <p class="text-muted" style="font-size:13px;">
                    কোনো user পাওয়া যায়নি: <strong>{{ $query }}</strong>
                </p>
            @endif

            @if($user)
                {{-- User card + form --}}
                <hr class="my-3">

                <div class="d-flex flex-wrap align-items-center gap-3 mb-3">
                    <div class="avatar-sm">
                        @if($user->avatar)
                            <img src="{{ asset('storage/'.$user->avatar) }}" alt="">
                        @else
                            {{ strtoupper(substr($user->name,0,1)) }}
                        @endif
                    </div>
                    <div style="flex:1 1 200px;min-width:0;">
                        <div style="font-weight:600;color:#111827;">{{ $user->name }} (ID: {{ $user->id }})</div>
                        <div style="font-size:13px;color:#6b7280;">
                            <i class="fa-solid fa-phone"></i> {{ $user->country_code }} {{ $user->phone }}
                            @if($user->email)
                                · <i class="fa-solid fa-envelope"></i> {{ $user->email }}
                            @endif
                        </div>
                        <div class="mt-1">
                            <span class="badge-role">
                                <i class="fa-solid fa-user-shield"></i> {{ ucfirst($user->role) }}
                            </span>
                        </div>
                    </div>

                    <div class="d-flex flex-wrap gap-2">
                        <div class="stat-pill">
                            <span class="stat-label">Current balance</span>
                            <span class="stat-value">
                                {{ number_format($user->balance) }} BDT
                            </span>
                        </div>
                        <div class="stat-pill">
                            <span class="stat-label">Loan limit</span>
                            <span class="stat-value">
                                {{ number_format($user->loan_limit) }} BDT
                            </span>
                        </div>
                    </div>
                </div>

                <form action="{{ route('admin.balance.adjust.apply', $user) }}" method="POST" class="mt-2">
                    @csrf

                    {{-- Type: credit / debit --}}
                    <label class="form-label" style="font-size:13px;font-weight:600;">
                        Action type
                    </label>
                    <div class="type-toggle mb-2">
                        @php $oldType = old('type','credit'); @endphp
                        <button type="button"
                                class="type-btn {{ $oldType === 'credit' ? 'active' : '' }}"
                                data-type="credit">
                            <i class="fa-solid fa-circle-plus"></i> Add balance (Credit)
                        </button>
                        <button type="button"
                                class="type-btn {{ $oldType === 'debit' ? 'active' : '' }}"
                                data-type="debit">
                            <i class="fa-solid fa-circle-minus"></i> Return / minus (Debit)
                        </button>
                    </div>
                    <input type="hidden" name="type" id="typeField" value="{{ $oldType }}">

                    {{-- Amount --}}
                    <div class="mb-3">
                        <label class="form-label">Amount (BDT)</label>
                        <input type="number"
                               name="amount"
                               value="{{ old('amount') }}"
                               class="form-control form-control-sm @error('amount') is-invalid @enderror"
                               min="1"
                               placeholder="e.g. 500"
                               required>
                        @error('amount')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text">
                            Debit করলে amount user-এর current balance-এর বেশি হওয়া যাবে না।
                        </small>
                    </div>

                    {{-- Reason --}}
                    <div class="mb-3">
                        <label class="form-label">Reason / Note (optional)</label>
                        <input type="text"
                               name="reason"
                               value="{{ old('reason') }}"
                               class="form-control form-control-sm"
                               placeholder="e.g. Manual bonus, adjustment, refund...">
                    </div>

                    <button type="submit" class="btn-submit">
                        <i class="fa-solid fa-floppy-disk"></i> Apply change
                    </button>
                </form>
            @endif
        </div>
    </div>

    <script>
        // credit / debit toggle
        (function(){
            const buttons = document.querySelectorAll('.type-btn');
            const typeField = document.getElementById('typeField');
            buttons.forEach(btn=>{
                btn.addEventListener('click', ()=>{
                    const t = btn.getAttribute('data-type');
                    typeField.value = t;
                    buttons.forEach(b=>b.classList.remove('active'));
                    btn.classList.add('active');
                });
            });
        })();
    </script>
@endsection