@extends('layouts.master')
@section('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
@endsection

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />

<!-- Page Header -->
@php
    $breadcrumbs = [
        ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
        ['label' => 'Admins', 'url' => '#', 'active' => true],
    ];
@endphp
<x-ui.breadcrumb :items="$breadcrumbs" title="Admin Users" />

<!-- Card -->
<x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="">
    <x-slot name="header">
        <div class="card-title d-flex gap-2">
            <x-form.dropdown label="Bulk Actions">
                <li><a class="dropdown-item" href="#" id="enable" data-id="admin">Activate</a></li>
                <li><a class="dropdown-item" href="#" id="disable" data-id="admin">Deactivate</a></li>
            </x-form.dropdown>
            <div>
                <input class="form-control" type="text" id="search" placeholder="Search Here" aria-label=".form-control-sm example">
            </div>
        </div>
        <a href="{{ route('admin.admins.create') }}" class="btn btn-primary btn-wave add-data">
            <i class="ri-add-line me-1 align-middle"></i> Add Admin
        </a>
    </x-slot>

    @php
        $columns = [
            ['checkbox' => true, 'class' => 'ps-4'],
            ['label' => 'Name'],
            ['label' => 'Email'],
            ['label' => 'Roles'],
            ['label' => 'Status'],
            ['label' => 'Created At'],
            ['label' => 'Action'],
        ];
    @endphp

    <x-ui.table id="admintable" :columns="$columns"></x-ui.table>
</x-ui.card>
@endsection

@section('scripts')
    @include('layouts.components.common-script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@vite('resources/assets/js/select2.js')

<script>
$(document).ready(function () {
    const table = new DataTableUtility('admintable', "{{ route('admin.admins.data') }}", {}, [
        {
            data: 'id',
            orderable: false,
            render: function (data, type, row) {
                return `<input class="form-check-input sub_chk" type="checkbox" data-id="${data}" value="${data}">`;
            }
        },
        {
            data: 'name',
            render: function (data, type, row) {
                return `
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-md border p-1 bg-light">
                            <img src="{{ asset('uploads/') }}/`+row.profile+`"  alt="">
                        </span>
                        <div class="ms-2">
                            <p class="fw-medium mb-0 fs-14 text-primary">${data}</p>
                            <small class="text-muted">${row.email ?? ''}</small>
                        </div>
                    </div>`;
            }
        },
        { data: 'email', visible: false },
        {
            data: 'roles',
            render: function (data, type, row) {
                if (!data || data.length === 0) {
                    return `<span class="badge bg-secondary">No Role</span>`;
                }
               const names = (typeof data[0] === 'object') ? data.map(p => p.name) : data;
            return `<div class="permissions-cell">${names.map(n => `<span class="badge bg-primary-transparent text-primary me-1">${escapeHtml(n)}</span>`).join('')}</div>`;
            }
        },
        {
            data: 'status',
            render: function (data, type, row) {
                return data == 1
                    ? `<span class="badge bg-success-transparent text-success">Active</span>`
                    : `<span class="badge bg-danger-transparent text-danger">Inactive</span>`;
            }
        },
        {
            data: 'created_at',
            render: function (data) {
                return new Date(data).toLocaleDateString();
            }
        },
        {
            data: null,
            orderable: false,
            render: function (data, type, row) {
                return `
                    <a href="/admin/admins/${row.id}/edit-roles" class="btn btn-sm btn-info-light me-1" title="Assign Roles">
                        <i class="ri-shield-user-line"></i>
                    </a>
                     <a href="/admin/admins/${row.id}/edit/" class="btn btn-sm btn-info-light me-1" title="Edit">
                        <i class="ri-edit-line"></i>
                    </a>
                    <a href="javascript:void(0);" data-id="${row.id}" data-type="admin" class="btn btn-sm btn-primary2-light deleteItem" title="Delete">
                        <i class="ri-delete-bin-line"></i>
                    </a>`;
            }
        }
    ]);
    table.initialize();
});

function escapeHtml(unsafe) {
  if (!unsafe && unsafe !== 0) return '';
  return String(unsafe)
    .replaceAll('&', '&amp;')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#039;');
}
</script>
@endsection