@extends('layouts.app')

@section('title', 'Earnings & Wallet')

@section('content')
<div class="row g-4">
    @include('vendor.partials.sidebar-column')

    <div class="col-lg-9">
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <div>
                <h2 class="fw-bold mb-0">Earnings & Wallet</h2>
                <p class="text-muted small mb-0">Sales, settlements, withdrawals, and full payment ledger</p>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                <a href="{{ route('vendor.dashboard') }}" class="btn btn-light border btn-sm">
                    <i class="bi bi-arrow-left me-1"></i> Dashboard
                </a>
                @if($canRequestWithdrawal)
                    <button type="button" class="btn btn-success btn-sm shadow-sm" data-bs-toggle="modal" data-bs-target="#withdrawModal">
                        <i class="bi bi-bank me-1"></i> Request Withdrawal
                    </button>
                @else
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#withdrawBlockedModal">
                        <i class="bi bi-bank me-1"></i> Request Withdrawal
                    </button>
                @endif
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success border-0 shadow-sm py-2 small">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger border-0 shadow-sm py-2 small">{{ session('error') }}</div>
        @endif

        {{-- Wallet summary cards --}}
        <div class="row g-2 mb-3">
            <div class="col-md-6 col-xl-3">
                <div class="card border-0 shadow-sm bg-primary text-white h-100">
                    <div class="card-body py-3">
                        <small class="opacity-75 d-block">Available Wallet</small>
                        <h4 class="fw-bold mb-0">₹{{ number_format($walletBalance, 2) }}</h4>
                        <small class="opacity-75">Min withdrawal ₹{{ $minWithdrawal }}</small>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="card border-0 shadow-sm h-100 border-warning border-2">
                    <div class="card-body py-3">
                        <small class="text-muted d-block">Pending Settlement</small>
                        <h4 class="fw-bold mb-0 text-warning">₹{{ number_format($summary['pending_amount'], 2) }}</h4>
                        <small class="text-muted">Until delivery + return period</small>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body py-3">
                        <small class="text-muted d-block">Total Earnings (Net)</small>
                        <h4 class="fw-bold mb-0 text-success">₹{{ number_format($summary['total_earnings'], 2) }}</h4>
                        <small class="text-muted">After platform charges</small>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body py-3">
                        <small class="text-muted d-block">Total Withdrawn</small>
                        <h4 class="fw-bold mb-0">₹{{ number_format($summary['withdrawn_amount'], 2) }}</h4>
                        <small class="text-muted">Paid to bank</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-2 mb-3">
            <div class="col-md-4">
                <div class="card border-0 shadow-sm"><div class="card-body py-2 small">
                    <span class="text-muted">Today</span>
                    <div class="fw-bold">₹{{ number_format($breakdown['today_earnings'], 2) }}</div>
                </div></div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow-sm"><div class="card-body py-2 small">
                    <span class="text-muted">This Week</span>
                    <div class="fw-bold">₹{{ number_format($breakdown['weekly_earnings'], 2) }}</div>
                </div></div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow-sm"><div class="card-body py-2 small">
                    <span class="text-muted">This Month</span>
                    <div class="fw-bold">₹{{ number_format($breakdown['monthly_earnings'], 2) }}</div>
                </div></div>
            </div>
        </div>

        <ul class="nav nav-tabs mb-3 flex-wrap">
            @foreach(['overview' => 'Overview', 'sales' => 'Sales & Ledger', 'settlements' => 'Wallet Settlement', 'withdrawals' => 'Withdrawals', 'statement' => 'Statement'] as $key => $label)
            <li class="nav-item">
                <a class="nav-link {{ $tab === $key ? 'active' : '' }}" href="{{ route('vendor.earnings.index', array_merge(request()->except('tab', 'page', 'settlement_page', 'payout_page'), ['tab' => $key])) }}">
                    {{ $label }}
                </a>
            </li>
            @endforeach
        </ul>

        @if($tab === 'overview')
            @include('vendor.earnings.partials.tab-overview')
        @elseif($tab === 'sales')
            @include('vendor.earnings.partials.tab-sales')
        @elseif($tab === 'settlements')
            @include('vendor.earnings.partials.tab-settlements')
        @elseif($tab === 'withdrawals')
            @include('vendor.earnings.partials.tab-withdrawals')
        @elseif($tab === 'statement')
            @include('vendor.earnings.partials.tab-statement')
        @endif
    </div>
</div>

@include('vendor.earnings.partials.withdraw-modals')
@endsection