@extends('layouts.app')

@section('content')
<div id="loading-overlay">
    <div class="spinner"></div>
</div>
    <!-- Inner Navbar -->
    <div class="flex items-stretch lg:fixed z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted"
        id="navbar">
        <div class="rounded-t-xl border border-input border-b-input bg-background filter-container flex items-stretch grow">
            <!-- Container -->
            <div class="kt-container-fluid flex justify-center items-stretch gap-5">
                <div class="grid items-stretch">
                    <div class="kt-scrollable-x-auto flex items-stretch">
                        <div class="kt-menu gap-5 lg:gap-7.5" data-kt-menu="true">
                            @include('includes.admin-forms-navbar')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End of Inner Navbar -->

    <!-- Container -->
    <div class="kt-container-fluid">
        <div class="grid mb-5">
            <div class="flex justify-between items-center">
                <!-- Search Box on Left -->
                <div id="customSearch" class="flex items-center gap-2">
                    <select id="pageLengthSelect" class="border px-2 py-2 rounded-md">
                        <option value="10" selected>10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                    </select>
                    <input type="text" id="search" placeholder="Search Role"
                        class="px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:bg-primary">
                </div>
                <!-- Page Length Dropdown -->
                 @can('role create')
                      <button type="button" id="openModal"
                    class="export-btn flex items-center gap-2 px-4 py-2 text-black font-semibold rounded-lg shadow-sm hover:shadow-md transition-all duration-200">
                    + Add New Role
                </button>
                 @endcan
               
            </div>

            <table id="role_table" class="divide-y divide-gray-200">
                <thead class="bg-primary">
                    <tr>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">SR.</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Role</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Department</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Platform Type</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse ($roles as $index => $role)
                        <tr data-id="{{ $role->id }}" data-name="{{ $role->name }}">
                            <td class="px-4 py-2 text-gray-800">{{ $index + 1 }}</td>
                            <td class="px-4 py-2 text-gray-800">{{ $role->name }}</td>
                             <td class="px-4 py-2 text-gray-800" data-department-id="{{ $role->department_id }}">
                                @if($role->department_id == 1)
                                    Soil and Water Conservation Department
                                @elseif($role->department_id == 2)
                                    Directorate of Agricultural Engineering
                                @elseif($role->department_id == 3)
                                    Both
                                @else
                                   
                                @endif
                            </td>
                             <td class="px-4 py-2 text-gray-800">{{ $role->platform_type }}</td>
                            <td class="px-4 py-2">
                                @can('assign permission')
                                     <button class="assign-permission-btn px-2 py-1 bg-success text-white rounded-md"
                                    data-id="{{ $role->id }}"  data-platform="{{ $role->platform_type }}">Assign Permission</button>
                                @endcan
                               
                                   @can('role edit', )
                                       <button class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded-md"
                                    data-id="{{ $role->id }}">Edit</button>
                                   @endcan 
                                   @can('role delete', )
                                <button class="delete-btn px-2 py-1 bg-red-600 text-white rounded-md"
                                    data-id="{{ $role->id }}">delete</button>
                                     @endcan  
                            </td>
                        </tr>
                    @empty

                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    <!-- End of Container -->

    <!-- Modal -->
    <div id="modal" class="model hidden">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h2 id="modalTitle">Role</h2>
                <button id="closeModal">✕</button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                <div class="form-group">
                    <label class="block font-medium mb-1">Platform Type</label>
                    <select id="platform_type" class="w-full border rounded-lg p-2 mb-4" required>
                        <option value="">Select Platform Type</option>
                        <option value="web">Web</option>
                        <option value="app">App</option>
                       
                    </select>
                </div>
                 <div class="form-group">
                    <label class="block font-medium mb-1">Department</label>
                    <select id="dept" class="w-full border rounded-lg p-2 mb-4" required>
                        <option value="">Select Department</option>
                        <option value="1">Soil and Water Conservation Department</option>
                        <option value="2">Directorate of Agricultural Engineering</option>
                        <option value="3">Both</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="roleName" class="form-label">Name</label>
                    <input id="roleName" type="text" placeholder="Enter name" class="w-full">
                    <input type="hidden" id="roleId">
                </div>

                
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">
                <button id="cancel">Cancel</button>
                <button id="saveBtn">Submit</button>
            </div>
        </div>
    </div>


    {{-- assign permission modal --}}
    <!-- Modal -->
    <div id="assign-per-modal" class="model hidden">
        <div class="modal-content kt-scrollable-y-auto">
            <!-- Modal Header -->
            <div class="modal-header">
                <h2 id="assignModalTitle">Role Managment</h2>
                <button id="closePermissionModal">✕</button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                <!-- Form Content -->
                <form id="multiStepForm">
                    <!-- Tabs Wrapper -->
                    <div class="overflow-x-auto whitespace-nowrap scrollbar-hide mb-4">
                        <ul id="formTabs" class="flex text-sm font-medium text-body w-full">

                            <!-- Tab 1 -->
                            <li class="w-1/2 tab-web">
                                <a href="#" data-step="step1" class="tab-link flex items-center justify-center text-body 
                   border border-default rounded-l-lg font-medium leading-5 text-sm px-4 py-2.5 bg-gray-200">Dashboards</a>
                            </li>

                            <!-- Tab 2 -->
                            <li class="w-1/2 tab-web">
                                <a href="#" data-step="step2" class="tab-link flex items-center ms-2 justify-center text-body 
                   border border-default rounded-r-lg font-medium leading-5 text-sm px-4 py-2.5 bg-gray-200">Forms</a>
                            </li>

                             <li class="w-1/2" id="tab-app">
                                <a href="#" data-step="step3" class="tab-link flex items-center ms-2 justify-center text-body 
                   border border-default rounded-r-lg font-medium leading-5 text-sm px-4 py-2.5 bg-gray-200">Forms App</a>
                            </li>

                        </ul>
                    </div>

                    <!-- Form Steps -->
                    <div class="form-step" id="step1">
                        <input type="hidden" id="assignRoleId">
                        <div class="container mt-5 rounded bg-white shadow-lg" style="max-width: 800px;">
                            <div class="overflow-x-auto" class="modal-body scrollable-modal">
                                <table class="w-full border border-gray-300">
                                        <thead>
                                        <tr class="bg-gray-200 text-left">
                                            <th class="border p-2">Dashboards Name</th>
                                            <th class="border p-2 text-center">View</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="form-step hidden" id="step2">
                        <div class="container mt-5 rounded bg-white shadow-lg" style="max-width: 800px;">
                            <div>

                                <table class="w-full border border-gray-300">
                                    <thead>
                                        <tr class="bg-gray-200 text-left">
                                            <th class="border p-2">Forms</th>
                                            <th class="border p-2 text-center">View</th>
                                            <th class="border p-2 text-center">Create</th>
                                            <th class="border p-2 text-center">Edit</th>
                                            <th class="border p-2 text-center">Delete</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                       

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>

                      <div class="form-step hidden" id="step3">
                        <div class="container mt-5 rounded bg-white shadow-lg" style="max-width: 800px;">
                            <div>

                                <table class="w-full border border-gray-300">
                                    <thead>
                                        <tr class="bg-gray-200 text-left">
                                            <th class="border p-2">Forms</th>
                                            <th class="border p-2 text-center">View</th>
                                            <th class="border p-2 text-center">Create</th>
                                            <th class="border p-2 text-center">Edit</th>
                                            <th class="border p-2 text-center">Delete</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                       

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>



                    <!-- Modal Footer -->
                    <div class="modal-footer">
                        <button id="cancelPermissionModal">Cancel</button>
                        <button id="saveBtn-permission-modal">Save</button>
                    </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    @vite('resources/js/admin-forms/role.js')
     <script>
    window.userPermissions = @json(auth()->user()->getAllPermissions()->pluck('name')->toArray());
</script>
@endsection

</rewritten_file>