@extends('layouts.app')

@section('title', 'Wallet Management - Admin')

@section('content')
<div class="row g-4">
    <!-- Left Sidebar: Menu -->
    <div class="col-lg-2">
        <div class="d-grid mb-4">
            <a href="{{ route('admin.dashboard') }}" class="btn btn-dark shadow-sm fw-bold btn-sm">
                <i class="bi bi-speedometer2 me-2"></i> Back to Dashboard
            </a>
        </div>

        <h5 class="fw-bold mb-3 text-secondary ps-2 small text-uppercase font-letter-spacing">Financial Desk</h5>
        <div class="list-group list-group-flush border rounded shadow-sm mb-4">
            <a href="{{ route('admin.wallets.index') }}" class="list-group-item list-group-item-action active fw-bold border-start border-4 border-primary">
                <i class="bi bi-wallet2 me-2"></i> All Wallets
            </a>
            <a href="{{ route('admin.payouts.index') }}" class="list-group-item list-group-item-action">
                <i class="bi bi-cash-stack me-2"></i> Payout Requests
            </a>
            <a href="{{ route('admin.refunds.index') }}" class="list-group-item list-group-item-action">
                <i class="bi bi-arrow-counterclockwise me-2"></i> Customer Refunds
            </a>
        </div>

        <div class="card border-0 shadow-sm bg-light mb-4">
            <div class="card-body">
                <small class="text-uppercase fw-bold text-muted d-block mb-2">Quick Adjustment</small>
                <button class="btn btn-primary w-100 btn-sm shadow-sm" data-bs-toggle="modal" data-bs-target="#adjustWalletModal">
                    <i class="bi bi-plus-slash-minus me-1"></i> Adjust Balance
                </button>
            </div>
        </div>
    </div>

    <!-- Center: Main Content (Wallets Table) -->
    <div class="col-lg-7">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="fw-bold mb-0">System Wallets</h2>
            <div class="btn-group shadow-sm">
                <button class="btn btn-white border dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    Filter Type
                </button>
                <ul class="dropdown-menu border-0 shadow">
                    <li><a class="dropdown-item" href="{{ route('admin.wallets.index') }}">All Wallets</a></li>
                    <li><a class="dropdown-item" href="{{ route('admin.wallets.index', ['type' => 'customer']) }}">Customer Wallets</a></li>
                    <li><a class="dropdown-item" href="{{ route('admin.wallets.index', ['type' => 'vendor']) }}">Vendor Wallets</a></li>
                </ul>
            </div>
        </div>

        <div class="card shadow-sm border-0 overflow-hidden">
            <div class="card-body p-0">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="bg-light text-muted small text-uppercase">
                        <tr>
                            <th class="ps-4 py-3">User Account</th>
                            <th>Role</th>
                            <th>Credit Balance</th>
                            <th>Last Activity</th>
                            <th class="text-end pe-4">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($wallets as $wallet)
                        <tr class="hover-lift-row">
                            <td class="ps-4">
                                <div class="d-flex align-items-center">
                                    <div class="bg-light rounded-circle p-2 me-3 text-primary d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                        <i class="bi bi-person-fill"></i>
                                    </div>
                                    <div>
                                        <div class="fw-bold text-dark">{{ $wallet->user->name }}</div>
                                        <small class="text-muted">{{ $wallet->user->email }}</small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-light text-dark border px-2 py-1 rounded-pill text-uppercase" style="font-size: 0.65rem;">
                                    {{ $wallet->user->role }}
                                </span>
                            </td>
                            <td>
                                <div class="fw-bold text-dark fs-5">₹{{ number_format($wallet->balance, 2) }}</div>
                            </td>
                            <td class="small text-muted">
                                {{ $wallet->latestTransaction?->created_at?->diffForHumans() ?? 'No activity' }}
                            </td>
                            <td class="text-end pe-4">
                                <button class="btn btn-sm btn-white border px-3 adjust-btn" 
                                        data-user-id="{{ $wallet->user_id }}" 
                                        data-user-name="{{ $wallet->user->name }}"
                                        data-bs-toggle="modal" 
                                        data-bs-target="#adjustWalletModal">
                                    Adjust
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <div class="display-1 text-muted opacity-10 mb-4"><i class="bi bi-wallet2"></i></div>
                                <h4 class="fw-bold">No Wallets Active</h4>
                                <p class="text-muted">Wallets are automatically created when transactions occur.</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($wallets->hasPages())
                <div class="card-footer bg-white py-3 border-0">
                    {{ $wallets->links('pagination::bootstrap-5') }}
                </div>
            @endif
        </div>
    </div>

    <!-- Right Sidebar: Financial Insights -->
    <div class="col-lg-3">
        <h5 class="fw-bold mb-3 ps-1">Financial Intelligence</h5>
        
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 border-0">
                <h6 class="fw-bold mb-0 small text-uppercase"><i class="bi bi-pie-chart me-2 text-primary"></i>Wallet Distribution</h6>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-2">
                    <small class="text-muted">Total System Liability</small>
                    <small class="fw-bold">₹{{ number_format(\App\Models\Wallet::sum('balance'), 2) }}</small>
                </div>
                <div class="progress" style="height: 6px;">
                    <div class="progress-bar bg-primary" style="width: 70%"></div>
                    <div class="progress-bar bg-info" style="width: 30%"></div>
                </div>
                <div class="mt-3 d-flex gap-3">
                    <div class="small"><i class="bi bi-circle-fill text-primary me-1" style="font-size: 0.5rem;"></i> Vendors</div>
                    <div class="small"><i class="bi bi-circle-fill text-info me-1" style="font-size: 0.5rem;"></i> Customers</div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 border-0">
                <h6 class="fw-bold mb-0 small text-uppercase"><i class="bi bi-clock-history me-2 text-primary"></i>Recent Reports</h6>
            </div>
            <div class="list-group list-group-flush px-3 pb-3">
                 <div class="bg-light rounded p-2 mb-2 small d-flex justify-content-between">
                    <span>Deposit Volume</span>
                    <span class="fw-bold text-success">+$2,400</span>
                 </div>
                 <div class="bg-light rounded p-2 mb-2 small d-flex justify-content-between">
                    <span>Withdrawal Rate</span>
                    <span class="fw-bold text-danger">-$1,120</span>
                 </div>
                 <div class="bg-light rounded p-2 small d-flex justify-content-between">
                    <span>Settled Today</span>
                    <span class="fw-bold text-primary">14 Wallets</span>
                 </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm bg-indigo text-white p-4" style="background-color: #4f46e5;">
             <h6 class="fw-bold mb-2"><i class="bi bi-shield-lock me-2"></i>Safe Adjustments</h6>
             <p class="small opacity-75 mb-0">Every manual wallet adjustment is logged in the system activity for audit purposes.</p>
        </div>
    </div>
</div>

<!-- Adjustment Modal -->
<div class="modal fade" id="adjustWalletModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <form action="{{ route('admin.wallets.adjust') }}" method="POST">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">Wallet Adjustment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4 pt-2">
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Select User</label>
                        <select name="user_id" id="modal_user_id" class="form-select" required>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-6">
                            <label class="form-label small fw-bold">Adjustment Type</label>
                            <select name="type" class="form-select" required>
                                <option value="credit">Credit (+)</option>
                                <option value="debit">Debit (-)</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label small fw-bold">Amount ($)</label>
                            <input type="number" step="0.01" name="amount" class="form-control" placeholder="0.00" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Adjustment Reason</label>
                        <textarea name="description" class="form-control" rows="3" placeholder="Explain why this adjustment is being made..." required></textarea>
                    </div>
                    <div class="text-end">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary px-4 shadow-sm">Execute Adjustment</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const adjustBtns = document.querySelectorAll('.adjust-btn');
        const modalUserId = document.getElementById('modal_user_id');
        
        adjustBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const userId = this.getAttribute('data-user-id');
                modalUserId.value = userId;
            });
        });
    });
</script>

<style>
    .hover-lift-row { transition: all 0.2s ease; }
    .hover-lift-row:hover { background-color: rgba(79, 70, 229, 0.03)!important; transform: translateX(5px); }
</style>
@endsection