@extends('admin.layouts.master')
@section('title', 'All Users')

@section('content')

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="content-header">
                        <div class="container-fluid">
                            <div class="row">

                            </div><!-- /.row -->
                        </div><!-- /.container-fluid -->
                    </div>
                    <div class="card card-primary card-outline">
                        <div class="card-header">
                            <h3 class="card-title">{{ __('Search Users') }}</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="col-lg-12">
                                <form class="" action="" method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg col-md-6">
                                            <div class="form-group">
                                                <label for="user_id" class="form-label">Name</label>
                                                <select class="form-control select2" name="user_id" id="user_id">
                                                    <option value="">Select Name</option>
                                                    @foreach ($users as $user)
                                                        <option value="{{ $user->id }}"
                                                            {{ old('first_name') == $user->first_name ? 'selected' : '' }}>
                                                            {{ $user->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-lg col-md-6">
                                            <div class="form-group">
                                                <label for="email" class="form-label">Email</label>
                                                <select class="form-control select2" name="email" id="email">
                                                    <option value="">Select Email</option>
                                                    @foreach ($users as $user)
                                                        <option value="{{ $user->email }}"
                                                            {{ old('email') == $user->email ? 'selected' : '' }}>
                                                            {{ $user->email }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-lg col-md-6">
                                            <div class="form-group">
                                                <label for="role_name" class="form-label">Role Name</label>
                                                <select class="form-control select2" name="role_name"
                                                    id="role_name">
                                                    <option value="">Role Name</option>
                                                    @foreach ($roles as $role)
                                                        <option value="{{ $role->name }}"
                                                            {{ old('role_name') == $role->name ? 'selected' : '' }}>
                                                            {{ $role->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg col-md-6">
                                            <div class="form-group">
                                                <label for="status" class="form-label">Status</label>
                                                <select class="form-control select2" name="status"
                                                    id="status">
                                                    <option value="">Select Status</option>
                                                    <option value="active"
                                                        {{ old('status') == 'active' ? 'selected' : '' }}>Active
                                                    </option>
                                                    <option value="blocked"
                                                        {{ old('status') == 'blocked' ? 'selected' : '' }}>Blocked</option>
                                                    <option value="pending"
                                                        {{ old('status') == 'pending' ? 'selected' : '' }}>Pending
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="btn-group float-right">
                                                    <button type="reset" class="btn btn-primary btn-sm" id="refreshBtn"><i
                                                            class="bi bi-arrow-clockwise"></i>Refresh</button>
                                                    <button type="submit" class="btn btn-success btn-sm" id="searchBtn"><i
                                                            class="bi bi-search"></i>Search</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

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


    </section>
    <section class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline mt-2">
                        <div class="card-header">
                            <h3 class="card-title mt-1"><b>{{ __('User List') }}</b></h3>
                            <div class="card-tools d-flex">
                                    <a href="{{ route('admin.user.add') }}" class="btn btn-primary btn-sm">
                                        <i class="fas fa-plus"></i> {{ __('Add New User ') }}
                                    </a>
                            </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table class="table table-striped table-bordered datatable tableContent">
                                <thead>
                                    <tr>
                                        <th scope="col" style="width: 5%;">#</th>
                                        <th scope="col" style="width: 10%;">Image</th>
                                        <th scope="col" style="width: 15%;">Date</th>
                                        <th scope="col" style="width: 15%;">Name</th>
                                        <th scope="col" style="width: 20%;">Email/Phone</th>
                                        <th scope="col" style="width: 15%;">Role</th> <!-- New Column for Role -->
                                        <th scope="col" style="width: 10%;">Status</th>
                                        <th scope="col" style="width: 10%;">Actions</th>
                                    </tr>


                                </thead>
                                <tbody id="tbody">
                                    @include('admin.user.partial.user-list', ['users' => $users])
                                </tbody>
                            </table>
                        </div>
                        <div class="loader text-center" id="loader" style="display: none">
                            <div class="spinner-border" role="status">
                                <span class="visually-hidden"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
@endsection
@section('js')
    <script>
        $(document).on('click', '#pendingUser', function(e) {
            e.preventDefault();
            $('#loader').show();
            $('.tableContent').hide();

            var userID = $(this).data("user_id");

            $.ajax({
                url: `/make-user-pending/${userID}`,
                method: "POST",
                data: {},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#loader').hide();
                    $('.tableContent').show();

                    $(`a[data-user_id="${userID}"]`).closest('tr').find('td:eq(4)').html(
                        '<span class="badge badge-info">Pending</span>'
                    );

                    MyToast.fire({
                        icon: 'success',
                        title: 'Status Updated Successfully!'
                    });
                },
                error: function(xhr) {
                    $('#loader').hide();
                    $('.tableContent').show();

                    let errorMessage = "Something went wrong. Please try again.";

                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        title: "Error",
                        text: errorMessage,
                        icon: "error",
                        confirmButtonColor: "#d33"
                    });
                }
            });
        });

        $(document).on('click', '#approveUser', function(e) {
            e.preventDefault();
            $('#loader').show();
            $('.tableContent').hide();

            var userID = $(this).data("user_id");

            $.ajax({
                url: `/make-user-approved/${userID}`,
                method: "POST",
                data: {},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#loader').hide();
                    $('.tableContent').show();

                    $(`a[data-user_id="${userID}"]`).closest('tr').find('td:eq(4)').html(
                        '<span class="badge badge-success">Active</span>');
                    MyToast.fire({
                        icon: 'success',
                        title: 'Status Updated Successfully!'
                    });
                },
                error: function(xhr) {
                    $('#loader').hide();
                    $('.tableContent').show();

                    let errorMessage = "Something went wrong. Please try again.";

                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        title: "Error",
                        text: errorMessage,
                        icon: "error",
                        confirmButtonColor: "#d33"
                    });
                }
            });
        });
        $(document).on('click', '#blockUser', function(e) {
            e.preventDefault();
            $('#loader').show();
            $('.tableContent').hide();

            var userID = $(this).data("user_id");

            $.ajax({
                url: `/make-user-blocked/${userID}`,
                method: "POST",
                data: {},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#loader').hide();
                    $('.tableContent').show();

                    $(`a[data-user_id="${userID}"]`).closest('tr').find('td:eq(4)').html(
                        '<span class="badge badge-danger">Blocked</span>');
                    MyToast.fire({
                        icon: 'success',
                        title: 'Status Updated Successfully!'
                    });
                },
                error: function(xhr) {
                    $('#loader').hide();
                    $('.tableContent').show();

                    let errorMessage = "Something went wrong. Please try again.";

                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        title: "Error",
                        text: errorMessage,
                        icon: "error",
                        confirmButtonColor: "#d33"
                    });
                }
            });
        });


        $(document).ready(function() {
            const tbody = $('#tbody');
            const userName = $('#user_id');
            const email = $('#email');
            const roleName = $('#role_name');
            const status = $('#status');
            const searchBtn = $('#searchBtn');
            const loader = $('#loader');
            const tableContent = $('.tableContent');
            const refreshBtn = $('#refreshBtn');

            function fetchUsers(userNameVal = '', roleNameVal = '', statusVal = '', emailVal = '') {
                loader.show();
                tableContent.hide();
                searchBtn.attr("disabled", true);

                $.ajax({
                    url: "{{ route('admin.user.search') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        user_id: userNameVal,
                        role_name: roleNameVal,
                        status: statusVal,
                        email: emailVal,
                    },
                    success: function(response) {
                        tbody.html(response.html);
                        loader.hide();
                        tableContent.show();
                        searchBtn.attr("disabled", false);
                    },
                    error: function(err) {
                        loader.hide();
                        tableContent.show();
                        searchBtn.attr("disabled", false);
                    },
                });
            }

            searchBtn.on("click", function(e) {
                e.preventDefault();
                fetchUsers(userName.val(), roleName.val(), status.val(), email.val());
            });

            refreshBtn.on("click", function(e) {
                e.preventDefault();

                userName.val('');
                roleName.val('');
                status.val('');
                email.val('');

                fetchUsers();
            });
        });
    </script>





@endsection