@extends('layouts.admin-master')
@section('title', 'KYC Report')
@section('style')
@include('admin.style')
<style>
    /* ── Stat strip ── */
    .kyc-stat {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        padding: 18px 20px;
        display: flex; align-items: center; gap: 14px;
        margin-bottom: 24px;
    }
    .kyc-stat .ks-icon {
        width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center; font-size: 18px;
    }
    .kyc-stat .ks-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #9ca3af; margin-bottom: 4px; }
    .kyc-stat .ks-value { font-size: 24px; font-weight: 800; color: #111; line-height: 1; }

    /* ── Section card ── */
    .section-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; margin-bottom: 24px; }
    .section-card-header {
        padding: 16px 22px; border-bottom: 1px solid #f3f4f6;
        display: flex; align-items: center; justify-content: space-between;
    }
    .section-card-header h6 { margin: 0; font-weight: 700; font-size: 15px; color: #111; }
    .section-card-header .header-icon {
        width: 32px; height: 32px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center; font-size: 14px;
    }

    /* ── Doc table ── */
    .doc-table { width: 100%; border-collapse: collapse; }
    .doc-table th {
        padding: 10px 16px; font-size: 11px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .5px; color: #6b7280;
        background: #f9fafb; border-bottom: 1px solid #e5e7eb;
    }
    .doc-table td {
        padding: 12px 16px; font-size: 13px; color: #374151;
        border-bottom: 1px solid #f3f4f6; vertical-align: middle;
    }
    .doc-table tr:last-child td { border-bottom: none; }
    .doc-table tr.total-row td { font-weight: 700; background: #f9fafb; }

    /* ── KYC progress ── */
    .kyc-prog-bar { height: 6px; border-radius: 3px; background: #f3f4f6; overflow: hidden; margin-top: 4px; }
    .kyc-prog-fill { height: 100%; border-radius: 3px; }

    /* ── Chart card ── */
    .chart-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; margin-bottom: 24px; transition: box-shadow .18s ease; }
    .chart-card:hover, .section-card:hover { box-shadow: 0 6px 22px rgba(17,24,39,.07); }
    .chart-card-header { padding: 16px 22px; border-bottom: 1px solid #f3f4f6; }
    .chart-card-header h6 { margin: 0; font-weight: 700; font-size: 15px; }
    .chart-card-body { padding: 20px 24px; }

    /* ── Export button ── */
    .kyc-export-btn {
        display: inline-flex; align-items: center; gap: 8px;
        height: 40px; padding: 0 18px; border-radius: 10px;
        background: #d1e7dd; color: #0a5132;
        font-size: 13px; font-weight: 600; text-decoration: none;
        border: 1px solid #b7dfca;
        transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    .kyc-export-btn:hover {
        background: #0a5132; color: #fff;
        box-shadow: 0 8px 18px rgba(10,81,50,.25);
        transform: translateY(-1px);
    }
    .kyc-export-btn i { font-size: 15px; }
</style>
@endsection

@section('content')
<div id="preloader"><div class="spinner"></div></div>
<aside class="sidebar-nav-wrapper">@include('admin.sidenav')</aside>
<div class="overlay"></div>

<main class="main-wrapper">
    @include('admin.header')

    <section class="section">
        <div class="container-fluid">

            <div class="title-wrapper pt-30">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="title"><h2>KYC Report</h2></div>
                       
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center justify-content-md-end gap-3 flex-wrap">
                            <a href="{{ route('reports.kyc', ['export' => 'csv']) }}" class="kyc-export-btn">
                                <i class="lni lni-download"></i> Export CSV
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            @php
                $farmerTotal   = array_sum($farmerKyc->toArray());
                $farmerVerified = $farmerKyc['verified'] ?? 0;
                $farmerPending  = $farmerKyc['pending']  ?? 0;
                $farmerRejected = $farmerKyc['rejected'] ?? 0;

                $vendorDocTotal    = ($vendorDocKyc['verified'] ?? 0) + ($vendorDocKyc['pending'] ?? 0) + ($vendorDocKyc['rejected'] ?? 0);
                $vendorDocVerified = $vendorDocKyc['verified'] ?? 0;
                $vendorDocPending  = $vendorDocKyc['pending']  ?? 0;
                $vendorDocRejected = $vendorDocKyc['rejected'] ?? 0;

                $totalDocs     = $farmerTotal + $vendorDocTotal;
                $totalVerified = $farmerVerified + $vendorDocVerified;
                $totalPending  = $farmerPending  + $vendorDocPending;
                $totalRejected = $farmerRejected + $vendorDocRejected;
            @endphp

            {{-- ── Stat strip ── --}}
            <div class="row">
                <div class="col-xl-3 col-sm-6">
                    <div class="kyc-stat">
                        <div class="ks-icon" style="background:#e8f0fe;color:#365CF5;"><i class="fas fa-file-alt"></i></div>
                        <div>
                            <div class="ks-label">Total Documents</div>
                            <div class="ks-value">{{ $totalDocs }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6">
                    <div class="kyc-stat">
                        <div class="ks-icon" style="background:#d1fae5;color:#059669;"><i class="fas fa-check-circle"></i></div>
                        <div>
                            <div class="ks-label">Verified</div>
                            <div class="ks-value" style="color:#059669;">{{ $totalVerified }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6">
                    <div class="kyc-stat">
                        <div class="ks-icon" style="background:#fef3c7;color:#d97706;"><i class="fas fa-clock"></i></div>
                        <div>
                            <div class="ks-label">Pending Review</div>
                            <div class="ks-value" style="color:#d97706;">{{ $totalPending }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6">
                    <div class="kyc-stat">
                        <div class="ks-icon" style="background:#fee2e2;color:#dc2626;"><i class="fas fa-times-circle"></i></div>
                        <div>
                            <div class="ks-label">Rejected</div>
                            <div class="ks-value" style="color:#dc2626;">{{ $totalRejected }}</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Charts Row ── --}}
            <div class="row">
                <div class="col-lg-6">
                    <div class="chart-card">
                        <div class="chart-card-header">
                            <h6>Farmer Document Status</h6>
                        </div>
                        <div class="chart-card-body" style="display:flex;align-items:center;gap:24px;">
                            <canvas id="farmerDonut" style="width:160px;height:160px;flex-shrink:0;"></canvas>
                            <div style="flex:1;">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span style="font-size:12px;color:#374151;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#059669;margin-right:6px;"></span>Verified</span>
                                    <strong style="font-size:13px;">{{ $farmerVerified }}</strong>
                                </div>
                                <div class="kyc-prog-bar mb-3"><div class="kyc-prog-fill" style="width:{{ $farmerTotal > 0 ? round($farmerVerified/$farmerTotal*100) : 0 }}%;background:#059669;"></div></div>

                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span style="font-size:12px;color:#374151;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#d97706;margin-right:6px;"></span>Pending</span>
                                    <strong style="font-size:13px;">{{ $farmerPending }}</strong>
                                </div>
                                <div class="kyc-prog-bar mb-3"><div class="kyc-prog-fill" style="width:{{ $farmerTotal > 0 ? round($farmerPending/$farmerTotal*100) : 0 }}%;background:#d97706;"></div></div>

                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span style="font-size:12px;color:#374151;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#dc2626;margin-right:6px;"></span>Rejected</span>
                                    <strong style="font-size:13px;">{{ $farmerRejected }}</strong>
                                </div>
                                <div class="kyc-prog-bar"><div class="kyc-prog-fill" style="width:{{ $farmerTotal > 0 ? round($farmerRejected/$farmerTotal*100) : 0 }}%;background:#dc2626;"></div></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="chart-card">
                        <div class="chart-card-header">
                            <h6>Vendor KYC Overview</h6>
                        </div>
                        <div class="chart-card-body" style="display:flex;align-items:center;gap:24px;">
                            <canvas id="vendorDonut" style="width:160px;height:160px;flex-shrink:0;"></canvas>
                            <div style="flex:1;">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span style="font-size:12px;color:#374151;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#059669;margin-right:6px;"></span>KYC Completed</span>
                                    <strong style="font-size:13px;">{{ $vendorKycDone }}</strong>
                                </div>
                                <div class="kyc-prog-bar mb-3"><div class="kyc-prog-fill" style="width:{{ $vendorTotal > 0 ? round($vendorKycDone/$vendorTotal*100) : 0 }}%;background:#059669;"></div></div>

                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span style="font-size:12px;color:#374151;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#d97706;margin-right:6px;"></span>KYC Pending</span>
                                    <strong style="font-size:13px;">{{ $vendorKycPending }}</strong>
                                </div>
                                <div class="kyc-prog-bar mb-3"><div class="kyc-prog-fill" style="width:{{ $vendorTotal > 0 ? round($vendorKycPending/$vendorTotal*100) : 0 }}%;background:#d97706;"></div></div>

                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span style="font-size:12px;color:#374151;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#374151;margin-right:6px;"></span>Total Vendors</span>
                                    <strong style="font-size:13px;">{{ $vendorTotal }}</strong>
                                </div>
                                <div class="kyc-prog-bar"><div class="kyc-prog-fill" style="width:100%;background:#374151;opacity:.15;"></div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Detail Tables ── --}}
            <div class="row">

                {{-- Farmer KYC Documents --}}
                <div class="col-lg-4">
                    <div class="section-card">
                        <div class="section-card-header">
                            <h6>Farmer KYC Documents</h6>
                            <div class="header-icon" style="background:#e8f0fe;color:#365CF5;"><i class="lni lni-users"></i></div>
                        </div>
                        <table class="doc-table">
                            <thead>
                                <tr>
                                    <th>Status</th>
                                    <th class="text-end">Count</th>
                                    <th class="text-end">Share</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><span class="badge-status badge-verified">Verified</span></td>
                                    <td class="text-end fw-600">{{ $farmerVerified }}</td>
                                    <td class="text-end" style="color:#9ca3af;font-size:12px;">{{ $farmerTotal > 0 ? round($farmerVerified/$farmerTotal*100) : 0 }}%</td>
                                </tr>
                                <tr>
                                    <td><span class="badge-status badge-pending">Pending</span></td>
                                    <td class="text-end fw-600">{{ $farmerPending }}</td>
                                    <td class="text-end" style="color:#9ca3af;font-size:12px;">{{ $farmerTotal > 0 ? round($farmerPending/$farmerTotal*100) : 0 }}%</td>
                                </tr>
                                <tr>
                                    <td><span class="badge-status badge-rejected">Rejected</span></td>
                                    <td class="text-end fw-600">{{ $farmerRejected }}</td>
                                    <td class="text-end" style="color:#9ca3af;font-size:12px;">{{ $farmerTotal > 0 ? round($farmerRejected/$farmerTotal*100) : 0 }}%</td>
                                </tr>
                                <tr class="total-row">
                                    <td>Total</td>
                                    <td class="text-end">{{ $farmerTotal }}</td>
                                    <td class="text-end" style="color:#9ca3af;font-size:12px;">100%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- Vendor KYC Status --}}
                <div class="col-lg-4">
                    <div class="section-card">
                        <div class="section-card-header">
                            <h6>Vendor KYC Status</h6>
                            <div class="header-icon" style="background:#d1fae5;color:#059669;"><i class="lni lni-briefcase"></i></div>
                        </div>
                        <table class="doc-table">
                            <thead>
                                <tr>
                                    <th>Status</th>
                                    <th class="text-end">Count</th>
                                    <th class="text-end">Share</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><span class="badge-status badge-verified">Completed</span></td>
                                    <td class="text-end fw-600">{{ $vendorKycDone }}</td>
                                    <td class="text-end" style="color:#9ca3af;font-size:12px;">{{ $vendorTotal > 0 ? round($vendorKycDone/$vendorTotal*100) : 0 }}%</td>
                                </tr>
                                <tr>
                                    <td><span class="badge-status badge-pending">Pending</span></td>
                                    <td class="text-end fw-600">{{ $vendorKycPending }}</td>
                                    <td class="text-end" style="color:#9ca3af;font-size:12px;">{{ $vendorTotal > 0 ? round($vendorKycPending/$vendorTotal*100) : 0 }}%</td>
                                </tr>
                                <tr class="total-row">
                                    <td>Total Vendors</td>
                                    <td class="text-end">{{ $vendorTotal }}</td>
                                    <td class="text-end" style="color:#9ca3af;font-size:12px;">100%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- Vendor KYC Documents --}}
                <div class="col-lg-4">
                    <div class="section-card">
                        <div class="section-card-header">
                            <h6>Vendor KYC Documents</h6>
                            <div class="header-icon" style="background:#ccfbf1;color:#0d9488;"><i class="lni lni-shield"></i></div>
                        </div>
                        <table class="doc-table">
                            <thead>
                                <tr>
                                    <th>Status</th>
                                    <th class="text-end">Count</th>
                                    <th class="text-end">Share</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><span class="badge-status badge-verified">Verified</span></td>
                                    <td class="text-end fw-600">{{ $vendorDocVerified }}</td>
                                    <td class="text-end" style="color:#9ca3af;font-size:12px;">{{ $vendorDocTotal > 0 ? round($vendorDocVerified/$vendorDocTotal*100) : 0 }}%</td>
                                </tr>
                                <tr>
                                    <td><span class="badge-status badge-pending">Pending</span></td>
                                    <td class="text-end fw-600">{{ $vendorDocPending }}</td>
                                    <td class="text-end" style="color:#9ca3af;font-size:12px;">{{ $vendorDocTotal > 0 ? round($vendorDocPending/$vendorDocTotal*100) : 0 }}%</td>
                                </tr>
                                <tr>
                                    <td><span class="badge-status badge-rejected">Rejected</span></td>
                                    <td class="text-end fw-600">{{ $vendorDocRejected }}</td>
                                    <td class="text-end" style="color:#9ca3af;font-size:12px;">{{ $vendorDocTotal > 0 ? round($vendorDocRejected/$vendorDocTotal*100) : 0 }}%</td>
                                </tr>
                                <tr class="total-row">
                                    <td>Total</td>
                                    <td class="text-end">{{ $vendorDocTotal }}</td>
                                    <td class="text-end" style="color:#9ca3af;font-size:12px;">100%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>

        </div>
    </section>

    @include('admin.footer')
</main>
@endsection

@section('script')
@include('admin.script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    new Chart(document.getElementById('farmerDonut'), {
        type: 'doughnut',
        data: {
            labels: ['Verified', 'Pending', 'Rejected'],
            datasets: [{
                data: [{{ $farmerVerified }}, {{ $farmerPending }}, {{ $farmerRejected }}],
                backgroundColor: ['#059669', '#d97706', '#dc2626'],
                borderWidth: 0, hoverOffset: 4,
            }]
        },
        options: {
            responsive: false, cutout: '68%',
            plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => ` ${ctx.label}: ${ctx.parsed}` } } }
        }
    });

    new Chart(document.getElementById('vendorDonut'), {
        type: 'doughnut',
        data: {
            labels: ['Completed', 'Pending'],
            datasets: [{
                data: [{{ $vendorKycDone }}, {{ $vendorKycPending }}],
                backgroundColor: ['#059669', '#d97706'],
                borderWidth: 0, hoverOffset: 4,
            }]
        },
        options: {
            responsive: false, cutout: '68%',
            plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => ` ${ctx.label}: ${ctx.parsed}` } } }
        }
    });
});
</script>
@endsection