@extends('layouts.master') @section('title') {{ ucfirst($type) }} @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" />
<style>
   .dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   display: inline-block;
   animation: pulse 1s infinite;
   }
   .green {
   background-color: green;
   }
   .orange {
   background-color: orange;
   }
   @keyframes pulse {
   0% {
   transform: scale(0.95);
   box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.7);
   }
   70% {
   transform: scale(1);
   box-shadow: 0 0 0 10px rgba(0, 128, 0, 0);
   }
   100% {
   transform: scale(0.95);
   box-shadow: 0 0 0 0 rgba(0, 128, 0, 0);
   }
   }
</style>
@endsection @section('content') 
{{-- @component('components.breadcrumb') @slot('li_1') Services @endslot @slot('title') Active @endslot @endcomponent --}}
<!-- start page title -->
<div class="row">
   <div class="col-12">
      <div class="page-title-box d-sm-flex align-items-center justify-content-between">
         <h4 class="mb-sm-0 font-size-18"></h4>
         <div class="page-title-right">
            <ol class="breadcrumb m-0">
               <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
               <li class="breadcrumb-item active">Services</li>
            </ol>
         </div>
      </div>
   </div>
</div>
<div class="row">
<div class="col-lg-12">
   <!-- <div class="mb-3">
      <div class="d-flex align-items-center">
         <h2 class="h5 text-uppercase fw-bold mb-0">
            <span class="text-gradient">{{ ucfirst($type) }}</span> 
            <span class="text-muted">Services</span>
         </h2>
      </div>
   </div> -->

   <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">{{ ucfirst($type) }}</span> Services</h5>
         </div>
         <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>
         </div>
      </div>

   @include('components.export-buttons')

   <form method="GET" class="card p-2 p-md-3 mb-3 shadow-sm rounded">
   {{-- Preserve the current service type --}}
   <input type="hidden" name="type" value="{{ $type }}">

   <div class="row g-2 g-md-3 align-items-end">
      {{-- Start Date --}}
      <div class="col-12 col-sm-6 col-lg-4">
         <label for="start_date" class="form-label fw-semibold small 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" placeholder="Start date"
            data-provider="flatpickr" data-date-format="Y-m-d">
      </div>

      {{-- End Date --}}
      <div class="col-12 col-sm-6 col-lg-4">
         <label for="end_date" class="form-label fw-semibold small 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" placeholder="End date"
            data-provider="flatpickr" data-date-format="Y-m-d">
      </div>

      {{-- Reset Button --}}
      <div class="col-12 col-sm-6 col-lg-4">
         <div class="d-flex gap-2">
            <a href="{{ url()->current() }}" class="btn btn-info btn-sm flex-grow-1 d-flex justify-content-center align-items-center">
               <i class="ri-close-line me-1"></i>
               <span>Reset</span>
               <span class="d-inline d-md-none">Clear</span>
            </a>
         </div>
      </div>
   </div>
</form>


   <div class="card pt-4">
      <!-- <div class="card-header border-bottom-dashed">
         <div class="d-flex align-items-center">
            <h5 class="card-title mb-0 flex-grow-1"><i class="ri-router-line text-success"></i> {{ ucfirst($type) }} Services</h5>
         </div>
         </div> -->
      <div class="card-body pt-0">
         <div>
            <!-- show services message  -->
            <div class="table-responsive table-card mb-1">
               <table class="table table-nowrap align-middle table-striped" id="datatable" style="width: 100%;">
                  <thead class="text-muted table-light">
                     <tr>
                        <th>Client Name</th>
                        <th>
                              <div class="form-check">
                                 <input class="form-check-input" type="checkbox" id="select-all">
                              </div>
                           </th>
                        @if (setting('smartolt_enabled') === 'enabled')
                        <th>Signal</th>
                        @endif
                        <th>Wallet</th>
                        <th>Status</th>
                        <th>Description</th>
                        <th>Package</th>
                        <th>Price (ksh)</th>
                        <th>IP Address</th>
                        <th>Username</th>
                        <th>Password</th>
                        <th>Expiry</th>
                     </tr>
                  </thead>
               </table>
            </div>
            <!--end modal -->
         </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>
<!-- init js -->
<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>
   var deleteMultipleUrl = "{{ route('services.delete_multiple') }}";
</script>
<!-- include the deletemultiple.js file using the script tag -->
<script src="{{ URL::asset('/assets/js/services/deletemultiple.js') }}"></script>
<script>
   var url = "{{ route('client.view.services', ['type' => $type]) }}";
   var columns = [
       { data: 'client_name' },
       { data: 'select', orderable: false, searchable: false },
       @if (setting('smartolt_enabled') === 'enabled')
           { data: 'signal', orderable: false },
       @endif
       { data: 'balance', orderable: false, searchable: false },
       { data: 'status', orderable: false, searchable: false },
       { data: 'description', orderable: false },
       { data: 'package', orderable: false },
       { data: 'price', orderable: false },
       { data: 'ipaddress', orderable: false },
       { data: 'username', orderable: false },
       { data: 'password', orderable: false },
       { data: 'expiry', orderable: false, searchable: false }
   ];

   // Initialize DataTable with filters
   renderTable(url, columns, function (d) {
      d.start_date = $('#start_date').val();
      d.end_date = $('#end_date').val();
      d.type = $('input[name="type"]').val(); // Get value from hidden input
   });

   // Auto-reload DataTable on filter changes
   $('#start_date, #end_date').on('change', function () {
      $('#datatable').DataTable().ajax.reload();
   });
</script>

@php
$columns = [
   'Client Name',
   'Check',
   setting('smartolt_enabled') === 'enabled' ? 'Signal' : null,
   'Wallet',
   'Status',
   'Description',
   'Package',
   'Price (ksh)',
   'IP Address',
   'Username',
   'Password',
   'Expiry',
];
@endphp

<script>
   const columnTogglesHtml = `
      {!! collect($columns)->filter()->values()->map(function($col, $index) {
         return '<li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="' . $index . '" checked> ' . $col . '</label></li>';
      })->implode("\n") !!}
   `;

   document.addEventListener("DOMContentLoaded", () => {
      document.getElementById("columnToggles").innerHTML = columnTogglesHtml;
   });
</script>

@endsection