@extends('backEnd.layouts.master')
@section('title', 'My Performance')

@push('styles')
<style>
.sp-metric {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    height: 100%;
}
.sp-metric-label { font-size: 12px; color: #6b7280; font-weight: 600; margin-bottom: 4px; }
.sp-metric-value { font-size: 24px; font-weight: 800; color: #111827; line-height: 1.1; }
.sp-metric-value.text-success { color: #15803d; }
.sp-metric-value.text-danger { color: #dc2626; }
.sp-metric-value.text-primary { color: #2563eb; }
.sp-table { font-size: 12px; }
.sp-table thead th { background: #f3f4f6; white-space: nowrap; }
</style>
@endpush

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="fw-bold mb-0"><i class="fas fa-user-chart me-2 text-primary"></i>My Performance</h4>
            <small class="text-muted">{{ $range['label'] }} — আপনার calls, confirm, cancel, cross-sale</small>
        </div>
        @can('staff.performance.view')
        <a href="{{ route('admin.staff-performance.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-users me-1"></i> All Employees
        </a>
        @endcan
    </div>

    @include('backEnd.staff-performance.partials.filters', [
        'action' => route('admin.staff-performance.mine'),
        'filter' => $filter,
        'staffList' => null,
        'userId' => 0,
    ])

    <div class="row g-3 mb-3">
        <div class="col-6 col-md-4 col-xl-2">
            <div class="sp-metric"><div class="sp-metric-label">Calls</div><div class="sp-metric-value text-primary">{{ number_format($summary['calls']) }}</div></div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="sp-metric"><div class="sp-metric-label">Confirmed</div><div class="sp-metric-value text-success">{{ number_format($summary['confirms']) }}</div></div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="sp-metric"><div class="sp-metric-label">Cancelled</div><div class="sp-metric-value text-danger">{{ number_format($summary['cancels']) }}</div></div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="sp-metric"><div class="sp-metric-label">Cross Sales</div><div class="sp-metric-value">{{ number_format($summary['cross_sales']) }}</div></div>
        </div>
        <div class="col-12 col-md-8 col-xl-4">
            <div class="sp-metric"><div class="sp-metric-label">Confirmed Amount</div><div class="sp-metric-value text-success">৳{{ number_format($summary['confirmed_amount'], 0) }}</div></div>
        </div>
    </div>

    </div>

    @if($commissionSettings['enabled'] ?? false)
    <div class="card shadow-sm border-0 mb-3">
        <div class="card-header bg-transparent fw-semibold"><i class="fas fa-wallet me-1 text-success"></i> My Wallet</div>
        <div class="card-body">
            <div class="row g-3 mb-3">
                <div class="col-6 col-md-3">
                    <div class="sp-metric"><div class="sp-metric-label">Available</div><div class="sp-metric-value text-success">৳{{ number_format($wallet['available'] ?? 0, 0) }}</div></div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="sp-metric"><div class="sp-metric-label">Pending (not delivered)</div><div class="sp-metric-value text-primary">৳{{ number_format($wallet['pending_commission'] ?? 0, 0) }}</div></div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="sp-metric"><div class="sp-metric-label">Total Earned</div><div class="sp-metric-value">৳{{ number_format($wallet['total_earned'] ?? 0, 0) }}</div></div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="sp-metric"><div class="sp-metric-label">Total Withdrawn</div><div class="sp-metric-value">৳{{ number_format($wallet['total_withdrawn'] ?? 0, 0) }}</div></div>
                </div>
            </div>
            <div class="small text-muted mb-3">
                Commission rate: <strong>{{ number_format($commissionSettings['commission_percent'] ?? 0, 2) }}%</strong> per extra cross-sale product line (after delivery).
                @if(!empty($commissionSettings['withdraw_note']))
                <br>{{ $commissionSettings['withdraw_note'] }}
                @endif
            </div>
            <form method="POST" action="{{ route('admin.staff-performance.withdraw') }}" class="row g-2 align-items-end">
                @csrf
                <div class="col-md-3">
                    <label class="form-label small fw-semibold">Withdraw amount (min ৳{{ number_format($commissionSettings['min_withdraw_amount'] ?? 0, 0) }})</label>
                    <input type="number" name="amount" class="form-control form-control-sm" min="{{ (int) ($commissionSettings['min_withdraw_amount'] ?? 0) }}" step="1" required>
                </div>
                <div class="col-md-5">
                    <label class="form-label small fw-semibold">Note (optional)</label>
                    <input type="text" name="note" class="form-control form-control-sm" maxlength="500" placeholder="bKash number / note">
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-success btn-sm"><i class="fas fa-paper-plane me-1"></i> Request Withdraw</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-header bg-transparent fw-semibold">Commission History</div>
        <div class="table-responsive">
            <table class="table table-hover sp-table mb-0">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Order</th>
                        <th>Product</th>
                        <th class="text-center">Delivery</th>
                        <th class="text-end">Line ৳</th>
                        <th class="text-center">%</th>
                        <th class="text-end">Commission</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($commissions as $c)
                    @php
                        $orderStatus = $c->order ? (int) $c->order->order_status : null;
                        $delivered = $orderStatus === \App\Models\Order::STATUS_DELIVERED;
                    @endphp
                    <tr>
                        <td>{{ $c->created_at->format('d M Y') }}</td>
                        <td><a href="{{ route('admin.orders.show', $c->order_id) }}">#{{ $c->order?->invoice_id ?? $c->order_id }}</a></td>
                        <td>{{ $c->product_name }}</td>
                        <td class="text-center">
                            <span class="badge {{ $delivered ? 'bg-success' : 'bg-light text-dark border' }}">
                                {{ $delivered ? 'Delivered' : ($c->order ? \App\Models\Order::statusLabel($orderStatus) : '—') }}
                            </span>
                        </td>
                        <td class="text-end">৳{{ number_format($c->line_total, 0) }}</td>
                        <td class="text-center">{{ number_format($c->commission_percent, 1) }}%</td>
                        <td class="text-end fw-semibold">৳{{ number_format($c->commission_amount, 0) }}</td>
                        <td><span class="badge bg-light text-dark border">{{ $c->statusLabel() }}</span></td>
                    </tr>
                    @empty
                    <tr><td colspan="8" class="text-center text-muted py-3">No commission yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if($withdrawRequests->isNotEmpty())
    <div class="card shadow-sm border-0 mb-3">
        <div class="card-header bg-transparent fw-semibold">My Withdraw Requests</div>
        <div class="table-responsive">
            <table class="table table-hover sp-table mb-0">
                <thead><tr><th>Date</th><th class="text-end">Amount</th><th>Status</th><th>Note</th></tr></thead>
                <tbody>
                    @foreach($withdrawRequests as $wr)
                    <tr>
                        <td>{{ $wr->created_at->format('d M Y') }}</td>
                        <td class="text-end">৳{{ number_format($wr->amount, 0) }}</td>
                        <td><span class="badge {{ $wr->statusBadgeClass() }}">{{ $wr->statusLabel() }}</span></td>
                        <td class="small">{{ $wr->employee_note ?: '—' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif
    @endif

    <div class="alert alert-info small mb-3">
        <i class="fas fa-info-circle me-1"></i>
        Customer Support Hub → <strong>Call</strong> দিয়ে call log করুন (timer + outcome)। Cross-sale = confirm-এর আগে extra product add করলে auto track + commission pending হবে।
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-transparent fw-semibold">My Activity</div>
        <div class="table-responsive">
            <table class="table table-hover sp-table mb-0">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Type</th>
                        <th>Order</th>
                        <th class="text-end">Amount</th>
                        <th>Note</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($events as $event)
                    <tr>
                        <td>{{ $event->created_at->format('d M, g:i A') }}</td>
                        <td><span class="badge bg-light text-dark border">{{ $event->typeLabel() }}</span></td>
                        <td>
                            @if($event->order)
                            <a href="{{ route('admin.orders.show', $event->order_id) }}">#{{ $event->order->invoice_id ?? $event->order_id }}</a>
                            @else
                            —
                            @endif
                        </td>
                        <td class="text-end">{{ $event->amount ? '৳'.number_format($event->amount, 0) : '—' }}</td>
                        <td class="small text-muted">{{ $event->meta['note'] ?? '—' }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="5" class="text-center text-muted py-4">No activity yet for this period.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($events->hasPages())
        <div class="card-footer bg-transparent">{{ $events->links() }}</div>
        @endif
    </div>
</div>
@endsection