@extends('layouts.layoutMaster')

@section('title', __('AI Request Logs'))

@section('vendor-style')
@vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
    'resources/assets/vendor/libs/select2/select2.scss',
    'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
    'Modules/AICore/resources/assets/css/ai-request-logs.css'
])
@endsection

@section('vendor-script')
@vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
    'resources/assets/vendor/libs/select2/select2.js',
    'resources/assets/vendor/libs/flatpickr/flatpickr.js',
    'resources/assets/vendor/libs/moment/moment.js'
])
@endsection

@section('page-script')
@vite(['Modules/AICore/resources/assets/js/ai-request-logs.js'])
<script>
// Pass data from PHP to JavaScript
window.aiLogsPageData = {
    datatableUrl: '{{ route("aicore.logs.datatable") }}',
    statisticsUrl: '{{ route("aicore.logs.statistics") }}',
    baseUrl: '{{ url("aicore/logs") }}',
    tableTitle: '{{ __("AI Request Logs") }}'
};
</script>
@endsection

@section('content')
<div class="row">
    <!-- Statistics Cards -->
    <div class="col-12 mb-4">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div class="card-info">
                                <p class="card-text">{{ __('Total Requests') }}</p>
                                <div class="d-flex align-items-end mb-2">
                                    <h4 class="card-title mb-0 me-2" id="totalRequests">0</h4>
                                </div>
                            </div>
                            <div class="card-icon">
                                <span class="badge bg-label-primary rounded p-2">
                                    <i class="bx bx-message-square-dots bx-sm"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div class="card-info">
                                <p class="card-text">{{ __('Success Rate') }}</p>
                                <div class="d-flex align-items-end mb-2">
                                    <h4 class="card-title mb-0 me-2">
                                        <span id="successfulRequests">0</span>/<span id="errorRequests">0</span>
                                    </h4>
                                </div>
                            </div>
                            <div class="card-icon">
                                <span class="badge bg-label-success rounded p-2">
                                    <i class="bx bx-check-circle bx-sm"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div class="card-info">
                                <p class="card-text">{{ __('Total Cost') }}</p>
                                <div class="d-flex align-items-end mb-2">
                                    <h4 class="card-title mb-0 me-2" id="totalCost">$0.00</h4>
                                </div>
                            </div>
                            <div class="card-icon">
                                <span class="badge bg-label-info rounded p-2">
                                    <i class="bx bx-dollar bx-sm"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div class="card-info">
                                <p class="card-text">{{ __('Needs Review') }}</p>
                                <div class="d-flex align-items-end mb-2">
                                    <h4 class="card-title mb-0 me-2" id="unreviewedCount">0</h4>
                                </div>
                            </div>
                            <div class="card-icon">
                                <span class="badge bg-label-warning rounded p-2">
                                    <i class="bx bx-time bx-sm"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Filters -->
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">{{ __('Module') }}</label>
                        <select id="filterModule" class="form-select filter-input">
                            <option value="">{{ __('All Modules') }}</option>
                            @foreach($modules as $module)
                                <option value="{{ $module }}">{{ $module }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">{{ __('User') }}</label>
                        <select id="filterUser" class="form-select select2 filter-input">
                            <option value="">{{ __('All Users') }}</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">{{ __('Model') }}</label>
                        <select id="filterModel" class="form-select filter-input">
                            <option value="">{{ __('All Models') }}</option>
                            @foreach($models as $model)
                                <option value="{{ $model->id }}">{{ $model->provider->name }} - {{ $model->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">{{ __('Status') }}</label>
                        <select id="filterStatus" class="form-select filter-input">
                            <option value="">{{ __('All Status') }}</option>
                            <option value="success">{{ __('Success') }}</option>
                            <option value="error">{{ __('Error') }}</option>
                            <option value="pending">{{ __('Pending') }}</option>
                            <option value="timeout">{{ __('Timeout') }}</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">{{ __('Flagged') }}</label>
                        <select id="filterFlagged" class="form-select filter-input">
                            <option value="">{{ __('All') }}</option>
                            <option value="1">{{ __('Flagged Only') }}</option>
                            <option value="0">{{ __('Not Flagged') }}</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">{{ __('Date From') }}</label>
                        <input type="text" id="dateFrom" class="form-control date-picker filter-input" placeholder="YYYY-MM-DD">
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">{{ __('Date To') }}</label>
                        <input type="text" id="dateTo" class="form-control date-picker filter-input" placeholder="YYYY-MM-DD">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Logs Table -->
    <div class="col-12">
        <div class="card">
            <div class="card-datatable table-responsive">
                <table class="table" id="logsTable">
                    <thead>
                        <tr>
                            <th>{{ __('ID') }}</th>
                            <th>{{ __('User') }}</th>
                            <th>{{ __('Module') }}</th>
                            <th>{{ __('Model') }}</th>
                            <th>{{ __('Prompt') }}</th>
                            <th>{{ __('Response') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Tokens') }}</th>
                            <th>{{ __('Cost') }}</th>
                            <th>{{ __('Flag') }}</th>
                            <th>{{ __('Review') }}</th>
                            <th>{{ __('Date') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Details Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Request Details') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="detailsModalBody">
                <!-- Content loaded via AJAX -->
            </div>
        </div>
    </div>
</div>

<!-- Review Modal -->
<div class="modal fade" id="reviewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Review Log Entry') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="reviewForm">
                <div class="modal-body">
                    <input type="hidden" id="reviewLogId">
                    <div class="mb-3">
                        <label class="form-label">{{ __('Review Notes') }}</label>
                        <textarea name="notes" class="form-control" rows="4" placeholder="{{ __('Enter your review notes...') }}"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('Mark as Reviewed') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection