@extends('admin.layouts.app')

@section('title', 'Admin Users')

@section('content')
<div class="main-content app-content mt-0">
    <div class="side-app">
        <div class="main-container container-fluid">
            <div class="page-header">
                <h1 class="page-title">Admin Users</h1>
                <div>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Admin Users</li>
                    </ol>
                </div>
            </div>

            <!-- Alert Messages -->
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <div class="row">
                <!-- Total Admins Card -->
                <div class="col-sm-6 col-lg-6 col-md-12 col-xl-4">
                    <div class="card">
                        <div class="row">
                            <div class="col-4">
                                <div class="card-img-absolute circle-icon bg-primary align-items-center text-center box-primary-shadow bradius">
                                    <img src="{{ asset('admin/assets/images/svgs/circle.svg') }}" alt="img" class="card-img-absolute">
                                    <i class="lnr lnr-user fs-30 text-white mt-4"></i>
                                </div>
                            </div>
                            <div class="col-8">
                                <div class="card-body p-4">
                                    <h2 class="mb-2 fw-normal mt-2">{{ $totalAdmins }}</h2>
                                    <h5 class="fw-normal mb-0">Total Administrators</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                            <h3 class="card-title">Admin Users List</h3>
                            <a href="{{ route('admin.admin-users.create') }}" class="btn btn-primary btn-sm"><i class="fe fe-plus me-1"></i>Add Admin User</a>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                {{ $dataTable->table(['class' => 'table table-bordered text-nowrap border-bottom w-100 align-middle']) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
    {{ $dataTable->scripts() }}
    <!-- INTERNAL Sweet-Alert js -->
    <script src="{{ asset('admin/assets/plugins/sweet-alert/sweetalert.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(document).on('click', '.delete-btn', function() {
                var button = $(this);
                var id = button.data('id');
                var deleteUrl = "{{ route('admin.admin-users.destroy', ':id') }}".replace(':id', id);

                swal({
                    title: "Are you sure?",
                    text: "You will not be able to recover this admin user account!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "Cancel",
                    closeOnConfirm: false
                }, function(isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: deleteUrl,
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                _method: 'DELETE'
                            },
                            success: function(response) {
                                if (response.success) {
                                    swal({
                                        title: "Deleted!",
                                        text: response.message,
                                        type: "success",
                                        timer: 1500,
                                        showConfirmButton: false
                                    });
                                    // Reload Yajra DataTable
                                    if (window.LaravelDataTables && window.LaravelDataTables["admin-users-table"]) {
                                        window.LaravelDataTables["admin-users-table"].ajax.reload();
                                    } else {
                                        $('#admin-users-table').DataTable().ajax.reload();
                                    }
                                } else {
                                    swal("Failed!", response.message, "error");
                                }
                            },
                            error: function(xhr) {
                                var message = "Something went wrong. Please try again.";
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                swal("Failed!", message, "error");
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection