@extends('admin.layout')

@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
    <style>
        /* Custom styled overrides for JQuery DataTables using plain CSS */
        .dataTables_wrapper {
            color: rgb(71, 85, 105);
            font-size: 0.875rem;
        }
        
        .dark .dataTables_wrapper {
            color: rgb(203, 213, 225);
        }
        
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter,
        .dataTables_wrapper .dataTables_info,
        .dataTables_wrapper .dataTables_processing,
        .dataTables_wrapper .dataTables_paginate {
            color: rgb(100, 116, 139) !important;
            font-weight: 500;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        .dark .dataTables_wrapper .dataTables_length,
        .dark .dataTables_wrapper .dataTables_filter,
        .dark .dataTables_wrapper .dataTables_info,
        .dark .dataTables_wrapper .dataTables_processing,
        .dark .dataTables_wrapper .dataTables_paginate {
            color: rgb(148, 163, 184) !important;
        }

        .dataTables_wrapper .dataTables_filter input {
            background-color: rgb(248, 250, 252);
            color: rgb(30, 41, 59);
            border: 1px solid rgb(226, 232, 240);
            border-radius: 0.75rem;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            outline: none;
            transition: all 0.2s ease-in-out;
            margin-left: 0.5rem;
            margin-bottom: 0.5rem;
            width: 16rem;
        }

        .dark .dataTables_wrapper .dataTables_filter input {
            background-color: rgb(9, 9, 11);
            color: rgb(241, 245, 249);
            border-color: rgb(30, 41, 59);
        }

        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: rgb(79, 70, 229);
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
        }

        .dataTables_wrapper .dataTables_length select {
            background-color: rgb(248, 250, 252);
            color: rgb(30, 41, 59);
            border: 1px solid rgb(226, 232, 240);
            border-radius: 0.75rem;
            padding: 0.5rem 1.5rem 0.5rem 0.75rem;
            font-size: 0.875rem;
            outline: none;
            transition: all 0.2s ease-in-out;
            margin-left: 0.375rem;
            margin-right: 0.375rem;
        }

        .dark .dataTables_wrapper .dataTables_length select {
            background-color: rgb(9, 9, 11);
            color: rgb(241, 245, 249);
            border-color: rgb(30, 41, 59);
        }

        .dataTables_wrapper .dataTables_length select:focus {
            border-color: rgb(79, 70, 229);
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
        }

        /* Table Styling */
        table.dataTable {
            border-collapse: collapse !important;
            border-bottom: 0 !important;
            width: 100% !important;
            background-color: transparent !important;
        }

        table.dataTable thead th {
            padding: 1rem !important;
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            color: rgb(148, 163, 184) !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em !important;
            border-bottom: 1px solid rgb(226, 232, 240) !important;
            background-color: transparent !important;
        }

        .dark table.dataTable thead th {
            color: rgb(100, 116, 139) !important;
            border-bottom: 1px solid rgb(30, 41, 59) !important;
        }

        table.dataTable tbody tr {
            background-color: transparent !important;
            border-bottom: 1px solid rgba(241, 245, 249, 0.8) !important;
            transition: background-color 0.2s ease-in-out !important;
        }

        .dark table.dataTable tbody tr {
            border-bottom: 1px solid rgba(30, 41, 59, 0.4) !important;
        }

        table.dataTable tbody tr:hover {
            background-color: rgba(241, 245, 249, 0.5) !important;
        }

        .dark table.dataTable tbody tr:hover {
            background-color: rgba(30, 41, 59, 0.2) !important;
        }

        table.dataTable tbody td {
            padding: 1.125rem 1rem !important;
            color: rgb(51, 65, 85) !important;
            border-bottom: 0 !important;
        }

        .dark table.dataTable tbody td {
            color: rgb(203, 213, 225) !important;
        }

        /* Paginate button styling */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border: 0 !important;
            border-radius: 0.75rem !important;
            padding: 0.5rem 0.875rem !important;
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            transition: all 0.2s ease-in-out !important;
            color: rgb(100, 116, 139) !important;
            background-color: rgb(241, 245, 249) !important;
            margin: 0 2px !important;
        }

        .dark .dataTables_wrapper .dataTables_paginate .paginate_button {
            color: rgb(148, 163, 184) !important;
            background-color: rgb(30, 41, 59) !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: rgb(226, 232, 240) !important;
            color: rgb(15, 23, 42) !important;
        }

        .dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: rgb(51, 65, 85) !important;
            color: white !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            background: linear-gradient(135deg, rgb(99, 102, 241), rgb(79, 70, 229)) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2) !important;
            border: 0 !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
            opacity: 0.4 !important;
            cursor: default !important;
            background: transparent !important;
            color: rgb(148, 163, 184) !important;
        }

        .dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
            background: transparent !important;
            color: rgb(71, 85, 105) !important;
        }

        /* Custom Status badge overrides from Controller outputs */
        table.dataTable span.text-green-600 {
            background-color: rgba(16, 185, 129, 0.1) !important;
            color: rgb(16, 185, 129) !important;
            border: 1px solid rgba(16, 185, 129, 0.2) !important;
            font-size: 10px !important;
            font-weight: 800 !important;
            letter-spacing: 0.05em !important;
            text-transform: uppercase !important;
            padding: 0.35rem 0.625rem !important;
            border-radius: 0.75rem !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.375rem !important;
        }

        table.dataTable span.text-red-600 {
            background-color: rgba(239, 68, 68, 0.1) !important;
            color: rgb(239, 68, 68) !important;
            border: 1px solid rgba(239, 68, 68, 0.2) !important;
            font-size: 10px !important;
            font-weight: 800 !important;
            letter-spacing: 0.05em !important;
            text-transform: uppercase !important;
            padding: 0.35rem 0.625rem !important;
            border-radius: 0.75rem !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.375rem !important;
        }

        /* Custom Action button override from controller output */
        table.dataTable a.text-blue-600 {
            background-color: rgba(79, 70, 229, 0.1) !important;
            color: rgb(79, 70, 229) !important;
            border: 1px solid rgba(79, 70, 229, 0.2) !important;
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            padding: 0.375rem 0.875rem !important;
            border-radius: 0.75rem !important;
            transition: all 0.2s ease-in-out !important;
            display: inline-block !important;
            text-decoration: none !important;
        }

        table.dataTable a.text-blue-600:hover {
            background-color: rgb(79, 70, 229) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2) !important;
        }
    </style>
@endpush

@section('content')
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8">
        <div>
            <h1 class="text-2xl font-black tracking-tight text-slate-800 dark:text-slate-100 flex items-center gap-2">
                Verification logs
            </h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Browse, filter, and audit verification API requests recorded by clients.</p>
        </div>
        <form method="GET" class="flex items-center gap-2.5">
            <div class="relative">
                <select name="type" class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-slate-800 dark:text-slate-100 rounded-2xl pl-4 pr-10 py-3 text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all focus:outline-none appearance-none font-semibold cursor-pointer shadow-sm">
                    <option value="">All Document Types</option>
                    @foreach($prefixes as $key => $label)
                        <option value="{{ $key }}" {{ $currentType == $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
                <i class="bi bi-chevron-down absolute right-3.5 top-3.5 text-slate-400 text-xs pointer-events-none"></i>
            </div>
            <button class="px-5 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-2xl shadow-lg shadow-indigo-500/10 hover:opacity-95 active:scale-98 transition-all font-bold text-sm focus:outline-none flex items-center gap-2"><i class="bi bi-funnel"></i> Filter</button>
        </form>
    </div>

    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl shadow-xl shadow-slate-100/50 dark:shadow-none p-6 transition duration-200 overflow-hidden">
        <table id="verification-logs-table" class="min-w-full cell-border hover row-border" style="width:100%">
            <thead>
            <tr>
                <th>#</th>
                <th>Type</th>
                <th>Customer</th>
                <th>Document ID / Input</th>
                <th>Status</th>
                <th>Provider</th>
                <th>Time (ms)</th>
                <th>Actions</th>
            </tr>
            </thead>
        </table>
    </div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const currentType = "{{ $currentType }}";
            $('#verification-logs-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: "{{ route('admin.logs.data') }}",
                    data: function (d) {
                        if (currentType) {
                            d.type = currentType;
                        }
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { 
                        data: 'verification_type', 
                        name: 'verification_type',
                        render: function(data) {
                            return `<span class="font-bold text-slate-800 dark:text-slate-200 capitalize">${data.replace(/_/g, ' ')}</span>`;
                        }
                    },
                    { data: 'customer', name: 'customer' },
                    { 
                        data: 'document', 
                        name: 'document',
                        render: function(data) {
                            return `<code class="font-mono text-xs bg-slate-50 dark:bg-slate-950 border border-slate-200/50 dark:border-slate-800/80 px-2 py-1 rounded-lg text-slate-600 dark:text-slate-300 break-all select-all">${data}</code>`;
                        }
                    },
                    { data: 'status', name: 'status', orderable: false, searchable: false },
                    { 
                        data: 'provider', 
                        name: 'provider',
                        render: function(data) {
                            return `<span class="font-semibold text-xs px-2 py-0.5 bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 rounded-md border border-slate-200/40 dark:border-slate-700/40 font-mono capitalize">${data}</span>`;
                        }
                    },
                    { 
                        data: 'response_time_ms', 
                        name: 'response_time_ms',
                        render: function(data) {
                            return `<span class="font-extrabold text-slate-700 dark:text-slate-300 text-xs">${data} ms</span>`;
                        }
                    },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ],
                order: [[0, 'desc']],
                pageLength: 12,
                language: {
                    search: '',
                    searchPlaceholder: 'Search logs...',
                    paginate: {
                        previous: '<i class="bi bi-chevron-left"></i>',
                        next: '<i class="bi bi-chevron-right"></i>'
                    }
                }
            });
        });
    </script>
@endpush