@extends('backEnd.layouts.master')
@section('title', 'Employee 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-chart-line me-2 text-primary"></i>Employee Performance</h4>
            <small class="text-muted">{{ $range['label'] }} — employee calls, confirm, cancel, cross-sale, confirmed amount</small>
        </div>
        <div class="d-flex gap-2 flex-wrap">
        @canany(['staff.performance.view', 'employee.commission.withdraw'])
        <a href="{{ route('admin.reports.employees') }}" class="btn btn-outline-dark btn-sm">
            <i class="fas fa-file-alt me-1"></i> Employee Reports
        </a>
        @endcanany
        @canany(['settings.update', 'employee.commission.settings'])
        <a href="{{ route('admin.employee-commission.settings') }}" class="btn btn-outline-primary btn-sm">
            <i class="fas fa-percent me-1"></i> Commission Settings
        </a>
        @endcanany
        @can('employee.commission.withdraw')
        <a href="{{ route('admin.employee-commission.withdrawals') }}" class="btn btn-outline-success btn-sm">
            <i class="fas fa-money-bill-wave me-1"></i> Withdraw Requests
        </a>
        @endcan
        @can('staff.performance.own')
        <a href="{{ route('admin.staff-performance.mine') }}" class="btn btn-outline-primary btn-sm">
            <i class="fas fa-chart-pie me-1"></i> My Performance
        </a>
        @endcan
        </div>
    </div>

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

    <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">Total Calls</div><div class="sp-metric-value text-primary">{{ number_format($totals['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($totals['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($totals['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($totals['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($totals['confirmed_amount'], 0) }}</div></div>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-header bg-transparent fw-semibold">Employee Summary</div>
        <div class="table-responsive">
            <table class="table table-hover sp-table mb-0">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th class="text-center">Calls</th>
                        <th class="text-center">Confirm</th>
                        <th class="text-center">Cancel</th>
                        <th class="text-center">Cross Sale</th>
                        <th class="text-end">Confirmed ৳</th>
                        <th class="text-end">Cross ৳</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($staffRows as $row)
                    <tr>
                        <td>
                            <div class="fw-semibold">{{ $row['name'] }}</div>
                            <div class="text-muted small">{{ $row['email'] }}</div>
                        </td>
                        <td class="text-center">{{ $row['calls'] }}</td>
                        <td class="text-center">{{ $row['confirms'] }}</td>
                        <td class="text-center">{{ $row['cancels'] }}</td>
                        <td class="text-center">{{ $row['cross_sales'] }}</td>
                        <td class="text-end fw-semibold">৳{{ number_format($row['confirmed_amount'], 0) }}</td>
                        <td class="text-end">৳{{ number_format($row['cross_sale_amount'], 0) }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="text-center text-muted py-4">No performance data for this period.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-transparent fw-semibold">Activity Log</div>
        <div class="table-responsive">
            <table class="table table-hover sp-table mb-0">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Employee</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>{{ $event->user?->name ?? '—' }}</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>
                            <div class="text-muted small">{{ $event->order->customer_phone }}</div>
                            @else
                            —
                            @endif
                        </td>
                        <td class="text-end">{{ $event->amount ? '৳'.number_format($event->amount, 0) : '—' }}</td>
                        <td class="small text-muted">
                            {{ $event->meta['note'] ?? '—' }}
                            @if(!empty($event->meta['logged_by_name']) && (int) ($event->meta['logged_by'] ?? 0) !== (int) $event->user_id)
                            <div class="text-muted">by {{ $event->meta['logged_by_name'] }}</div>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center text-muted py-4">No events found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($events->hasPages())
        <div class="card-footer bg-transparent">{{ $events->links() }}</div>
        @endif
    </div>
</div>
@endsection