@extends('layouts.app')

@section('title', 'Active Clients - ISP ERP System')

@section('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
<style>
/* Bill Generate Button Styles */
#billGenerateBtn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border: none !important;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    min-width: 180px !important;
    width: auto !important;
    white-space: nowrap !important;
}

#billGenerateBtn:hover {
    background: linear-gradient(135deg, #218838 0%, #1ea085 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

#billGenerateBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

#billGenerateBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Custom styles for active clients index */

/* Increase filter form height */
.filter-card .form-control,
.filter-card .form-select {
    height: 42px !important;
    padding: 0.6rem 0.75rem !important;
}

.filter-card .input-group-text {
    height: 42px !important;
    padding: 0.6rem 0.75rem !important;
}

.filter-card .btn {
    height: 42px !important;
    padding: 0.6rem 1.2rem !important;
}

/* Enhanced Filter Card Styles */
.filter-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.filter-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.filter-header {
    background: #2F4256;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-header h6 {
    color: white !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.filter-body {
    padding: 1.5rem;
    background: white;
}

.form-group {
    margin-bottom: 0;
}

.form-label {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    color: #495057;
    font-weight: 500;
}

.form-label i {
    opacity: 0.7;
}

.input-group-text {
    background: #f8f9fa !important;
    border-color: #e9ecef;
    color: #6c757d;
    font-size: 0.875rem;
}

.form-control, .form-select {
    border-color: #e9ecef;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    margin: 0 2px;
}

.btn-group-sm .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-group-sm .btn i {
    font-size: 0.75rem;
}

/* Action buttons styling */
.btn-outline-info {
    border-color: #17a2b8;
    color: #17a2b8;
}

.btn-outline-info:hover {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: white;
}

.btn-outline-warning {
    border-color: #ffc107;
    color: #ffc107;
}

.btn-outline-warning:hover {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-outline-success {
    border-color: #28a745;
    color: #28a745;
}

.btn-outline-success:hover {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

/* Metric Cards Styling */
.metric-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.metric-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0;
}

.metric-icon.total-clients {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.metric-icon.active-clients {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-icon.suspended-clients {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-icon.assigned-servers {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-content {
    flex: 1;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.1rem;
}

.metric-label {
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.metric-value.total-clients {
    color: #667eea;
}

.metric-value.active-clients {
    color: #4facfe;
}

.metric-value.suspended-clients {
    color: #f5576c;
}

.metric-value.assigned-servers {
    color: #4facfe;
}

/* Table styling */
.table-responsive {
    border-radius: 0.5rem;
    overflow: hidden;
}

.table th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
}

.table td {
    vertical-align: middle;
    padding: 0.75rem;
}

/* Action column specific styling */
.action-column {
    min-width: 140px;
}

.action-column .btn-group {
    gap: 0.25rem;
}

.action-column .btn-group-sm .btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
}

.action-column .btn-group-sm .btn i {
    font-size: 0.75rem;
}

/* Reduce gap between sections */
.custom-card {
    margin-bottom: 0.5rem !important;
}

.custom-card-header {
    padding: 0.75rem 1rem !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .btn-group-sm .btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.85rem;
    }
    
    .btn-group-sm .btn i {
        font-size: 0.9rem;
    }
    
    .action-column {
        min-width: 120px;
    }
    
    .action-column .btn-group-sm .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }
    
    .action-column .btn-group-sm .btn i {
        font-size: 0.7rem;
    }
}

.dataTables_length label {
    text-transform: uppercase;
    font-weight: 600;
    color: #495057;
}

.dataTables_length select {
    display: inline-block;
    width: auto;
    margin: 0 0.35rem;
}

.dataTables_filter {
    display: none;
}

/* Make DataTables pagination display in one line */
.dataTables_wrapper .row:last-child {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    flex-wrap: nowrap;
    margin: 0;
}

.dataTables_wrapper .row:last-child > div {
    display: flex;
    align-items: center;
}

.dataTables_wrapper .row:last-child > div:first-child {
    flex: 0 0 auto;
    justify-content: flex-start;
}

.dataTables_wrapper .row:last-child > div:last-child {
    flex: 0 0 auto;
    justify-content: flex-end !important;
    margin-left: auto !important;
}

.dataTables_wrapper .dataTables_info {
    display: inline-block;
    margin: 0 !important;
    padding: 0.5rem 0;
    text-align: left;
    float: none !important;
}

.dataTables_wrapper .dataTables_paginate {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0.5rem 0;
    float: none !important;
    text-align: right !important;
    margin-left: auto !important;
    width: auto !important;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    justify-content: flex-end !important;
    margin: 0 !important;
    float: none !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination {
    display: flex !important;
    justify-content: flex-end !important;
    float: none !important;
}
</style>
@endsection

@section('page-title', 'Active Clients Management')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-2">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-users me-2"></i>
                                Active Clients Management
                            </h3>
                            <p class="mb-0 opacity-75">Manage active client information and details</p>
                        </div>
                        <div class="d-flex" style="gap: 0.5rem;">
                            @if(auth()->user()->role !== 'collector')
                                <a href="{{ route('active-clients.create') }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-plus me-1"></i>Add New Active Client
                                </a>
                                <button type="button" class="btn btn-success btn-sm" onclick="exportActiveClients()">
                                    <i class="fas fa-download me-1"></i>Export Data
                                </button>
                            @endif
                            <button type="button" class="btn btn-info btn-sm" onclick="refreshTable()">
                                <i class="fas fa-sync me-1"></i>Refresh
                            </button>
                            <a href="{{ route('client.login') }}" class="btn btn-secondary btn-sm" target="_blank">
                                <i class="fas fa-user me-1"></i>Client Login
                            </a>
                            @if(auth()->user()->role !== 'collector')
                                <button type="button" class="btn btn-warning btn-sm" onclick="showLogs()">
                                    <i class="fas fa-history me-1"></i>View Logs
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Metrics Dashboard -->
    <div class="row mb-2">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="metric-card">
                <div class="metric-icon total-clients">
                    <i class="fas fa-users"></i>
                </div>
                <div class="metric-content">
                    <div class="metric-value">{{ $metrics['totalClients'] }}</div>
                    <div class="metric-label">Total Clients</div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="metric-card">
                <div class="metric-icon active-clients">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="metric-content">
                    <div class="metric-value">{{ $metrics['activeClients'] }}</div>
                    <div class="metric-label">Active Clients</div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="metric-card">
                <div class="metric-icon suspended-clients">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div class="metric-content">
                    <div class="metric-value">{{ $metrics['suspendedClients'] }}</div>
                    <div class="metric-label">Suspended Clients</div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="metric-card">
                <div class="metric-icon assigned-servers">
                    <i class="fas fa-server"></i>
                </div>
                <div class="metric-content">
                    <div class="metric-value">{{ $metrics['assignedServers'] }}</div>
                    <div class="metric-label">Assigned Servers</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search Section -->
    <!-- Enhanced Filter Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="filter-card">
                <div class="filter-header">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-filter me-2 text-primary"></i>
                        <h6 class="mb-0 text-dark fw-semibold">Filter & Search Clients</h6>
                    </div>
                </div>
                <div class="filter-body">
                    <form id="searchForm" method="GET" action="{{ route('active-clients.index') }}">
                        <div class="row g-3">
                            <!-- Name/Username Field -->
                            <div class="col-lg-3 col-md-6">
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-end-0">
                                            <i class="fas fa-search text-muted"></i>
                                        </span>
                                        <input type="text" class="form-control border-start-0 ps-0" id="search_name" name="search_name" 
                                               value="{{ request('search_name') }}" 
                                               placeholder="Enter client name or username...">
                                    </div>
                                </div>
                            </div>

                            <!-- ISP Field -->
                            <div class="col-lg-2 col-md-6">
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-end-0">
                                            <i class="fas fa-sitemap text-muted"></i>
                                        </span>
                                        <select class="form-select border-start-0 ps-0" id="search_isp" name="search_isp">
                                            <option value="">-- All ISPs --</option>
                                            @if(auth()->user()->role === 'mac_reseller')
                                                @foreach($filterOptions['isps'] as $isp)
                                                    <option value="{{ $isp->id }}" 
                                                            {{ request('search_isp') == $isp->id ? 'selected' : '' }}>
                                                        {{ $isp->name }}
                                                    </option>
                                                @endforeach
                                            @else
                                                @php
                                                    $currentUser = auth()->user();
                                                    $userIspId = $currentUser->branch_id;
                                                @endphp
                                                @if($userIspId)
                                                    @php
                                                        $userIsp = \App\Models\Branch::where('id', $userIspId)->where('is_active', true)->first();
                                                    @endphp
                                                    @if($userIsp)
                                                        <option value="{{ $userIsp->id }}" 
                                                                {{ request('search_isp') == $userIsp->id ? 'selected' : '' }}>
                                                            {{ $userIsp->name }}
                                                        </option>
                                                    @endif
                                                @else
                                                    @foreach(\App\Models\Branch::where('is_active', true)->whereNull('parent_branch_id')->orderBy('name')->get() as $isp)
                                                        <option value="{{ $isp->id }}" 
                                                                {{ request('search_isp') == $isp->id ? 'selected' : '' }}>
                                                            {{ $isp->name }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Branch Field -->
                            <div class="col-lg-2 col-md-6">
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-end-0">
                                            <i class="fas fa-map-marker-alt text-muted"></i>
                                        </span>
                                        <select class="form-select border-start-0 ps-0" id="search_branch" name="search_branch">
                                            <option value="">-- Select Branch --</option>
                                            @if(auth()->user()->role === 'mac_reseller')
                                                @foreach($filterOptions['branches'] as $branch)
                                                    <option value="{{ $branch->id }}" 
                                                            {{ request('search_branch') == $branch->id ? 'selected' : '' }}>
                                                        {{ $branch->name }}
                                                    </option>
                                                @endforeach
                                            @else
                                                @if(request('search_isp'))
                                                    @foreach(\App\Models\Branch::where('is_active', true)->where('parent_branch_id', request('search_isp'))->orderBy('name')->get() as $branch)
                                                        <option value="{{ $branch->id }}" 
                                                                {{ request('search_branch') == $branch->id ? 'selected' : '' }}>
                                                            {{ $branch->name }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- MikroTik Server Field -->
                            <div class="col-lg-2 col-md-6">
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-end-0">
                                            <i class="fas fa-network-wired text-muted"></i>
                                        </span>
                                        <select class="form-select border-start-0 ps-0" id="search_mikrotik" name="search_mikrotik">
                                            <option value="">-- Select Server --</option>
                                            @if(auth()->user()->role === 'mac_reseller')
                                                @foreach($filterOptions['servers'] as $server)
                                                    <option value="{{ $server->id }}" 
                                                            {{ request('search_mikrotik') == $server->id ? 'selected' : '' }}>
                                                        {{ $server->name }}
                                                    </option>
                                                @endforeach
                                            @else
                                                @if(request('search_branch'))
                                                    @foreach(\App\Models\MikrotikServer::where('is_active', true)->where('branch_id', request('search_branch'))->orderBy('name')->get() as $server)
                                                        <option value="{{ $server->id }}" 
                                                                {{ request('search_mikrotik') == $server->id ? 'selected' : '' }}>
                                                            {{ $server->name }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="col-lg-3 col-md-12">
                                <div class="form-group">
                                    <div class="d-flex gap-2">
                                        <button type="submit" class="btn btn-primary btn-sm px-3 py-2">
                                            <i class="fas fa-search me-1"></i>Search
                                        </button>
                                        <a href="{{ route('active-clients.index') }}" class="btn btn-outline-secondary btn-sm px-3 py-2">
                                            <i class="fas fa-times me-1"></i>Clear
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Active Clients Table -->
    <div class="row mt-2">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0">
                                <i class="fas fa-list me-2"></i>
                                All Active Clients
                            </h5>
                            @if(\App\Helpers\PermissionHelper::isSuperUser(auth()->id()))
                                <small class="text-white">
                                    <i class="fas fa-crown me-1"></i>Showing all active clients (Super User)
                                </small>
                            @else
                                @php
                                    $userBranchId = auth()->user()->branch_id;
                                    $hasSubBranches = $userBranchId ? \App\Models\Branch::where('parent_branch_id', $userBranchId)->exists() : false;
                                @endphp
                                @if($hasSubBranches)
                                    <small class="text-white">
                                        <i class="fas fa-sitemap me-1"></i>Showing active clients from your main branch and all sub branches (ISP User)
                                    </small>
                                @else
                                    <small class="text-muted">
                                        <i class="fas fa-filter me-1"></i>Showing active clients from your branch only (Sub Branch User)
                                    </small>
                                @endif
                            @endif
                        </div>
                        <div class="d-flex align-items-center gap-3">
                            <button type="button" class="btn btn-success btn-sm px-5 py-2 rounded-pill shadow-sm" id="billGenerateBtn" onclick="generateBills()" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%); border: none; font-weight: 500; transition: all 0.3s ease; min-width: 180px; white-space: nowrap;">
                                Bill Generate
                            </button>
                            <div class="input-group" style="max-width: 300px;">
                                <input type="text" class="form-control" id="searchInput" placeholder="Search clients...">
                                <span class="input-group-text">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="custom-card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if($clientInfos->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover" id="activeClientsTable">
                                <thead class="table-dark">
                                    <tr>
                                        @if(auth()->user()->role !== 'collector')
                                            <th>
                                                <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                                            </th>
                                        @endif
                                        <th>ID</th>
                                        <th>Login ID</th>
                                        <th>Client Name</th>
                                        <th>Mobile</th>
                                        <th>Branch</th>
                                        <th>Mikrotik Server</th>
                                        <th>Package</th>
                                        <th>Monthly Bill</th>
                                        <th>Status</th>
                                        <th>Online Status</th>
                                        <th>MAC Address</th>
                                        <th>Created</th>
                                        <th>Expire Date</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($clientInfos as $clientInfo)
                                        <tr>
                                            @if(auth()->user()->role !== 'collector')
                                                <td>
                                                    <input type="checkbox" class="row-checkbox" value="{{ $clientInfo->id }}">
                                                </td>
                                            @endif
                                            <td>
                                                <span class="badge bg-secondary">#{{ $clientInfo->id }}</span>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center gap-2">
                                                    @if($clientInfo->client_login_id)
                                                        <span class="badge bg-info text-white">{{ $clientInfo->client_login_id }}</span>
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                    @if(!$clientInfo->client_login_id || !$clientInfo->client_login_password)
                                                        <button type="button" 
                                                                class="btn btn-sm btn-outline-primary p-1" 
                                                                style="width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center;"
                                                                title="Client Registration"
                                                                onclick="openClientRegistration(
                                                                    {{ $clientInfo->id }},
                                                                    '{{ addslashes($clientInfo->full_name ?? '') }}',
                                                                    '{{ addslashes($clientInfo->mobile_number ?? '') }}',
                                                                    '{{ addslashes($clientInfo->email_address ?? '') }}',
                                                                    '{{ addslashes($clientInfo->branch->name ?? '') }}',
                                                                    '{{ addslashes($clientInfo->client_login_id ?? '') }}'
                                                                )">
                                                            <i class="fas fa-user-plus" style="font-size: 12px;"></i>
                                                        </button>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <div class="fw-bold">{{ $clientInfo->full_name }}</div>
                                                    @if($clientInfo->client)
                                                        <small class="text-muted">{{ $clientInfo->client->username }}</small>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <a href="tel:{{ $clientInfo->mobile_number }}" class="badge text-decoration-none" style="background-color: #d1ecf1; color: #0c5460;">
                                                    <i class="fas fa-phone me-1"></i>{{ $clientInfo->mobile_number }}
                                                </a>
                                            </td>
                                            <td>
                                                @if($clientInfo->branch && $clientInfo->branch->parent_branch_id)
                                                    <span class="badge" style="background-color: #d4edda; color: #155724;">
                                                        {{ $clientInfo->branch->name }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($clientInfo->client && $clientInfo->client->mikrotikServer)
                                                    <div class="d-flex flex-column">
                                                        <span class="badge" style="background-color: #d4edda; color: #155724;">
                                                            {{ $clientInfo->client->mikrotikServer->name }}
                                                        </span>
                                                        @if($clientInfo->client->mikrotikServer->ip_address)
                                                            <small class="text-muted">{{ $clientInfo->client->mikrotikServer->ip_address }}</small>
                                                        @endif
                                                    </div>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($clientInfo->client && $clientInfo->client->package_name)
                                                    <span class="badge" style="background-color: #d1ecf1; color: #0c5460;">
                                                        {{ $clientInfo->client->package_name }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($clientInfo->monthly_bill_amount)
                                                    <span class="fw-bold text-success">
                                                        ৳{{ number_format($clientInfo->monthly_bill_amount, 2) }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($clientInfo->client)
                                                    @if($clientInfo->client->status === 'active')
                                                        <span class="badge" style="background-color: #d4edda; color: #155724;">
                                                            <i class="fas fa-check-circle me-1"></i>Active
                                                        </span>
                                                    @elseif($clientInfo->client->status === 'suspended')
                                                        <span class="badge" style="background-color: #fff3cd; color: #856404;">
                                                            <i class="fas fa-pause-circle me-1"></i>Suspended
                                                        </span>
                                                    @elseif($clientInfo->client->status === 'inactive')
                                                        <span class="badge bg-secondary">
                                                            <i class="fas fa-times-circle me-1"></i>Inactive
                                                        </span>
                                                    @elseif($clientInfo->client->status === 'expired')
                                                        <span class="badge bg-danger">
                                                            <i class="fas fa-exclamation-triangle me-1"></i>Expired
                                                        </span>
                                                    @else
                                                        <span class="badge bg-info">
                                                            <i class="fas fa-info-circle me-1"></i>{{ ucfirst($clientInfo->client->status) }}
                                                        </span>
                                                    @endif
                                                @else
                                                    <span class="badge bg-warning">
                                                        <i class="fas fa-question-circle me-1"></i>No Client Data
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($clientInfo->client)
                                                    @if($clientInfo->client->is_online)
                                                        <span class="badge" style="background-color: #d4edda; color: #155724;">
                                                            <i class="fas fa-wifi me-1"></i>Online
                                                        </span>
                                                    @else
                                                        <span class="badge" style="background-color: #f8d7da; color: #721c24;">
                                                            <i class="fas fa-wifi-slash me-1"></i>Offline
                                                        </span>
                                                    @endif
                                                @else
                                                    <span class="badge bg-warning">
                                                        <i class="fas fa-question-circle me-1"></i>Unknown
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($clientInfo->client)
                                                    <span class="badge bg-light text-dark">
                                                        {{ $clientInfo->client->mac_address_display ?? ($clientInfo->client->mac_address ?? 'N/A') }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">N/A</span>
                                                @endif
                                            </td>
                                            <td>
                                                <small class="text-muted">
{{ $clientInfo->created_at->format('M d, Y') }}
                                                </small>
                                            </td>
                                            <td>
                                                <small class="text-muted">
                                                    @if($clientInfo->expire_date)
                                                        {{ \Carbon\Carbon::parse($clientInfo->expire_date)->format('M d, Y') }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </small>
                                            </td>
                                             <td class="action-column">
                                                 <div class="btn-group btn-group-sm" role="group">
                                                     @if(auth()->user()->role !== 'collector')
                                                         <a href="{{ route('active-clients.show', $clientInfo) }}" 
                                                            class="btn btn-outline-info btn-sm" title="View Details">
                                                             <i class="fas fa-eye"></i>
                                                         </a>
                                                         <a href="{{ route('active-clients.edit', $clientInfo) }}" 
                                                            class="btn btn-outline-warning btn-sm" title="Edit Client">
                                                             <i class="fas fa-edit"></i>
                                                         </a>
                                                         @if($clientInfo->client && $clientInfo->client->status === 'active')
                                                             <button type="button" class="btn btn-outline-danger btn-sm" 
                                                                     title="Disable User" 
                                                                     onclick="disableUser({{ $clientInfo->id }})">
                                                                 <i class="fas fa-user-times"></i>
                                                             </button>
                                                         @else
                                                             <button type="button" class="btn btn-outline-success btn-sm" 
                                                                     title="Enable User" 
                                                                     onclick="enableUser({{ $clientInfo->id }})">
                                                                 <i class="fas fa-user-check"></i>
                                                             </button>
                                                         @endif
                                                         <button type="button" class="btn btn-outline-danger btn-sm" 
                                                                 title="Delete Client" 
                                                                 onclick="deleteClient({{ $clientInfo->id }}, '{{ $clientInfo->full_name }}')">
                                                             <i class="fas fa-trash"></i>
                                                         </button>
                                                     @else
                                                         <span class="text-muted">
                                                             <i class="fas fa-eye-slash"></i> View Only
                                                         </span>
                                                     @endif
                                                 </div>
                                             </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="mb-4">
                                <i class="fas fa-users fa-3x text-muted"></i>
                            </div>
                            <h5 class="text-muted">No Active Clients Found</h5>
                            <p class="text-muted">There are no active clients to display at the moment.</p>
                            @if(auth()->user()->role !== 'collector')
                                <a href="{{ route('active-clients.create') }}" class="btn btn-primary btn-custom">
                                    <i class="fas fa-plus me-2"></i>Add First Active Client
                                </a>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.custom-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.btn-custom {
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.table th {
    border-top: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.table td {
    vertical-align: middle;
    font-size: 0.9rem;
}

.btn-group .btn {
    margin-right: 2px;
}

.btn-group .btn:last-child {
    margin-right: 0;
}
</style>
@endsection

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">
                    <i class="fas fa-edit me-2"></i>Edit Active Client
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="editFormContainer">
                    <!-- Edit form will be loaded here -->
                </div>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>
<script>
let activeClientsDataTable = null;
// Cascading dropdown functionality
document.addEventListener('DOMContentLoaded', function() {
    const ispSelect = document.getElementById('search_isp');
    const branchSelect = document.getElementById('search_branch');
    const mikrotikSelect = document.getElementById('search_mikrotik');

    // ISP change handler
    if (ispSelect) {
        ispSelect.addEventListener('change', function() {
            const ispId = this.value;
            console.log('ISP selected:', ispId);
            
            // Clear branch and mikrotik selections
            branchSelect.innerHTML = '<option value="">-- Select Branch --</option>';
            mikrotikSelect.innerHTML = '<option value="">-- Select Server --</option>';
            
            if (ispId) {
                console.log('Fetching branches for ISP:', ispId);
                // Fetch branches for selected ISP
                fetch(`/api/branches/by-isp/${ispId}`)
                    .then(response => {
                        console.log('Response status:', response.status);
                        return response.json();
                    })
                    .then(data => {
                        console.log('Branches data:', data);
                        if (Array.isArray(data)) {
                            data.forEach(branch => {
                                const option = document.createElement('option');
                                option.value = branch.id;
                                option.textContent = branch.name;
                                branchSelect.appendChild(option);
                            });
                        } else {
                            console.error('Invalid data format:', data);
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching branches:', error);
                    });
                
                // Update metrics for selected ISP
                updateMetrics(ispId);
            } else {
                console.log('Fetching all branches');
                // Show all branches
                fetch('/api/branches/all')
                    .then(response => {
                        console.log('All branches response status:', response.status);
                        return response.json();
                    })
                    .then(data => {
                        console.log('All branches data:', data);
                        if (Array.isArray(data)) {
                            data.forEach(branch => {
                                const option = document.createElement('option');
                                option.value = branch.id;
                                option.textContent = branch.name;
                                branchSelect.appendChild(option);
                            });
                        } else {
                            console.error('Invalid all branches data format:', data);
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching all branches:', error);
                    });
                
                // Update metrics for all ISPs
                updateMetrics(null);
            }
        });
    }

    // Branch change handler
    if (branchSelect) {
        branchSelect.addEventListener('change', function() {
            const branchId = this.value;
            
            // Clear mikrotik selection
            mikrotikSelect.innerHTML = '<option value="">-- Select Server --</option>';
            
            if (branchId) {
                // Fetch mikrotik servers for selected branch
                fetch(`/api/mikrotik-servers/by-branch/${branchId}`)
                    .then(response => response.json())
                    .then(data => {
                        data.forEach(server => {
                            const option = document.createElement('option');
                            option.value = server.id;
                            option.textContent = server.name;
                            mikrotikSelect.appendChild(option);
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching mikrotik servers:', error);
                    });
            } else {
                // Show all mikrotik servers
                fetch('/api/mikrotik-servers/all')
                    .then(response => response.json())
                    .then(data => {
                        data.forEach(server => {
                            const option = document.createElement('option');
                            option.value = server.id;
                            option.textContent = server.name;
                            mikrotikSelect.appendChild(option);
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching mikrotik servers:', error);
                    });
            }
        });
    }

    const tableElement = document.getElementById('activeClientsTable');
    if (tableElement && typeof $ !== 'undefined' && $.fn.dataTable) {
        activeClientsDataTable = $('#activeClientsTable').DataTable({
            dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
            pageLength: 100,
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
            language: {
                lengthMenu: 'SHOW _MENU_ ENTRIES'
            },
            drawCallback: function() {
                // Ensure pagination stays in one line and right-aligned
                var info = this.api().page.info();
                var wrapper = $(this.api().table().container()).closest('.dataTables_wrapper');
                
                // Right-align pagination buttons
                wrapper.find('.dataTables_paginate').css({
                    'text-align': 'right',
                    'float': 'none',
                    'margin-left': 'auto',
                    'display': 'inline-block'
                });
                
                wrapper.find('.dataTables_paginate .pagination').css({
                    'justify-content': 'flex-end',
                    'float': 'none',
                    'margin': '0'
                });
                
                // Left-align info
                wrapper.find('.dataTables_info').css({
                    'text-align': 'left',
                    'float': 'none',
                    'display': 'inline-block'
                });
                
                // Ensure the row uses flexbox
                wrapper.find('.row:last-child').css({
                    'display': 'flex',
                    'justify-content': 'space-between',
                    'align-items': 'center'
                });
            }
        });
        window.activeClientsDataTable = activeClientsDataTable;

        $('#activeClientsTable').on('draw.dt', function() {
            if (typeof updateBulkActions === 'function') {
                updateBulkActions();
            }
        });
    }

    if (typeof $ !== 'undefined') {
        $(document).on('change', '.row-checkbox', function() {
            if (typeof updateBulkActions === 'function') {
                updateBulkActions();
            }
        });
    }

    if (typeof updateBulkActions === 'function') {
        updateBulkActions();
    }

    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        const triggerSearch = (immediate = false) => {
            const executeSearch = () => searchClients();
            if (immediate) {
                executeSearch();
            } else {
                clearTimeout(window.searchTimeout);
                window.searchTimeout = setTimeout(executeSearch, 200);
            }
        };

        searchInput.addEventListener('input', () => triggerSearch());

        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                triggerSearch(true);
            }
        });
    }
});

// Function to update metrics based on ISP selection
function updateMetrics(ispId) {
    const url = ispId ? `/api/metrics/by-isp/${ispId}` : '/api/metrics/all';
    
    fetch(url, {
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        credentials: 'same-origin'
    })
        .then(response => response.json())
        .then(data => {
            // Update metric cards
            document.querySelector('.metric-value.total-clients').textContent = data.totalClients || 0;
            document.querySelector('.metric-value.active-clients').textContent = data.activeClients || 0;
            document.querySelector('.metric-value.suspended-clients').textContent = data.suspendedClients || 0;
            document.querySelector('.metric-value.assigned-servers').textContent = data.assignedServers || 0;
        })
        .catch(error => {
            console.error('Error updating metrics:', error);
        });
}

// Bill Generation Function
function generateBills() {
    const checkboxes = document.querySelectorAll('.row-checkbox:checked');
    
    if (checkboxes.length === 0) {
        alert('Please select at least one client to generate bills.');
        return;
    }
    
    const clientIds = Array.from(checkboxes).map(checkbox => checkbox.value);
    
    if (confirm(`Are you sure you want to generate bills for ${clientIds.length} selected clients?`)) {
        // Show loading state
        const billGenerateBtn = document.getElementById('billGenerateBtn');
        const originalText = billGenerateBtn.innerHTML;
        billGenerateBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Generating...';
        billGenerateBtn.disabled = true;
        
        // Send AJAX request
        fetch('{{ route("active-clients.generate-bills") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                client_ids: clientIds
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(`Successfully generated ${data.bills_generated} bills!`);
                // Refresh the page to show updated data
                window.location.reload();
            } else {
                alert('Error generating bills: ' + (data.message || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error generating bills. Please try again.');
        })
        .finally(() => {
            // Restore button state
            billGenerateBtn.innerHTML = originalText;
            billGenerateBtn.disabled = false;
        });
    }
}

// Edit functionality now uses direct links to active-clients edit page

// CRUD Enhancement Functions
function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.row-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });
}



function exportActiveClients() {
    window.open('/active-clients/export', '_blank');
}

function refreshTable() {
    location.reload();
}

function searchClients() {
    const searchInput = document.getElementById('searchInput');
    if (!searchInput) {
        return;
    }

    const searchTerm = searchInput.value;

    if (window.activeClientsDataTable) {
        window.activeClientsDataTable.search(searchTerm).draw();
        return;
    }

    const normalizedTerm = searchTerm.trim().toLowerCase();
    
    const rows = document.querySelectorAll('#activeClientsTable tbody tr');
    rows.forEach(row => {
        if (!normalizedTerm) {
            row.style.display = '';
            return;
        }

        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(normalizedTerm) ? '' : 'none';
    });
}

// Enable/Disable User Functions
function enableUser(clientInfoId) {
    if (confirm('Are you sure you want to enable this user in MikroTik?')) {
        fetch(`/active-clients/${clientInfoId}/enable`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('success', data.message);
                // Reload the page to update the button state
                setTimeout(() => {
                    location.reload();
                }, 1000);
            } else {
                showToast('error', data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('error', 'An error occurred while enabling the user');
        });
    }
}

function disableUser(clientInfoId) {
    if (confirm('Are you sure you want to disable this user in MikroTik? This will disconnect them from live online.')) {
        fetch(`/active-clients/${clientInfoId}/disable`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('success', data.message);
                // Reload the page to update the button state
                setTimeout(() => {
                    location.reload();
                }, 1000);
            } else {
                showToast('error', data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('error', 'An error occurred while disabling the user');
        });
    }
}

// Toast notification function
function showToast(type, message) {
    // Create toast element
    const toast = document.createElement('div');
    toast.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show position-fixed`;
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    toast.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(toast);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        if (toast.parentNode) {
            toast.parentNode.removeChild(toast);
        }
    }, 5000);
}

// Show Logs Modal
function showLogs() {
    // Create modal HTML
    const modalHtml = `
        <div class="modal fade" id="logsModal" tabindex="-1" aria-labelledby="logsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="logsModalLabel">
                            <i class="fas fa-history me-2"></i>Client Enable/Disable Logs
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- Filters -->
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <select class="form-select" id="logActionFilter">
                                    <option value="">All Actions</option>
                                    <option value="enable">Enable</option>
                                    <option value="disable">Disable</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select class="form-select" id="logStatusFilter">
                                    <option value="">All Status</option>
                                    <option value="success">Success</option>
                                    <option value="failed">Failed</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <input type="date" class="form-control" id="logDateFrom" placeholder="From Date">
                            </div>
                            <div class="col-md-3">
                                <input type="date" class="form-control" id="logDateTo" placeholder="To Date">
                            </div>
                        </div>
                        
                        <!-- Logs Table -->
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Client</th>
                                        <th>Action</th>
                                        <th>Status</th>
                                        <th>Performed By</th>
                                        <th>Date/Time</th>
                                        <th>Message</th>
                                        <th>IP Address</th>
                                    </tr>
                                </thead>
                                <tbody id="logsTableBody">
                                    <tr>
                                        <td colspan="7" class="text-center">
                                            <div class="spinner-border text-primary" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination -->
                        <nav aria-label="Logs pagination">
                            <ul class="pagination justify-content-center" id="logsPagination">
                            </ul>
                        </nav>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" onclick="refreshLogs()">
                            <i class="fas fa-sync me-1"></i>Refresh
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if any
    const existingModal = document.getElementById('logsModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('logsModal'));
    modal.show();
    
    // Load logs
    loadLogs();
    
    // Add event listeners for filters
    document.getElementById('logActionFilter').addEventListener('change', loadLogs);
    document.getElementById('logStatusFilter').addEventListener('change', loadLogs);
    document.getElementById('logDateFrom').addEventListener('change', loadLogs);
    document.getElementById('logDateTo').addEventListener('change', loadLogs);
}


// Auto-generate CLIENT LOGIN ID function
function generateClientLoginId(ispName) {
    if (!ispName || ispName === 'N/A') {
        return 'MK0001'; // Default fallback
    }
    
    // Get first two characters of ISP name (uppercase)
    const prefix = ispName.substring(0, 2).toUpperCase();
    
    // Generate a random 4-digit number
    const randomNumber = Math.floor(Math.random() * 9000) + 1000; // 1000-9999
    
    return prefix + randomNumber;
}

// Client Registration Functions
function openClientRegistration(clientId, customerName, mobileNumber, emailAddress, branch, clientLoginId) {
    console.log('Opening client registration modal for:', clientId, customerName, mobileNumber, emailAddress, branch, clientLoginId);
    
    try {
        // Populate form fields
        const customerNameField = document.getElementById('customer_name');
        const mobileNumberField = document.getElementById('mobile_number');
        const emailAddressField = document.getElementById('email_address');
        const branchField = document.getElementById('branch');
        const clientLoginIdField = document.getElementById('client_login_id');
        const form = document.getElementById('clientRegistrationForm');
        
        if (customerNameField) customerNameField.value = customerName || '';
        if (mobileNumberField) mobileNumberField.value = mobileNumber || '';
        if (emailAddressField) emailAddressField.value = emailAddress || '';
        if (branchField) branchField.value = branch || '';
        
        // Set form action
        if (form) form.action = `/active-clients/${clientId}/register`;
        
        // Auto-generate CLIENT LOGIN ID if not provided or is N/A
        if (!clientLoginId || clientLoginId === 'N/A' || clientLoginId === '') {
            // Fetch next sequential client login ID from API
            const branchName = branch || 'MO';
            fetch(`/api/next-client-login-id?branch=${encodeURIComponent(branchName)}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success && data.client_login_id) {
                    if (clientLoginIdField) {
                        clientLoginIdField.value = data.client_login_id;
                        console.log('Fetched CLIENT LOGIN ID from API:', data.client_login_id);
                    }
                } else {
                    // Fallback to local generation
                    const generatedLoginId = generateClientLoginId(branchName);
                    if (clientLoginIdField) clientLoginIdField.value = generatedLoginId;
                    console.log('Auto-generated CLIENT LOGIN ID:', generatedLoginId);
                }
            })
            .catch(error => {
                console.error('Error fetching client login ID:', error);
                // Fallback to local generation
                const generatedLoginId = generateClientLoginId(branchName);
                if (clientLoginIdField) clientLoginIdField.value = generatedLoginId;
                console.log('Fallback: Auto-generated CLIENT LOGIN ID:', generatedLoginId);
            });
        } else {
            if (clientLoginIdField) clientLoginIdField.value = clientLoginId;
        }
        
        // Show modal
        const modalElement = document.getElementById('clientRegistrationModal');
        if (modalElement) {
            const modal = new bootstrap.Modal(modalElement);
            modal.show();
            console.log('Modal opened successfully');
        } else {
            console.error('Modal element not found');
        }
    } catch (error) {
        console.error('Error opening modal:', error);
        alert('Error opening registration modal: ' + error.message);
    }
}

// Regenerate CLIENT LOGIN ID function
function regenerateClientLoginId() {
    const branchField = document.getElementById('branch');
    const clientLoginIdField = document.getElementById('client_login_id');
    
    if (branchField && clientLoginIdField) {
        const branchName = branchField.value || 'MO';
        
        // Fetch next sequential client login ID from API
        fetch(`/api/next-client-login-id?branch=${encodeURIComponent(branchName)}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.client_login_id) {
                clientLoginIdField.value = data.client_login_id;
                console.log('Regenerated CLIENT LOGIN ID from API:', data.client_login_id);
                showToast('success', 'New CLIENT LOGIN ID generated: ' + data.client_login_id);
            } else {
                // Fallback to local generation
                const newLoginId = generateClientLoginId(branchName);
                clientLoginIdField.value = newLoginId;
                console.log('Fallback: Regenerated CLIENT LOGIN ID:', newLoginId);
                showToast('success', 'New CLIENT LOGIN ID generated: ' + newLoginId);
            }
        })
        .catch(error => {
            console.error('Error fetching client login ID:', error);
            // Fallback to local generation
            const newLoginId = generateClientLoginId(branchName);
            clientLoginIdField.value = newLoginId;
            console.log('Fallback: Regenerated CLIENT LOGIN ID:', newLoginId);
            showToast('success', 'New CLIENT LOGIN ID generated: ' + newLoginId);
        });
    }
}

function editField(fieldName) {
    const field = document.getElementById(fieldName);
    field.readOnly = false;
    field.style.backgroundColor = 'white';
    field.focus();
}

// Form submission
document.getElementById('clientRegistrationForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    
    if (password !== confirmPassword) {
        alert('Passwords do not match!');
        return;
    }
    
    if (password.length < 6) {
        alert('Password must be at least 6 characters long!');
        return;
    }
    
    // Submit form
    this.submit();
});

// Load Logs Function
function loadLogs(page = 1) {
    const actionFilter = document.getElementById('logActionFilter').value;
    const statusFilter = document.getElementById('logStatusFilter').value;
    const dateFrom = document.getElementById('logDateFrom').value;
    const dateTo = document.getElementById('logDateTo').value;
    
    const params = new URLSearchParams({
        page: page,
        ...(actionFilter && { action: actionFilter }),
        ...(statusFilter && { status: statusFilter }),
        ...(dateFrom && { date_from: dateFrom }),
        ...(dateTo && { date_to: dateTo })
    });
    
    fetch(`/active-clients/logs?${params}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                displayLogs(data.logs);
            } else {
                showToast('error', data.message || 'Failed to load logs');
            }
        })
        .catch(error => {
            console.error('Error loading logs:', error);
            showToast('error', 'Error loading logs: ' + error.message);
        });
}

// Display Logs Function
function displayLogs(logs) {
    const tbody = document.getElementById('logsTableBody');
    const pagination = document.getElementById('logsPagination');
    
    if (logs.data.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">No logs found</td></tr>';
        pagination.innerHTML = '';
        return;
    }
    
    // Display logs
    tbody.innerHTML = logs.data.map(log => `
        <tr>
            <td>
                <strong>${log.client_info ? log.client_info.full_name : 'N/A'}</strong><br>
                <small class="text-muted">${log.client ? log.client.username : 'N/A'}</small>
            </td>
            <td>
                <span class="badge ${log.action === 'enable' ? 'bg-success' : 'bg-danger'}">
                    <i class="fas fa-${log.action === 'enable' ? 'user-check' : 'user-times'} me-1"></i>
                    ${log.action.charAt(0).toUpperCase() + log.action.slice(1)}
                </span>
            </td>
            <td>
                <span class="badge ${log.status === 'success' ? 'bg-success' : 'bg-danger'}">
                    <i class="fas fa-${log.status === 'success' ? 'check' : 'times'} me-1"></i>
                    ${log.status.charAt(0).toUpperCase() + log.status.slice(1)}
                </span>
            </td>
            <td>
                ${log.performer ? log.performer.name : 'System'}
            </td>
            <td>
                <small>${new Date(log.performed_at).toLocaleString()}</small>
            </td>
            <td>
                <small>${log.message || 'N/A'}</small>
            </td>
            <td>
                <small class="text-muted">${log.ip_address || 'N/A'}</small>
            </td>
        </tr>
    `).join('');
    
    // Display pagination
    if (logs.last_page > 1) {
        let paginationHtml = '';
        
        // Previous button
        if (logs.current_page > 1) {
            paginationHtml += `<li class="page-item"><a class="page-link" href="#" onclick="loadLogs(${logs.current_page - 1})">Previous</a></li>`;
        }
        
        // Page numbers
        for (let i = 1; i <= logs.last_page; i++) {
            if (i === logs.current_page) {
                paginationHtml += `<li class="page-item active"><span class="page-link">${i}</span></li>`;
            } else {
                paginationHtml += `<li class="page-item"><a class="page-link" href="#" onclick="loadLogs(${i})">${i}</a></li>`;
            }
        }
        
        // Next button
        if (logs.current_page < logs.last_page) {
            paginationHtml += `<li class="page-item"><a class="page-link" href="#" onclick="loadLogs(${logs.current_page + 1})">Next</a></li>`;
        }
        
        pagination.innerHTML = paginationHtml;
    } else {
        pagination.innerHTML = '';
    }
}

// Refresh Logs Function
function refreshLogs() {
    loadLogs();
}

// Delete Client Function
function deleteClient(clientInfoId, clientName) {
    if (confirm(`Are you sure you want to delete "${clientName}"?\n\nThis will:\n- Delete the client from the database\n- Delete the user from MikroTik server\n- Remove all associated data\n\nThis action cannot be undone!`)) {
        // Show loading state
        const deleteButton = event.target.closest('button');
        const originalContent = deleteButton.innerHTML;
        deleteButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        deleteButton.disabled = true;
        
        fetch(`/active-clients/${clientInfoId}/delete`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('success', data.message);
                
                // Show detailed results if available
                if (data.details) {
                    let detailsMessage = '';
                    if (data.details.deleted_from_database) {
                        detailsMessage += '✓ Deleted from database\n';
                    }
                    if (data.details.deleted_from_mikrotik) {
                        detailsMessage += '✓ Deleted from MikroTik server\n';
                    } else {
                        detailsMessage += `⚠ MikroTik: ${data.details.mikrotik_message}\n`;
                    }
                    
                    if (detailsMessage) {
                        setTimeout(() => {
                            showToast('info', detailsMessage.trim());
                        }, 1000);
                    }
                }
                
                // Reload the page to update the table
                setTimeout(() => {
                    location.reload();
                }, 2000);
            } else {
                showToast('error', data.message);
                // Restore button state
                deleteButton.innerHTML = originalContent;
                deleteButton.disabled = false;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('error', 'An error occurred while deleting the client');
            // Restore button state
            deleteButton.innerHTML = originalContent;
            deleteButton.disabled = false;
        });
    }
}
</script>

<!-- Client Registration Modal -->
<div class="modal fade" id="clientRegistrationModal" tabindex="-1" aria-labelledby="clientRegistrationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white;">
                <h5 class="modal-title" id="clientRegistrationModalLabel">
                    <i class="fas fa-user me-2"></i>+Client Registration
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="clientRegistrationForm" method="POST">
                @csrf
                <div class="modal-body" style="padding: 2rem;">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="customer_name" class="form-label fw-bold">CUSTOMER NAME:</label>
                            <input type="text" class="form-control" id="customer_name" name="customer_name" readonly style="background-color: #f8f9fa;">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="branch" class="form-label fw-bold">BRANCH:</label>
                            <input type="text" class="form-control" id="branch" name="branch" readonly style="background-color: #f8f9fa;">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="mobile_number" class="form-label fw-bold">MOBILE NUMBER: <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="mobile_number" name="mobile_number" readonly style="background-color: #f8f9fa;">
                                <button type="button" class="btn btn-success" onclick="editField('mobile_number')">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="email_address" class="form-label fw-bold">EMAIL ADDRESS:</label>
                            <div class="input-group">
                                <input type="email" class="form-control" id="email_address" name="email_address" readonly style="background-color: #f8f9fa;">
                                <button type="button" class="btn btn-success" onclick="editField('email_address')">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label for="client_login_id" class="form-label fw-bold">CLIENT LOGIN ID: <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="client_login_id" name="client_login_id" readonly style="background-color: #f8f9fa;">
                                <button type="button" class="btn btn-warning" onclick="regenerateClientLoginId()" title="Generate New ID">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                                <button type="button" class="btn btn-success" onclick="editField('client_login_id')" title="Edit ID">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="password" class="form-label fw-bold">PASSWORD: <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" id="password" name="password" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="confirm_password" class="form-label fw-bold">CONFIRM PASSWORD: <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="padding: 1rem 2rem;">
                    <button type="button" class="btn btn-danger" id="cancelClientRegistrationBtn" onclick="closeClientRegistrationModal()">
                        <i class="fas fa-times me-1"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-check me-1"></i>Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Function to close client registration modal
function closeClientRegistrationModal() {
    const modalElement = document.getElementById('clientRegistrationModal');
    if (modalElement) {
        // Try to get existing Bootstrap modal instance
        let bsModal = bootstrap.Modal.getInstance(modalElement);
        
        if (bsModal) {
            // Hide using Bootstrap instance
            bsModal.hide();
        } else {
            // Fallback: manually hide modal
            modalElement.classList.remove('show');
            modalElement.style.display = 'none';
            modalElement.setAttribute('aria-hidden', 'true');
            modalElement.removeAttribute('aria-modal');
            
            // Remove backdrop
            const backdrop = document.querySelector('.modal-backdrop');
            if (backdrop) {
                backdrop.remove();
            }
            
            // Remove modal-open class from body
            document.body.classList.remove('modal-open');
            document.body.style.overflow = '';
            document.body.style.paddingRight = '';
        }
        
        // Trigger hidden event manually if needed
        const hiddenEvent = new Event('hidden.bs.modal');
        modalElement.dispatchEvent(hiddenEvent);
    }
}

// Clear password fields when modal is closed
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('clientRegistrationModal');
    
    if (modal) {
        modal.addEventListener('hidden.bs.modal', function() {
            // Clear password fields
            const passwordField = document.getElementById('password');
            const confirmPasswordField = document.getElementById('confirm_password');
            if (passwordField) passwordField.value = '';
            if (confirmPasswordField) confirmPasswordField.value = '';
            
            // Reset readonly state for editable fields
            const mobileNumberField = document.getElementById('mobile_number');
            const emailAddressField = document.getElementById('email_address');
            const clientLoginIdField = document.getElementById('client_login_id');
            
            if (mobileNumberField) {
                mobileNumberField.readOnly = true;
                mobileNumberField.style.backgroundColor = '#f8f9fa';
            }
            if (emailAddressField) {
                emailAddressField.readOnly = true;
                emailAddressField.style.backgroundColor = '#f8f9fa';
            }
            if (clientLoginIdField) {
                clientLoginIdField.readOnly = true;
                clientLoginIdField.style.backgroundColor = '#f8f9fa';
            }
            
            // Reset form
            const form = document.getElementById('clientRegistrationForm');
            if (form) {
                form.reset();
            }
        });
    }
});
</script>

@endsection