@extends('layouts.app')

@section('title', 'Bills Management - ISP ERP System')

@section('page-title', 'Bills Management')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <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-file-invoice-dollar me-2"></i>
                                @if(auth()->user()->role === 'mac_reseller')
                                    MAC Reseller Bills
                                @else
                                    Bills Management
                                @endif
                            </h3>
                            <p class="mb-0 opacity-75">
                                @if(auth()->user()->role === 'mac_reseller')
                                    View and manage bills for your MAC reseller clients
                                @else
                                    Manage client bills and payments
                                @endif
                            </p>
                        </div>
                        <div class="d-flex" style="gap: 0.5rem;">
                            @if(auth()->user()->role !== 'collector')
                                <a href="{{ route('bills.create') }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-plus me-1"></i>Generate Bill
                                </a>
                                <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#bulkGenerateModal">
                                    <i class="fas fa-bolt me-1"></i>Bulk Generate
                                </button>
                            @endif
                            <button type="button" class="btn btn-info btn-sm" onclick="refreshTable()">
                                <i class="fas fa-sync me-1"></i>Refresh
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0">{{ $totalBills }}</h4>
                            <p class="mb-0">Total Bills</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-file-invoice fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0">{{ $pendingBills }}</h4>
                            <p class="mb-0">Pending Bills</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-clock fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0">{{ $paidBills }}</h4>
                            <p class="mb-0">Paid Bills</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-check-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0">{{ $overdueBills }}</h4>
                            <p class="mb-0">Overdue Bills</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-exclamation-triangle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bills Table -->
    <div class="row">
        <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 Bills
                            </h5>
                            @if(\App\Helpers\PermissionHelper::isSuperUser(auth()->id()))
                                <small class="text-white">
                                    <i class="fas fa-crown me-1"></i>Showing all bills (Super User)
                                </small>
                            @elseif(auth()->user()->role === 'mac_reseller')
                                <small class="text-white">
                                    <i class="fas fa-user-tie me-1"></i>Showing bills for your MAC reseller clients only
                                </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 bills 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 bills from your branch only (Sub Branch User)
                                    </small>
                                @endif
                            @endif
                        </div>
                        <div class="d-flex align-items-center gap-3">
                            <form method="GET" action="{{ route('bills.index') }}" id="searchForm" style="display: flex; gap: 0.5rem; align-items: center;">
                                <div class="input-group input-group-sm" style="max-width: 250px;">
                                    <input type="text" 
                                           class="form-control form-control-sm" 
                                           id="searchInput" 
                                           name="search" 
                                           value="{{ request('search') }}" 
                                           placeholder="Search bills..."
                                           style="font-size: 0.875rem;">
                                    <span class="input-group-text" style="font-size: 0.875rem; padding: 0.25rem 0.5rem;">
                                        <i class="fas fa-search text-muted"></i>
                                    </span>
                                </div>
                                @if(request('search'))
                                    <a href="{{ route('bills.index', ['per_page' => request('per_page', 100)]) }}" class="btn btn-sm btn-outline-secondary" title="Clear search" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">
                                        <i class="fas fa-times"></i>
                                    </a>
                                @endif
                                <input type="hidden" name="per_page" value="{{ request('per_page', 100) }}" id="hiddenPerPage">
                            </form>
                            <form method="GET" action="{{ route('bills.index') }}" id="perPageForm" style="display: flex; gap: 0.5rem; align-items: center; padding-left: 1rem;">
                                @if(request('search'))
                                    <input type="hidden" name="search" value="{{ request('search') }}">
                                @endif
                                <div class="d-flex align-items-center gap-2" style="padding: 0.5rem;">
                                    <label for="perPageSelect" class="mb-0 text-white small" style="padding-right: 0.25rem;">Show</label>
                                    <select id="perPageSelect" name="per_page" class="form-select form-select-sm" style="width: auto; padding: 0.25rem 0.5rem;" onchange="this.form.submit()">
                                        <option value="20" {{ request('per_page', 100) == 20 ? 'selected' : '' }}>20</option>
                                        <option value="50" {{ request('per_page', 100) == 50 ? 'selected' : '' }}>50</option>
                                        <option value="100" {{ request('per_page', 100) == 100 || request('per_page') == null ? 'selected' : '' }}>100</option>
                                        <option value="200" {{ request('per_page', 100) == 200 ? 'selected' : '' }}>200</option>
                                        <option value="500" {{ request('per_page', 100) == 500 ? 'selected' : '' }}>500</option>
                                        <option value="800" {{ request('per_page', 100) == 800 ? 'selected' : '' }}>800</option>
                                        <option value="999" {{ request('per_page', 100) == 999 ? 'selected' : '' }}>999</option>
                                        <option value="all" {{ request('per_page') == 'all' || request('per_page') == 'All' || request('per_page') == 999999 ? 'selected' : '' }}>All</option>
                                    </select>
                                    <label for="perPageSelect" class="mb-0 text-white small" style="padding-left: 0.25rem;">entries</label>
                                </div>
                            </form>
                        </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

                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Login ID</th>
                                    <th>Username</th>
                                    <th>Client Name</th>
                                    <th>Mobile</th>
                                    <th>Bill for Month</th>
                                    <th>Package</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Payment Date</th>
                                    <th>Due Date</th>
                                    <th>Expire Date</th>
                                    <th style="text-align: center;">Created By</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($bills as $bill)
                                    <tr>
                                        <td>
                                            @if($bill->clientInfo && $bill->clientInfo->client_login_id)
                                                <div style="position: relative; display: inline-flex; align-items: flex-start;">
                                                    <code class="text-primary" style="display: inline-block;">{{ $bill->clientInfo->client_login_id }}</code>
                                                    <span style="display: inline-block; color: #28a745; font-size: 0.85em; font-weight: 900; margin-left: 3px; vertical-align: super; margin-top: -4px; font-family: Arial, sans-serif;" title="Registered">®</span>
                                                </div>
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($bill->client && $bill->client->username)
                                                <code class="text-info">{{ $bill->client->username }}</code>
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="fw-bold">{{ $bill->clientInfo->full_name ?? 'N/A' }}</div>
                                        </td>
                                        <td>
                                            @if($bill->clientInfo && $bill->clientInfo->mobile_number)
                                                <a href="tel:{{ $bill->clientInfo->mobile_number }}" class="text-primary">
                                                    <i class="fas fa-phone me-1"></i>{{ $bill->clientInfo->mobile_number }}
                                                </a>
                                            @elseif($bill->client && $bill->client->phone)
                                                <a href="tel:{{ $bill->client->phone }}" class="text-primary">
                                                    <i class="fas fa-phone me-1"></i>{{ $bill->client->phone }}
                                                </a>
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge bg-info">{{ \Carbon\Carbon::createFromFormat('Y-m', $bill->month_year)->format('M, Y') }}</span>
                                        </td>
                                        <td>
                                            @if($bill->client && $bill->client->package_name)
                                                <span class="badge bg-primary">{{ $bill->client->package_name }}</span>
                                            @elseif($bill->clientInfo && $bill->clientInfo->package)
                                                <span class="badge bg-primary">{{ $bill->clientInfo->package }}</span>
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column">
                                                <strong class="text-success">৳{{ number_format($bill->total_amount, 2) }}</strong>
                                                @if($bill->discount > 0)
                                                    <small class="text-muted">Discount: ৳{{ number_format($bill->discount, 2) }}</small>
                                                @endif
                                                @if($bill->late_fee > 0)
                                                    <small class="text-danger">Late Fee: ৳{{ number_format($bill->late_fee, 2) }}</small>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            @if($bill->status === 'pending')
                                                <span class="badge bg-warning">Pending</span>
                                            @elseif($bill->status === 'paid')
                                                <span class="badge bg-success">Paid</span>
                                            @elseif($bill->status === 'overdue')
                                                <span class="badge bg-danger">Overdue</span>
                                            @elseif($bill->status === 'cancelled')
                                                <span class="badge bg-secondary">Cancelled</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($bill->paid_date)
                                                <span class="badge bg-success">{{ \Carbon\Carbon::parse($bill->paid_date)->format('M d, Y') }}</span>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            <small class="text-muted">
                                                {{ $bill->due_date->format('M d, Y') }}
                                            </small>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @if($bill->expire_date)
                                                    <small class="text-muted me-2">
                                                        {{ $bill->expire_date->format('M d, Y') }}
                                                    </small>
                                                @else
                                                    <span class="text-muted me-2">-</span>
                                                @endif
                                                <button type="button" class="btn btn-sm btn-link p-0" onclick="openExpireDateModal({{ $bill->id }}, '{{ $bill->expire_date ? $bill->expire_date->format('Y-m-d') : '' }}', '{{ $bill->clientInfo->client_login_id ?? 'N/A' }}', '{{ $bill->client->username ?? 'N/A' }}')" title="Edit Expire Date">
                                                    <i class="fas fa-edit text-primary"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td style="text-align: center;">
                                            @if($bill->creator)
                                                <i class="fas fa-user-circle text-primary" 
                                                   style="font-size: 18px; cursor: pointer;" 
                                                   data-toggle="tooltip" 
                                                   data-placement="top" 
                                                   title="{{ $bill->creator->name }}"></i>
                                            @else
                                                <i class="fas fa-server text-secondary" 
                                                   style="font-size: 18px; cursor: pointer;" 
                                                   data-toggle="tooltip" 
                                                   data-placement="top" 
                                                   title="System"></i>
                                            @endif
                                        </td>
                                        <td class="action-column">
                                            <div class="action-container">
                                                <button type="button" class="action-dots-btn" 
                                                        onclick="toggleActionIcons({{ $bill->id }})" 
                                                        title="Actions">
                                                    <i class="fas fa-ellipsis-v"></i>
                                                </button>
                                                <div class="action-icons-wrapper" id="actionIcons{{ $bill->id }}">
                                                    <a href="{{ route('bills.show', $bill) }}" 
                                                       class="action-icon-btn action-icon-teal" title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('bills.edit', $bill) }}" 
                                                       class="action-icon-btn action-icon-yellow" title="Edit Bill">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    @if($bill->clientInfo && !$bill->clientInfo->registration_form_no)
                                                        <button type="button" class="action-icon-btn action-icon-blue" 
                                                                onclick="openClientRegistration(
                                                                    {{ $bill->clientInfo->id }},
                                                                    '{{ $bill->clientInfo->full_name ?? 'N/A' }}',
                                                                    '{{ $bill->clientInfo->mobile_number ?? '' }}',
                                                                    '{{ $bill->clientInfo->email_address ?? '' }}',
                                                                    '{{ $bill->clientInfo->branch->name ?? '' }}',
                                                                    '{{ $bill->clientInfo->client_login_id ?? '' }}'
                                                                )" 
                                                                title="Client Registration">
                                                            <i class="fas fa-user-plus"></i>
                                                        </button>
                                                    @endif
                                                    @if($bill->status === 'pending')
                                                        <button type="button" class="action-icon-btn action-icon-green" 
                                                                onclick="markAsPaid({{ $bill->id }})" title="Mark as Paid">
                                                            <i class="fas fa-check"></i>
                                                        </button>
                                                    @endif
                                                    <form action="{{ route('bills.destroy', $bill) }}" method="POST" 
                                                          style="display: inline-block;" 
                                                          onsubmit="return confirm('Are you sure you want to delete this bill?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="action-icon-btn action-icon-red" title="Delete Bill">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-center mt-4">
                        {{ $bills->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if(auth()->user()->role !== 'collector')
<!-- Bulk Generate Modal -->
<div class="modal fade" id="bulkGenerateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-bolt me-2"></i>Bulk Generate Bills
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('bills.generate-bulk') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="month_year" class="form-label">Month/Year</label>
                        <input type="month" class="form-control" id="month_year" name="month_year" required>
                    </div>
                    <div class="mb-3">
                        <label for="due_date" class="form-label">Due Date</label>
                        <input type="date" class="form-control" id="due_date" name="due_date" required>
                    </div>
                    <div class="mb-3">
                        <label for="default_amount" class="form-label">Default Amount (৳)</label>
                        <input type="number" class="form-control" id="default_amount" name="default_amount" 
                               step="0.01" min="0" required>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        This will generate bills for all active clients. If a client has a package price, it will be used; otherwise, the default amount will be applied.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-bolt me-2"></i>Generate Bills
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

<!-- Expire Date Modal -->
<div class="modal fade" id="expireDateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <h5 class="modal-title">
                    <i class="fas fa-calendar-alt me-2"></i>Expiry Date & Billing Remarks Info
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" style="background-color: transparent; border: none; font-size: 1.5rem; color: white; opacity: 1;">&times;</button>
            </div>
            <form id="expireDateForm" method="POST">
                @csrf
                <div class="modal-body" style="padding: 2rem;">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="modal_client_code" class="form-label fw-bold">CLIENT CODE:</label>
                            <input type="text" class="form-control" id="modal_client_code" readonly style="background-color: #f8f9fa;">
                        </div>
                        <div class="col-md-6">
                            <label for="modal_user_id" class="form-label fw-bold">USER ID/IP:</label>
                            <input type="text" class="form-control" id="modal_user_id" readonly style="background-color: #f8f9fa;">
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-12">
                            <label for="modal_remarks" class="form-label fw-bold">REMARKS/NOTE/COMMENTS:</label>
                            <div class="input-group">
                                <textarea class="form-control" id="modal_remarks" name="remarks" rows="3" readonly style="background-color: #f8f9fa;"></textarea>
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-success" onclick="editRemarksField()" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger" onclick="clearRemarksField()" title="Clear">
                                        <i class="fas fa-times"></i>
                                    </button>
                                    <button type="button" class="btn btn-primary" onclick="saveRemarksField()" title="Save">
                                        <i class="fas fa-save"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="modal_expire_date" class="form-label fw-bold">
                                BILLING EXPIRY DATE:
                                <button type="button" class="btn btn-sm btn-link p-0 ms-1" onclick="clearExpireDate()" title="Clear Date">
                                    <i class="fas fa-times text-danger"></i>
                                </button>
                            </label>
                            <div class="input-group">
                                <input type="date" class="form-control" id="modal_expire_date" name="expire_date" placeholder="DD-MM-YYYY">
                                <span class="input-group-text">
                                    <i class="fas fa-calendar"></i>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">
                                <i class="fas fa-star text-warning me-1"></i>IS VIP CLIENT?
                            </label>
                            <div class="form-check mt-2">
                                <input class="form-check-input" type="checkbox" id="modal_is_vip" name="is_vip" disabled>
                                <label class="form-check-label" for="modal_is_vip">
                                    Click to Set
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="padding: 1rem 2rem;">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
                        <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>

<!-- Mark as Paid Modal -->
<div class="modal fade" id="markPaidModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-check me-2"></i>Mark Bill as Paid
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" onclick="closeMarkPaidModal()"></button>
            </div>
            <form id="markPaidForm" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="payment_method" class="form-label">Payment Method</label>
                        <select class="form-control" id="payment_method" name="payment_method" required>
                            <option value="">Select Payment Method</option>
                            <option value="cash">Cash</option>
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="mobile_banking">Mobile Banking</option>
                            <option value="credit_card">Credit Card</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="amount" class="form-label">Amount</label>
                        <input type="number" class="form-control" id="amount" name="amount" step="0.01" min="0" required>
                    </div>
                    <div class="mb-3">
                        <label for="notes" class="form-label">Notes</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="closeMarkPaidModal()">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-check me-2"></i>Mark as Paid
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 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-plus 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')" title="Edit">
                                    <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')" title="Edit">
                                    <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" data-bs-dismiss="modal">
                        <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 markAsPaid(billId) {
    const form = document.getElementById('markPaidForm');
    form.action = `/bills/${billId}/mark-paid`;
    
    // Reset form fields
    form.reset();
    
    // Get bill amount from the table row
    const billRow = document.querySelector(`button[onclick="markAsPaid(${billId})"]`).closest('tr');
    const amountCell = billRow.querySelector('td:nth-child(6)'); // Amount is in 6th column (after Login ID, Username, Client Name, Mobile, Month/Year, Package)
    const billAmount = amountCell ? amountCell.textContent.trim() : '';
    
    // Set the amount field
    const amountField = document.getElementById('amount');
    if (amountField && billAmount) {
        amountField.value = billAmount.replace(/[^\d.]/g, ''); // Remove non-numeric characters
    }
    
    const modal = new bootstrap.Modal(document.getElementById('markPaidModal'));
    modal.show();
}

// Close modal function
function closeMarkPaidModal() {
    const modal = bootstrap.Modal.getInstance(document.getElementById('markPaidModal'));
    if (modal) {
        modal.hide();
    }
    
    // Reset form
    const form = document.getElementById('markPaidForm');
    form.reset();
    form.action = '';
}

// Reset modal when closed
document.getElementById('markPaidModal').addEventListener('hidden.bs.modal', function () {
    const form = document.getElementById('markPaidForm');
    form.reset();
    form.action = '';
});

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

// Server-side search functionality with debounce
let searchTimeout;
const searchInput = document.getElementById('searchInput');
if (searchInput) {
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.trim();
        const searchForm = document.getElementById('searchForm');
        const perPageSelect = document.getElementById('perPageSelect');
        
        // Sync per_page value to hidden input in search form
        if (perPageSelect && document.getElementById('hiddenPerPage')) {
            document.getElementById('hiddenPerPage').value = perPageSelect.value;
        }
        
        // Clear previous timeout
        clearTimeout(searchTimeout);
        
        // Debounce: wait 500ms after user stops typing before submitting
        searchTimeout = setTimeout(function() {
            if (searchTerm.length === 0 || searchTerm.length >= 2) {
                // Submit form if search is empty or at least 2 characters
                searchForm.submit();
            }
        }, 500);
    });
    
    // Also submit on Enter key
    searchInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            clearTimeout(searchTimeout);
            const perPageSelect = document.getElementById('perPageSelect');
            if (perPageSelect && document.getElementById('hiddenPerPage')) {
                document.getElementById('hiddenPerPage').value = perPageSelect.value;
            }
            document.getElementById('searchForm').submit();
        }
    });
}

// Sync per_page when changed
const perPageSelect = document.getElementById('perPageSelect');
if (perPageSelect) {
    perPageSelect.addEventListener('change', function() {
        // Update hidden input in search form
        const hiddenPerPage = document.getElementById('hiddenPerPage');
        if (hiddenPerPage) {
            hiddenPerPage.value = this.value;
        }
    });
}

// Client Registration Functions
function openClientRegistration(clientInfoId, 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 || '';
        
        // Auto-generate CLIENT LOGIN ID if not provided or is N/A
        let generatedLoginId = clientLoginId;
        if (!clientLoginId || clientLoginId === 'N/A' || clientLoginId === '') {
            // Fetch sequential ID from server
            fetch(`/api/next-client-login-id?branch=${encodeURIComponent(branch || 'MO')}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success && clientLoginIdField) {
                        clientLoginIdField.value = data.client_login_id;
                    } else {
                        // Fallback to default
                        const branchPrefix = (branch || 'MO').substring(0, 2).toUpperCase();
                        clientLoginIdField.value = branchPrefix + '0001';
                    }
                })
                .catch(error => {
                    console.error('Error fetching login ID:', error);
                    // Fallback to default
                    const branchPrefix = (branch || 'MO').substring(0, 2).toUpperCase();
                    if (clientLoginIdField) clientLoginIdField.value = branchPrefix + '0001';
                });
        } else {
            if (clientLoginIdField) clientLoginIdField.value = generatedLoginId;
        }
        
        // Set form action
        if (form) form.action = `/active-clients/${clientInfoId}/register`;
        
        // Reset password fields
        document.getElementById('password').value = '';
        document.getElementById('confirm_password').value = '';
        
        // Show modal
        const modalElement = document.getElementById('clientRegistrationModal');
        if (modalElement) {
            const modal = new bootstrap.Modal(modalElement);
            modal.show();
        }
    } 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 sequential ID from server
        fetch(`/api/next-client-login-id?branch=${encodeURIComponent(branchName)}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    clientLoginIdField.value = data.client_login_id;
                } else {
                    alert('Failed to generate login ID: ' + (data.message || 'Unknown error'));
                }
            })
            .catch(error => {
                console.error('Error fetching login ID:', error);
                alert('Error generating login ID. Please try again.');
            });
    }
}

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

// Form submission handler
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();
});

// Expire Date Modal Functions
function openExpireDateModal(billId, expireDate, clientCode, userId) {
    const form = document.getElementById('expireDateForm');
    form.action = `/bills/${billId}/update-expire-date`;
    
    // Set form values
    document.getElementById('modal_client_code').value = clientCode || 'N/A';
    document.getElementById('modal_user_id').value = userId || 'N/A';
    document.getElementById('modal_expire_date').value = expireDate || '';
    
    // Get bill remarks if available
    const billRow = document.querySelector(`button[onclick*="openExpireDateModal(${billId}"]`).closest('tr');
    // You can add logic here to get remarks from the bill if needed
    
    const modalElement = document.getElementById('expireDateModal');
    if (modalElement) {
        // Try Bootstrap 4 jQuery method first
        if (typeof jQuery !== 'undefined' && jQuery(modalElement).modal) {
            jQuery(modalElement).modal('show');
        } else if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
            // Try Bootstrap 5 method
            try {
                const modal = new bootstrap.Modal(modalElement);
                modal.show();
            } catch (e) {
                // Fallback: manually show modal
                modalElement.classList.add('show');
                modalElement.style.display = 'block';
                document.body.classList.add('modal-open');
                const backdrop = document.createElement('div');
                backdrop.className = 'modal-backdrop fade show';
                document.body.appendChild(backdrop);
            }
        } else {
            // Fallback: manually show modal
            modalElement.classList.add('show');
            modalElement.style.display = 'block';
            document.body.classList.add('modal-open');
            const backdrop = document.createElement('div');
            backdrop.className = 'modal-backdrop fade show';
            document.body.appendChild(backdrop);
        }
    }
}

function editRemarksField() {
    const field = document.getElementById('modal_remarks');
    if (field) {
        field.readOnly = false;
        field.style.backgroundColor = 'white';
        field.focus();
    }
}

function clearRemarksField() {
    document.getElementById('modal_remarks').value = '';
}

function saveRemarksField() {
    const field = document.getElementById('modal_remarks');
    if (field) {
        field.readOnly = true;
        field.style.backgroundColor = '#f8f9fa';
    }
}

function clearExpireDate() {
    document.getElementById('modal_expire_date').value = '';
}

// Handle expire date form submission
document.getElementById('expireDateForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const url = this.action;
    
    // Get CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
                     document.querySelector('input[name="_token"]')?.value;
    
    if (csrfToken) {
        formData.append('_token', csrfToken);
    }
    
    fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken || ''
        }
    })
    .then(response => {
        // Check if response is ok
        if (!response.ok) {
            return response.text().then(text => {
                try {
                    const json = JSON.parse(text);
                    throw new Error(json.message || 'Server error');
                } catch (e) {
                    if (e instanceof Error && e.message !== 'Server error') {
                        throw e;
                    }
                    throw new Error(`Server error: ${response.status} ${response.statusText}`);
                }
            });
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Close modal - Bootstrap 4 compatible
            const modalElement = document.getElementById('expireDateModal');
            if (modalElement) {
                // Try Bootstrap 4 jQuery method first
                if (typeof jQuery !== 'undefined' && jQuery(modalElement).modal) {
                    jQuery(modalElement).modal('hide');
                } else if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                    // Try Bootstrap 5 method
                    try {
                        const modal = bootstrap.Modal.getInstance(modalElement);
                        if (modal) {
                            modal.hide();
                        } else {
                            // Create new instance and hide
                            const newModal = new bootstrap.Modal(modalElement);
                            newModal.hide();
                        }
                    } catch (e) {
                        // Fallback: manually close modal
                        modalElement.classList.remove('show');
                        modalElement.style.display = 'none';
                        document.body.classList.remove('modal-open');
                        const backdrop = document.querySelector('.modal-backdrop');
                        if (backdrop) backdrop.remove();
                    }
                } else {
                    // Fallback: manually close modal
                    modalElement.classList.remove('show');
                    modalElement.style.display = 'none';
                    document.body.classList.remove('modal-open');
                    const backdrop = document.querySelector('.modal-backdrop');
                    if (backdrop) backdrop.remove();
                }
            }
            
            // Show success message
            if (typeof showNotification === 'function') {
                showNotification('Expire date updated successfully', 'success');
            } else {
                alert('Expire date updated successfully');
            }
            
            // Reload page to show updated data
            setTimeout(() => {
                location.reload();
            }, 1000);
        } else {
            alert(data.message || 'Failed to update expire date');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        const errorMessage = error.message || 'An error occurred while updating expire date';
        alert(errorMessage);
    });
});

// Reset modal when closed
document.getElementById('expireDateModal').addEventListener('hidden.bs.modal', function () {
    const form = document.getElementById('expireDateForm');
    form.reset();
    form.action = '';
    document.getElementById('modal_remarks').readOnly = true;
    document.getElementById('modal_remarks').style.backgroundColor = '#f8f9fa';
});

// Toggle action icons
function toggleActionIcons(billId) {
    const iconsWrapper = document.getElementById('actionIcons' + billId);
    const allWrappers = document.querySelectorAll('.action-icons-wrapper');
    
    // Close all other icon wrappers
    allWrappers.forEach(wrapper => {
        if (wrapper !== iconsWrapper) {
            wrapper.classList.remove('show');
        }
    });
    
    // Toggle current icon wrapper
    if (iconsWrapper) {
        iconsWrapper.classList.toggle('show');
    }
}

// Close icon wrappers when clicking outside
document.addEventListener('click', function(event) {
    if (!event.target.closest('.action-container')) {
        document.querySelectorAll('.action-icons-wrapper').forEach(wrapper => {
            wrapper.classList.remove('show');
        });
    }
});

// Initialize tooltips
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Bootstrap 4 tooltips
    if (typeof jQuery !== 'undefined' && jQuery.fn.tooltip) {
        jQuery('[data-toggle="tooltip"]').tooltip();
    } else if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
        document.querySelectorAll('[data-toggle="tooltip"]').forEach(function(element) {
            new bootstrap.Tooltip(element);
        });
    }
});
</script>

<style>
/* Statistics Cards - Smaller Size */
.row.mb-4 .card {
    font-size: 0.85rem;
}

.row.mb-4 .card-body {
    padding: 0.6rem 0.8rem !important;
}

.row.mb-4 .card h4 {
    font-size: 1.1rem !important;
    margin-bottom: 0.2rem !important;
}

.row.mb-4 .card p {
    font-size: 0.75rem !important;
    margin-bottom: 0 !important;
}

.row.mb-4 .card .fa-2x {
    font-size: 1.3rem !important;
}

.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);
}

.custom-card {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #fff;
}

.custom-card-header {
    background: #2D4052;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.custom-card-header h3, .custom-card-header h5 {
    color: white;
    margin-bottom: 0.25rem;
}

.custom-card-header small {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
}

.custom-card-body {
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
}

.action-column {
    min-width: 80px;
    width: 80px;
    white-space: nowrap;
    text-align: center;
}

.action-container {
    position: relative;
    display: inline-block;
}

.action-dots-btn {
    background: #6c757d;
    border: none;
    color: white;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-dots-btn:hover {
    background: #5a6268;
    transform: scale(1.05);
}

.action-dots-btn i {
    font-size: 14px;
}

.action-icons-wrapper {
    display: none;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 8px;
    background: white;
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    gap: 6px;
    flex-wrap: nowrap;
    width: auto;
    flex-direction: row;
    align-items: center;
}

.action-icons-wrapper.show {
    display: flex;
}

.action-icon-btn {
    width: 32px;
    height: 32px;
    border: 1.5px solid;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    vertical-align: middle;
}

.action-icon-btn i {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.action-icon-teal {
    border-color: #17a2b8;
    color: #17a2b8;
}

.action-icon-teal:hover {
    background: #17a2b8;
    color: white;
    transform: scale(1.1);
}

.action-icon-yellow {
    border-color: #ffc107;
    color: #ffc107;
}

.action-icon-yellow:hover {
    background: #ffc107;
    color: #212529;
    transform: scale(1.1);
}

.action-icon-blue {
    border-color: #007bff;
    color: #007bff;
}

.action-icon-blue:hover {
    background: #007bff;
    color: white;
    transform: scale(1.1);
}

.action-icon-green {
    border-color: #28a745;
    color: #28a745;
}

.action-icon-green:hover {
    background: #28a745;
    color: white;
    transform: scale(1.1);
}

.action-icon-red {
    border-color: #dc3545;
    color: #dc3545;
}

.action-icon-red:hover {
    background: #dc3545;
    color: white;
    transform: scale(1.1);
}

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

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

.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;
}

.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-success {
    border-color: #28a745;
    color: #28a745;
}

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

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

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

@media (max-width: 768px) {
    .btn-group-sm .btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.8rem;
    }
    
    .btn-group-sm .btn i {
        font-size: 0.7rem;
    }
    
    .action-column {
        min-width: 120px;
    }
}
</style>
@endsection