@extends('crm.layouts.master')
@section('title','KYC Documents')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
    <style>
        .kyc-kpi { position:relative; min-height:132px; border:1px solid var(--bs-border-color,#e7e9eb); border-radius:.65rem; box-shadow:0 1px 3px rgba(25,35,50,.04); overflow:hidden; }
        .kyc-kpi::before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--kyc-accent); }
        .kyc-kpi .card-body { display:flex; align-items:center; gap:1rem; padding:1.15rem 1.25rem; }
        .kyc-kpi-icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; flex:0 0 48px; border-radius:.55rem; background:var(--kyc-soft); color:var(--kyc-accent); font-size:1.4rem; }
        .kyc-kpi-value { color:#26303d; font-size:1.55rem; font-weight:750; line-height:1; }
        .kyc-kpi-label { margin-top:.35rem; color:#84909e; font-size:.76rem; font-weight:650; }
        .kyc-kpi.pending { --kyc-accent:#f59e0b; --kyc-soft:#fff7e6; }
        .kyc-kpi.review { --kyc-accent:#5bc3e1; --kyc-soft:#eaf8fc; }
        .kyc-kpi.approved { --kyc-accent:#02bc9c; --kyc-soft:#e4f8f4; }
        .kyc-kpi.rejected { --kyc-accent:#f7577e; --kyc-soft:#feeaf0; }
        .kyc-queue { border:1px solid var(--bs-border-color,#e7e9eb); border-radius:.65rem; box-shadow:0 1px 3px rgba(25,35,50,.04); overflow:hidden; }
        .kyc-queue .card-header { display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:.9rem 1.1rem; background:#fff; border-bottom:1px solid #edf0f4; }
        .kyc-queue-title { margin:0; color:#26303d; font-size:.92rem; font-weight:750; }
        #kyc_table { margin:0 !important; }
        #kyc_table thead th { padding:.8rem 1rem; background:#f8fafc; color:#84909e; border-bottom:1px solid #e7e9eb; font-size:.69rem; font-weight:750; letter-spacing:.045em; text-transform:uppercase; white-space:nowrap; }
        #kyc_table tbody td { padding:.85rem 1rem; color:#475467; border-color:#eef1f4; vertical-align:middle; }
        #kyc_table tbody tr:hover { background:#fafbfc; }
        .kyc-client { color:#344054; font-weight:700; }
        .kyc-file { display:block; max-width:220px; color:#667085; font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .kyc-status { display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .55rem; border-radius:50rem; font-size:.68rem; font-weight:750; }
        .kyc-status.pending { color:#a15c00; background:#fff3d6; }
        .kyc-status.under_review { color:#16728d; background:#e6f7fb; }
        .kyc-status.approved { color:#087f6b; background:#dff7f2; }
        .kyc-status.rejected { color:#b42345; background:#fee7ed; }
        .kyc-queue .dataTables_wrapper { padding:0; }
        .kyc-queue .dataTables_length, .kyc-queue .dataTables_filter { padding:1rem 1rem .65rem; }
        .kyc-queue .dataTables_info { padding:1rem; color:#84909e; }
        .kyc-queue .dataTables_paginate { padding:.75rem 1rem 1rem; }
    </style>
@endsection
@section('main-content')
    <div class="breadcrumb">
        <h3>KYC Documents</h3>
    </div>
    <div class="separator-breadcrumb border-top"></div>

    {{-- Summary cards --}}
    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-sm-6">
            <div class="card kyc-kpi pending h-100"><div class="card-body">
                <span class="kyc-kpi-icon"><i class="ti ti-clock-hour-4"></i></span>
                <div><div class="kyc-kpi-value">{{ $statusCounts['pending'] }}</div><div class="kyc-kpi-label">Pending Review</div></div>
            </div></div>
        </div>
        <div class="col-xl-3 col-sm-6">
            <div class="card kyc-kpi review h-100"><div class="card-body">
                <span class="kyc-kpi-icon"><i class="ti ti-file-search"></i></span>
                <div><div class="kyc-kpi-value">{{ $statusCounts['under_review'] }}</div><div class="kyc-kpi-label">Under Review</div></div>
            </div></div>
        </div>
        <div class="col-xl-3 col-sm-6">
            <div class="card kyc-kpi approved h-100"><div class="card-body">
                <span class="kyc-kpi-icon"><i class="ti ti-shield-check"></i></span>
                <div><div class="kyc-kpi-value">{{ $statusCounts['approved'] }}</div><div class="kyc-kpi-label">Approved</div></div>
            </div></div>
        </div>
        <div class="col-xl-3 col-sm-6">
            <div class="card kyc-kpi rejected h-100"><div class="card-body">
                <span class="kyc-kpi-icon"><i class="ti ti-shield-x"></i></span>
                <div><div class="kyc-kpi-value">{{ $statusCounts['rejected'] }}</div><div class="kyc-kpi-label">Rejected</div></div>
            </div></div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card kyc-queue text-left">
                <div class="card-header"><h4 class="kyc-queue-title"><i class="ti ti-id-badge-2 me-2 text-primary"></i>Verification Queue</h4><span class="badge bg-primary-subtle text-primary">{{ $documents->count() }} documents</span></div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="display table table-bordered" id="kyc_table" style="width:100%">
                            <thead>
                            <tr>
                                <th>ID#</th>
                                <th>Client</th>
                                <th>Document Type</th>
                                <th>File</th>
                                <th>Status</th>
                                <th>Reviewer</th>
                                <th>Submitted</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($documents as $doc)
                                <tr>
                                    <td>{{ $doc->id }}</td>
                                    <td>
                                        <a href="{{ route('lead_detail', ['id' => $doc->lead->id ?? '']) }}" class="kyc-client">
                                            {{ $doc->lead->fname ?? '' }} {{ $doc->lead->lname ?? '' }}
                                        </a>
                                    </td>
                                    <td>{{ ucwords(str_replace('_', ' ', $doc->document_type)) }}</td>
                                    <td>
                                        <span class="kyc-file" title="{{ $doc->original_name }}">{{ $doc->original_name }}</span>
                                    </td>
                                    <td>
                                        @if($doc->status === 'pending')
                                            <span class="kyc-status pending"><i class="ti ti-clock"></i>Pending</span>
                                        @elseif($doc->status === 'under_review')
                                            <span class="kyc-status under_review"><i class="ti ti-search"></i>Under Review</span>
                                        @elseif($doc->status === 'approved')
                                            <span class="kyc-status approved"><i class="ti ti-check"></i>Approved</span>
                                        @elseif($doc->status === 'rejected')
                                            <span class="kyc-status rejected"><i class="ti ti-x"></i>Rejected</span>
                                            @if($doc->rejection_reason)
                                                <br><small class="text-muted">{{ $doc->rejection_reason }}</small>
                                            @endif
                                        @endif
                                    </td>
                                    <td>{{ $doc->reviewer->name ?? '-' }}</td>
                                    <td>{{ $doc->created_at->format('Y-m-d H:i') }}</td>
                                    <td>
                                        <a href="{{ route('kyc.show', $doc->id) }}" class="btn btn-sm btn-outline-primary">
                                            <i class="ti ti-eye me-1"></i>Review
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            $('#kyc_table').DataTable({
                order: [[6, 'DESC']],
                pageLength: 25,
                columnDefs: [{ orderable: false, targets: [3, 7] }],
                language: { emptyTable: 'No KYC documents have been submitted.' }
            });
        });
    </script>
@endsection