@extends('layouts.admin')

@section('title', 'Salesman Performance Report')

@section('content')
<div class="admin-page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <h1>Salesman Performance Report</h1>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.reports.salesman.export-csv', request()->only(['start_date', 'end_date', 'period', 'staff_id'])) }}" class="btn btn-success">
            <i class="bi bi-download"></i> Export CSV
        </a>
        @can('reports.profit')
        <a href="{{ route('admin.reports.profit') }}" class="btn btn-outline-primary">
            <i class="bi bi-graph-up"></i> Profit Reports
        </a>
        @endcan
    </div>
</div>

<!-- Filters -->
<div class="admin-card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('admin.reports.salesman') }}" class="row g-3 justify-content-end">
            <div class="col-md-3 col-lg-2"> 
                <label for="period" class="form-label">Period</label>
                <select name="period" id="period" class="form-select" onchange="toggleCustomDates()">
                    <option value="day" {{ $period === 'day' ? 'selected' : '' }}>Today</option>
                    <option value="week" {{ $period === 'week' ? 'selected' : '' }}>This Week</option>
                    <option value="month" {{ $period === 'month' ? 'selected' : '' }}>This Month</option>
                    <option value="year" {{ $period === 'year' ? 'selected' : '' }}>This Year</option>
                    <option value="custom" {{ $period === 'custom' ? 'selected' : '' }}>Custom Range</option>
                </select>
            </div>
            
            <div class="col-md-3 col-lg-2" id="startDateDiv" style="{{ $period === 'custom' ? '' : 'display: none;' }}">
                <label for="start_date" class="form-label">Start Date</label>
                <input type="date" name="start_date" id="start_date" class="form-control" value="{{ $startDate }}">
            </div>
            
            <div class="col-md-3 col-lg-2" id="endDateDiv" style="{{ $period === 'custom' ? '' : 'display: none;' }}">
                <label for="end_date" class="form-label">End Date</label>
                <input type="date" name="end_date" id="end_date" class="form-control" value="{{ $endDate }}">
            </div>
            
            <div class="col-md-3 col-lg-2">
                <label for="staff_id" class="form-label">Salesman</label>
                <select name="staff_id" id="staff_id" class="form-select">
                    <option value="">All Salesmen</option>
                    @foreach($staff as $member)
                        <option value="{{ $member->id }}" {{ $staffId == $member->id ? 'selected' : '' }}>
                            {{ $member->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            
            <div class="col-md-1 d-flex align-items-end">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-search"></i> Filter
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Summary Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-6 col-lg-3">
        <div class="admin-stat-card stat-primary">
            <div class="stat-icon">
                <i class="bi bi-currency-rupee"></i>
            </div>
            <div class="stat-label"><strong class="stat-value">₹{{ number_format($totalSales, 2) }}</strong><br />Total Sales</div>
            <div class="stat-meta">{{ $totalOrders }} orders</div>
        </div>
    </div>
    
    <div class="col-md-6 col-lg-3">
        <div class="admin-stat-card stat-success">
            <div class="stat-icon">
                <i class="bi bi-graph-up"></i>
            </div>
            <div class="stat-label"><strong class="stat-value">₹{{ number_format($totalProfit, 2) }}</strong><br />Total Profit</div>
            <div class="stat-meta">
                @if($totalSales > 0)
                    {{ number_format(($totalProfit / $totalSales) * 100, 1) }}% margin
                @else
                    0% margin
                @endif
            </div>
        </div>
    </div>
    
    <div class="col-md-6 col-lg-3">
        <div class="admin-stat-card stat-info">
            <div class="stat-icon">
                <i class="bi bi-receipt"></i>
            </div>
            <div class="stat-label"><strong class="stat-value">{{ number_format($totalOrders) }}</strong><br />Total Orders</div>
            <div class="stat-meta">
                @if($totalOrders > 0)
                    ₹{{ number_format($totalSales / $totalOrders, 0) }} avg
                @else
                    ₹0 avg
                @endif
            </div>
        </div>
    </div>
    
    <div class="col-md-6 col-lg-3">
        <div class="admin-stat-card stat-warning">
            <div class="stat-icon">
                <i class="bi bi-percent"></i>
            </div>
            <div class="stat-label"><strong class="stat-value">₹{{ number_format($totalDiscounts, 2) }}</strong><br />Total Discounts</div>
            <div class="stat-meta">
                @if($totalSales > 0)
                    {{ number_format(($totalDiscounts / ($totalSales + $totalDiscounts)) * 100, 1) }}% of gross
                @else
                    0% of gross
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Salesman Performance Table -->
<div class="admin-card">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="bi bi-people"></i> Salesman Performance
            <small class="text-muted">({{ $startDate }} to {{ $endDate }})</small>
        </h5>
    </div>
    <div class="card-body">
        @if($salesmanData->count() > 0)
            <div class="table-responsive">
                <table class="admin-table table table-hover">
                    <thead>
                        <tr>
                            <th>Salesman</th>
                            <th>Orders</th>
                            <th>Total Sales</th>
                            <th>Total Profit</th>
                            <th>Profit Margin</th>
                            <th>Avg Order Value</th>
                            <th>Total Discounts</th>
                            <th>Performance</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($salesmanData as $data)
                            <tr>
                                <td>
                                    <div>
                                        <strong>{{ $data['staff_name'] }}</strong>
                                        @if($data['staff_email'])
                                            <br><small class="text-muted">{{ $data['staff_email'] }}</small>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-secondary">{{ $data['total_orders'] }}</span>
                                </td>
                                <td>
                                    <strong>₹{{ number_format($data['total_sales'], 2) }}</strong>
                                </td>
                                <td>
                                    <span class="text-success">
                                        <strong>₹{{ number_format($data['total_profit'], 2) }}</strong>
                                    </span>
                                </td>
                                <td>
                                    @if($data['profit_margin'] > 0)
                                        <span class="badge bg-success">{{ number_format($data['profit_margin'], 1) }}%</span>
                                    @else
                                        <span class="badge bg-secondary">0%</span>
                                    @endif
                                </td>
                                <td>₹{{ number_format($data['avg_order_value'], 2) }}</td>
                                <td>₹{{ number_format($data['total_discounts'], 2) }}</td>
                                <td>
                                    @php
                                        $performance = $totalSales > 0 ? ($data['total_sales'] / $totalSales) * 100 : 0;
                                    @endphp
                                    <div class="progress" style="height: 20px;">
                                        <div class="progress-bar 
                                            @if($performance >= 30) bg-success
                                            @elseif($performance >= 15) bg-warning
                                            @else bg-danger
                                            @endif" 
                                            role="progressbar" 
                                            style="width: {{ min($performance, 100) }}%"
                                            aria-valuenow="{{ $performance }}" 
                                            aria-valuemin="0" 
                                            aria-valuemax="100">
                                            {{ number_format($performance, 1) }}%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="text-center py-5">
                <i class="bi bi-people text-muted" style="font-size: 3rem;"></i>
                <h5 class="text-muted mt-3">No Salesman Data Found</h5>
                <p class="text-muted">No POS sales found for the selected period and filters.</p>
                @can('pos_access')
                <div class="mt-3">
                    <a href="{{ route('admin.pos.index') }}" class="btn btn-primary" target="_blank">
                        <i class="bi bi-cash-stack"></i> Open POS
                    </a>
                </div>
                @endcan
            </div>
        @endif
    </div>
</div>

@endsection

@push('scripts')
<script>
function toggleCustomDates() {
    const period = document.getElementById('period').value;
    const startDateDiv = document.getElementById('startDateDiv');
    const endDateDiv = document.getElementById('endDateDiv');
    
    if (period === 'custom') {
        startDateDiv.style.display = 'block';
        endDateDiv.style.display = 'block';
    } else {
        startDateDiv.style.display = 'none';
        endDateDiv.style.display = 'none';
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleCustomDates();
});
</script>
@endpush

@section('styles')
<style>
.admin-stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.stat-primary .stat-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stat-success .stat-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.stat-info .stat-icon { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.stat-warning .stat-icon { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

.stat-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.25rem;
}

.stat-meta {
    font-size: 0.75rem;
    color: #9ca3af;
}

.progress {
    background-color: #e5e7eb;
}

.progress-bar {
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
@endsection