@extends('layouts.app')

@section('title', 'Compliance Dashboard')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <span class="current">Compliance</span>
    </div>
@endsection

@section('content')
<div class="space-y-6 animate-fade-up">

    {{-- Page Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Compliance Dashboard</h1>
            <p class="text-sm text-gray-500 mt-1">Monitor regulatory compliance and document renewals</p>
        </div>
    </div>

    {{-- Stat Cards --}}
   {{-- Stat Cards (clickable) --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {{-- Compliance Score → Ministry Reports --}}
<a href="{{ route('compliance.ministry') }}" class="stat-card cursor-pointer">
                <div class="stat-icon bg-primary-100 text-primary-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            </div>
            <div class="stat-value">{{ $complianceScore['score'] }}%</div>
            <div class="stat-label">Compliance Score</div>
        </a>

        {{-- Omanization → Omanization Page --}}
        <a href="{{ route('compliance.omanization') }}" class="stat-card cursor-pointer">
            <div class="stat-icon {{ $omanization['is_compliant'] ? 'bg-success-100 text-success-600' : 'bg-danger-100 text-danger-500' }}">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
            <div class="stat-value">{{ number_format($omanization['ratio'], 1) }}%</div>
            <div class="stat-label">Omanization Ratio ({{ $omanization['required'] }}% required)</div>
        </a>

        {{-- Valid Documents → Documents List --}}
        <a href="{{ route('compliance.documents.index') }}" class="stat-card cursor-pointer">
            <div class="stat-icon bg-success-100 text-success-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            </div>
            <div class="stat-value">{{ $documentStats['valid'] }}/{{ $documentStats['total'] }}</div>
            <div class="stat-label">Valid Documents</div>
        </a>

        {{-- Attention Needed → Documents List --}}
        <a href="{{ route('compliance.documents.index') }}" class="stat-card cursor-pointer">
            <div class="stat-icon {{ ($documentStats['expired'] + $documentStats['expiring']) > 0 ? 'bg-warning-100 text-warning-600' : 'bg-success-100 text-success-600' }}">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            </div>
            <div class="stat-value">{{ $documentStats['expired'] + $documentStats['expiring'] }}</div>
            <div class="stat-label">Documents Need Attention</div>
        </a>
    </div>

    {{-- Main Content Grid --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

        {{-- Omanization Chart (2-col) --}}
        <div class="lg:col-span-2 card">
            <div class="card-header">
                <h2 class="card-header-title">Omanization Trend</h2>
                <a href="{{ route('compliance.omanization') }}" class="btn-ghost">View Details →</a>
            </div>
            <div class="card-body">
                @if($omanizationTrend->count() > 0)
                    <canvas id="omanizationChart" height="200"></canvas>
                @else
                    <div class="empty-state py-10">
                        <div class="empty-state-icon">
                            <svg class="w-12 h-12 mx-auto text-gray-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v18h18"/><path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"/></svg>
                        </div>
                        <p class="text-sm text-gray-500">No snapshot data yet. Take your first Omanization snapshot.</p>
                        @if(auth()->user()->role === 'company_admin')
                            <form action="{{ route('compliance.omanization.snapshot') }}" method="POST" class="mt-3">
                                @csrf
                                <button type="submit" class="btn-primary">Take Snapshot</button>
                            </form>
                        @endif
                    </div>
                @endif
            </div>
        </div>

        {{-- Document Status Breakdown --}}
        <div class="card">
            <div class="card-header">
                <h2 class="card-header-title">Document Status</h2>
                <a href="{{ route('compliance.documents.index') }}" class="btn-ghost">View All →</a>
            </div>
            <div class="card-body space-y-3">
                @php
                    $statusItems = [
                        ['label' => 'Valid', 'count' => $documentStats['valid'], 'class' => 'bg-success-500'],
                        ['label' => 'Expiring Soon', 'count' => $documentStats['expiring'], 'class' => 'bg-warning-500'],
                        ['label' => 'Expired', 'count' => $documentStats['expired'], 'class' => 'bg-danger-500'],
                        ['label' => 'Renewal Pending', 'count' => $documentStats['pending'], 'class' => 'bg-primary-500'],
                        ['label' => 'Renewal In Progress', 'count' => $documentStats['in_progress'], 'class' => 'bg-accent-500'],
                    ];
                @endphp

                @foreach($statusItems as $item)
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="w-2.5 h-2.5 rounded-full {{ $item['class'] }}"></div>
                            <span class="text-sm text-gray-600">{{ $item['label'] }}</span>
                        </div>
                        <span class="text-sm font-semibold text-gray-800">{{ $item['count'] }}</span>
                    </div>
                    @if($documentStats['total'] > 0)
                        <div class="w-full bg-gray-100 rounded-full h-1.5 -mt-1">
                            <div class="{{ $item['class'] }} h-1.5 rounded-full" style="width: {{ ($item['count'] / max($documentStats['total'], 1)) * 100 }}%"></div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>

    {{-- Expiring Documents --}}
    @if($expiringDocuments->count() > 0)
        <div class="card">
            <div class="card-header">
                <h2 class="card-header-title">Documents Requiring Attention</h2>
                <span class="badge badge-pending">{{ $expiringDocuments->count() }} items</span>
            </div>
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Document</th>
                            <th>Number</th>
                            <th>Expiry Date</th>
                            <th>Days Left</th>
                            <th>Status</th>
                            <th>Assigned To</th>
                            @if(auth()->user()->role === 'company_admin')
                                <th>Action</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($expiringDocuments as $doc)
                            <tr>
                                <td class="font-medium text-gray-800">{{ $doc->document_type_label }}</td>
                                <td>{{ $doc->document_number ?? '—' }}</td>
                                <td>{{ $doc->expiry_date->format('d M Y') }}</td>
                                <td>
                                    <span class="{{ $doc->expiry_badge_class }} badge">
                                        @if($doc->days_until_expiry <= 0)
                                            Expired
                                        @else
                                            {{ $doc->days_until_expiry }} days
                                        @endif
                                    </span>
                                </td>
                                <td><span class="{{ $doc->status_badge_class }} badge">{{ $doc->renewal_status_label }}</span></td>
                                <td>{{ $doc->assignedUser?->name ?? '—' }}</td>
                                @if(auth()->user()->role === 'company_admin')
                                    <td>
                                        <a href="{{ route('compliance.documents.edit', $doc->id) }}" class="btn-ghost">Edit</a>
                                    </td>
                                @endif
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif

    {{-- Compliance Checklist --}}
    <div class="card" x-data="{ checklist: {} }">
        <div class="card-header">
            <h2 class="card-header-title">Compliance Checklist</h2>
            <span class="text-sm text-gray-500">Internal tracking</span>
        </div>
        <div class="card-body">
            <div class="space-y-3">
                @foreach($checklistItems as $index => $item)
                    <label class="flex items-center gap-3 cursor-pointer group" x-data="{ checked: false }">
                        <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600/20">
                        <span class="text-sm transition-all" :class="checked ? 'text-gray-400 line-through' : 'text-gray-700'">{{ $item }}</span>
                    </label>
                @endforeach
            </div>
            <p class="text-xs text-gray-400 mt-4">Note: Checklist state is for reference only and is not persisted.</p>
        </div>
    </div>

</div>

@if($omanizationTrend->count() > 0)
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('omanizationChart').getContext('2d');
        const data = @json($omanizationTrend);

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.map(d => d.snapshot_date ? new Date(d.snapshot_date).toLocaleDateString('en-US', { month: 'short', year: '2-digit' }) : ''),
                datasets: [
                    {
                        label: 'Actual Ratio %',
                        data: data.map(d => d.ratio_percentage),
                        borderColor: '#2563EB',
                        backgroundColor: 'rgba(37, 99, 235, 0.1)',
                        fill: true,
                        tension: 0.3,
                        pointRadius: 4,
                        pointBackgroundColor: '#2563EB',
                    },
                    {
                        label: 'Required %',
                        data: data.map(d => d.required_percentage),
                        borderColor: '#EF4444',
                        borderDash: [5, 5],
                        pointRadius: 0,
                        fill: false,
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } },
                },
                scales: {
                    y: { beginAtZero: true, max: 100, ticks: { callback: v => v + '%' } },
                    x: { grid: { display: false } },
                }
            }
        });
    });
</script>
@endpush
@endif
@endsection