@extends('backend.layouts.app')

@section('title', \App\Http\Helpers\MenuHelper::getPageTitle())

@section('content')
    <div x-data="{ pageName: @js(\App\Http\Helpers\MenuHelper::getPageTitle()) }" class="mb-6">
        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2>
            <nav>
                <ol class="flex items-center gap-1.5">
                    <li>
                        <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
                            href="{{ route('admin.dashboard') }}">
                            Home
                            <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
                            href="{{ route('admin.routes.index') }}">
                            Routes
                            <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                    </li>
                    <li class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="space-y-5 sm:space-y-6">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 sm:gap-6">
            <div class="rounded-2xl border border-red-200 bg-red-50 dark:border-red-500/20 dark:bg-red-500/10">
                <div class="px-5 py-4 sm:px-6 sm:py-5 border-b border-red-200 dark:border-red-500/20">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-red-700 dark:text-red-400">Not Yet Registered</h3>
                        <span class="inline-flex items-center rounded-md bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-500/20 dark:text-red-400">{{ count($available) }}</span>
                    </div>
                </div>
                <div class="p-5 sm:p-6">
                    @if(count($available) > 0)
                        <div class="max-h-[400px] overflow-y-auto space-y-2">
                            @foreach($available as $uri)
                                <div class="rounded-lg border border-red-200 bg-white px-3 py-2 dark:border-red-500/30 dark:bg-red-500/5">
                                    <span class="font-mono text-sm text-gray-700 dark:text-gray-300">{{ $uri }}</span>
                                </div>
                            @endforeach
                        </div>
                        <div class="mt-4 flex justify-center">
                            <form action="{{ route('admin.routes.generate') }}" method="POST">
                                @csrf
                                <input type="hidden" name="source" value="routes">
                                <button type="submit" class="rounded-lg bg-red-500 px-4 py-2 text-sm font-medium text-white hover:bg-red-600">
                                    Generate {{ count($available) }} Missing Routes
                                </button>
                            </form>
                        </div>
                    @else
                        <div class="text-center py-8">
                            <svg class="mx-auto mb-3 fill-current text-red-400" width="48" height="48" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                            <p class="text-sm text-red-600 dark:text-red-400">All scanned routes are already registered!</p>
                        </div>
                    @endif
                </div>
            </div>

            <div class="rounded-2xl border border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10">
                <div class="px-5 py-4 sm:px-6 sm:py-5 border-b border-green-200 dark:border-green-500/20">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-green-700 dark:text-green-400">Already Registered</h3>
                        <span class="inline-flex items-center rounded-md bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-500/20 dark:text-green-400">{{ count($registered) }}</span>
                    </div>
                </div>
                <div class="p-5 sm:p-6">
                    @if(count($registered) > 0)
                        <div class="max-h-[400px] overflow-y-auto space-y-2">
                            @foreach($registered as $uri)
                                <div class="rounded-lg border border-green-200 bg-white px-3 py-2 dark:border-green-500/30 dark:bg-green-500/5">
                                    <span class="font-mono text-sm text-gray-700 dark:text-gray-300">{{ $uri }}</span>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8">
                            <svg class="mx-auto mb-3 fill-current text-gray-400" width="48" height="48" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                            <p class="text-sm text-gray-600 dark:text-gray-400">No routes are currently registered.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection