@extends('layouts.app')

@section('title', 'API Sync Reports')

@section('extra_head')
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
@endsection

@section('extra_css')
    .report-container {
        background: rgba(15, 23, 42, 0.4);
        border: 1px solid var(--border);
        border-radius: 1.5rem;
        padding: 2.5rem;
        margin-top: 2rem;
    }
    .view-filters {
        display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .view-btn {
        background: rgba(30, 41, 59, 0.6);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.6rem 1.5rem;
        border-radius: 0.8rem;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    .view-btn.active, .view-btn:hover {
        background: var(--primary);
        color: #0f172a;
        border-color: var(--primary);
    }
    
    /* DataTables Dark Mode Overrides */
    .dataTables_wrapper {
        color: white;
    }
    table.dataTable tbody tr {
        background-color: transparent !important;
    }
    table.dataTable tbody tr:hover {
        background-color: rgba(56, 189, 248, 0.05) !important;
    }
    .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
        color: white !important;
    }
    .paginate_button {
        color: white !important;
    }
    .dt-buttons .dt-button {
        background: var(--primary) !important;
        color: #0f172a !important;
        border: none !important;
        border-radius: 0.5rem !important;
        font-weight: bold !important;
    }
@endsection

@section('content')
<div class="report-container">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <div>
            <h1 style="margin: 0; font-size: 2rem; font-weight: 700;">API Sync Reports</h1>
            <p style="color: var(--text-dim); margin-top: 0.5rem;">Track automated and manual sync API hits over time.</p>
        </div>
        <div>
            <a href="{{ route('dashboard') }}" style="color: var(--primary); text-decoration: none; font-weight: bold;">&larr; Back to Dashboard</a>
        </div>
    </div>

    <div class="view-filters">
        <a href="?view=day" class="view-btn {{ $viewType == 'day' ? 'active' : '' }}">Day Wise</a>
        <a href="?view=week" class="view-btn {{ $viewType == 'week' ? 'active' : '' }}">Week Wise</a>
        <a href="?view=month" class="view-btn {{ $viewType == 'month' ? 'active' : '' }}">Month Wise</a>
        <a href="?view=year" class="view-btn {{ $viewType == 'year' ? 'active' : '' }}">Year Wise</a>
    </div>

    <table id="reportsTable" class="display" style="width:100%; color: white;">
        <thead>
            <tr>
                <th style="text-align: left; border-bottom: 1px solid var(--border);">Period ({{ ucfirst($viewType) }})</th>
                <th style="text-align: right; border-bottom: 1px solid var(--border);">Auto Sync Hits</th>
                <th style="text-align: right; border-bottom: 1px solid var(--border);">Manual Sync Hits</th>
                <th style="text-align: right; border-bottom: 1px solid var(--border);">Total Hits</th>
            </tr>
        </thead>
        <tbody>
            @foreach($logs as $log)
            <tr>
                <td style="border-bottom: 1px solid rgba(255,255,255,0.05); padding: 1rem 0;">{{ $log->period }}</td>
                <td style="text-align: right; border-bottom: 1px solid rgba(255,255,255,0.05);">{{ number_format($log->auto_hits) }}</td>
                <td style="text-align: right; border-bottom: 1px solid rgba(255,255,255,0.05);">{{ number_format($log->manual_hits) }}</td>
                <td style="text-align: right; font-weight: bold; color: var(--primary); border-bottom: 1px solid rgba(255,255,255,0.05);">{{ number_format($log->total_hits) }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function() {
        $('#reportsTable').DataTable({
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'excelHtml5',
                    title: 'API_Sync_Report_{{ ucfirst($viewType) }}',
                    text: 'Download Excel'
                },
                {
                    extend: 'csvHtml5',
                    title: 'API_Sync_Report_{{ ucfirst($viewType) }}',
                    text: 'Download CSV'
                }
            ],
            order: [[0, 'desc']], // Order by period descending
            pageLength: 25,
            language: {
                search: "",
                searchPlaceholder: "Search periods..."
            }
        });
    });
</script>
@endsection