@extends('layouts.app',['title'=>ucwords($title)])
@section('content')
<div class="main-content" id="result">
    
    <div class="page-content user-list">
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0 font-size-18">Users List</h4>

                        
                    </div>
                </div>
            </div>     
            <!-- end page title -->
            {{-- <div class="row">
                <div class="col-lg-12">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                </div>
            </div> --}}
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row mb-2">
                                <div class="col-sm">
                                    <form method="GET" action="{{route('users.list')}}">
                                        <div class="search-box me-2 d-inline-block">
                                            <div class="position-relative">

                                                <input type="text" class="form-control" value="{{ request()->q }}" name="q"  autocomplete="off" id="searchTableList" placeholder="Search...">
                                                <i class="bx bx-search-alt search-icon"></i>
                                                
                                                <a style="right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; display:none;" href="{{route('users.list')}}" class="bx bx-x position-absolute text-muted" id="clearSearch"></a>
                                            </div>
                                            
                                        </div>
                                        
                                    </form>
                                </div>
                                <div class="col-sm-auto">
                                    <div class="text-sm-end">
                                        <a href="{{route('users.create')}}" class="btn btn-success  button-text" id="addProject-btn"><i class="mdi mdi-plus me-1"></i> Add New User</a>
                                    </div>
                                </div>
                            </div>
                            <!-- end row -->
                            <div class="">
                                <div class="table-responsive ">
                                    <div id="projectList-table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                                        
                                        <div class="row">
                                            <div class="col-sm-12">
                                                @php
                                                    $dir = request('dir', 'desc');
                                                    $col = request('col', 'created_at');
                                                @endphp
                                                <table class="table table-striped project-list-table align-middle table-nowrap dt-responsive nowrap w-100 table-borderless dataTable no-footer dtr-inline" id="projectList-table" aria-describedby="projectList-table_info" style="width: 1015px; border:1px solid #eee;">
                                                    <thead class="table-light">
                                                        <tr>
                                                           <th scope="col" class="sorting {{ $col === 'name' ? 'sorting_' . $dir : '' }}">
                                                                <a href="{{ route('users.list', ['col' => 'name', 'dir' => $col === 'name' && $dir === 'asc' ? 'desc' : 'asc']) }}">
                                                                    Name
                                                                </a>
                                                            </th>

                                                            <th scope="col" class="sorting {{ $col === 'email' ? 'sorting_' . $dir : '' }}">
                                                                <a href="{{ route('users.list', ['col' => 'email', 'dir' => $col === 'email' && $dir === 'asc' ? 'desc' : 'asc']) }}">
                                                                    Email
                                                                </a>
                                                            </th>

                                                            <!--<th scope="col" class="sorting {{ $col === 'role' ? 'sorting_' . $dir : '' }}">
                                                                <a href="{{ route('users.list', ['col' => 'role', 'dir' => $col === 'role' && $dir === 'asc' ? 'desc' : 'asc']) }}">
                                                                    Role
                                                                </a>
                                                            </th>-->

                                                            <th scope="col" class="sorting {{ $col === 'created_at' ? 'sorting_' . $dir : '' }}">
                                                                <a href="{{ route('users.list', ['col' => 'created_at', 'dir' => $col === 'created_at' && $dir === 'asc' ? 'desc' : 'asc']) }}">
                                                                    Created at
                                                                    
                                                                </a>
                                                            </th>
                                                            <th scope="col" class="sorting_disabled">
                                                                Status
                                                            </th>
                                                            <th scope="col" class="sorting_disabled">
                                                                Action
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                         @foreach ($users as $index => $user)
                                                        <tr>
                                                            <td><a class="text-capitalize" href="{{ route('users.edit', $user->id) }}">{{ $user->name }}</a></td>
                                                            <td>{{ $user->email }}</td>
                                                            <!--<td>{{ $user->role ? ucwords($user->role) : 'N/A' }}</td>-->
                                                            <td>{{ $user->created_at ? $user->created_at->format('d M Y') : "N/A" }}</td>
                                                            <td>
                                                                @if($user->is_blocked)
                                                                    <span class="badge bg-danger badge-size dark-gradiant">Blocked</span>
                                                                @else
                                                                    <span class="badge bg-success badge-size  button-text">Active</span>
                                                                @endif
                                                            </td>
                                                            <td>
                                                                <div class="dropdown">
                                                                    <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
                                                                        <i class="mdi mdi-dots-horizontal font-size-18"></i>
                                                                    </a>
                                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                                        <li><a href="{{ route('users.edit', $user->id) }}" class="dropdown-item"><i class="mdi mdi-pencil text-primary me-1"></i> Edit</a></li>
                                                                        <li>
                                                                            <form method="POST" action="{{ route('users.toggleBlock', $user->id) }}">
                                                                                @csrf
                                                                                <a href="#" class="show_confirm_message dropdown-item" data-confirm-title="{{ $user->is_blocked ? 'Unblock User' : 'Block User' }} " data-confirm-msg="Are you sure that  {{ $user->is_blocked ? 'you want to unblock this user?' : 'you want to block this user?'}}">
                                                                                    <i class="mdi mdi-cancel {{ $user->is_blocked ? 'text-success' : 'text-danger' }} me-1"></i>
                                                                                    {{ $user->is_blocked ? 'Unblock' : 'Block' }}
                                                                                </a>
                                                                            </form>
                                                                        </li>
                                                                        <li><a href="{{route('users.websites.list', $user->id)}}" class="dropdown-item"><i class="mdi mdi-view-comfy me-1"></i> Websites</a></li>
                                                                        <li>
                                                                            @if($user->delete_flag == "not_allowed")
                                                                            <a href="#" data-alert-title="Delete User" data-alert-msg="You cannot delete the user because they are on a paid plan"  class="show_alert_message dropdown-item">
                                                                                <i class="mdi mdi-trash-can-outline text-danger me-1"></i>
                                                                                Delete
                                                                            </a>
                                                                            @endif
                                                                            @if($user->delete_flag == "warn")
                                                                            <form method="POST" action="{{ route('users.delete', $user->id) }}">
                                                                                @csrf
                                                                                @method("DELETE")
                                                                                <a href="#" class="show_confirm_message dropdown-item" data-confirm-title="Delete User" data-confirm-msg="Are you sure that you want to delete this user? All websites and its related content will be removed as well.">
                                                                                    <i class="mdi mdi-trash-can-outline text-danger me-1"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </form>
                                                                            @endif
                                                                             @if($user->delete_flag == "confirm")
                                                                            <form method="POST" action="{{ route('users.delete', $user->id) }}">
                                                                                @csrf
                                                                                @method("DELETE")
                                                                                <a href="#" class="show_confirm_message dropdown-item" data-confirm-title="Delete User" data-confirm-msg="Are you sure that you want to delete this user?">
                                                                                    <i class="mdi mdi-trash-can-outline text-danger me-1"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </form>
                                                                            @endif
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        @endforeach
                                                        
                                                    </tbody>
                                                </table>
                                                @if($users->isEmpty())
                                                    <p class="text-center text-muted">No users found.</p>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="row page-row">
                                            <div class="col-sm-12 col-md-5">
                                                <div class="dataTables_info" id="projectList-table_info" role="status" aria-live="polite">Showing {{ $users->firstItem() }} to {{ $users->lastItem() }} of {{ $users->total() }} Entries</div>
                                            </div>
                                            <div class="col-sm-12 col-md-7">
                                                <div class="dataTables_paginate paging_simple_numbers pagination-rounded pagination-text" id="projectList-table_paginate">
                                                    {{ $users->links('pagination::bootstrap-4') }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end card -->
                </div>
            </div>
            <!-- end row -->
            
        </div> <!-- container-fluid -->
    </div>
    @include('partials.modals.confirm_modal')
    @include('partials.modals.alert_modal')
</div>
@endsection
@push('topcss')
 <link href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />  


@endpush
@push('scripts')
<script>
    const input = document.getElementById('searchTableList');
  const clearBtn = document.getElementById('clearSearch');

  clearBtn.style.display = $("#searchTableList").val() ? 'block' : 'none';

  input.addEventListener('input', function () {
    clearBtn.style.display = this.value ? 'block' : 'none';
  });

  clearBtn.addEventListener('click', function () {
    input.value = '';
    clearBtn.style.display = 'none';
    input.focus(); // optional: keep focus after clearing
  });
</script>
<script>
    var clicked_confirm_action = null;

    $(".show_confirm_message").click(function(e){
        e.preventDefault();

        clicked_confirm_action = $(this);

        

        $("#confirmModal").find("#confirmModalLabel").html($(this).attr("data-confirm-title"));

        $("#confirmModal").find(".modal-body").html($(this).attr("data-confirm-msg"));

        $("#confirmModal").modal("show");

        

    })
    $("#confirmYesBtn").click(function(){
        clicked_confirm_action.closest("form").submit();
    })
    $(".show_alert_message").click(function(e){
        e.preventDefault();

        

        

        $("#alertModal").find("#alertModalLabel").html($(this).attr("data-alert-title"));

        $("#alertModal").find(".modal-body").html($(this).attr("data-alert-msg"));

        $("#alertModal").modal("show");

        

    })
</script>
@endpush