@extends('layouts.app')

@section('title', 'Omanization Tracking')

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

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

    {{-- Header --}}
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Omanization Tracking</h1>
            <p class="text-sm text-gray-500 mt-1">Monitor and track your Omanization compliance ratio</p>
        </div>
        @if(auth()->user()->role === 'company_admin')
            <form action="{{ route('compliance.omanization.snapshot') }}" method="POST">
                @csrf
                <button type="submit" class="btn-primary">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
                    Update Snapshot
                </button>
            </form>
        @endif
    </div>

    {{-- Current Status Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="stat-card">
            <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"><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">{{ $currentRatio['total'] }}</div>
            <div class="stat-label">Total Employees</div>
        </div>

        <div class="stat-card">
            <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"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/></svg>
            </div>
            <div class="stat-value">{{ $currentRatio['omani'] }}</div>
            <div class="stat-label">Omani Nationals</div>
        </div>

        <div class="stat-card">
            @php
                $ratioColor = $currentRatio['is_compliant'] ? 'success' : ($currentRatio['ratio'] >= $currentRatio['required'] - 5 ? 'warning' : 'danger');
            @endphp
            <div class="stat-icon bg-{{ $ratioColor }}-100 text-{{ $ratioColor }}-{{ $ratioColor === 'danger' ? '500' : '600' }}">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            </div>
            <div class="stat-value">{{ number_format($currentRatio['ratio'], 1) }}%</div>
            <div class="stat-label">Current Ratio</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon bg-gray-100 text-gray-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            </div>
            <div class="stat-value">{{ number_format($requiredPercentage, 1) }}%</div>
            <div class="stat-label">Required Ratio</div>
        </div>
    </div>

    {{-- Compliance Status Banner --}}
    @if($currentRatio['total'] > 0)
        <div class="rounded-xl p-4 {{ $currentRatio['is_compliant'] ? 'bg-success-50 border border-success-100' : 'bg-danger-50 border border-danger-100' }}">
            <div class="flex items-center gap-3">
                @if($currentRatio['is_compliant'])
                    <svg class="w-6 h-6 text-success-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-success-700">Compliant — your Omanization ratio meets the requirement.</p>
                    </div>
                @else
                    <svg class="w-6 h-6 text-danger-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                    <div>
@php
    $needed = $currentRatio['required'] > 0 && $currentRatio['total'] > 0
        ? max(0, ceil(($currentRatio['required'] * $currentRatio['total'] / 100) - $currentRatio['omani']))
        : 0;
@endphp
<p class="text-sm font-semibold text-danger-700">Non-Compliant — you need approximately {{ $needed }} more Omani employee(s) to meet the {{ number_format($requiredPercentage, 1) }}% requirement.</p>                    </div>
                @endif
            </div>
        </div>
    @endif

    {{-- Trend Chart --}}
    <div class="card">
        <div class="card-header">
            <h2 class="card-header-title">12-Month Trend</h2>
        </div>
        <div class="card-body">
            @if($trendData->count() > 1)
                <canvas id="trendChart" height="250"></canvas>
            @else
                <div class="empty-state py-10">
                    <p class="text-sm text-gray-500">Need at least 2 monthly snapshots to show trends.</p>
                </div>
            @endif
        </div>
    </div>

    {{-- Department Breakdown --}}
    @if(count($departmentBreakdown) > 0)
        <div class="card">
            <div class="card-header">
                <h2 class="card-header-title">Department Breakdown</h2>
            </div>
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Department</th>
                            <th>Total</th>
                            <th>Omani</th>
                            <th>Non-Omani</th>
                            <th>Ratio</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($departmentBreakdown as $dept)
                            <tr>
                                <td class="font-medium text-gray-800">{{ $dept['name'] }}</td>
                                <td>{{ $dept['total'] }}</td>
                                <td>{{ $dept['omani'] }}</td>
                                <td>{{ $dept['non_omani'] }}</td>
                                <td>
                                    <div class="flex items-center gap-2">
                                        <div class="w-20 bg-gray-100 rounded-full h-2">
                                            <div class="h-2 rounded-full {{ $dept['ratio'] >= $requiredPercentage ? 'bg-success-500' : ($dept['ratio'] >= $requiredPercentage - 5 ? 'bg-warning-500' : 'bg-danger-500') }}" style="width: {{ min($dept['ratio'], 100) }}%"></div>
                                        </div>
                                        <span class="text-sm font-medium">{{ number_format($dept['ratio'], 1) }}%</span>
                                    </div>
                                </td>
                                <td>
                                    @if($dept['ratio'] >= $requiredPercentage)
                                        <span class="badge badge-active">Compliant</span>
                                    @elseif($dept['ratio'] >= $requiredPercentage - 5)
                                        <span class="badge badge-pending">At Risk</span>
                                    @else
                                        <span class="badge badge-rejected">Below Target</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif

</div>

@if($trendData->count() > 1)
@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 trendData = @json($trendData);
        new Chart(document.getElementById('trendChart').getContext('2d'), {
            type: 'line',
            data: {
                labels: trendData.map(d => d.month),
                datasets: [
                    {
                        label: 'Omanization Ratio',
                        data: trendData.map(d => d.ratio),
                        borderColor: '#2563EB',
                        backgroundColor: 'rgba(37,99,235,0.1)',
                        fill: true, tension: 0.3, pointRadius: 5, pointBackgroundColor: '#2563EB',
                    },
                    {
                        label: 'Required',
                        data: trendData.map(d => d.required),
                        borderColor: '#EF4444',
                        borderDash: [5, 5], pointRadius: 0, fill: false,
                    },
                    {
                        label: 'Total Employees',
                        data: trendData.map(d => d.total),
                        borderColor: '#94A3B8',
                        borderDash: [2, 2], pointRadius: 0, fill: false, yAxisID: 'y1',
                    }
                ]
            },
            options: {
                responsive: true, maintainAspectRatio: false,
                plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } } },
                scales: {
                    y: { beginAtZero: true, max: 100, ticks: { callback: v => v + '%' }, title: { display: true, text: 'Ratio %' } },
                    y1: { position: 'right', beginAtZero: true, grid: { drawOnChartArea: false }, title: { display: true, text: 'Headcount' } },
                    x: { grid: { display: false } },
                }
            }
        });
    });
</script>
@endpush
@endif
@endsection