@extends('admin.layouts.master')
@section('title')
User Manage |
@endsection
@section('content')
<div class="row mt-4">
    <div class="col-lg-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <h4 class="card-title">User Lists</h4>
                    <div class="d-flex">
                        <button type="button" class="btn btn-outline-info btn-sm btn-icon-text mx-1" onclick="printTable()">
                            <i class="mdi mdi-printer"></i>
                            Print
                        </button>
                        <a href="{{ route('usersCreate') }}" class="btn btn-sm btn-primary" data-toggle="tooltip" data-placement="right" title="Add User"><i class=" mdi mdi-library-plus"></i> Add User</a>

                    </div>
                </div>
                <div class="d-flex justify-content-between" style="width: 70%">
                    <select id="package_name" name="type" class="form-control border-info mr-2">
                        <option value="">Payment Package</option>
                        <option value="monthly">Monthly</option>
                        <option value="yearly">Yearly</option>
                    </select>
                    <select id="status" name="type" class="form-control border-info mr-2">
                        <option value="">Select Status</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                    <input id="start_date" type="date" name="start_date" class="form-control border-info mr-2">
                    <input id="end_date" type="date" name="end_date" class="form-control border-info mr-2">
                    <button id="clearBtn" class="btn btn-light mr-2" onclick="filterButtonClicked('clear')">Clear</button>
                    <button id="filterBtn" class="btn btn-primary" onclick="filterButtonClicked('filter')">Filter</button>
                </div>
                <div class="table-responsive pt-3">
                    <div class="company-info text-center">
                        <h1>{{settings()->website_name}}</h1>
                        <p class="mt-1">{{settings()->address}}</p>
                        <p class="mt-1">{{settings()->website_email}}</p>
                    </div>
                    <table id="usersTable" class="table table-bordered">
                        <thead>
                            <tr class="text-center bg-info text-dark">
                                <th> # Id</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Designation</th>
                                <th>Status</th>
                                {{-- @if(auth()->user()->hasRole('root admin')) --}}
                                <th class="action">Action</th>
                                {{-- @endif --}}
                            </tr>
                        </thead>
                        @if(session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                        @endif
                        <tbody id="usersTableBody">
                            @forelse ($users as $user)
                            <tr class="text-center">
                                <td>{{ $user->id }}</td>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>{{ $user->phone }}</td>
                                <td>{{ $user->designation == 'admin' ? 'Admin' : 'App User' }}</td>
                                <td>
                                    @if ($user->status == 1)
                                    Active
                                    @else
                                    <span style="color: red">Pending</span>
                                    @endif
                                </td>
                                {{-- @if(auth()->user()->hasRole('root admin')) --}}
                                <td class="action d-flex justify-content-center align-items-center">

                                    {{-- <a href="{{ route('usersEdit', $user->id) }}" class="btn btn-sm btn-info me-2" data-toggle="tooltip" data-placement="right" title="Edit Device"><i class="mdi mdi-grease-pencil"></i></a>


                                    <form action="{{ route('usersDestroy', $user->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete?')" class="mb-0">
                                        @method('DELETE')
                                        @csrf
                                        @if ($errors->any())
                                            <div class="alert alert-danger" role="alert">
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif


                                        <button type="submit" class="btn btn-sm btn-danger" data-toggle="tooltip" data-placement="right" title="Delete Device">
                                            <i class="mdi mdi-trash-can"></i>
                                        </button>

                                    </form> --}}
                                    <a href="{{ route('user.profile', $user->id) }}" class="btn btn-sm btn-info me-2" data-toggle="tooltip" data-placement="right" title="User details"><i></i>User details</a>
                                </td>
                                {{-- @endif --}}
                            </tr>
                            @empty
                            <tr class="text-center">
                                <td colspan="3">No data found</td>
                            </tr>
                            @endforelse

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

@endsection
<script>
    const users = @json($users); // Assuming you have the users data available

    function filterButtonClicked(action) {
        // Clear existing DataTable if it's initialized
        // $('#usersTable').DataTable().clear().destroy();

        const tbody = document.getElementById('usersTableBody');
        if(tbody.children.length > 1){
            $('#usersTable').DataTable().clear().destroy();
        }

        const packageName = document.getElementById('package_name')?.value;
        const status = document.getElementById('status')?.value;
        const startDate = document.getElementById('start_date')?.value;
        const endDate = document.getElementById('end_date')?.value;

        if (action === 'clear') {
            // Clear filters
            document.getElementById('package_name').value = '';
            document.getElementById('status').value = '';
            document.getElementById('start_date').value = '';
            document.getElementById('end_date').value = '';

            // Show all users
            updateTable(users);
            return;
        }

        // Filter users
        const filteredUsers = users.filter(user => {
            let isValid = true;

            // Filter by package name
            if (packageName) {
                // isValid = isValid && user.package === packageName; // Adjust based on your data structure
                isValid = isValid && user.payments && user.payments.some(payment =>
                    // payment.package.name == packageName && payment.payment_status == 'completed'
                    payment.package.name == packageName
                );
            }

            // Filter by status
            if (status) {
                isValid = isValid && user.status == status;
            }

            // Filter by date range
            if (startDate && endDate) {
                const userDate = new Date(user.created_at); // Assuming you want to filter based on created_at
                const start = new Date(startDate);
                const end = new Date(endDate);
                end.setDate(end.getDate() + 1); // Include the end date

                isValid = isValid && (userDate >= start && userDate < end);
            }

            return isValid;
        });

        // Update the table with filtered users
        updateTable(filteredUsers);
    }

    function updateTable(usersToDisplay) {
        const tbody = document.getElementById('usersTableBody');
        tbody.innerHTML = ''; // Clear the current table body

        if (usersToDisplay.length) {
            usersToDisplay.forEach(user => {
                tbody.innerHTML += `
                    <tr class="text-center">
                        <td>${user.id}</td>
                        <td>${user.name}</td>
                        <td>${user.email}</td>
                        <td>${user.phone}</td>
                        <td>${user.designation == 'admin' ? 'Admin' : 'App User'}</td>
                        <td>${user.status == 1 ? 'Active' : '<span style="color: red">Inactive</span>'}</td>
                        <td class="action d-flex justify-content-center align-items-center">
                            <a href="/user-profile/${user.id}" class="btn btn-sm btn-info me-2" data-toggle="tooltip" data-placement="right" title="User details">
                                <i></i>User details
                            </a>
                        </td>
                    </tr>
                `;
            });
        } else {
            tbody.innerHTML = '<tr class="text-center"><td colspan="7">No users found</td></tr>';
        }

        // Reinitialize DataTable if users exist
        if (usersToDisplay.length > 0) {
            $('#usersTable').DataTable();
        }

    }
</script>