@extends('backend.layouts.app')

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

@section('content')
    @once
    @push('styles')
        <style>
            @media (max-width: 767px) {
                .routes-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
                .routes-table thead { display: none; }
                .routes-table tbody, .routes-table tr, .routes-table td { display: block; }
                .routes-table tr { border: 1px solid rgb(243 244 246); border-radius: 0.5rem; margin-bottom: 0.75rem; background: white; }
                .dark .routes-table tr { border-color: rgb(55 65 81); background: rgb(17 24 39); }
                .routes-table td { border: none; padding: 0.75rem 1rem; text-align: left; }
                .routes-table td::before { content: attr(data-label); font-weight: 600; font-size: 0.75rem; color: rgb(107 114 128); display: block; margin-bottom: 0.25rem; text-transform: uppercase; }
                .dark .routes-table td::before { color: rgb(156 163 175); }
                .routes-table td:last-child { text-align: left; padding-top: 0; }
                .routes-table .route-name-cell { font-weight: 500; color: rgb(31 41 55); }
                .dark .routes-table .route-name-cell { color: white; }
                .routes-table .route-url-cell { font-family: monospace; font-size: 0.8125rem; }
                .routes-table .method-cell span { display: inline-block; margin-right: 0.25rem; margin-bottom: 0.25rem; }
                .routes-table .controller-cell .action { display: block; font-size: 0.75rem; color: rgb(107 114 128); margin-top: 0.125rem; }
                .dark .routes-table .controller-cell .action { color: rgb(156 163 175); }
                .routes-table .status-cell span { display: inline-block; }
            }
            @media (min-width: 768px) {
                .routes-table .route-url-cell a { display: block; font-size: 0.75rem; }
                .routes-table .controller-cell .action { display: block; font-size: 0.75rem; color: rgb(107 114 128); margin-top: 0.125rem; }
                .dark .routes-table .controller-cell .action { color: rgb(156 163 175); }
            }
        </style>
    @endpush
    @endonce

    <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 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="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5">
                <div class="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">All Routes</h3>
                    <div class="flex flex-wrap gap-2">
                        <a href="{{ route('admin.routes.generate') }}"
                            class="inline-flex items-center gap-2 rounded-lg bg-green-500 px-3 py-2 text-sm font-medium text-white hover:bg-green-600">
                            <svg class="fill-current w-4 h-4" width="16" height="16" viewBox="0 0 20 20"><path d="M10 3a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H4a1 1 0 1 1 0-2h5V4a1 1 0 0 1 1-1Z"/></svg>
                            <span class="hidden sm:inline">Generate</span>
                        </a>
                        <a href="{{ route('admin.routes.sync') }}"
                            class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]">
                            <svg class="fill-current w-4 h-4" width="16" height="16" viewBox="0 0 20 20"><path d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"/></svg>
                            <span class="hidden sm:inline">Sync</span>
                        </a>
                        <a href="{{ route('admin.routes.refresh') }}"
                            class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                            <span class="hidden sm:inline">Cache</span>
                        </a>
                        <a href="{{ route('admin.routes.available') }}"
                            class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]">
                            <svg class="fill-current w-4 h-4" width="16" height="16" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/></svg>
                            <span class="hidden md:inline">Available</span>
                        </a>
                        @can('route.create')
                            <a href="{{ route('admin.routes.create') }}"
                                class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]">
                                <svg class="fill-current w-4 h-4" width="18" height="18" viewBox="0 0 20 20"><path d="M10 3a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H4a1 1 0 1 1 0-2h5V4a1 1 0 0 1 1-1Z"/></svg>
                                <span class="hidden md:inline">Add Route</span>
                            </a>
                        @endcan
                    </div>
                </div>

                @if(session('success'))
                    <div class="mb-5 rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-500/20 dark:bg-green-500/10">
                        <div class="flex items-center gap-2">
                            <svg class="fill-green-500" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM13.7071 8.70711C14.0976 8.31658 14.0976 7.68342 13.7071 7.29289C13.3166 6.90237 12.6834 6.90237 12.2929 7.29289L9 10.5858L7.70711 9.29289C7.31658 8.90237 6.68342 8.90237 6.29289 9.29289C5.90237 9.68342 5.90237 10.3166 6.29289 10.7071L8.29289 12.7071C8.68342 13.0976 9.31658 13.0976 9.70711 12.7071L13.7071 8.70711Z" fill=""/></svg>
                            <p class="text-sm text-green-700 dark:text-green-400">{{ session('success') }}</p>
                        </div>
                    </div>
                @endif

                <div class="rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.02]">
                    <div class="p-4 sm:p-5">
                        <form method="GET" action="{{ route('admin.routes.index') }}" class="mb-4 flex flex-wrap items-center justify-end gap-2 sm:gap-3">
                            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search..."
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-10 w-full sm:w-40 md:w-48 rounded-lg border border-gray-300 bg-transparent px-4 py-2 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                            <select name="type" class="dark:bg-dark-900 h-10 w-full sm:w-auto rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                <option value="">All Types</option>
                                @foreach($types as $type)
                                    <option value="{{ $type }}" {{ request('type') == $type ? 'selected' : '' }}>{{ ucfirst($type) }}</option>
                                @endforeach
                            </select>
                            <select name="method" class="dark:bg-dark-900 h-10 w-full sm:w-auto rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                <option value="">All Methods</option>
                                @foreach($methods as $method)
                                    <option value="{{ $method }}" {{ request('method') == $method ? 'selected' : '' }}>{{ $method }}</option>
                                @endforeach
                            </select>
                            <select name="status" class="dark:bg-dark-900 h-10 w-full sm:w-auto rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                <option value="">All Status</option>
                                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                            <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600 w-full sm:w-auto">Filter</button>
                            <a href="{{ route('admin.routes.index') }}" class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03] w-full sm:w-auto text-center">Reset</a>
                        </form>

                        <div class="max-w-full overflow-x-auto">
                            <table class="w-full routes-table">
                                <thead class="hidden md:table-header-group">
                                    <tr class="border-b border-gray-100 dark:border-gray-800">
                                        <th class="px-5 py-3 text-left"><span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">No</span></th>
                                        <th class="px-5 py-3 text-left"><span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Route Name</span></th>
                                        <th class="px-5 py-3 text-left"><span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">URL</span></th>
                                        <th class="px-5 py-3 text-left"><span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Method</span></th>
                                        <th class="px-5 py-3 text-left"><span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Controller</span></th>
                                        <th class="px-5 py-3 text-left"><span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Type</span></th>
                                        <th class="px-5 py-3 text-left"><span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Status</span></th>
                                        <th class="px-5 py-3 text-right"><span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Actions</span></th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                    @forelse($routes as $route)
                                        <tr class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50 md:table-row">
                                            <td class="px-5 py-4" data-label="No">
                                                <span class="text-sm text-gray-600 dark:text-gray-400 md:hidden mr-2">#</span>{{ ($routes->currentPage() - 1) * $routes->perPage() + $loop->iteration }}
                                            </td>
                                            <td class="px-5 py-4 route-name-cell" data-label="Route Name">
                                                {{ $route->name ?? '-' }}
                                            </td>
                                            <td class="px-5 py-4 route-url-cell" data-label="URL">
                                                <span class="text-sm font-mono text-gray-700 dark:text-gray-300">{{ $route->uri }}</span>
                                                @if($route->name)
                                                    <a href="{{ url($route->uri) }}" target="_blank" class="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 md:block hidden">
                                                        {{ url($route->uri) }}
                                                    </a>
                                                @endif
                                            </td>
                                            <td class="px-5 py-4 method-cell" data-label="Method">
                                                @foreach(explode(',', $route->method) as $m)
                                                    <span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium {{ \App\Models\Backend\Route::methodColors()[$m] ?? 'bg-gray-50 text-gray-600 dark:bg-gray-500/15 dark:text-gray-500' }}">
                                                        {{ $m }}
                                                    </span>
                                                @endforeach
                                            </td>
                                            <td class="px-5 py-4 controller-cell" data-label="Controller">
                                                <span class="block text-sm text-gray-700 dark:text-gray-300">{{ $route->controller ? class_basename($route->controller) : '-' }}</span>
                                                @if($route->action)<span class="action">{{ $route->action }}</span>@endif
                                            </td>
                                            <td class="px-5 py-4" data-label="Type">
                                                <span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium {{ \App\Models\Backend\Route::typeColors()[$route->type] ?? 'bg-gray-50 text-gray-600 dark:bg-gray-500/15 dark:text-gray-500' }}">
                                                    {{ strtoupper($route->type) }}
                                                </span>
                                            </td>
                                            <td class="px-5 py-4 status-cell" data-label="Status">
                                                @if($route->status)
                                                    <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500">Active</span>
                                                @else
                                                    <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-500">Inactive</span>
                                                @endif
                                            </td>
                                            <td class="px-5 py-4" data-label="Actions">
                                                <div class="flex items-center gap-2">
                                                    @can('route.update')
                                                        <a href="{{ route('admin.routes.edit', ['id' => $route->id]) }}"
                                                            class="inline-flex items-center justify-center rounded-lg bg-warning-50 p-2 text-warning-500 hover:bg-warning-100 dark:bg-warning-500/10 dark:text-warning-400 dark:hover:bg-warning-500/20"
                                                            title="Edit">
                                                            <svg class="fill-current" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 2.5L15.5 4.5L5 15H3V13L13.5 2.5ZM14.5 1.5L12.5 3.5L14.5 5.5L16.5 3.5L14.5 1.5Z" fill=""/></svg>
                                                        </a>
                                                    @endcan
                                                    @can('route.delete')
                                                        <form action="{{ route('admin.routes.destroy', ['id' => $route->id]) }}" method="POST" class="inline delete-form">
                                                            @csrf @method('DELETE')
                                                            <button type="submit"
                                                                class="inline-flex items-center justify-center rounded-lg bg-error-50 p-2 text-error-500 hover:bg-error-100 dark:bg-error-500/10 dark:text-error-400 dark:hover:bg-error-500/20"
                                                                title="Delete">
                                                                <svg class="fill-current" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 2.5H12L13 3.5H16V5H2V3.5H5L6 2.5ZM3.5 6H14.5L14 15.5H4L3.5 6ZM6.5 8.5H8V13.5H6.5V8.5ZM10 8.5H11.5V13.5H10V8.5Z" fill=""/></svg>
                                                            </button>
                                                        </form>
                                                    @endcan
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="px-5 py-12 text-center">
                                                <div class="mx-auto max-w-md">
                                                    <h4 class="mb-1 text-base font-medium text-gray-700 dark:text-gray-300">No routes found</h4>
                                                    <p class="text-sm text-gray-500 dark:text-gray-500">Click "Generate Routes" to scan and add routes.</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-6 border-t border-gray-100 pt-5 dark:border-gray-800">
                            {{ $routes->withQueryString()->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.delete-form').forEach(form => {
                form.addEventListener('submit', function (e) {
                    e.preventDefault();
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#ef4444',
                        cancelButtonColor: '#6b7280',
                        confirmButtonText: 'Yes, delete it!',
                        width: '380px',
                        padding: '1.25em',
                        customClass: { title: 'text-lg font-semibold', htmlContainer: 'text-sm', actions: 'text-sm' }
                    }).then((result) => {
                        if (result.isConfirmed) form.submit();
                    });
                });
            });
        });
    </script>
@endsection