@extends('layouts.master')

@section('content')
    <div class="main-content app-content mt-0">
        <div class="side-app">

            <!-- CONTAINER -->
            <div class="main-container container-fluid">

                <!-- PAGE-HEADER -->
                <div class="page-header">
                    <h1 class="page-title">{{ __('locale.API_Logs') }}</h1>
                    <div>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('locale.API_Logs') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{__('common.home')}}</li>
                        </ol>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h3 class="card-title">{{ __('locale.title') }}</h3>
                                <div>
                                    <button type="button" class="btn btn-success" data-bs-toggle="modal"
                                        data-bs-target="#exportModal">
                                        <i class="fe fe-download"></i> {{ __('locale.export') }}
                                    </button>
                                    <button type="button" class="btn btn-info" onclick="refreshStats()">
                                        <i class="fe fe-bar-chart"></i> {{ __('locale.refresh_stats') }}
                                    </button>
                                </div>
                            </div>

                            <!-- Statistics Cards -->
                            <div class="row mt-3 px-3" id="stats-container">
                                <div class="col-md-3">
                                    <div class="stat-card">
                                        <h6>{{ __('locale.total_verifications') }}</h6>
                                        <h3 id="total_count">{{ number_format($summary['total']) }}</h3>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="stat-card">
                                        <h6>{{ __('locale.authentic') }}</h6>
                                        <h3 class="text-success" id="authentic_count">
                                            {{ number_format($summary['authentic']) }}
                                        </h3>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="stat-card">
                                        <h6>{{ __('locale.non_authentic') }}</h6>
                                        <h3 class="text-danger" id="non_authentic_count">
                                            {{ number_format($summary['non_authentic']) }}
                                        </h3>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="stat-card">
                                        <h6>{{ __('locale.avg_response_time') }}</h6>
                                        <h3 id="avg_response">{{ $summary['avg_response'] }} <small>ms</small></h3>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <!-- Filter Form -->
                                <form method="GET" action="{{ route('admin.api-logs.index') }}" class="mb-4">
                                    <div class="row">
                                        <div class="col-md-3 mb-2">
                                            <label>{{ __('locale.partner') }}</label>
                                            <select name="partner_id" class="form-control">
                                                <option value="">{{ __('locale.all_partners') }}</option>
                                                @foreach($partners as $partner)
                                                    <option value="{{ $partner->partner_id }}" {{ request('partner_id') == $partner->partner_id ? 'selected' : '' }}>
                                                        {{ $partner?->company->name }} ({{ $partner->partner_id }})
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-2 mb-2">
                                            <label>{{ __('locale.status') }}</label>
                                            <select name="authentic" class="form-control">
                                                <option value="">{{ __('locale.all') }}</option>
                                                <option value="1" {{ request('authentic') == '1' ? 'selected' : '' }}>
                                                    {{ __('locale.authentic_only') }}
                                                </option>
                                                <option value="0" {{ request('authentic') == '0' ? 'selected' : '' }}>
                                                    {{ __('locale.non_authentic_only') }}
                                                </option>
                                            </select>
                                        </div>

                                        <div class="col-md-2 mb-2">
                                            <label>{{ __('locale.date_from') }}</label>
                                            <input type="date" name="date_from" class="form-control"
                                                value="{{ request('date_from') }}">
                                        </div>

                                        <div class="col-md-2 mb-2">
                                            <label>{{ __('locale.date_to') }}</label>
                                            <input type="date" name="date_to" class="form-control"
                                                value="{{ request('date_to') }}">
                                        </div>

                                        <div class="col-md-3 mb-2">
                                            <label>{{ __('locale.search') }}</label>
                                            <div class="input-group">
                                                <input type="text" name="search" class="form-control"
                                                    placeholder="{{ __('locale.search_placeholder') }}"
                                                    value="{{ request('search') }}">
                                                <button class="btn btn-primary" type="submit">
                                                    <i class="fe fe-search"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-2">
                                        <div class="col-12">
                                            <button type="submit"
                                                class="btn btn-primary">{{ __('locale.apply_filters') }}</button>
                                            <a href="{{ route('admin.api-logs.index') }}"
                                                class="btn btn-secondary">{{ __('locale.reset_filters') }}</a>
                                        </div>
                                    </div>
                                </form>

                                <!-- Logs Table -->
                                <div class="table-responsive">
                                    <table class="table table-hover table-striped" id="logs-table">
                                        <thead>
                                            <tr>
                                                <th>{{ __('locale.verification_id') }}</th>
                                                <th>{{ __('locale.partner_id') }}</th>
                                                <th>{{ __('locale.transaction_id') }}</th>
                                                <th>{{ __('locale.uid') }}</th>
                                                <th>{{ __('locale.status') }}</th>
                                                <th>{{ __('locale.response_time') }}</th>
                                                <th>{{ __('locale.location') }}</th>
                                                <th>{{ __('locale.timestamp') }}</th>
                                                <th>{{ __('locale.actions') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($logs as $log)
                                                <tr>
                                                    <td><code>{{ $log->verification_id }}</code></td>
                                                    <td>{{ $log?->partner->partner_id }}</td>
                                                    <td>{{ $log->transaction_id ?? '-' }}</td>
                                                    <td><code>{{ $log->uid }}</code></td>
                                                    <td>
                                                        @if($log->authentic)
                                                            <span class="badge bg-success">{{ __('locale.authentic') }}</span>
                                                        @else
                                                            <span class="badge bg-danger">{{ __('locale.counterfeit') }}</span>
                                                        @endif
                                                    </td>
                                                    <td>{{ $log->response_ms }} ms</td>
                                                    <td>{{ $log->location ?? '-' }}</td>
                                                    <td>{{ $log->created_at->format('Y-m-d H:i:s') }}</td>
                                                    <td>
                                                        <a href="{{ route('admin.api-logs.show', $log) }}"
                                                            class="btn btn-sm btn-info" title="{{ __('locale.view_details') }}">
                                                            <i class="fe fe-eye"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="9" class="text-center">{{ __('locale.no_records') }}</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>

                                <!-- Pagination -->
                                <div class="mt-3">
                                    {{ $logs->appends(request()->query())->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Export Modal -->
    <div class="modal fade" id="exportModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('locale.export_logs') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('admin.api-logs.export', 'csv') }}" method="GET">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label>{{ __('locale.export_format') }}</label>
                            <select name="format" class="form-control" id="exportFormat">
                                <option value="csv">CSV</option>
                                <option value="json">JSON</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label>{{ __('locale.partner') }}</label>
                            <select name="partner_id" class="form-control">
                                <option value="">{{ __('locale.all_partners') }}</option>
                                @foreach($partners as $partner)
                                    <option value="{{ $partner->partner_id }}">{{ $partner->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label>{{ __('locale.date_range') }}</label>
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="date" name="date_from" class="form-control"
                                        placeholder="{{ __('locale.from') }}">
                                </div>
                                <div class="col-md-6">
                                    <input type="date" name="date_to" class="form-control"
                                        placeholder="{{ __('locale.to') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ __('common.close') }}</button>
                        <button type="submit" class="btn btn-success">{{ __('locale.download') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Chart Modal -->
    <div class="modal fade" id="chartModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('locale.verification_statistics') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <canvas id="statsChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
        rel="stylesheet" />
    <style>
        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s;
            margin-bottom: 15px;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .badge {
            font-size: 12px;
            padding: 5px 10px;
        }

        #logs-table code {
            font-size: 12px;
        }
    </style>
@endsection




@section('bottom_script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        let statsChart = null;

        function refreshStats() {
            $.ajax({
                url: '{{ route("admin.api-logs.statistics") }}',
                method: 'GET',
                data: {
                    days: 30
                },
                success: function (response) {
                    if (response.daily_verifications) {
                        updateStatsUI(response);
                    }
                },
                error: function (xhr) {
                    console.error('Error fetching stats:', xhr);
                }
            });
        }

        function updateStatsUI(data) {
            // Update summary cards
            if (data.daily_verifications && data.daily_verifications.length > 0) {
                const total = data.daily_verifications.reduce((sum, day) => sum + day.total, 0);
                const authentic = data.daily_verifications.reduce((sum, day) => sum + day.authentic, 0);
                const nonAuthentic = data.daily_verifications.reduce((sum, day) => sum + day.non_authentic, 0);
                const avgResponse = data.daily_verifications.reduce((sum, day) => sum + parseFloat(day.avg_response), 0) / data.daily_verifications.length;

                $('#total_count').text(total.toLocaleString());
                $('#authentic_count').text(authentic.toLocaleString());
                $('#non_authentic_count').text(nonAuthentic.toLocaleString());
                $('#avg_response').text(avgResponse.toFixed(2));
            }
        }

        // Initialize select2 for better dropdowns
        $(document).ready(function () {
            $('select[name="partner_id"]').select2({
                theme: 'bootstrap-5',
                placeholder: '{{ __("api_logs.select_partner") }}',
                allowClear: true
            });
        });

        // Auto-refresh every 30 seconds (optional)
        // setInterval(refreshStats, 30000);
    </script>
@endsection