@extends('backend.layouts.app')

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

@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">
                <!-- Top Bar with Title and Create Button -->
                <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                        All Roles
                    </h3>
                    @can('role.create')
                        <a href="{{ route('roles.create') }}"
                            class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
                            <!-- Icon Shield/Lock untuk Role -->
                            <svg class="fill-current" width="18" height="18" viewBox="0 0 20 20" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M10 2C8.5 2 7 3 7 5V7H6C5.5 7 5 7.5 5 8V16C5 16.5 5.5 17 6 17H14C14.5 17 15 16.5 15 16V8C15 7.5 14.5 7 14 7H13V5C13 3 11.5 2 10 2ZM10 3.5C10.8 3.5 11.5 4.2 11.5 5V7H8.5V5C8.5 4.2 9.2 3.5 10 3.5ZM10 11.5C10.8 11.5 11.5 12.2 11.5 13C11.5 13.8 10.8 14.5 10 14.5C9.2 14.5 8.5 13.8 8.5 13C8.5 12.2 9.2 11.5 10 11.5Z"
                                    fill="" />
                            </svg>
                            Create Role
                        </a>
                    @endcan
                </div>

                <!-- Success Message -->
                @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" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <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=""></path>
                            </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-5">
                        <form method="GET" action="{{ route('roles.index') }}" id="search-form" class="mb-4 flex items-center justify-end gap-3">
                            <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Search..."
                                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 Start ====== -->
                        <div class="max-w-full overflow-x-auto">
                            <div class="min-w-[600px]">
                                <table class="w-full">
                                    <!-- Table Header -->
                                    <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">
                                                    Role 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">
                                                    Guard
                                                </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">
                                                    Permissions
                                                </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>
                                    <!-- Table Body -->
                                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                        @forelse($roles as $role)
                                            <tr  class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50">
                                                <td class="px-5 py-4">
                                                    <span class="block text-sm font-medium text-gray-800 dark:text-white/90">
                                                        {{ ($roles->currentPage() - 1) * $roles->perPage() + $loop->iteration }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <div class="flex items-center gap-2">
                                                        <span
                                                            class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                                            {{ $role->name }}
                                                        </span>
                                                    </div>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <span class="inline-block rounded-full bg-brand-50 px-2.5 py-0.5 text-xs font-medium text-brand-600 dark:bg-brand-500/10 dark:text-brand-400">
                                                        {{ $role->guard_name }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <div class="max-w-md">
                                                        @php
    $permissions = $role->permissions->pluck('name')->toArray();
                                                        @endphp
                                                        @if(count($permissions) > 0)
                                                            <div class="flex flex-wrap gap-1">
                                                                @foreach(array_slice($permissions, 0, 3) as $permission)
                                                                    <span
                                                                        class="inline-block rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400">
                                                                        {{ $permission }}
                                                                    </span>
                                                                @endforeach
                                                                @if(count($permissions) > 3)
                                                                    <span
                                                                        class="inline-block rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400">
                                                                        +{{ count($permissions) - 3 }} more
                                                                    </span>
                                                                @endif
                                                            </div>
                                                        @else
                                                            <span class="text-sm text-gray-500 dark:text-gray-500">-</span>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <div class="flex items-center justify-end gap-2">
                                                        @can('role.update')
                                                            <a href="{{ route('roles.edit', $role->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 Role">
                                                                <svg class="fill-current" width="18" height="18" viewBox="0 0 18 18"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <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=""></path>
                                                                </svg>
                                                            </a>
                                                        @endcan
                                                        @can('role.delete')
                                                            @if ($role->name !== 'super-admin')
                                                                <form action="{{ route('roles.destroy', $role->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 Role">
                                                                        <svg class="fill-current" width="18" height="18"
                                                                            viewBox="0 0 18 18" fill="none"
                                                                            xmlns="http://www.w3.org/2000/svg">
                                                                            <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=""></path>
                                                                        </svg>
                                                                    </button>
                                                                </form>
                                                            @endif
                                                        @endcan
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr >
                                                <td colspan="4" class="px-5 py-12 text-center">
                                                    <div class="mx-auto max-w-md">
                                                        <div class="mb-4 flex justify-center">
                                                            <div class="rounded-full bg-gray-100 p-3 dark:bg-gray-800">
                                                                <svg class="h-8 w-8 text-gray-400 dark:text-gray-600"
                                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                        stroke-width="1.5"
                                                                        d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                                                                </svg>
                                                            </div>
                                                        </div>
                                                        <h4 class="mb-1 text-base font-medium text-gray-700 dark:text-gray-300">
                                                            No roles found
                                                        </h4>
                                                        <p class="text-sm text-gray-500 dark:text-gray-500">
                                                            Click the "Create Role" button to add your first role.
                                                        </p>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- ====== Table End ====== -->

                        <!-- Pagination -->
                        <div class="mt-6 border-t border-gray-100 pt-5 dark:border-gray-800">
                            {{ $roles->appends(request()->query())->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- SweetAlert2 JS for Delete Confirmation -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const deleteForms = document.querySelectorAll('.delete-form');
            deleteForms.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