@extends('layouts-v2.app')

@section('title', 'Danh sách vai trò')

@section('content')
<div class="bg-gray-50 text-gray-700">
    {{-- Breadcrumb --}}
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('v2.dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Quyền truy cập</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Quyền truy cập</h1>

    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="p-4 flex justify-between items-center border-b border-gray-100">
            {{-- Số lượng hiển thị --}}
            <x-floating-select 
                name="perpage"
                id="perpage"
                class="w-40"
                label="Số lượng hiển thị"
                :options="[
                    '' => '10',
                    '20' => '20',
                    '30' => '30',
                    '50' => '50',
                    '100' => '100'
                ]"
            />
            <button id="btn-add-role-modal" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded flex items-center text-sm font-medium transition">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                THÊM VAI TRÒ
            </button>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-gray-50 uppercase text-sm  text-gray-500 border-b border-gray-200">
                    <tr>
                        <th class="px-6 py-4 font-semibold">TÊN VAI TRÒ</th>
                        <th class="px-6 py-4 font-semibold">MÔ TẢ</th>
                        <th class="px-6 py-4 font-semibold text-right">HÀNH ĐỘNG</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100" id="tbody-oa-roles">
                    <tr>
                        <td colspan="3" class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium text-gray-900">
                            <div class="flex items-center justify-center">
                                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes loader2{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><path fill="#265BFF" d="M17.179 13.605a.431.431 0 00.279.514l.775.245a.393.393 0 00.499-.268 7.318 7.318 0 00-4.5-8.658.39.39 0 00-.507.255l-.245.775a.43.43 0 00.261.523 5.69 5.69 0 013.438 6.614z" style="animation:loader2 1s cubic-bezier(.63,-.71,.32,1.28) infinite both;transform-origin:center center"/></svg>
                            </div>            
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Phân trang -->
    <div class="mt-6 flex justify-center" id="pagination"></div>

    <!-- Add Role Modal -->
    <div id="add-role-modal" class="fixed inset-0 z-50 overflow-y-auto bg-gray-500 bg-opacity-75 transition-opacity hidden modal-overlay" aria-labelledby="modal-title-add-role" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen">
            <div class="relative w-full max-w-3xl bg-white rounded-xl shadow-xl transform transition-all modal-content">
                <div class="flex justify-between items-center px-6 py-4 border-b border-gray-100">
                    <h2 class="text-xl font-semibold text-gray-800">Thêm vai trò</h2>
                    <button class="btn-close-modal text-gray-400 hover:text-gray-600 bg-gray-100 rounded p-1 transition">
                        <svg class="w-5 h-5" 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>
                    </button>
                </div>
    
                <form action="#" method="POST" class="p-6" id="add-role-form">
                    @csrf
                    <div class="mb-4">
                        <x-floating-input type="text" name="title" label="Tên vai trò" id="add-role-title" />
                    </div>
    
                    <div class="mb-6">
                        <textarea rows="4" placeholder="Mô tả" name="description" id="add-role-description"
                            class="w-full outline-none border border-gray-300 rounded-lg shadow-sm focus:!border-blue-500 focus:!ring-blue-500 py-2.5 px-4 text-sm"></textarea>
                    </div>
    
                    <div class="flex justify-end space-x-3 mb-8">
                        <button type="button" class="btn-close-modal bg-gray-100 hover:bg-gray-200 text-gray-500 px-8 py-2 rounded font-semibold uppercase text-sm tracking-wider transition">
                            Hủy
                        </button>    
                        <button id="btn-submit-add-role" class="disabled:opacity-50 disabled:cursor-not-allowed bg-blue-500 hover:bg-blue-600 text-white px-8 py-2 rounded font-semibold uppercase text-sm tracking-wider transition">
                            Xác nhận
                        </button>
                    </div>

                    <div class="mb-4 px-1">
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                </svg>
                            </span>
                            <x-floating-input type="text" name="add-role-search-permissions" label="Tìm kiếm quyền hoặc tài nguyên" id="add-role-search-permissions" />
                        </div>
                    </div>

                    <!-- Danh sach Permissions -->
                    <div class="border-t border-gray-100 mt-4 overflow-y-auto max-h-80">
                        <table class="w-full text-left border-collapse">
                            <thead class="sticky top-0 z-10 bg-white">
                                <tr class="text-gray-400 text-sm uppercase tracking-wider border-b border-gray-50">
                                    <th class="py-4 px-2 w-10">
                                        <input type="checkbox" id="add-role-check-all-permissions"
                                            class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    </th>
                                    <th class="py-4 font-semibold">QUYỀN</th>
                                    <th class="py-4 font-semibold">TÀI NGUYÊN</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100" id="tbody-add-role-permissions"></tbody>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Role Modal -->
    <div id="edit-role-modal" class="fixed inset-0 z-50 overflow-y-auto bg-gray-500 bg-opacity-75 transition-opacity hidden modal-overlay" aria-labelledby="modal-title-edit-role" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen">
            <div class="relative w-full max-w-3xl bg-white rounded-xl shadow-xl transform transition-all modal-content">
                <div class="flex justify-between items-center px-6 py-4 border-b border-gray-100">
                    <h2 class="text-xl font-semibold text-gray-800">Sửa vai trò</h2>
                    <button class="btn-close-modal text-gray-400 hover:text-gray-600 bg-gray-100 rounded p-1 transition">
                        <svg class="w-5 h-5" 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>
                    </button>
                </div>
    
                <form action="#" method="POST" class="p-6" id="edit-role-form">
                    @csrf
                    <div class="mb-4">
                        <x-floating-input type="text" name="title" label="Tên vai trò" id="edit-role-title" />
                    </div>
    
                    <div class="mb-6">
                        <textarea rows="4" placeholder="Mô tả" name="description" id="edit-role-description"
                            class="w-full outline-none border border-gray-300 rounded-lg shadow-sm focus:!border-blue-500 focus:!ring-blue-500 py-2.5 px-4 text-sm"></textarea>
                    </div>
    
                    <div class="flex justify-end space-x-3 mb-8">
                        <button type="button" class="btn-close-modal bg-gray-100 hover:bg-gray-200 text-gray-500 px-8 py-2 rounded font-semibold uppercase text-sm tracking-wider transition">
                            Hủy
                        </button>    
                        <button id="btn-submit-edit-role" class=" disabled:opacity-50 disabled:cursor-not-allowed bg-blue-500 hover:bg-blue-600 text-white px-8 py-2 rounded font-semibold uppercase text-sm tracking-wider transition">
                            Xác nhận
                        </button>
                    </div>

                    <div class="mb-4 px-1">
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                </svg>
                            </span>
                            <x-floating-input type="text" name="edit-role-search-permissions" label="Tìm kiếm quyền hoặc tài nguyên" id="edit-role-search-permissions" />
                        </div>
                    </div>
    
                    <!-- Danh sach Permissions -->
                    <div class="border-t border-gray-100 mt-4 overflow-y-auto max-h-80">
                        <table class="w-full text-left border-collapse">
                            <thead class="sticky top-0 z-10 bg-white">
                                <tr class="text-gray-400 text-sm uppercase tracking-wider border-b border-gray-50">
                                    <th class="py-4 px-2 w-10">
                                        <input type="checkbox" id="edit-role-check-all-permissions" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    </th>
                                    <th class="py-4 font-semibold">QUYỀN</th>
                                    <th class="py-4 font-semibold">TÀI NGUYÊN</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100" id="tbody-edit-role-permissions"></tbody>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    window.routes = {
        getOARoles: "{{ route('oa-roles.getOARoles') }}",
        getOARole: "{{ route('oa-roles.getOARole',['id' => ':id']) }}",
        createOARole: "{{ route('oa-roles.store') }}",
        updateOARole: "{{ route('oa-roles.update',['id' => ':id']) }}",
        deleteOARole: "{{ route('oa-roles.destroy',['id' => ':id']) }}",
        getOAPermissions: "{{ route('oa-permissions.getOAPermissions') }}",
        getOARolePermissions: "{{ route('oa-permissions.getOARolePermissions',['role_id' => ':role_id']) }}",
    }
</script>
<script src="{{ asset('js/OA/utils.js') }}"></script>
<script src="{{ asset('js/OA/oa-role.js') }}"></script>
@endsection