@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <x-dashboard.breadcumb :title="$title" />
        @if ($errors->any())
            <x-flash-message type="danger" :messages="$errors->all()" />
        @endif

        <div class="row">
            <div class="col-lg-4 col-xl-3">
                <div class="card profile-card">
                    @include('user::user.add-user-form')
                </div>
            </div>

            <div class="col-lg-xl-8 col-lg-9">
                <div class="card">
                    <div class="card-body">
                        @php
                            $columns = [
                                [
                                    'title' => 'S.N',
                                    'data' => 'DT_RowIndex',
                                    'name' => 'DT_RowIndex',
                                    'orderable' => false,
                                    'searchable' => false,
                                    'sortable' => false,
                                ],
                                ['title' => 'Name', 'data' => 'name', 'name' => 'name'],
                                ['title' => 'Employee', 'data' => 'employee', 'name' => 'employee'],
                                ['title' => 'Email', 'data' => 'email', 'name' => 'email'],
                                ['title' => 'Role', 'data' => 'role', 'name' => 'role'],
                                ['title' => 'Can Login', 'data' => 'can_login', 'name' => 'can_login'],
                                [
                                    'title' => 'Action',
                                    'data' => 'action',
                                    'orderable' => false,
                                    'searchable' => false,
                                ],
                            ];
                        @endphp

                        <x-data-table-script :route="route('user.index')" :reorder="route('user.reorder')" :columns="$columns" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('user::user.modal.assign-role')
@endsection

@push('js')
    <script>
        $(document).on("click", ".toggle-activation-btn", function() {
            const user = JSON.parse($(this).attr('data-user'));
            const iconText = user.can_login ? 'ri-lock-2-line' : 'ri-lock-unlock-line';
            const title = user.can_login ? 'Deactivate' : 'Activate';
            const message = user.can_login == 0 ?
                `User account login <span class="fw-medium text-dark">${user.email},</span> will activated.<br/> The user can log in to continue.` :
                `User account login <span class="fw-medium text-dark">${user.email},</span> will be deactivated.<br/> Please ensure this action is intentional.`;

            Swal.fire({
                html: `<div class="mt-3"><div class="avatar-lg mx-auto"><div class="avatar-title bg-light text-success display-5 rounded-circle"><i class="${iconText}"></i></div></div><div class="mt-4 pt-2 fs-15"><h4 class="fs-20 fw-semibold">${title} ${user.name}'s Login Access</h4><p class="text-muted mb-0 mt-3 fs-13">${message}</p></div></div>`,
                showCancelButton: !1,
                customClass: {
                    confirmButton: 'btn btn-primary mb-1',
                },
                confirmButtonText: title,
                buttonsStyling: !1,
                footer: '<p class="fs-14 text-muted mb-0">If you have any issue, <a href="javascript:void(0);" class="fw-semibold text-decoration-underline">contact support</a> for assistance.</p>',
                showCloseButton: !0,
            }).then((result) => {
                if (result.isConfirmed) {
                    $.post($(this).attr('data-link'), {
                            _token: '{{ csrf_token() }}',
                        })
                        .done(function(response) {
                            if (response.status === 200) {
                                flasher.success(response.message);
                                $('.ajax-datatable').DataTable().ajax.reload();
                                $('[data-bs-toggle="tooltip"]').tooltip();
                            }
                        })
                        .fail(function(xhr, status, error) {
                            flasher.error(xhr.responseText);
                            console.error(xhr.responseText);
                        });
                }
            });
        });
    </script>
@endpush