@extends('layouts.master') @section('title') clients @endsection @section('css')
<link href="{{URL::asset('assets/js/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{URL::asset('assets/css/datatable-custom.css')}}" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
   .dataTables_wrapper .dataTables_info {
   display: none !important;
   }
</style>
@endsection @section('content') 
@component('components.breadcrumb') @slot('li_1') Crm @endslot @slot('title') clients @endslot @endcomponent
<div class="row">
   <div class="col-lg-12">
      @can('view clients overview')
      <div class="dashboard-widget-container mb-3">
         <!-- Dashboard Title -->
         <div class="mb-2">
            <div class="d-flex align-items-center">
               <h2 class="h5 text-uppercase fw-bold mb-0">
                  <span class="text-gradient">CLIENTS</span> 
                  <span class="text-muted">OVERVIEW</span>
               </h2>
            </div>
         </div>
         <!-- Responsive Grid -->
         <div class="row g-2">
            <!-- Total Clients -->
            <div class="col-6 col-md-3">
               <div class="widget-card clients-card smart-card h-100">
                  <div class="widget-header">
                     <h3 class="widget-title">Total Clients</h3>
                     <i class="ri-team-fill widget-icon text-info"></i>
                  </div>
                  <div class="widget-content">
                     <div class="widget-main-value">
                        <span>{{ $totalclients }}</span>
                     </div>
                     <div class="widget-icon-small">
                        <i class="ri-team-fill text-info"></i>
                     </div>
                  </div>
                  <a href="#" class="widget-footer">
                  All Clients <i class="ri-team-fill"></i>
                  </a>
               </div>
            </div>
            @can('view financial statistics')
            <!-- Active Services -->
            <div class="col-6 col-md-3">
               <div class="widget-card active-services-card smart-card h-100">
                  <div class="widget-header">
                     <h3 class="widget-title">Active</h3>
                     <i class="ri-funds-line widget-icon text-warning"></i>
                  </div>
                  <div class="widget-content">
                     <div class="widget-main-value">
                        <span>{{ $activesum ?? 0 }}</span>
                     </div>
                     <div class="widget-icon-small">
                        <i class="ri-funds-line text-warning"></i>
                     </div>
                  </div>
                  <a href="{{ route('client.view.services', ['type' => 'active']) }}" class="widget-footer">
                  View <i class="ri-arrow-right-line"></i>
                  </a>
               </div>
            </div>
            <!-- Online Revenue -->
            <div class="col-6 col-md-3">
               <div class="widget-card online-revenue-card smart-card h-100">
                  <div class="widget-header">
                     <h3 class="widget-title">Online</h3>
                     <i class="ri-exchange-dollar-line widget-icon text-success"></i>
                  </div>
                  <div class="widget-content">
                     <div class="widget-main-value">
                        <span>{{ $onlinesum ?? 0 }}</span>
                     </div>
                     <div class="widget-icon-small">
                        <i class="ri-exchange-dollar-line text-success"></i>
                     </div>
                  </div>
                  <a href="{{ route('client.online') }}" class="widget-footer">
                  View <i class="ri-arrow-right-line"></i>
                  </a>
               </div>
            </div>
            <!-- Inactive Services -->
            <div class="col-6 col-md-3">
               <div class="widget-card inactive-services-card smart-card h-100">
                  <div class="widget-header">
                     <h3 class="widget-title">Inactive</h3>
                     <i class="ri-arrow-left-down-fill widget-icon text-danger"></i>
                  </div>
                  <div class="widget-content">
                     <div class="widget-main-value">
                        <span>{{ $inactivesum ?? 0 }}</span>
                     </div>
                     <div class="widget-icon-small">
                        <i class="ri-arrow-left-down-fill text-danger"></i>
                     </div>
                  </div>
                  <a href="{{ route('client.view.services', ['type' => 'inactive']) }}" class="widget-footer">
                  View <i class="ri-arrow-right-line"></i>
                  </a>
               </div>
            </div>
            @endcan
         </div>
      </div>
      @endcan
      @include('layouts.partials.flash')
      <div class="d-flex align-items-center mb-3">
         <div class="flex-grow-1">
            <h5 class="mb-0 text-uppercase text-muted"><span class="text-gradient">Clients</span> List</h5>
         </div>
         @can('create client')
         <div class="flex-shrink-0">
            <!-- Delete Button (hidden by default) -->
            <button id="delete-btn" class="btn btn-sm btn-danger flex-grow-1 flex-lg-grow-0" style="display: none; min-width: 100px;">
            <i class="ri-delete-bin-line d-lg-none"></i>
            <span class="d-none d-lg-inline">Delete selected</span>
            </button>
            <a href="{{ route('client.create') }}" 
               class="btn btn-primary btn-label waves-effect waves-light btn-sm add-btn">
            <i class="ri-add-line label-icon align-middle fs-16 me-2"></i> Add Client
            </a>
         </div>
         @endcan
      </div>
      @include('components.export-buttons')
      <form method="GET" class="card p-3 p-md-4 mb-4 shadow-sm rounded">
         <div class="row g-3 align-items-end">
            {{-- Tag Filter --}}
            <div class="col-md-3 col-lg-2">
               <label for="tag" class="form-label fw-semibold small text-muted mb-1">
                  <i class="ri-price-tag-3-line me-1 text-muted"></i> Tag
               </label>
               <select name="tag" id="tag" class="form-select form-select-sm shadow-sm select2">
                  <option value="">All Tags</option>
                  @foreach($allTags as $tag)
                     <option value="{{ $tag->id }}" {{ request('tag') == $tag->id ? 'selected' : '' }}>
                        {{ $tag->name['en'] ?? $tag->name }}
                     </option>
                  @endforeach
               </select>
            </div>
            {{-- Status Filter --}}
            <div class="col-md-3 col-lg-2">
               <label for="clientStatus" class="form-label fw-semibold small text-muted mb-1">
               <i class="ri-user-star-line me-1 text-muted"></i> Status
               </label>
               <select name="status" id="clientStatus" class="form-select form-select-sm shadow-sm">
                  <option value="">All Statuses</option>
                  <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                  <option value="expired" {{ request('status') == 'expired' ? 'selected' : '' }}>Expired</option>
                  <option value="dormant" {{ request('status') == 'dormant' ? 'selected' : '' }}>Dormant</option>
               </select>
            </div>
            {{-- Start Date --}}
            <div class="col-md-3 col-lg-3">
               <label for="start_date" class="form-label fw-semibold small text-muted mb-1">
               <i class="ri-calendar-line me-1 text-muted"></i> Start Date
               </label>
               <input type="date" name="start_date" id="start_date"
                  value="{{ request('start_date') }}"
                  class="form-control form-control-sm shadow-sm" placeholder="Created"
                  data-provider="flatpickr" data-date-format="Y-m-d">
            </div>
            {{-- End Date --}}
            <div class="col-md-3 col-lg-3">
               <label for="end_date" class="form-label fw-semibold small text-muted mb-1">
               <i class="ri-calendar-line me-1 text-muted"></i> End Date
               </label>
               <input type="date" name="end_date" id="end_date"
                  value="{{ request('end_date') }}"
                  class="form-control form-control-sm shadow-sm" placeholder="Created"
                  data-provider="flatpickr" data-date-format="Y-m-d">
            </div>
            {{-- Only Reset Button --}}
            <div class="col-md-6 col-lg-2 d-flex gap-2 mt-1">
               <a href="{{ url()->current() }}" class="btn btn-primary btn-sm w-100 d-flex justify-content-center align-items-center">
               <i class="ri-close-line me-1"></i> Reset
               </a>
            </div>
         </div>
      </form>
      <div class="card">
         <div class="card-body">
            <div>
               <div class="table-responsive table-card mb-1">
                  <table class="table table-nowrap align-middle table-striped" id="datatable" style="width: 100%;">
                     <thead class="table-light text-muted">
                        <tr class="text-uppercase">
                           <th>A/C No</th>
                           <th>
                              <div class="form-check">
                                 <input class="form-check-input" type="checkbox" id="select-all">
                              </div>
                           </th>
                           <th>Client</th>
                           <th>Wallet</th>
                           <th>Email</th>
                           <th>Services</th>
                           <th>Phone</th>
                           <th>Registered</th>
                           <th>Status</th>
                           <th>Tags</th>
                           <th>Action</th>
                        </tr>
                     </thead>
                     <tbody class="list form-check-all">
                     </tbody>
                  </table>
               </div>
            </div>
            <!-- Delete Modal -->
            <div class="modal fade flip" id="deleteItem" tabindex="-1" aria-hidden="true">
               <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                     <div class="modal-body p-5 text-center">
                        <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width: 90px; height: 90px;"></lord-icon>
                        <div class="mt-4 text-center">
                           <h4>You are about to delete <span class="modal-title"></span>!</h4>
                           <p class="text-muted fs-15 mb-4">Deleting a client user will remove all of the information from the database.</p>
                           <div class="hstack gap-2 justify-content-center remove">
                              <button class="btn btn-link link-success fw-medium text-decoration-none" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
                              <form action="{{route('client.delete')}}" method="POST"> @csrf
                                 <input type="hidden" name="id" id="delete-client-id" />
                                 <button type="submit" class="btn btn-danger">Yes delete</button>
                              </form>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <!--end modal -->
            <!-- Global Action Modal -->
            <div class="modal fade" id="globalActionModal" tabindex="-1" aria-labelledby="globalActionModalLabel" aria-hidden="true">
               <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content rounded-3 shadow">
                     <div class="modal-header">
                        <h5 class="modal-title" id="globalActionModalLabel">Client Actions</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body p-3">
                        <div id="globalActionModalBody" class="d-grid gap-2"></div>
                        <hr>
                        <div id="globalActionModalTags" class="text-muted small"></div>
                     </div>
                     <div class="modal-footer">
                        <button type="button" class="btn btn-soft-dark w-100" data-bs-dismiss="modal">Close</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!--end col-->
</div>
<!--end row-->@endsection @section('script')
<script src="{{ URL::asset('/assets/js/jquery-3.6.1.js')}}"></script>
<script src="{{ URL::asset('/assets/js/datatables/datatables.min.js') }}"></script>
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script src="{{ URL::asset('/assets/js/servertable.js') }}"></script>
<script src="{{ URL::asset('assets/js/sweetalert2.all.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
   var deleteMultipleUrl = "{{ route('client.delete_multiple') }}";
</script>
<!-- include the deletemultiple.js file using the script tag -->
<script src="{{ URL::asset('/assets/js/clients/deletemultiple.js') }}"></script>
<script>
   // DataTable initialization
   var url = '{{ route("client.index") }}';
   var columns = [
     { data: 'username', name: 'username', responsivePriority: 1 },
     { data: 'select', orderable: false, searchable: false, responsivePriority: 2 },
     { 
        data: 'name',
        name: 'name',
        orderable: false,
        responsivePriority: 3,
        render: function(data, type, row) {
           return `<div style="white-space: normal; min-width: 120px;">${data}</div>`;
        }
     },
     { data: 'wallet', name: 'wallet', responsivePriority: 10 },
     { data: 'email', name: 'email', responsivePriority: 7 },
     { data: 'services', name: 'services', orderable: false, responsivePriority: 5 },
     { data: 'phone', name: 'phone', orderable: false, responsivePriority: 9 },
     { data: 'registered', name: 'created_at', responsivePriority: 6 },
     { data: 'status', name: 'status', orderable: false, responsivePriority: 4 },
     { data: 'tags', name: 'tags', responsivePriority: 10 },
     { data: 'action', name: 'action', orderable: false, responsivePriority: 8 },
   ];
   
   // Render table with filters
   renderTable(url, columns, function (d) {
      d.status = $('#clientStatus').val();
      d.start_date = $('#start_date').val();
      d.end_date = $('#end_date').val();
      d.tag = $('#tag').val();
   });
   
   // Reload DataTable when filters change
   $('#clientStatus, #start_date, #end_date, #tag').on('change', function () {
      $('#datatable').DataTable().ajax.reload();
   });
   
   // Modal pass user data
   $('#deleteItem').on('show.bs.modal', function(event) {
       var button = $(event.relatedTarget);
       var title = button.data('title');
       var id = button.data('id');
       var modal = $(this);
       modal.find('.modal-title').text(title);
       modal.find('.modal-body #id').val(id);
   });
</script>
<script>
   function openClientActionsModal(clientId, fullName, phone, username, tags) {
       const modalBody = document.getElementById('globalActionModalBody');
       const modalTags = document.getElementById('globalActionModalTags');
       document.getElementById('globalActionModalLabel').innerText = `Actions for ${fullName}`;
   
       modalBody.innerHTML = `
           <a class="btn btn-soft-secondary " href="tel:${phone}">
               <i class="ri-phone-fill me-2"></i> Call Client
           </a>
           <a class="btn btn-soft-info " href="/dashboard/client/${username}/services">
               <i class="ri-eye-fill me-2"></i> View Services
           </a>
           <a class="btn btn-soft-info " href="/dashboard/client/edit/${username}">
               <i class="ri-pencil-fill me-2"></i> Edit Client
           </a>
           <button class="btn btn-soft-danger " onclick="confirmDelete(${clientId}, '${fullName.replace(/'/g, "\\'")}')">
               <i class="ri-delete-bin-5-fill me-2"></i> Delete Client
           </button>
       `;
   
       modalTags.innerHTML = `<strong>Tags:</strong> ${tags || 'None'}`;
   
       const modal = new bootstrap.Modal(document.getElementById('globalActionModal'));
       modal.show();
   }
   
   function confirmDelete(clientId, fullName) {
       // Close Actions Modal First
       const globalModalEl = document.getElementById('globalActionModal');
       const globalModal = bootstrap.Modal.getInstance(globalModalEl);
       if (globalModal) globalModal.hide();
   
       // Correctly target the hidden input field inside #deleteItem modal
       const deleteModal = document.getElementById('deleteItem');
       deleteModal.querySelector('input[name="id"]').value = clientId;
       deleteModal.querySelector('.modal-title').innerText = fullName;
   
       // Show the Delete Confirmation Modal
       const deleteModalInstance = new bootstrap.Modal(deleteModal);
       deleteModalInstance.show();
   }
</script>
<script>
   const columnTogglesHtml = `
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="0" checked> A/C No</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="1" checked> Check</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="2" checked> Client</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="3" checked> Wallet</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="4" checked> Email</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="5" checked> Services</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="6" checked> Phone</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="7" checked> Registered</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="8" checked> Status</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="9" checked> Tags</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="10" checked> Action</label></li>
   `;
   
   document.addEventListener("DOMContentLoaded", () => {
      document.getElementById("columnToggles").innerHTML = columnTogglesHtml;
   });
   
</script>

<script>
   $(document).ready(function() {
      $('#tag').select2({
         placeholder: 'Select a tag',
         allowClear: true,
         width: '100%' // ensures it respects Bootstrap form width
      });
   });
</script>
@endsection