@extends('layouts.app')

@section('title', 'Employee Ticket Details - ' . $employee->name)

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body py-3">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <div class="d-flex align-items-center">
                                <div class="mr-3">
                                    <i class="fas fa-user-tie fa-2x text-info"></i>
                                </div>
                                <div>
                                    <h3 class="font-weight-bold mb-0 text-dark">{{ $employee->name }} - Ticket Details</h3>
                                    <p class="mb-0 text-muted small">All Reports - Monthly Data</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 text-lg-right mt-2 mt-lg-0">
                            <button type="button" class="btn btn-secondary" onclick="history.back()">
                                <i class="fas fa-arrow-left"></i> Back
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Monthly Reports Table -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-info text-white">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <h5 class="mb-0"><i class="fas fa-list"></i> All Reports - Monthly Data</h5>
                        <div class="d-flex align-items-center flex-wrap mt-2 mt-md-0">
                            <div class="d-flex align-items-center mr-3 mb-2 mb-md-0">
                                <label class="text-white mr-2 mb-0" for="yearFilter">Year:</label>
                                <select class="form-control form-control-sm" id="yearFilter" style="width: auto; min-width: 100px;">
                                    @php
                                        $nowYear = now()->year;
                                        $startYear = $nowYear - 5; // Show last 5 years
                                        $endYear = $nowYear + 1; // Include next year
                                    @endphp
                                    @for($year = $endYear; $year >= $startYear; $year--)
                                        <option value="{{ $year }}" {{ $currentYear == $year ? 'selected' : '' }}>
                                            {{ $year }}
                                        </option>
                                    @endfor
                                </select>
                            </div>
                            <div class="d-flex align-items-center">
                                <label class="text-white mr-2 mb-0" for="dateFrom">From:</label>
                                <input type="date" class="form-control form-control-sm" id="dateFrom" style="width: auto; min-width: 140px; margin-right: 10px;" value="{{ $dateFrom ?? '' }}">
                                <label class="text-white mr-2 mb-0" for="dateTo">To:</label>
                                <input type="date" class="form-control form-control-sm" id="dateTo" style="width: auto; min-width: 140px; margin-right: 10px;" value="{{ $dateTo ?? '' }}">
                                <button type="button" class="btn btn-sm btn-light" id="resetFilters" style="white-space: nowrap;">
                                    <i class="fas fa-redo"></i> Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover table-striped">
                            <thead class="thead-dark">
                                <tr>
                                    <th style="width: 150px;" class="text-center">Month</th>
                                    @foreach($reportTypes as $reportType)
                                        <th class="text-center" style="min-width: 120px;">
                                            <small class="text-white">{{ $reportType }}</small>
                                        </th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($months as $month)
                                    <tr>
                                        <td class="align-middle text-center font-weight-bold">
                                            @php
                                                // Generate URL for month details
                                                $monthStart = $month['start']->format('Y-m-d');
                                                $monthEnd = $month['end']->format('Y-m-d');
                                                $monthDetailsUrl = route('reseller-tickets.employee-month-details', [
                                                    'employeeId' => $employee->id,
                                                    'monthStart' => $monthStart,
                                                    'monthEnd' => $monthEnd
                                                ]);
                                            @endphp
                                            <a href="{{ $monthDetailsUrl }}" style="color: #007bff; text-decoration: none; font-weight: bold;">
                                                {{ $month['name'] }}
                                            </a>
                                        </td>
                                        @foreach($reportTypes as $reportType)
                                            <td class="align-middle text-center">
                                                @if(isset($month['counts'][$reportType]) && $month['counts'][$reportType] !== '-')
                                                    @if($reportType === 'Average Rating')
                                                        <span class="badge badge-warning badge-pill" style="font-size: 0.9em; padding: 5px 10px;">
                                                            {{ $month['counts'][$reportType] }} ⭐
                                                        </span>
                                                    @elseif(in_array($reportType, ['Average Assign Time', 'Average Forwarded Time', 'Average Solved Time']))
                                                        <span class="badge badge-info badge-pill" style="font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                            {{ $month['counts'][$reportType] }}
                                                        </span>
                                                    @else
                                                        <span style="font-size: 0.9em;">
                                                            {{ $month['counts'][$reportType] }}
                                                        </span>
                                                    @endif
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="thead-dark">
                                <tr>
                                    <th class="text-center font-weight-bold" style="background-color: #343a40 !important;">
                                        <strong>Summary</strong>
                                    </th>
                                    @foreach($reportTypes as $reportType)
                                        <th class="text-center" style="background-color: #343a40 !important;">
                                            @if(isset($summary[$reportType]) && $summary[$reportType] !== '-')
                                                @if($reportType === 'Average Rating')
                                                    <span class="badge badge-warning badge-pill" style="font-size: 0.9em; padding: 5px 10px;">
                                                        {{ $summary[$reportType] }} ⭐
                                                    </span>
                                                @elseif(in_array($reportType, ['Average Assign Time', 'Average Forwarded Time', 'Average Solved Time']))
                                                    <span class="badge badge-info badge-pill" style="font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                        {{ $summary[$reportType] }}
                                                    </span>
                                                @else
                                                    <span class="font-weight-bold text-white" style="font-size: 0.9em;">
                                                        {{ $summary[$reportType] }}
                                                    </span>
                                                @endif
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </th>
                                    @endforeach
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    tbody tr:hover {
        background-color: #f8f9fa !important;
    }
    thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #343a40 !important;
    }
    #yearFilter {
        border: 1px solid rgba(255, 255, 255, 0.3);
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }
    #yearFilter option {
        background-color: #343a40;
        color: white;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const yearFilter = document.getElementById('yearFilter');
    const dateFrom = document.getElementById('dateFrom');
    const dateTo = document.getElementById('dateTo');
    const resetFilters = document.getElementById('resetFilters');
    
    function updateFilters() {
        const url = new URL(window.location);
        const selectedYear = yearFilter ? yearFilter.value : '';
        const fromDate = dateFrom ? dateFrom.value : '';
        const toDate = dateTo ? dateTo.value : '';
        
        if (selectedYear) {
            url.searchParams.set('year', selectedYear);
        } else {
            url.searchParams.delete('year');
        }
        
        if (fromDate) {
            url.searchParams.set('date_from', fromDate);
        } else {
            url.searchParams.delete('date_from');
        }
        
        if (toDate) {
            url.searchParams.set('date_to', toDate);
        } else {
            url.searchParams.delete('date_to');
        }
        
        window.location.href = url.toString();
    }
    
    function resetAllFilters() {
        const url = new URL(window.location);
        // Remove all filter parameters
        url.searchParams.delete('year');
        url.searchParams.delete('date_from');
        url.searchParams.delete('date_to');
        // Reload page with clean URL
        window.location.href = url.toString();
    }
    
    if (yearFilter) {
        yearFilter.addEventListener('change', updateFilters);
    }
    
    if (dateFrom) {
        dateFrom.addEventListener('change', updateFilters);
    }
    
    if (dateTo) {
        dateTo.addEventListener('change', updateFilters);
    }
    
    if (resetFilters) {
        resetFilters.addEventListener('click', resetAllFilters);
    }
});
</script>
@endsection