@extends('backend.app')

@section('title', 'List of users')

@push('style')
@endpush

@section('content')
    {{-- PAGE-HEADER --}}
    <div class="page-header">
        <div>
            <h1 class="page-title">List of users</h1>
        </div>
        <div class="ms-auto pageheader-btn">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="javascript:void(0);">users</a></li>
                <li class="breadcrumb-item active" aria-current="page">users</li>
            </ol>
        </div>
    </div>
    {{-- PAGE-HEADER --}}

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-end mb-2">
                        <a href="{{ route('users.create') }}" class="btn btn-primary">Add User</a>
                    </div>
                    <div class="row g-3 align-items-end mb-3">
                        <div class="col-md-4">
                            <label class="form-label" for="filterUserName">Name</label>
                            <input type="text" class="form-control" id="filterUserName" placeholder="Search name">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="filterUserEmail">Email</label>
                            <input type="text" class="form-control" id="filterUserEmail" placeholder="Search email">
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered text-nowrap border-bottom w-100" id="datatable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Avatar</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Role</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- dynamic data --}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        $(document).ready(function() {

            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                }
            });
            if (!$.fn.DataTable.isDataTable('#datatable')) {
                let dTable = $('#datatable').DataTable({
                    order: [],
                    lengthMenu: [
                        [10, 25, 50, 100, -1],
                        [10, 25, 50, 100, "All"]
                    ],
                    processing: true,
                    responsive: true,
                    serverSide: true,

                    language: {
                        processing: `<div class="text-center">
                        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                        <span class="visually-hidden">Loading...</span>
                        </div>
                        </div>`
                    },

                    scroller: {
                        loadingIndicator: false
                    },
                    pagingType: "full_numbers",
                    dom: "<'row justify-content-between table-topbar'<'col-md-2 col-sm-4 px-0'l><'col-md-2 col-sm-4 px-0'f>>tipr",
                    ajax: {
                        url: "{{ route('users.index') }}",
                        type: "GET",
                        data: function(d) {
                            d.user_name = $('#filterUserName').val();
                            d.user_email = $('#filterUserEmail').val();
                        }
                    },

                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'avatar',
                            name: 'avatar',
                            orderable: true,
                            searchable: true
                        },
                        {
                            data: 'name',
                            name: 'name',
                            orderable: true,
                            searchable: true
                        },
                        {
                            data: 'email',
                            name: 'email',
                            orderable: true,
                            searchable: true
                        },
                         {
                            data: 'role',
                            name: 'role',
                            orderable: true,
                            searchable: true
                        },
                        {
                            data: 'status',
                            name: 'status',
                        },

                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        },
                    ],
                });

                $('#filterUserName, #filterUserEmail').on('keyup', function () {
                    dTable.ajax.reload();
                });
            }
        });

        const statusOptions = [
            { value: 'active',   label: 'Active',   color: '#4CAF50', icon: '✅' },
            { value: 'inactive', label: 'Inactive', color: '#ccc',    icon: '❌' },
        ];

        $(document).on('click', '.user-status-badge', function () {
            let badge = $(this);
            let userId = badge.data('id');
            let currentStatus = badge.data('status');

            let buttonsHtml = '<div style="display:flex;flex-direction:column;gap:10px;margin-top:8px;">';
            statusOptions.forEach(function (opt) {
                let isActive = opt.value === currentStatus;
                let outline = isActive ? 'outline:3px solid ' + opt.color + ';outline-offset:2px;' : '';
                let opacity = isActive ? 'opacity:0.7;' : '';
                buttonsHtml += '<button type="button" class="swal-status-btn" data-value="' + opt.value + '" ' +
                    'style="background:' + opt.color + ';color:#fff;border:none;padding:12px 20px;border-radius:8px;' +
                    'font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;' + outline + opacity +
                    'display:flex;align-items:center;justify-content:center;gap:8px;">' +
                    '<span style="font-size:18px;">' + opt.icon + '</span> ' + opt.label +
                    (isActive ? ' <span style="font-size:12px;opacity:0.8;">(current)</span>' : '') +
                    '</button>';
            });
            buttonsHtml += '</div>';

            Swal.fire({
                title: 'Change User Status',
                html: buttonsHtml,
                showConfirmButton: false,
                showCancelButton: true,
                cancelButtonText: 'Cancel',
                cancelButtonColor: '#6c757d',
                didOpen: function () {
                    document.querySelectorAll('.swal-status-btn').forEach(function (btn) {
                        btn.addEventListener('mouseenter', function () {
                            if (this.dataset.value !== currentStatus) {
                                this.style.transform = 'scale(1.03)';
                                this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
                            }
                        });
                        btn.addEventListener('mouseleave', function () {
                            this.style.transform = 'scale(1)';
                            this.style.boxShadow = 'none';
                        });
                        btn.addEventListener('click', function () {
                            let newStatus = this.dataset.value;
                            if (newStatus === currentStatus) {
                                Swal.close();
                                return;
                            }
                            updateUserStatus(userId, newStatus);
                            Swal.close();
                        });
                    });
                }
            });
        });

        function updateUserStatus(userId, newStatus) {
            let statusUrl = '{{ route('users.status', ':id') }}'.replace(':id', userId);

            $.ajax({
                type: 'PATCH',
                url: statusUrl,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: { status: newStatus },
                success: function (resp) {
                    if (resp.success) {
                        toastr.success(resp.message);
                        $('#datatable').DataTable().ajax.reload(null, false);
                    } else {
                        toastr.error(resp.message);
                    }
                },
                error: function () {
                    toastr.error('Failed to update status. Please try again.');
                }
            });
        }

        // delete Confirm
        function showDeleteConfirm(id) {
            event.preventDefault();
            Swal.fire({
                title: 'Are you sure you want to delete ?',
                text: 'If you delete this, it will be gone forever.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!',
            }).then((result) => {
                if (result.isConfirmed) {
                    deleteItem(id);
                }
            });
        }


        // Delete Button
        function deleteItem(id) {
            let url = '{{ route('users.destroy', ':id') }}';
            let csrfToken = '{{ csrf_token() }}';
            $.ajax({
                type: "DELETE",
                url: url.replace(':id', id),
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(resp) {
                    $('#datatable').DataTable().ajax.reload();
                    if (resp['t-success']) {
                        toastr.success(resp.message);
                    } else {
                        toastr.error(resp.message);
                    }
                },
                error: function(error) {
                    toastr.error('An error occurred. Please try again.');
                }
            });
        }
    </script>
@endpush