@extends('admin.layouts.default')
@section('title', 'Users')
@section('content')
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
        <div>

        <!-- Search Input and Filter Button -->
        <div class="d-flex align-items-center">
            @if(auth()->user()->hasRole('Superadmin') || auth()->user()->can('create-users'))
                <input type="text" id="userSearchInput" class="form-control me-2" placeholder="Search users..." style="max-width: 250px;">

                <input type="text" id="email" class="form-control me-2" placeholder="Search by Email" style="max-width: 250px;">

                <!-- <select id="email" class="form-select" style="max-width: 250px;">
                    <option value="">Select Email</option>
                    @foreach($users as $user)
                        <option value="{{ $user->email }}">{{ $user->email }}</option>
                    @endforeach
                </select> -->

                <input type="text" id="phoneFilter" class="form-control me-2" placeholder="Search by Phone" style="max-width: 250px;">

                <select id="assignToFilter" class="form-select me-2" style="max-width: 200px;">
                    <option value="">Assign to</option>
                    @foreach($managers as $user)
                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                    @endforeach
                </select>

                <select id="roleFilter" class="form-select me-2" style="max-width: 250px;">
                    <option value="">Select Role</option>
                    @foreach($roles as $role)
                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                    @endforeach
                </select>

                <button type="button" id="userFilterButton" class="btn btn-primary">Filter</button>
                <button type="button" id="refreshFilterButton" class="btn btn-secondary ms-2">Reset</button>
            @endif
        </div>
    
    </div>
    <h1 class="page-title mb-0 text-primary"></h1>
    <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
        <div class="page-rightheader">
            <div>
                @if(auth()->user()->hasRole('Superadmin') || auth()->user()->can('users-create'))
                    <a href="{{ route('usercreate') }}" class="btn btn-outline-primary me-1">
                        <i class="fa fa-plus"></i>
                        Add Users
                    </a>
                @endif
                @include('admin/permissions/users/create-edit')

            </div>
        </div>
    </div>
</div>

        <div class="card ">
            <div class="card-header justify-content-between">
                <h3 class="card-title">
                    Users
                </h3>

            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="website_data_table" class="table text-nowrap table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">S.no</th>
                                <th scope="col">User Name</th>
                                <th scope="col">Email</th>
                                <th scope="col">Phone</th>
                                <th scope="col">Role</th>
                                <th scope="col">Assign to</th>
                                <th scope="col">Website</th>
                                <th scope="col">action</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>

    </div>
</div>

<script>
    var isSuperAdmin = @json(auth()->user()->hasRole('Superadmin'));
    var canEditUsers = @json(auth()->user()->can('users-edit'));
</script>

<script>
    var table = $('#website_data_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: base_url + '/users-list',
            type: 'GET',
            data: function(d) {
                // Capture the filter values and send them in the AJAX request
                d.user_name = $('#userSearchInput').val();
                d.email = $('#email').val();
                d.phone = $('#phoneFilter').val();
                d.assign_to = $('#assignToFilter').val();
                d.role = $('#roleFilter').val();
            }
        },
        columns: [
            {
                data: null, // Use null to generate the row number
                name: 'row_number',
                orderable: false,
                searchable: false,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1; // Calculate the row number
                }
            },
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            { 
                data: 'phone', 
                name: 'phone',
                render: function(data) {
                    return data ? data : 'N/A';
                }
            },
            { 
                data: 'roles',
                name: 'roles',
                render: function(data) {
                    return data && data.length > 0 ? data.map(role => role.name).join(', ') : 'N/A';
                }
            },
            { 
                data: 'assignedUsers',
                name: 'assignedUsers',
                render: function(data) {
                    return data && data.length > 0 ? data.join(', ') : 'N/A';
                }
            },
            { 
                data: 'websites',
                name: 'websites',
                render: function(data) {
                    return data && data.length > 0 ? data.map(website => website.website).join(', ') : 'N/A';
                }
            },
            {
                data: null,
                name: 'action',
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    // Check if the user is a Superadmin
                    if (isSuperAdmin || canEditUsers) {
                        var editUrl = base_url + '/users-edit/' + row.id;
                        return `<a href="${editUrl}" class="btn btn-primary mx-2 btn-sm">
                                    <i class="ri-edit-line"></i> Edit
                                </a>`;
                    }
                    return ''; // Return empty if not Superadmin
                }
            }
        ]
    });

    $('#userFilterButton').on('click', function() {
        table.ajax.reload();
    });

    $('#refreshFilterButton').on('click', function() {
        // Clear filter inputs
        $('#userSearchInput, #email, #phoneFilter, #assignToFilter, #roleFilter').val('');
        table.ajax.reload();
    });


    $('#website_data_table').on('click', '.permissions-button', function() {
        var url = $(this).data('url'); // Get the URL from the button's data attribute
        window.location.href = url; // Redirect to the URL
    });
</script>
@endsection