@extends('backend.template.layouts.template-base')
@section('title', 'User Directory')

@section('content')
    <section>

        <div class="d-flex align-items-center justify-content-between mb-4">
            <h2 class="text-title fw-semibold mb-0">User Directory</h2>
            <button class="button-green d-flex align-items-center gap-2 px-3" onclick="openAddModal()">
                <img src="{{ asset('backend/template/svg-icon/plus.svg') }}" alt="plus">
                <span>New User</span>
            </button>
        </div>

        <div class="fb-container">
            {{-- Filter Row --}}
            <div class="fb-filter-row justify-content-between flex-wrap gap-2">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <div class="table-search-box" style="min-width:220px;">
                        <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                            alt="">
                        <input type="text" id="searchName" placeholder="Search name or email" class="table-search-input">
                    </div>
                    <select id="filterRole" class="table-filter-select" style="width:150px;">
                        <option value="">All Roles</option>
                        @foreach ($roles as $role)
                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                    <select id="filterStatus" class="table-filter-select" style="width:130px;">
                        <option value="">All Status</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                    <button id="searchBtn" class="button-green px-3" style="height:40px;">Search</button>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <label class="custom-label mb-0" style="white-space:nowrap;">Show</label>
                    <select id="dtLength" class="table-filter-select" style="width:80px;">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                    </select>
                    <label class="custom-label mb-0">entries</label>
                </div>
            </div>

            <div class="table-responsive">
                <table id="usersTable" class="table align-middle mb-0" style="width:100%;">
                    <thead class="all-table-head">
                        <tr>
                            <th class="table-head-content ps-4" style="width:50px;">#</th>
                            <th class="table-head-content">User Details</th>
                            <th class="table-head-content">Role</th>
                            <th class="table-head-content">Added On</th>
                            <th class="table-head-content">Last Login</th>
                            <th class="table-head-content">Status</th>
                            <th class="table-head-content">Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

    </section>

    {{-- Add / Edit User Modal --}}
    <div class="modal fade" id="userFormModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:500px;">
            <div class="modal-content custom-modal">
                <div class="modal-header" id="userFormHeader" style="background:#dcfce7;height:60px;">
                    <h5 class="mt-2" id="userFormTitle" style="color:#166534;">Add New User</h5>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <input type="hidden" id="editUserId">
                        <div class="col-md-6">
                            <label class="custom-label mt-1">Full Name <span class="text-danger">*</span></label>
                            <input type="text" id="uName" class="form-control custom-input"
                                placeholder="Enter full name">
                        </div>
                        <div class="col-md-6">
                            <label class="custom-label mt-1">Email <span class="text-danger">*</span></label>
                            <input type="email" id="uEmail" class="form-control custom-input"
                                placeholder="Enter email">
                        </div>
                        <div class="col-md-6">
                            <label class="custom-label">Mobile</label>
                            <input type="text" id="uMobile" class="form-control custom-input"
                                placeholder="Enter mobile">
                        </div>
                        <div class="col-md-6">
                            <label class="custom-label">Role <span class="text-danger">*</span></label>
                            <select id="uRole" class="form-select custom-input">
                                <option value="">Select role</option>
                                @foreach ($roles as $role)
                                    <option value="{{ $role->id }}">{{ $role->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="custom-label">Password <span id="pwLabel" class="text-danger">*</span></label>
                            <input type="password" id="uPassword" class="form-control custom-input"
                                placeholder="Enter password">
                        </div>
                        <div class="col-md-6">
                            <label class="custom-label d-block">Status</label>
                            <div class="d-flex align-items-center gap-4 mt-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="uStatus" id="uActive"
                                        value="1" checked>
                                    <label class="form-check-label ms-1" for="uActive"
                                        style="color:#0AA437;font-weight:500;">Active</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="uStatus" id="uInactive"
                                        value="0">
                                    <label class="form-check-label ms-1" for="uInactive">Inactive</label>
                                </div>
                            </div>
                        </div>
                        <div id="userFormError" class="col-12 text-danger" style="font-size:12px;display:none;"></div>
                    </div>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="userFormSubmit" class="button-green px-4" style="height:38px;">Save</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        const CSRF = "{{ csrf_token() }}";
        const BASE_URL = "{{ url('/admin/manage-users/user-directory') }}";
        const USERS_URL = "{{ route('backend.template.manage-users.category.user-directory') }}";
        var formMode = 'add';

        /* ── DataTable ──────────────────────────────────────────── */
        var usersTable = $('#usersTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: USERS_URL,
                data: function(d) {
                    d.search_name = $('#searchName').val();
                    d.filter_role = $('#filterRole').val();
                    d.filter_status = $('#filterStatus').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'id',
                    orderable: false,
                    searchable: false,
                    className: 'table-body-content ps-4'
                },
                {
                    data: 'user_details',
                    name: 'name',
                    searchable: false,
                    className: 'table-body-content'
                },
                {
                    data: 'role_name',
                    name: 'role_id',
                    orderable: false,
                    searchable: false,
                    className: 'table-body-content'
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                    className: 'table-body-content'
                },
                {
                    data: 'last_login',
                    name: 'last_login_at',
                    searchable: false,
                    className: 'table-body-content'
                },
                {
                    data: 'status_html',
                    name: 'status',
                    searchable: false,
                    className: 'table-body-content'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    className: 'table-body-content'
                },
            ],
            order: [
                [3, 'desc']
            ],
            pageLength: 10,
            lengthChange: false,
            searching: false,
            dom: 'rt<"d-flex justify-content-between align-items-center px-3 py-3 border-top"ip>',
            language: {
                info: 'Showing _START_–_END_ of _TOTAL_ results',
                infoEmpty: 'No results found',
                zeroRecords: '<div class="text-center text-muted py-5">No users found.</div>',
                paginate: {
                    previous: '<i class="ri-arrow-left-s-line"></i>',
                    next: '<i class="ri-arrow-right-s-line"></i>',
                }
            }
        });

        /* ── Filters ────────────────────────────────────────────── */
        var searchTimer;
        $('#searchName').on('keyup', function() {
            clearTimeout(searchTimer);
            searchTimer = setTimeout(function() {
                usersTable.ajax.reload(null, false);
            }, 400);
        });
        $('#filterRole, #filterStatus').on('change', function() {
            usersTable.ajax.reload(null, false);
        });
        $('#searchBtn').on('click', function() {
            usersTable.ajax.reload(null, false);
        });
        $('#dtLength').on('change', function() {
            usersTable.page.len(+this.value).draw();
        });

        /* ── Add / Edit modal ───────────────────────────────────── */
        function openAddModal() {
            formMode = 'add';
            $('#userFormTitle').text('Add New User');
            $('#userFormHeader').css('background', '#dcfce7');
            $('#editUserId').val('');
            $('#uName,#uEmail,#uMobile,#uPassword').val('');
            $('#uRole').val('');
            $('#uActive').prop('checked', true);
            $('#pwLabel').show();
            $('#uPassword').attr('placeholder', 'Enter password');
            $('#userFormError').hide();
            new bootstrap.Modal(document.getElementById('userFormModal')).show();
        }

        function openEditModal(id, name, email, mobile, roleId, status) {
            formMode = 'edit';
            $('#userFormTitle').text('Edit User');
            $('#userFormHeader').css('background', '#fef9c3');
            $('#editUserId').val(id);
            $('#uName').val(name);
            $('#uEmail').val(email);
            $('#uMobile').val(mobile || '');
            $('#uRole').val(roleId !== null ? roleId : '');
            $('#uPassword').val('');
            if (status == 1) $('#uActive').prop('checked', true);
            else $('#uInactive').prop('checked', true);
            $('#pwLabel').hide();
            $('#uPassword').attr('placeholder', 'Leave blank to keep current');
            $('#userFormError').hide();
            new bootstrap.Modal(document.getElementById('userFormModal')).show();
        }

        $('#userFormSubmit').on('click', function() {
            var $btn = $(this).prop('disabled', true).text('Saving…');
            var id = $('#editUserId').val();
            var url = formMode === 'edit' ? BASE_URL + '/' + id + '/update' : BASE_URL + '/store';
            var data = {
                _token: CSRF,
                name: $('#uName').val().trim(),
                email: $('#uEmail').val().trim(),
                mobile: $('#uMobile').val().trim(),
                role_id: $('#uRole').val(),
                password: $('#uPassword').val(),
                status: $('input[name="uStatus"]:checked').val(),
            };
            $.post(url, data)
                .done(function() {
                    toastr.success(formMode === 'edit' ? 'User updated.' : 'User created.');
                    bootstrap.Modal.getInstance(document.getElementById('userFormModal')).hide();
                    usersTable.ajax.reload(null, false);
                })
                .fail(function(xhr) {
                    var errors = xhr.responseJSON?.errors;
                    var msg = errors ? Object.values(errors).flat().join(' ') : (xhr.responseJSON?.message ||
                        'Failed to save.');
                    $('#userFormError').text(msg).show();
                    $btn.prop('disabled', false).text('Save');
                });
        });

        /* ── Status modal ───────────────────────────────────────── */
        function openStatusModal(id, current, name) {
            ConfirmStatus({
                name: name,
                current: current,
                url: BASE_URL + '/' + id + '/status',
                csrf: CSRF,
                onSuccess: function() {
                    usersTable.ajax.reload(null, false);
                }
            });
        }

        /* ── Delete modal ───────────────────────────────────────── */
        function openDeleteModal(id, name) {
            ConfirmDelete({
                name: name,
                url: BASE_URL + '/' + id + '/destroy',
                csrf: CSRF,
                onSuccess: function() {
                    usersTable.ajax.reload(null, false);
                }
            });
        }
    </script>
@endsection