@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@php($headingOptions = [
    '<div class="search-field">
        <input type="text" class="form-control pr-45 module-search" placeholder="Search" value="'. request()->input('search_text') .'">
        '. (request()->has('search_text') && request()->input('search_text') ? '<i class="'. \Config::get('settings.icon_cross') .' search-clear-icon"></i>' : '<i class="'. \Config::get('settings.icon_search') . '"></i>') .'
    </div>',
    $permission['create'] ? '<a href="' . route($routePrefix . '.create') . '" class="'. \Config::get('view.buttons.primary') .' show-modal"><i class="'. \Config::get('settings.icon_add') .'"></i> Add New User Class</a>' : ''
])
@extends('admin.layouts.layout', $headerOption)
@section('content')
    <div class="col-12">
        <div class="project-box">
            <x-heading-sec :module="$module" :options="$headingOptions" />
            <div class="table-responsive project-table">

                <table id="datatable" class="{{ \Config::get('view.table.table_class') }}">

                    <thead class="{{ \Config::get('view.table.table_head_class') }}">

                        <tr>
                            <th class="w-5"></th>
                            <th>User Class</th>
                            <th>Active Users</th>
                            @if($permission['edit'] || $permission['destroy'] || $permission['manageRole'])
                                <th class="w-25 text-right">Actions</th>
                            @endif
                        </tr>

                    </thead>

                    <tbody>
                        @if(isset($data) && count($data) > 0)
                            @foreach($data as $userClass)
                                <tr data-id="{{ $userClass->id }}">
                                    <td class="w-5"><img src="{{ asset('img/drag-dot.svg') }}" class="drag-handle"></td>
                                    <td>{{ $userClass->title ?? '' }}</td>
                                    <td>{{ $userClass->activeUsers->count() ?? '' }}</td>
                                    @if($permission['edit'] || $permission['destroy'] || $permission['manageRole'])
                                        <td>
                                            <div class="d-flex gap-2 justify-content-end">
                                                @if(isset($permission['destroy']) && $permission['destroy'])
                                                    <a href="javascript:void(0);" class="action-btn" data-toggle="tooltip" title="Delete"
                                                    @if($userClass->activeUsers->count() > 0)
                                                    onclick="showAlert('Active Users Exist', 'Can not delete this class.');"
                                                    @else
                                                    data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?"
                                                    data-confirm-yes="event.preventDefault();
                                                    document.getElementById('delete-form-{{ $userClass->id }}').submit();"
                                                    @endif
                                                    ><i class="{{ \Config::get('settings.icon_delete') }}"></i></a>
                                                    {!! html()->form('DELETE', route($routePrefix.'.destroy', $userClass->id))->attributes([
                                                        'style' => 'display:inline',
                                                        'id' => 'delete-form-' . $userClass->id,
                                                    ])->open() !!}
                                                    {!! html()->form()->close() !!}
                                                    
                                                    <a href="javascript:void(0);" class="action-btn" data-toggle="tooltip" title="{{ $userClass->status == 1 ? 'Block' : 'Unblock' }}"
                                                    @if($userClass->activeUsers->count() > 0)
                                                    onclick="showAlert('Active Users Exist', 'Can not block this class.');"
                                                    @else
                                                    data-confirm="Are You Sure?|Do you want to {{ $userClass->status == 1 ? 'block' : 'unblock' }} this user class?"
                                                    data-confirm-yes="event.preventDefault();
                                                    document.getElementById('change-status-form-{{ $userClass->id }}').submit();"
                                                    @endif
                                                    ><i class="{{ $userClass->statuses[$userClass->status == 1 ? 2 : 1]['icon'] }}"></i></a>
                                                    {!! html()->form('POST', route($routePrefix.'.change-status', $userClass->id))->attributes([
                                                        'style' => 'display:inline',
                                                        'id' => 'change-status-form-' . $userClass->id,
                                                    ])->open() !!}
                                                    {!! html()->hidden('status', $userClass->status == 1 ? 2 : 1) !!}
                                                    {!! html()->hidden('id', $userClass->id) !!}
                                                    {!! html()->form()->close() !!}
                                                @endif
                                                @if(isset($permission['edit']) && $permission['edit'])
                                                    <a href="{{ route($routePrefix.'.edit', $userClass->id) }}" data-toggle="tooltip" title="Edit" class="action-btn show-modal" data-url="{{ route($routePrefix.'.edit', $userClass->id) }}"><i class="{{ \Config::get('settings.icon_edit') }}"></i></a>
                                                @endif
                                                @if(isset($permission['manageRole']) && $permission['manageRole'])
                                                    <a href="{{ route('permissions.manage_role',$userClass->id) }}" data-toggle="tooltip" title="Permission" class="action-btn" data-url="{{ route('permissions.manage_role',$userClass->id) }}"><i class="{{ \Config::get('settings.icon_settings') }}"></i></a>
                                                @endif
                                            </div>
                                        </td>
                                    @endif
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="5" class="text-center">No User Classes Found</td>
                            </tr>
                        @endif
                    </tbody>

                </table>

            </div>
            @include('admin.components.pagination')
        </div>
    </div>
@endsection

@push('page_script')
<script src="{{ asset('assets/js/common.js') }}"></script>
<script src="{{ asset('assets/js/drag-drop-table.js') }}"></script>
<script>
$(document).ready(function() {
    // Initialize drag and drop functionality
    initTableDragDrop({
        tableSelector: '#datatable',
        parentReorderUrl: '{{ route("manages.user-classes.update-order") }}',
        csrfToken: '{{ csrf_token() }}'
    });
});
</script>
@endpush