@extends('portal.layout')
@section('title', 'NOC Dependency Graph')

@section('content')
<div class="report-layout">
    @include('portal.partials.report-sidebar', ['report' => $report])
    <div class="report-content" style="padding:32px 28px;">

        <div style="margin-bottom:28px;">
            <div style="display:inline-flex;align-items:center;gap:6px;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.25);padding:4px 12px;border-radius:20px;font-size:11px;color:#fb923c;margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase;">
                <i data-lucide="git-branch" style="width:12px;height:12px;"></i> NOC/Approval Tracker
            </div>
            <h1 style="font-size:22px;font-weight:700;margin-bottom:6px;">NOC Dependency Graph</h1>
            <p style="font-size:13px;color:var(--text-secondary);">AI-generated dependency map of all required NOCs and clearances with critical path analysis.</p>
        </div>

        @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <form method="POST" action="{{ route('portal.noc.generate', $report) }}" style="margin-bottom:24px;">
            @csrf
            <button type="submit" class="btn btn-primary">
                <i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Generate NOC Graph
            </button>
        </form>

        @if($existing->count())
        {{-- Critical Path Summary --}}
        @php
            $criticalDays = $existing->max('critical_path_days');
            $totalNocs = $existing->count();
            $parallelTracks = $existing->filter(fn($n) => empty($n->dependencies))->count();
        @endphp
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;">
            <div class="card" style="padding:16px;text-align:center;">
                <div style="font-size:11px;color:var(--text-muted);text-transform:uppercase;">Total NOCs Required</div>
                <div style="font-size:24px;font-weight:700;color:#60a5fa;">{{ $totalNocs }}</div>
            </div>
            <div class="card" style="padding:16px;text-align:center;">
                <div style="font-size:11px;color:var(--text-muted);text-transform:uppercase;">Critical Path</div>
                <div style="font-size:24px;font-weight:700;color:#f97316;">{{ $criticalDays }} days</div>
            </div>
            <div class="card" style="padding:16px;text-align:center;">
                <div style="font-size:11px;color:var(--text-muted);text-transform:uppercase;">Parallel Tracks</div>
                <div style="font-size:24px;font-weight:700;color:#a78bfa;">{{ $parallelTracks }}</div>
            </div>
        </div>

        {{-- NOC Timeline --}}
        <div class="card" style="padding:20px;">
            <div style="font-size:14px;font-weight:600;margin-bottom:16px;">Approval Sequence</div>
            @foreach($existing->sortBy('priority') as $noc)
                <div style="display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg);border-radius:6px;margin-bottom:6px;">
                    <div style="width:28px;height:28px;background:rgba(249,115,22,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#f97316;flex-shrink:0;">
                        {{ $noc->priority + 1 }}
                    </div>
                    <div style="flex:1;min-width:0;">
                        <div style="font-size:13px;font-weight:600;">{{ str_replace('_', ' ', ucfirst($noc->noc_type)) }}</div>
                        <div style="font-size:11px;color:var(--text-secondary);">{{ $noc->authority }} &middot; Est. {{ $noc->estimated_days }} days</div>
                    </div>
                    @if(!empty($noc->dependencies))
                    <div style="font-size:10px;color:var(--text-muted);">
                        Depends: {{ implode(', ', $noc->dependencies) }}
                    </div>
                    @endif
                    <span class="badge badge-{{ empty($noc->dependencies) ? 'blue' : 'red' }}">
                        {{ empty($noc->dependencies) ? 'Independent' : 'Dependent' }}
                    </span>
                </div>
        @endforeach
        </div>
        @else
        <div class="card" style="padding:40px;text-align:center;">
            <i data-lucide="git-branch" style="width:36px;height:36px;color:var(--text-muted);margin-bottom:12px;"></i>
            <div style="font-size:15px;font-weight:600;margin-bottom:6px;">No NOC Graph Yet</div>
            <div style="font-size:13px;color:var(--text-secondary);">Click "Generate NOC Graph" to identify all required clearances.</div>
        </div>
        @endif
    </div>
</div>
@endsection