@extends('backend.layouts.app')

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

@push('styles')
    <link href="{{ asset('vendor/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
    <!-- Breadcrumb Start -->
    <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"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" 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>
    <!-- Breadcrumb End -->

    <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">
                <!-- Stats Cards -->
                <div class="mb-6 flex flex-wrap items-stretch gap-4">
                    <div class="min-w-[200px] flex-1 rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-white/[0.03]">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Permissions</p>
                                <p class="mt-1 text-2xl font-bold text-gray-800 dark:text-white">{{ $stats['total'] }}</p>
                            </div>
                            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
                                <svg class="h-6 w-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="min-w-[200px] flex-1 rounded-xl border border-green-200 bg-green-50 p-5 dark:border-green-800 dark:bg-green-900/20">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-green-600 dark:text-green-400">Generated</p>
                                <p class="mt-1 text-2xl font-bold text-green-700 dark:text-green-300">{{ $stats['generated'] }}</p>
                            </div>
                            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/50">
                                <svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="min-w-[200px] flex-1 rounded-xl border border-red-200 bg-red-50 p-5 dark:border-red-800 dark:bg-red-900/20">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-red-600 dark:text-red-400">Missing</p>
                                <p class="mt-1 text-2xl font-bold text-red-700 dark:text-red-300">{{ $stats['missing'] }}</p>
                            </div>
                            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/50">
                                <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Generate Form -->
                <div class="mb-6 rounded-xl border border-gray-200 bg-gray-50/50 p-5 dark:border-gray-700 dark:bg-gray-900/30">
                    <h3 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Generate New Permission</h3>
                    <form action="{{ route('auto-permissions.generate') }}" method="POST" class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-4">
                        @csrf
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Model <span class="text-error-500">*</span></label>
                            <select name="model" required
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 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">
                                <option value="">-- Select Model --</option>
                                @foreach ($models as $model)
                                    <option value="{{ $model['class'] }}" {{ old('model') == $model['class'] ? 'selected' : '' }}>
                                        {{ $model['name'] }} (→ {{ $model['prefix'] }}.*)
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Actions</label>
                            <div class="flex flex-wrap gap-4">
                                @foreach (['view', 'create', 'update', 'delete'] as $action)
                                    <label class="flex items-center gap-2">
                                        <input type="checkbox" name="actions[]" value="{{ $action }}" checked
                                            class="h-4 w-4 rounded border-gray-300 text-brand-500 focus:ring-brand-500">
                                        <span class="text-sm text-gray-700 dark:text-gray-400">{{ ucfirst($action) }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Assign to Roles</label>
                            <select name="roles[]" multiple
                                class="js-role-select dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 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">
                                @foreach ($roles as $role)
                                    <option value="{{ $role->id }}">{{ $role->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="flex items-end">
                            <button type="submit"
                                class="w-full rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600">
                                Generate
                            </button>
                        </div>
                    </form>
                </div>

                <div class="rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.02]">
                    <div class="p-5">
                        <!-- Search -->
                        <form method="GET" action="{{ route('auto-permissions.index') }}" id="search-form" class="mb-4 flex items-center justify-end gap-3">
                            <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Search permission..."
                                oninput="debounceSearch(this)"
                                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 max-w-xs 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">
                        </form>
                        <script>
                            let searchTimer;
                            function debounceSearch(el) {
                                clearTimeout(searchTimer);
                                searchTimer = setTimeout(() => el.form.submit(), 400);
                            }
                        </script>
                        <!-- Table -->
                        <div class="max-w-full overflow-x-auto">
                            <div class="min-w-[700px]">
                                <table class="w-full">
                                    <thead>
                                        <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">Permission</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">Module</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">Action</span>
                                            </th>
                                            <th class="px-5 py-3 text-center">
                                                <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Status</span>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                        @forelse($permissions as $index => $perm)
                                            <tr class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50 {{ $perm['generated'] ? '' : 'bg-red-50/50 dark:bg-red-900/10' }}">
                                                <td class="px-5 py-4">
                                                    <span class="block text-sm font-medium text-gray-800 dark:text-white/90">
                                                        {{ ($paginator->currentPage() - 1) * $paginator->perPage() + $index + 1 }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <span class="block font-mono text-xs text-gray-700 dark:text-gray-300">
                                                        {{ $perm['permission'] }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <span class="block text-sm text-gray-600 dark:text-gray-400">
                                                        {{ $perm['module'] }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <span class="rounded-full px-2 py-0.5 text-xs font-medium
                                                        @if($perm['action'] == 'view') bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400
                                                        @elseif($perm['action'] == 'create') bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400
                                                        @elseif($perm['action'] == 'update') bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400
                                                        @elseif($perm['action'] == 'delete') bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400
                                                        @endif">
                                                        {{ ucfirst($perm['action']) }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4 text-center">
                                                    @if($perm['generated'])
                                                        <span class="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
                                                            <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                                                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                                            </svg>
                                                            Generated
                                                        </span>
                                                    @else
                                                        <span class="inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400">
                                                            <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                                                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                                            </svg>
                                                            Missing
                                                        </span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="5" 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 permissions found</h4>
                                                        <p class="text-sm text-gray-500 dark:text-gray-500">
                                                            No permissions match your search criteria.
                                                        </p>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- Pagination -->
                        <div class="mt-6 border-t border-gray-100 pt-5 dark:border-gray-800">
                            {{ $paginator->appends(request()->query())->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/dist/js/select2.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('.js-role-select').select2({
                searchable: true,
                width: '100%',
                placeholder: 'Select roles',
                closeOnSelect: false
            });
        });
    </script>
@endpush