@extends('layouts.admin')

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>OCR Request Logs</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="{{ route('admin') }}">Home</a></li>
          <li class="breadcrumb-item active">OCR Request Logs</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">OCR Request Logs List</h3>
          </div>
          <div class="card-body">
            <div class="row mb-3">
              <div class="col-md-3">
                <label for="status-filter" class="form-label">Filter by Status:</label>
                <select id="status-filter" class="form-control">
                  <option value="">All Statuses</option>
                  @foreach($statusOptions as $status)
                  <option value="{{ $status }}">{{ ucfirst($status) }}</option>
                  @endforeach
                </select>
              </div>
            </div>

            <div class="table-responsive">
              <table id="ocr-logs-table" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>UUID</th>
                    <th>User Name</th>
                    <th>User Email</th>
                    <th>Service Type</th>
                    <th>Status</th>
                    <th>Attempt At</th>
                    <th>Completed At</th>
                    <th>Created At</th>
                    <th>Actions</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection

@section('script')
<script>
  $(document).ready(function() {
    $('#ocr-logs-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('admin.ocr_request_logs.index') }}",
            type: 'GET',
            data: function (d) {
                d.status = $('#status-filter').val();
            }
        },
        columns: [
            { data: 'id', name: 'id', orderable: false },
            { data: 'uuid', name: 'uuid', orderable: false },
            { data: 'user_name', name: 'user_name', orderable: false, searchable: true },
            { data: 'user_email', name: 'user_email', orderable: false, searchable: true },
            { data: 'service_type', name: 'service_type', orderable: false },
            { 
                data: 'status', 
                name: 'status', 
                orderable: false, 
                searchable: true,
                render: function(data, type, row) {
                    if (type === 'sort' || type === 'type') {
                        // Extract the text content for sorting
                        var temp = document.createElement('div');
                        temp.innerHTML = data;
                        return temp.textContent || temp.innerText || '';
                    }
                    return data;
                }
            },
            { data: 'attempt_at_formatted', name: 'attempt_at_formatted', orderable: false, searchable: false },
            { data: 'completed_at_formatted', name: 'completed_at_formatted', orderable: false, searchable: false },
            { data: 'created_at_formatted', name: 'created_at', orderable: false, searchable: false },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[8, 'desc']], // Order by created_at descending
        pageLength: 25,
        responsive: true,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });
    
    $('#status-filter').on('change', function() {
        $('#ocr-logs-table').DataTable().draw();
    });
});
</script>
@endsection