@extends('layouts.app')
@section('title', 'Service Requests Report')

@section('content')
    {{-- Fixed Top Action Bar --}}
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Service Requests Report</div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('horeca.reports.service-requests.csv', request()->all()) }}"
                class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
                title="Export CSV" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-file-csv"></i>
            </a>
            <a href="{{ route('horeca.reports.service-requests.excel', request()->all()) }}"
                class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
                title="Export Excel" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-file-excel"></i>
            </a>
            <a href="{{ route('horeca.reports.service-requests.pdf', request()->all()) }}"
                class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
                title="Export PDF" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-file-pdf"></i>
            </a>
            <button
                class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
                title="Refresh" onclick="window.location.reload();" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-sync"></i>
            </button>
            </div>
    </div>

    {{-- Filters Card --}}
    <div class="card mt-3 rounded-border shadow-sm border-0">
        <div class="card-body">
            <form id="filtersForm" action="{{ route('horeca.reports.service-requests') }}" method="GET">
                <div class="row align-items-end">
                    <div class="col-md-4">
                        <label class="form-label">Date Range</label>
                        <input type="text" id="logDateRange" name="log_date_range" class="form-control"
                            value="{{ request('log_date_range', $startDate . ' to ' . $endDate) }}"
                            placeholder="Select Date Range..." readonly>
                    </div>
                    <div class="col-md-8 text-end">
                        <a href="{{ route('horeca.reports.service-requests') }}" class="btn btn-primary"
                            style="background-color: #FABB1E; border-color: #FABB1E; font-weight: 600; padding: 0.5rem 2rem; border-radius: 8px;">
                            Clear
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Metrics Cards --}}
    <div class="row g-3 mt-2 mb-4">
        <div class="col-md-2">
            <div class="card h-100 border-0 shadow-sm rounded-border card-hover">
                <div class="card-body p-3">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Total Requests</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h3 class="mb-0 fw-bold text-dark">{{ number_format($totalRequests) }}</h3>
                        <div class="icon-circle bg-soft-primary text-primary" style="width: 32px; height: 32px;">
                            <i class="fa-solid fa-inbox small"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Created</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card h-100 border-0 shadow-sm rounded-border card-hover">
                <div class="card-body p-3">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Open/Active</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h3 class="mb-0 fw-bold text-warning">{{ number_format($openRequests) }}</h3>
                        <div class="icon-circle bg-soft-warning text-warning" style="width: 32px; height: 32px;">
                            <i class="fa-solid fa-clock small"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Awaiting Action</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card h-100 border-0 shadow-sm rounded-border card-hover">
                <div class="card-body p-3">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Resolved</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h3 class="mb-0 fw-bold text-success">{{ number_format($resolvedRequests) }}</h3>
                        <div class="icon-circle bg-soft-success text-success" style="width: 32px; height: 32px;">
                            <i class="fa-solid fa-check-circle small"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Completed</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card h-100 border-0 shadow-sm rounded-border card-hover">
                <div class="card-body p-3">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">SLA Breaches</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h3 class="mb-0 fw-bold text-danger">{{ number_format($slaBreachedCount) }}</h3>
                        <div class="icon-circle bg-soft-danger text-danger" style="width: 32px; height: 32px;">
                            <i class="fa-solid fa-triangle-exclamation small"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Delayed</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card h-100 border-0 shadow-sm rounded-border card-hover">
                <div class="card-body p-3">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">SLA Compliance</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h3
                            class="mb-0 fw-bold {{ $slaComplianceRate > 80 ? 'text-success' : ($slaComplianceRate > 50 ? 'text-warning' : 'text-danger') }}">
                            {{ $slaComplianceRate }}%
                        </h3>
                        <div class="icon-circle bg-soft-info text-info" style="width: 32px; height: 32px;">
                            <i class="fa-solid fa-check-double small"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Target vs Actual</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card h-100 border-0 shadow-sm rounded-border card-hover">
                <div class="card-body p-3">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Avg Resolution</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h3 class="mb-0 fw-bold text-dark">{{ $avgResolutionTime }}</h3>
                        <div class="icon-circle bg-soft-secondary text-secondary" style="width: 32px; height: 32px;">
                            <i class="fa-solid fa-hourglass-half small"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Mean Time to Fix</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Charts Row --}}
    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-border h-100">
                <div class="card-header bg-white border-0 py-3 px-4">
                    <h6 class="fw-bold mb-0 text-dark">Status Breakdown</h6>
                </div>
                <div class="card-body">
                    <div style="height: 300px; width: 100%;">
                        <canvas id="statusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card border-0 shadow-sm rounded-border h-100">
                <div class="card-header bg-white border-0 py-3 px-4">
                    <h6 class="fw-bold mb-0 text-dark">Requests by Category</h6>
                </div>
                <div class="card-body">
                    <div style="height: 300px; width: 100%;">
                        <canvas id="categoryChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        {{-- Recent Requests Table --}}
        <div class="col-md-8">
            <div class="card border-0 shadow-sm rounded-border h-100">
                <div
                    class="card-header bg-white border-0 py-3 px-4 rounded-top-4 d-flex justify-content-between align-items-center">
                    <h6 class="fw-bold mb-0 text-dark">Recent Service Requests</h6>
                    <a href="{{ route('horeca.service-requests.index') }}"
                        class="btn btn-sm btn-ghost-primary rounded-pill">View All</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 text-nowrap">
                        <thead class="bg-light text-muted text-uppercase small">
                            <tr>
                                <th class="ps-4 border-0">SR Number</th>
                                <th class="border-0">Title</th>
                                <th class="border-0">Category</th>
                                <th class="border-0">Created Date</th>
                                <th class="border-0">Priority</th>
                                <th class="border-0 text-center">Status</th>
                                <th class="pe-4 border-0 text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($requestsList as $request)
                                <tr>
                                    <td class="ps-4 fw-bold text-dark">#{{ $request->id }}</td>
                                    <td class="w-25 text-wrap">{{ $request->title }}</td>
                                    <td>{{ $request->category->name ?? 'Uncategorized' }}</td>
                                    <td>{{ $request->created_at ? $request->created_at->format('Y-m-d') : '-' }}</td>
                                    <td>
                                        @php
                                            $priorityClass = [
                                                'low' => 'bg-soft-success text-success',
                                                'medium' => 'bg-soft-info text-info',
                                                'high' => 'bg-soft-warning text-warning',
                                                'critical' => 'bg-soft-danger text-danger'
                                            ][strtolower($request->priority)] ?? 'bg-secondary';
                                        @endphp
                                        <span class="badge {{ $priorityClass }}">{{ ucfirst($request->priority) }}</span>
                                    </td>
                                    <td class="text-center">
                                        @php
                                            $statusClass = [
                                                'open' => 'badge-blue',
                                                'in_progress' => 'badge-info',
                                                'approved' => 'badge-success',
                                                'rejected' => 'badge-danger',
                                                'resolved' => 'badge-success',
                                                'closed' => 'badge-secondary',
                                                'cancelled' => 'badge-danger'
                                            ][strtolower($request->status)] ?? 'badge-secondary';
                                        @endphp
                                        <span class="badge {{ $statusClass }} badge-same-width">{{ ucfirst(str_replace('_', ' ', $request->status)) }}</span>
                                    </td>
                                    <td class="pe-4 text-center">
                                        <a href="{{ route('horeca.service-requests.show', $request->id) }}"
                                            class="btn btn-sm btn-ghost-primary rounded-pill">View</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-5 text-muted">
                                        No service requests found for this period.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($requestsList instanceof \Illuminate\Pagination\LengthAwarePaginator && $requestsList->hasPages())
                    <div class="card-footer bg-white border-0 py-3 d-flex justify-content-end">
                        {{ $requestsList->links('pagination::bootstrap-5') }}
                    </div>
                @endif
            </div>
        </div>

        {{-- Top Categories --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-border h-100">
                <div class="card-header bg-white border-0 py-3 px-4">
                    <h6 class="fw-bold mb-0 text-dark">Top Problem Categories</h6>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach($topCategories as $cat)
                            <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-4 py-3">
                                <div>
                                    <span class="fw-semibold text-dark">{{ $cat['name'] }}</span>
                                    <div class="progress mt-1" style="height: 4px; width: 100px;">
                                        <div class="progress-bar bg-primary"
                                            style="width: {{ $totalRequests > 0 ? ($cat['count'] / $totalRequests) * 100 : 0 }}%">
                                        </div>
                                    </div>
                                </div>
                                <span class="badge bg-soft-primary text-primary rounded-pill px-3">{{ $cat['count'] }}</span>
                            </li>
                        @endforeach
                        @if($topCategories->isEmpty())
                            <li class="list-group-item text-center py-4 text-muted border-0">No category data available</li>
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Initialize Date Range Picker
            flatpickr("#logDateRange", {
                mode: "range",
                dateFormat: "Y-m-d",
                defaultDate: [
                    "{{ explode(' to ', request('log_date_range', $startDate . ' to ' . $endDate))[0] ?? $startDate }}",
                    "{{ explode(' to ', request('log_date_range', $startDate . ' to ' . $endDate))[1] ?? $endDate }}"
                ],
                onClose: function (selectedDates, dateStr, instance) {
                    if (selectedDates.length === 2) {
                        document.getElementById('filtersForm').submit();
                    }
                }
            });

            // Status Breakdown Chart (Doughnut)
            const statusCtx = document.getElementById('statusChart').getContext('2d');
            const statusLabels = @json($statusBreakdown->keys());
            const statusData = @json($statusBreakdown->values());

            new Chart(statusCtx, {
                type: 'doughnut',
                data: {
                    labels: statusLabels,
                    datasets: [{
                        data: statusData,
                        backgroundColor: [
                            '#3b82f6', // Open
                            '#f59e0b', // In Progress
                            '#10b981', // Resolved
                            '#64748b', // Closed
                            '#ef4444'  // Cancelled
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom' }
                    }
                }
            });

            // Category Breakdown Chart (Bar)
            const categoryCtx = document.getElementById('categoryChart').getContext('2d');
            const catLabels = @json($byCategory->pluck('name'));
            const catData = @json($byCategory->pluck('count'));

            new Chart(categoryCtx, {
                type: 'bar',
                data: {
                    labels: catLabels,
                    datasets: [{
                        label: 'Requests',
                        data: catData,
                        backgroundColor: 'rgba(59, 130, 246, 0.6)',
                        borderColor: '#3b82f6',
                        borderWidth: 1,
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: { beginAtZero: true, grid: { borderDash: [2, 4] } },
                        x: { grid: { display: false } }
                    }
                }
            });
        });
    </script>
    <style>
        .fixed-action-bar {
            z-index: 100;
        }

        .rounded-border {
            border-radius: 12px;
            border: 1px solid #e0e0e0;
        }

        .card-hover {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.1) !important;
        }

        .icon-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .bg-soft-primary {
            background-color: rgba(59, 130, 246, 0.1);
        }

        .bg-soft-success {
            background-color: rgba(16, 185, 129, 0.1);
        }

        .bg-soft-warning {
            background-color: rgba(245, 158, 11, 0.1);
        }

        .bg-soft-danger {
            background-color: rgba(239, 68, 68, 0.1);
        }

        .bg-soft-secondary {
            background-color: rgba(148, 163, 184, 0.1);
        }

        .bg-soft-info {
            background-color: rgba(6, 182, 212, 0.1);
        }

        .btn-ghost-primary {
            color: #3b82f6;
            background: transparent;
            border: 1px solid transparent;
        }

        .btn-ghost-primary:hover {
            background: rgba(59, 130, 246, 0.1);
        }

        .form-label {
            color: #8D99AE;
            font-weight: 500;
            font-size: 0.85rem;
            margin-bottom: 8px;
            display: block;
        }

        .form-control {
            border: none !important;
            border-bottom: 1px solid #E5E9F2 !important;
            border-radius: 0 !important;
            padding: 0.4rem 0 !important;
            font-size: 0.95rem !important;
            background: transparent !important;
            color: #4E5E7A !important;
            box-shadow: none !important;
        }

        .form-control:focus {
            border-bottom-color: #FABB1E !important;
        }
    </style>
@endpush