@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">{{ __('Staff Performance Report') }}</h4>
                    <div>
                        <a href="{{ route('reports.staff', ['report_type' => request('report_type'), 'start_date' => request('start_date'), 'end_date' => request('end_date'), 'export' => 'pdf']) }}" class="btn btn-light">
                            <i class="fas fa-file-pdf"></i> {{ __('Export PDF') }}
                        </a>
                        <button type="button" class="btn btn-light ms-2" onclick="window.print()">
                            <i class="fas fa-print"></i> {{ __('Print') }}
                        </button>
                    </div>
                </div>

                <div class="card-body">
                    <form method="GET" action="{{ route('reports.staff') }}" class="mb-4">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label for="report_type" class="form-label">{{ __('Report Type') }}</label>
                                <select class="form-select" id="report_type" name="report_type" onchange="this.form.submit()">
                                    <option value="daily" {{ request('report_type') == 'daily' ? 'selected' : '' }}>{{ __('Daily') }}</option>
                                    <option value="weekly" {{ request('report_type') == 'weekly' ? 'selected' : '' }}>{{ __('Weekly') }}</option>
                                    <option value="monthly" {{ request('report_type') == 'monthly' ? 'selected' : '' }}>{{ __('Monthly') }}</option>
                                    <option value="custom" {{ request('report_type') == 'custom' ? 'selected' : '' }}>{{ __('Custom Range') }}</option>
                                </select>
                            </div>
                            
                            @if(request('report_type') == 'custom')
                            <div class="col-md-3 mb-3">
                                <label for="start_date" class="form-label">{{ __('Start Date') }}</label>
                                <input type="date" class="form-control" id="start_date" name="start_date" value="{{ request('start_date', $startDate) }}">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="end_date" class="form-label">{{ __('End Date') }}</label>
                                <input type="date" class="form-control" id="end_date" name="end_date" value="{{ request('end_date', $endDate) }}">
                            </div>
                            <div class="col-md-3 mb-3 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary">{{ __('Apply Filters') }}</button>
                            </div>
                            @endif
                        </div>
                    </form>

                    <div class="report-header mb-4">
                        <h5>{{ __('Report Period') }}: {{ $startDate }} {{ __('to') }} {{ $endDate }}</h5>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>{{ __('Staff Member') }}</th>
                                    <th>{{ __('Role') }}</th>
                                    <th class="text-end">{{ __('Transactions') }}</th>
                                    <th class="text-end">{{ __('Total Sales') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($staffPerformance as $staff)
                                <tr>
                                    <td>{{ $staff->name }}</td>
                                    <td>{{ ucfirst($staff->role) }}</td>
                                    <td class="text-end">{{ $staff->payments_count }}</td>
                                    <td class="text-end">{{ number_format($staff->payments_sum_amount, 2) }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center">{{ __('No staff performance data available for the selected period') }}</td>
                                </tr>
                                @endforelse
                            </tbody>
                            <tfoot>
                                <tr class="fw-bold">
                                    <td colspan="2">{{ __('Total') }}</td>
                                    <td class="text-end">{{ $staffPerformance->sum('payments_count') }}</td>
                                    <td class="text-end">{{ number_format($staffPerformance->sum('payments_sum_amount'), 2) }}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    <div class="mt-4">
                        <h5>{{ __('Staff Performance Comparison') }}</h5>
                        <div class="chart-container" style="position: relative; height:300px;">
                            <canvas id="staffChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const staffData = @json($staffPerformance);
        
        if (staffData.length > 0) {
            const ctx = document.getElementById('staffChart').getContext('2d');
            
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: staffData.map(s => s.name),
                    datasets: [{
                        label: '{{ __("Total Sales") }}',
                        data: staffData.map(s => s.payments_sum_amount),
                        backgroundColor: 'rgba(75, 192, 192, 0.5)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
        
        // Handle report type change
        document.getElementById('report_type').addEventListener('change', function() {
            if (this.value === 'custom') {
                // Don't submit form automatically for custom, let user select dates
                return false;
            }
            this.form.submit();
        });
    });
</script>
@endsection