@extends('layouts.app')

@section('title', 'Final Close Tickets Report')
@section('page-title', 'Final Close Tickets Report')

@section('content')
<div class="container-fluid">
  @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

  <!-- Statistics Cards -->
  <div class="row mb-2">
    <div class="col-lg-3 col-md-6 mb-2">
      <div class="card border-0 shadow-sm bg-white">
        <div class="card-body p-2">
          <div class="d-flex align-items-center">
            <div class="flex-grow-1">
              <h6 class="card-title text-muted mb-0" style="font-size: 0.75rem;">Total Closed</h6>
              <h5 class="mb-0 text-primary" style="font-size: 1.25rem;">
                <i class="fas fa-check-circle me-1" style="font-size: 0.85rem;"></i>
                {{ $stats['total_closed'] ?? 0 }}
              </h5>
              <small class="text-muted" style="font-size: 0.7rem;">All closed tickets</small>
            </div>
            <div class="text-primary">
              <i class="fas fa-check-circle" style="font-size: 1.25rem;"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-2">
      <div class="card border-0 shadow-sm bg-white">
        <div class="card-body p-2">
          <div class="d-flex align-items-center">
            <div class="flex-grow-1">
              <h6 class="card-title text-muted mb-0" style="font-size: 0.75rem;">Ready for Final Close</h6>
              <h5 class="mb-0 text-primary" style="font-size: 1.25rem;">
                <i class="fas fa-flag-checkered me-1" style="font-size: 0.85rem;"></i>
                {{ $stats['ready_for_final_close'] ?? 0 }}
              </h5>
              <small class="text-muted" style="font-size: 0.7rem;">Pending final closure</small>
            </div>
            <div class="text-primary">
              <i class="fas fa-flag-checkered" style="font-size: 1.25rem;"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-2">
      <div class="card border-0 shadow-sm bg-white">
        <div class="card-body p-2">
          <div class="d-flex align-items-center">
            <div class="flex-grow-1">
              <h6 class="card-title text-muted mb-0" style="font-size: 0.75rem;">Final Closed</h6>
              <h5 class="mb-0 text-success" style="font-size: 1.25rem;">
                <i class="fas fa-check-double me-1" style="font-size: 0.85rem;"></i>
                {{ $stats['final_closed'] ?? 0 }}
              </h5>
              <small class="text-muted" style="font-size: 0.7rem;">Completed tickets</small>
            </div>
            <div class="text-success">
              <i class="fas fa-check-double" style="font-size: 1.25rem;"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-2">
      <div class="card border-0 shadow-sm bg-white">
        <div class="card-body p-2">
          <div class="d-flex align-items-center">
            <div class="flex-grow-1">
              <h6 class="card-title text-muted mb-0" style="font-size: 0.75rem;">Total Overuse</h6>
              <h5 class="mb-0 text-danger" style="font-size: 1.25rem;">
                <i class="fas fa-arrow-up me-1" style="font-size: 0.85rem;"></i>
                {{ number_format($stats['total_overuse'] ?? 0, 2) }} Mbps
              </h5>
              <small class="text-muted" style="font-size: 0.7rem;">Bandwidth overuse</small>
            </div>
            <div class="text-danger">
              <i class="fas fa-arrow-up" style="font-size: 1.25rem;"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bandwidth Summary -->
  <div class="row mb-2">
    <div class="col-md-6 mb-2">
      <div class="card border-0 shadow-sm bg-white">
        <div class="card-header bg-white border-bottom" style="padding: 0.4rem 0.75rem;">
          <h6 class="mb-0" style="font-size: 0.8rem;"><i class="fas fa-network-wired me-1"></i>Approved Bandwidth</h6>
        </div>
        <div class="card-body p-2">
          <h4 class="mb-0 text-primary" style="font-size: 1.5rem;">{{ number_format($stats['total_approved_bandwidth'] ?? 0, 2) }} Mbps</h4>
          <small class="text-muted" style="font-size: 0.7rem;">Total approved bandwidth</small>
        </div>
      </div>
    </div>

    <div class="col-md-6 mb-2">
      <div class="card border-0 shadow-sm bg-white">
        <div class="card-header bg-white border-bottom" style="padding: 0.4rem 0.75rem;">
          <h6 class="mb-0" style="font-size: 0.8rem;"><i class="fas fa-chart-line me-1"></i>Used Bandwidth</h6>
        </div>
        <div class="card-body p-2">
          <h4 class="mb-0 text-warning" style="font-size: 1.5rem;">{{ number_format($stats['total_used_bandwidth'] ?? 0, 2) }} Mbps</h4>
          <small class="text-muted" style="font-size: 0.7rem;">Total used bandwidth</small>
        </div>
      </div>
    </div>
  </div>

  <!-- Ready for Final Close Section -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="card bg-white">
        <div class="card-body p-2">
          <div class="d-flex justify-content-between align-items-center">
            <div>
              <h6 class="mb-0" style="font-size: 0.9rem;"><i class="fas fa-flag-checkered me-1"></i>Ready for Final Close</h6>
              <small class="text-muted" style="font-size: 0.7rem;">Tickets ready for final closure</small>
            </div>
            <div class="text-end">
              <h5 class="mb-0 text-primary" style="font-size: 1.35rem;">{{ $totalReadyTickets ?? 0 }}</h5>
              <small class="text-muted" style="font-size: 0.7rem;">Total Tickets</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row mb-4">
    <div class="col-12">
      @if(($readyGroups ?? collect())->isEmpty())
        <div class="custom-card">
          <div class="custom-card-body text-center py-5">
            <i class="fas fa-check-circle text-success" style="font-size: 48px; margin-bottom: 20px;"></i>
            <h5 class="text-muted">No Tickets Ready for Final Close</h5>
            <p class="text-muted mb-0">There are no closed tickets waiting for final closure.</p>
          </div>
        </div>
      @else
        @foreach($readyGroups as $customerId => $logs)
        <div class="custom-card mb-3">
          <div class="custom-card-header d-flex justify-content-between align-items-center">
            <div>
              <h6 class="mb-0 text-dark">
                <i class="fas fa-building me-2"></i>
                {{ optional($logs->first()->customer)->company_name ? $logs->first()->customer->company_name . ' - ' . $logs->first()->customer->name : optional($logs->first()->customer)->name ?? 'Unknown Customer' }}
                @if(optional($logs->first()->customer)->email)
                  <small class="text-muted">({{ $logs->first()->customer->email }})</small>
                @endif
              </h6>
              <small class="text-muted">Total tickets ready for final close: {{ $logs->count() }}</small>
            </div>
          </div>
          <div class="custom-card-body">
            <!-- Bulk Final Close Button -->
            <div class="mb-3 d-flex justify-content-between align-items-center">
              <div>
                <button type="button" class="btn btn-danger btn-sm" id="bulkFinalCloseBtn{{ $customerId }}" disabled data-bs-toggle="modal" data-bs-target="#bulkFinalCloseModal{{ $customerId }}">
                  <i class="fas fa-flag-checkered me-1"></i> Final Close Selected
                </button>
                <span class="ms-2 text-muted small" id="selectedCount{{ $customerId }}">0 selected</span>
              </div>
            </div>
            
            <!-- Bulk Final Close Modal -->
            <div class="modal fade" id="bulkFinalCloseModal{{ $customerId }}" tabindex="-1" aria-hidden="true">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <form method="POST" action="{{ route('bandwidth-logs.bulk-final-close') }}" id="bulkFinalCloseForm{{ $customerId }}">
                    @csrf
                    <input type="hidden" name="log_ids" id="bulkFinalCloseLogIdsInput{{ $customerId }}" value="">
                    <div class="modal-header">
                      <h5 class="modal-title"><i class="fas fa-flag-checkered me-2"></i>Final Close Selected Tickets</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                      <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" value="1" id="bulkSendToAccounts{{ $customerId }}" name="send_to_accounts">
                        <label class="form-check-label" for="bulkSendToAccounts{{ $customerId }}">
                          Bandwidth updated by client (send to Accounts)
                        </label>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">Select Account</label>
                        <select name="accounts_user_id" id="bulkAccountsUser{{ $customerId }}" class="form-select" disabled>
                          <option value="">-- Select User --</option>
                          @foreach(($accountsUsers ?? []) as $u)
                            <option value="{{ $u->id }}">{{ $u->name }}</option>
                          @endforeach
                        </select>
                        <small class="text-muted">Choose Accounts user to forward (optional)</small>
                      </div>
                      <div class="mb-3">
                        <label class="form-label fw-bold">Upgrade Bandwidth (Mbps)</label>
                        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                          <table class="table table-bordered table-sm mb-0" id="upgradeBandwidthTable{{ $customerId }}">
                            <thead class="table-light">
                              <tr>
                                <th>Item Name</th>
                                <th class="text-end">Overuse</th>
                                <th>Upgrade Bandwidth (Mbps)</th>
                              </tr>
                            </thead>
                            <tbody id="upgradeBandwidthList{{ $customerId }}">
                              <!-- Tickets will be populated here by JavaScript -->
                            </tbody>
                          </table>
                        </div>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">Final Note (optional)</label>
                        <textarea name="final_note" class="form-control" rows="3" placeholder="Add final remarks for all selected tickets..."></textarea>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancelBulkFinalClose{{ $customerId }}">Cancel</button>
                      <button type="submit" class="btn btn-danger">Final Close Selected Tickets</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            
            @php
              // Debug: Check if logs have salesInvoiceItem
              $hasInvoiceItems = $logs->filter(function($log) {
                return $log->salesInvoiceItem !== null;
              })->count();
              
              $logsByInvoice = $logs->groupBy(function($log) {
                if ($log->salesInvoiceItem && $log->salesInvoiceItem->salesInvoice) {
                  return $log->salesInvoiceItem->salesInvoice->id ?? 'no-invoice';
                }
                return 'no-invoice';
              });
            @endphp
            
            @if($logsByInvoice->isEmpty())
              <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>
                No invoices found for this customer. 
                @if($hasInvoiceItems > 0)
                  <br><small>Found {{ $hasInvoiceItems }} logs with invoice items, but unable to group by invoice.</small>
                @endif
              </div>
            @else
              <div class="table-responsive">
                <table class="table table-bordered table-sm mb-0">
                  <thead class="table-light">
                    <tr>
                      <th style="width: 50px;" class="text-center">Select</th>
                      <th style="width: 50px;">Action</th>
                      <th>Invoice Number</th>
                      <th>Invoice Date</th>
                      <th>Items Count</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($logsByInvoice as $invoiceId => $invoiceLogs)
                    @php
                      $firstLog = $invoiceLogs->first();
                      $invoice = null;
                      if ($firstLog->salesInvoiceItem && $firstLog->salesInvoiceItem->salesInvoice) {
                        $invoice = $firstLog->salesInvoiceItem->salesInvoice;
                      }
                      $invoiceNumber = 'No Invoice';
                      $invoiceDate = '';
                      if ($invoice) {
                        $invoiceNumber = $invoice->invoice_number ?? $invoice->invoice_no ?? 'N/A';
                        if ($invoice->invoice_date) {
                          $invoiceDate = \Carbon\Carbon::parse($invoice->invoice_date)->format('M d, Y');
                        }
                      }
                      $uniqueId = 'invoice-' . $customerId . '-' . ($invoiceId !== 'no-invoice' ? $invoiceId : 'no-inv-' . $customerId);
                    @endphp
                    <tr class="invoice-header-row" style="cursor: pointer; background-color: #f8f9fa;" data-target-id="collapse{{ $uniqueId }}" data-icon-id="icon{{ $uniqueId }}" data-invoice-id="{{ $invoiceId }}" data-customer-id="{{ $customerId }}">
                      <td class="text-center">
                        <input type="checkbox" class="form-check-input invoice-select-all" data-invoice-id="{{ $invoiceId }}" data-customer-id="{{ $customerId }}" id="invoiceSelectAll{{ $customerId }}-{{ $invoiceId }}" style="cursor: pointer;">
                      </td>
                      <td class="text-center">
                        <i class="fas fa-chevron-down accordion-icon" id="icon{{ $uniqueId }}"></i>
                      </td>
                      <td>
                        <strong><i class="fas fa-file-invoice me-2"></i>{{ $invoiceNumber }}</strong>
                      </td>
                      <td>
                        @if($invoiceDate)
                          <span class="text-muted">{{ $invoiceDate }}</span>
                        @else
                          <span class="text-muted">-</span>
                        @endif
                      </td>
                      <td>
                        <span class="badge bg-info">{{ $invoiceLogs->count() }} item(s)</span>
                      </td>
                    </tr>
                    <tr class="invoice-details-row" id="collapse{{ $uniqueId }}" style="display: none;">
                      <td colspan="5" class="p-0" style="border-top: none;">
                        <div class="table-responsive collapse-content">
                          <table class="table table-bordered table-sm mb-0">
                          <thead class="table-light">
                            <tr>
                              <th style="width: 50px;" class="text-center">Select</th>
                              <th>ID</th>
                              <th>Sales Invoice Item</th>
                              <th>Previous Bandwidth</th>
                              <th>Requested Bandwidth</th>
                              <th>Approve Bandwidth Qty</th>
                              <th>Used Bandwidth (Max)</th>
                              <th>Overuse</th>
                              <th>Log Date</th>
                              <th>Status</th>
                              <th>Assigned By</th>
                              <th>Closed By</th>
                              <th>Actions</th>
                            </tr>
                          </thead>
                          <tbody>
                            @foreach($invoiceLogs as $log)
                              @php
                                $prevQtyNumeric = null;
                                $sii = $log->salesInvoiceItem;
                                if ($sii) {
                                  $unit = strtolower($sii->unit ?? '');
                                  $qty = $sii->quantity ?? null;
                                  if ($qty && ($unit === 'mbps' || str_contains($unit, 'mbps'))) {
                                    $prevQtyNumeric = (float)$qty;
                                  }
                                }
                                $overuse = null;
                                if (!is_null($log->used_bandwidth_mbps) && !is_null($prevQtyNumeric)) {
                                  $over = (float)$log->used_bandwidth_mbps - $prevQtyNumeric;
                                  if ($over > 0) { $overuse = $over; }
                                }
                              @endphp
                    <tr>
                      <td class="text-center">
                        <input type="checkbox" 
                               class="form-check-input log-checkbox" 
                               data-customer-id="{{ $customerId }}" 
                               data-log-id="{{ $log->id }}" 
                               data-is-final-close="1"
                               data-item-name="{{ optional($log->salesInvoiceItem)->item_name ?? 'N/A' }}"
                               data-overuse="{{ $overuse ?? '' }}"
                               value="{{ $log->id }}">
                      </td>
                      <td><span class="badge bg-primary">{{ $log->id }}</span></td>
                      <td>
                        <strong>{{ optional($log->salesInvoiceItem)->item_name ?? 'N/A' }}</strong>
                      </td>
                      <td>
                        @php
                          $prevText = null;
                          if ($sii) {
                              $unit = strtolower($sii->unit ?? '');
                              $qty = $sii->quantity ?? null;
                              if ($qty && ($unit === 'mbps' || str_contains($unit, 'mbps'))) {
                                  $prevText = number_format((float)$qty, 2) . ' Mbps';
                              }
                          }
                        @endphp
                        {{ $prevText ?? 'N/A' }}
                      </td>
                      <td>
                        @if($log->download_speed_mbps)
                          <strong>{{ number_format($log->download_speed_mbps, 2) }} Mbps</strong>
                        @else
                          <span class="text-muted">-</span>
                        @endif
                      </td>
                      <td>
                        @if(!is_null($log->approved_bandwidth_mbps))
                          <strong>{{ number_format($log->approved_bandwidth_mbps, 2) }} Mbps</strong>
                        @else
                          <span class="text-muted">-</span>
                        @endif
                      </td>
                      <td>
                        @if(!is_null($log->used_bandwidth_mbps))
                          <strong>{{ number_format($log->used_bandwidth_mbps, 2) }} Mbps</strong>
                        @else
                          <span class="text-muted">-</span>
                        @endif
                      </td>
                      <td>
                        @if($overuse !== null)
                          <span class="text-danger fw-bold">{{ number_format($overuse, 2) }} Mbps</span>
                        @else
                          <span class="text-muted">-</span>
                        @endif
                      </td>
                      <td>
                        @if($log->log_date)
                          {{ $log->log_date->format('M d, Y H:i') }}
                        @else
                          <span class="text-muted">-</span>
                        @endif
                      </td>
                      <td>
                        <span class="badge bg-success">Active</span>
                      </td>
                      <td>
                        @if($log->assignee)
                          {{ $log->assignee->name }}
                        @else
                          <span class="text-muted">-</span>
                        @endif
                      </td>
                      <td>
                        @if($log->closer)
                          {{ $log->closer->name }}
                          <br>
                          <small class="text-muted">{{ optional($log->closed_at)->diffForHumans() }}</small>
                        @else
                          <span class="text-muted">-</span>
                        @endif
                      </td>
                      <td>
                        <button class="btn btn-sm btn-outline-danger open-final-close-modal" data-bs-toggle="modal" data-bs-target="#finalCloseModal{{ $log->id }}" data-modal-id="finalCloseModal{{ $log->id }}">
                          <i class="fas fa-flag-checkered me-1"></i> Final Close
                        </button>
                        
                        <!-- Individual Final Close Modal -->
                        <div class="modal fade" id="finalCloseModal{{ $log->id }}" tabindex="-1" aria-hidden="true">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <form method="POST" action="{{ route('bandwidth-logs.final-close', $log) }}">
                                @csrf
                                <div class="modal-header">
                                  <h5 class="modal-title"><i class="fas fa-flag-checkered me-2"></i>Final Close Ticket #{{ $log->id }}</h5>
                                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                  <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" value="1" id="sendToAccounts{{ $log->id }}" name="send_to_accounts">
                                    <label class="form-check-label" for="sendToAccounts{{ $log->id }}">
                                      Bandwidth updated by client (send to Accounts)
                                    </label>
                                  </div>
                                  <div class="mb-3">
                                    <label class="form-label">Select Account</label>
                                    <select name="accounts_user_id" id="accountsUser{{ $log->id }}" class="form-select" disabled>
                                      <option value="">-- Select User --</option>
                                      @foreach(($accountsUsers ?? []) as $u)
                                        <option value="{{ $u->id }}">{{ $u->name }}</option>
                                      @endforeach
                                    </select>
                                    <small class="text-muted">Choose Accounts user to forward (optional)</small>
                                  </div>
                                  <div class="mb-3">
                                    <label class="form-label">Upgrade Bandwidth (Mbps)</label>
                                    <input type="number" step="0.01" min="0" name="upgrade_bandwidth_mbps" class="form-control" id="upgradeBandwidth{{ $log->id }}" disabled placeholder="Enter upgrade bandwidth">
                                  </div>
                                  <div class="mb-3">
                                    <label class="form-label">Final Note (optional)</label>
                                    <textarea name="final_note" class="form-control" rows="3" placeholder="Add final remarks..."></textarea>
                                  </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-danger">Final Close</button>
                                </div>
                              </form>
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                            @endforeach
                          </tbody>
                          </table>
                        </div>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
            @endif
          </div>
        </div>
      @endforeach
      @endif
    </div>
  </div>

  <!-- Final Closed Section -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="card bg-white">
        <div class="card-body p-2">
          <div class="d-flex justify-content-between align-items-center">
            <div>
              <h6 class="mb-0" style="font-size: 0.9rem;"><i class="fas fa-check-double me-1"></i>Final Closed Tickets</h6>
              <small class="text-muted" style="font-size: 0.7rem;">Tickets that have been final closed</small>
            </div>
            <div class="text-end">
              <h5 class="mb-0 text-success" style="font-size: 1.35rem;">{{ $totalFinalClosedTickets ?? 0 }}</h5>
              <small class="text-muted" style="font-size: 0.7rem;">Total Tickets</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      @if(($finalClosedGroups ?? collect())->isEmpty())
        <div class="custom-card">
          <div class="custom-card-body text-center py-5">
            <i class="fas fa-check-double text-success" style="font-size: 48px; margin-bottom: 20px;"></i>
            <h5 class="text-muted">No Final Closed Tickets</h5>
            <p class="text-muted mb-0">There are no final closed tickets in the system.</p>
          </div>
        </div>
      @else
        @foreach($finalClosedGroups as $customerId => $logs)
        <div class="custom-card mb-3">
          <div class="custom-card-header d-flex justify-content-between align-items-center">
            <div>
              <h6 class="mb-0 text-dark">
                <i class="fas fa-building me-2"></i>
                {{ optional($logs->first()->customer)->company_name ? $logs->first()->customer->company_name . ' - ' . $logs->first()->customer->name : optional($logs->first()->customer)->name ?? 'Unknown Customer' }}
                @if(optional($logs->first()->customer)->email)
                  <small class="text-muted">({{ $logs->first()->customer->email }})</small>
                @endif
              </h6>
              <small class="text-muted">Total final closed tickets: {{ $logs->count() }}</small>
            </div>
          </div>
          <div class="custom-card-body">
            @php
              $logsByInvoice = $logs->groupBy(function($log) {
                $invoice = $log->salesInvoiceItem->salesInvoice ?? null;
                return $invoice ? $invoice->id : 'no-invoice-' . $log->id;
              });
            @endphp
            
            @if($logsByInvoice->count() > 0)
            <div class="table-responsive">
              <table class="table table-bordered table-sm mb-0">
                <thead class="table-light">
                  <tr>
                    <th style="width: 50px;" class="text-center">
                      <i class="fas fa-chevron-down"></i>
                    </th>
                    <th>Invoice Number</th>
                    <th>Invoice Date</th>
                    <th>Items Count</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($logsByInvoice as $invoiceId => $invoiceLogs)
                    @php
                      $firstLog = $invoiceLogs->first();
                      $invoice = $firstLog->salesInvoiceItem->salesInvoice ?? null;
                      $invoiceNumber = $invoice ? ($invoice->invoice_number ?? 'N/A') : 'No Invoice';
                      $invoiceDate = $invoice && $invoice->invoice_date ? \Carbon\Carbon::parse($invoice->invoice_date)->format('M d, Y') : null;
                      $uniqueId = 'final-' . $customerId . '-' . $invoiceId;
                    @endphp
                    <tr class="invoice-header-row" style="cursor: pointer; background-color: #f8f9fa;" data-target-id="finalCollapse{{ $uniqueId }}" data-icon-id="finalIcon{{ $uniqueId }}">
                      <td class="text-center">
                        <i class="fas fa-chevron-down accordion-icon" id="finalIcon{{ $uniqueId }}"></i>
                      </td>
                      <td>
                        <strong><i class="fas fa-file-invoice me-2"></i>{{ $invoiceNumber }}</strong>
                      </td>
                      <td>
                        @if($invoiceDate)
                          <span class="text-muted">{{ $invoiceDate }}</span>
                        @else
                          <span class="text-muted">-</span>
                        @endif
                      </td>
                      <td>
                        <span class="badge bg-success">{{ $invoiceLogs->count() }} item(s)</span>
                      </td>
                    </tr>
                    <tr class="invoice-details-row" id="finalCollapse{{ $uniqueId }}" style="display: none;">
                      <td colspan="4" class="p-0" style="border-top: none;">
                        <div class="table-responsive collapse-content">
                          <table class="table table-bordered table-sm mb-0">
                          <thead class="table-light">
                            <tr>
                              <th>ID</th>
                              <th>Sales Invoice Item</th>
                              <th>Previous Bandwidth</th>
                              <th>Requested Bandwidth</th>
                              <th>Approve Bandwidth Qty</th>
                              <th>Used Bandwidth (Max)</th>
                              <th>Upgrade Bandwidth</th>
                              <th>Overuse</th>
                              <th>Log Date</th>
                              <th>Final Closed By</th>
                              <th>Final Closed At</th>
                              <th>Forwarded To Accounts</th>
                            </tr>
                          </thead>
                          <tbody>
                            @foreach($invoiceLogs as $log)
                              @php
                                $prevQtyNumeric = null;
                                $sii = $log->salesInvoiceItem;
                                if ($sii) {
                                  $unit = strtolower($sii->unit ?? '');
                                  $qty = $sii->quantity ?? null;
                                  if ($qty && ($unit === 'mbps' || str_contains($unit, 'mbps'))) {
                                    $prevQtyNumeric = (float)$qty;
                                  }
                                }
                                $overuse = $log->used_bandwidth_mbps && $prevQtyNumeric !== null 
                                  ? max(0, $log->used_bandwidth_mbps - $prevQtyNumeric) 
                                  : null;
                              @endphp
                              <tr>
                                <td>{{ $log->id }}</td>
                                <td>
                                  @if($sii)
                                    <div>
                                      <strong>{{ $sii->item_name ?? 'N/A' }}</strong>
                                      @if($sii->salesInvoice)
                                        <br><small class="text-muted">Invoice: {{ $sii->salesInvoice->invoice_number ?? 'N/A' }}</small>
                                      @endif
                                    </div>
                                  @else
                                    <span class="text-muted">-</span>
                                  @endif
                                </td>
                                <td>
                                  @if($prevQtyNumeric !== null)
                                    {{ number_format($prevQtyNumeric, 2) }} Mbps
                                  @else
                                    <span class="text-muted">-</span>
                                  @endif
                                </td>
                                <td>{{ $log->download_speed_mbps ? number_format($log->download_speed_mbps, 2) . ' Mbps' : '-' }}</td>
                                <td>{{ $log->approved_bandwidth_mbps ? number_format($log->approved_bandwidth_mbps, 2) . ' Mbps' : '-' }}</td>
                                <td>{{ $log->used_bandwidth_mbps ? number_format($log->used_bandwidth_mbps, 2) . ' Mbps' : '-' }}</td>
                                <td>{{ $log->upgrade_bandwidth_mbps ? number_format($log->upgrade_bandwidth_mbps, 2) . ' Mbps' : '-' }}</td>
                                <td>
                                  @if($overuse !== null)
                                    <span class="badge bg-{{ $overuse > 0 ? 'warning' : 'success' }}">{{ number_format($overuse, 2) }} Mbps</span>
                                  @else
                                    <span class="text-muted">-</span>
                                  @endif
                                </td>
                                <td>{{ $log->log_date ? $log->log_date->format('M d, Y') : '-' }}</td>
                                <td>
                                  @if($log->finalCloser)
                                    {{ $log->finalCloser->name }}
                                  @else
                                    <span class="text-muted">-</span>
                                  @endif
                                </td>
                                <td>
                                  @if($log->final_closed_at)
                                    {{ $log->final_closed_at->format('M d, Y H:i') }}
                                  @else
                                    <span class="text-muted">-</span>
                                  @endif
                                </td>
                                <td>
                                  @if($log->forwarded_to_accounts_at)
                                    <span class="badge bg-info">Yes</span>
                                    @if($log->accountsReceiver)
                                      <br><small>{{ $log->accountsReceiver->name }}</small>
                                    @endif
                                  @else
                                    <span class="text-muted">No</span>
                                  @endif
                                </td>
                              </tr>
                            @endforeach
                          </tbody>
                          </table>
                        </div>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
            @endif
          </div>
        </div>
        @endforeach
      @endif
    </div>
  </div>
</div>
@endsection

@section('styles')
<style>
.custom-card { border-radius: .5rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075); background: white; }
.custom-card-header { background:#fff; border-bottom:1px solid #dee2e6; padding: 0.5rem 0.75rem; }
.custom-card-body { padding: 0.75rem; }
.card { background: white !important; }
.card-body { background: white !important; }
.card-header { background: white !important; }
.invoice-header-row:hover { background-color: #e9ecef !important; }
.invoice-details-row { background-color: #f8f9fa; }
.collapse-content { padding: 1rem; }
.accordion-icon { transition: transform 0.3s ease; }
.accordion-icon.rotated { transform: rotate(180deg); }
</style>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Accordion functionality
  document.querySelectorAll('.invoice-header-row').forEach(function(headerRow) {
    headerRow.addEventListener('click', function(e) {
      // Don't toggle accordion if clicking on checkbox
      if (e.target.type === 'checkbox' || e.target.closest('.form-check-input')) {
        return;
      }
      
      const targetId = this.getAttribute('data-target-id');
      const iconId = this.getAttribute('data-icon-id');
      const detailsRow = document.getElementById(targetId);
      const icon = document.getElementById(iconId);
      
      if (detailsRow) {
        const isVisible = detailsRow.style.display !== 'none';
        detailsRow.style.display = isVisible ? 'none' : 'table-row';
        if (icon) {
          icon.classList.toggle('rotated', !isVisible);
        }
      }
    });
  });
  
  // Invoice header checkbox - select all items in invoice
  document.querySelectorAll('.invoice-select-all').forEach(function(invoiceCheckbox) {
    invoiceCheckbox.addEventListener('change', function(e) {
      e.stopPropagation(); // Prevent accordion toggle
      
      const invoiceId = this.getAttribute('data-invoice-id');
      const customerId = this.getAttribute('data-customer-id');
      const isChecked = this.checked;
      
      // Find all checkboxes in this invoice
      const headerRow = this.closest('.invoice-header-row');
      if (headerRow) {
        const targetId = headerRow.getAttribute('data-target-id');
        const detailsRow = document.getElementById(targetId);
        
        if (detailsRow) {
          const invoiceItemCheckboxes = detailsRow.querySelectorAll(`.log-checkbox[data-customer-id="${customerId}"]`);
          invoiceItemCheckboxes.forEach(function(cb) {
            cb.checked = isChecked;
          });
          
          // Trigger update for customer - call the update function by name
          const updateFunctionName = 'updateBulkSelection' + customerId;
          if (typeof window[updateFunctionName] === 'function') {
            window[updateFunctionName]();
          }
        }
      }
    });
  });

  // Final Close Modal JavaScript
  document.querySelectorAll('.open-final-close-modal').forEach(function(btn) {
    btn.addEventListener('click', function() {
      const modalId = this.getAttribute('data-modal-id');
      const modal = document.getElementById(modalId);
      if (modal) {
        const bsModal = new bootstrap.Modal(modal);
        bsModal.show();
      }
    });
  });

  // Enable/disable "Select Account" and "Upgrade Bandwidth" based on checkbox
  document.querySelectorAll('[id^="sendToAccounts"], [id^="bulkSendToAccounts"]').forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
      const logId = this.id.replace('sendToAccounts', '').replace('bulkSendToAccounts', '');
      const accountsSelect = document.getElementById('accountsUser' + logId) || document.getElementById('bulkAccountsUser' + logId);
      const upgradeInput = document.getElementById('upgradeBandwidth' + logId);
      
      if (accountsSelect) accountsSelect.disabled = !this.checked;
      if (upgradeInput) upgradeInput.disabled = !this.checked;
    });
  });

  // Bulk Final Close Checkbox handling
  @foreach($readyGroups ?? [] as $customerId => $logs)
    const checkboxes{{ $customerId }} = document.querySelectorAll('.log-checkbox[data-customer-id="{{ $customerId }}"]');
    const bulkBtn{{ $customerId }} = document.getElementById('bulkFinalCloseBtn{{ $customerId }}');
    const selectedCount{{ $customerId }} = document.getElementById('selectedCount{{ $customerId }}');
    const logIdsInput{{ $customerId }} = document.getElementById('bulkFinalCloseLogIdsInput{{ $customerId }}');
    const sendToAccounts{{ $customerId }} = document.getElementById('bulkSendToAccounts{{ $customerId }}');
    const accountsUser{{ $customerId }} = document.getElementById('bulkAccountsUser{{ $customerId }}');
    const upgradeTable{{ $customerId }} = document.getElementById('upgradeBandwidthList{{ $customerId }}');
    const bulkModal{{ $customerId }} = document.getElementById('bulkFinalCloseModal{{ $customerId }}');
    
    // Ensure modal opens when button is clicked
    if (bulkBtn{{ $customerId }}) {
      bulkBtn{{ $customerId }}.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        // Update table before showing modal
        updateBulkSelection{{ $customerId }}();
        
        if (bulkModal{{ $customerId }}) {
          // Try Bootstrap modal first
          if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
            const bsModal = new bootstrap.Modal(bulkModal{{ $customerId }});
            bsModal.show();
          } else {
            // Fallback: manually show modal
            bulkModal{{ $customerId }}.classList.add('show');
            bulkModal{{ $customerId }}.style.display = 'block';
            document.body.classList.add('modal-open');
            const backdrop = document.createElement('div');
            backdrop.className = 'modal-backdrop fade show';
            backdrop.id = 'backdrop{{ $customerId }}';
            document.body.appendChild(backdrop);
          }
        }
      });
    }
    
    // Modal close handlers
    const cancelBtn{{ $customerId }} = document.getElementById('cancelBulkFinalClose{{ $customerId }}');
    const closeBtn{{ $customerId }} = bulkModal{{ $customerId }} ? bulkModal{{ $customerId }}.querySelector('.btn-close') : null;
    
    function closeBulkModal{{ $customerId }}() {
      if (bulkModal{{ $customerId }}) {
        if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
          const bsModal = bootstrap.Modal.getInstance(bulkModal{{ $customerId }});
          if (bsModal) {
            bsModal.hide();
          } else {
            bulkModal{{ $customerId }}.classList.remove('show');
            bulkModal{{ $customerId }}.style.display = 'none';
            document.body.classList.remove('modal-open');
            const backdrop = document.getElementById('backdrop{{ $customerId }}');
            if (backdrop) backdrop.remove();
          }
        } else {
          bulkModal{{ $customerId }}.classList.remove('show');
          bulkModal{{ $customerId }}.style.display = 'none';
          document.body.classList.remove('modal-open');
          const backdrop = document.getElementById('backdrop{{ $customerId }}');
          if (backdrop) backdrop.remove();
        }
      }
    }
    
    if (cancelBtn{{ $customerId }}) {
      cancelBtn{{ $customerId }}.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        closeBulkModal{{ $customerId }}();
      });
    }
    
    if (closeBtn{{ $customerId }}) {
      closeBtn{{ $customerId }}.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        closeBulkModal{{ $customerId }}();
      });
    }

    function updateBulkSelection{{ $customerId }}() {
      const selected = Array.from(checkboxes{{ $customerId }}).filter(cb => cb.checked);
      const count = selected.length;
      
      if (selectedCount{{ $customerId }}) {
        selectedCount{{ $customerId }}.textContent = count + ' selected';
      }
      
      if (bulkBtn{{ $customerId }}) {
        bulkBtn{{ $customerId }}.disabled = count === 0;
      }
      
      if (logIdsInput{{ $customerId }}) {
        logIdsInput{{ $customerId }}.value = selected.map(cb => cb.value).join(',');
      }

      // Update upgrade bandwidth table
      if (upgradeTable{{ $customerId }}) {
        upgradeTable{{ $customerId }}.innerHTML = '';
        selected.forEach(function(checkbox) {
          const itemName = checkbox.getAttribute('data-item-name');
          const overuse = checkbox.getAttribute('data-overuse') || '0';
          const logId = checkbox.value;
          
          const row = document.createElement('tr');
          row.innerHTML = `
            <td>${itemName}</td>
            <td class="text-end">${overuse} Mbps</td>
            <td>
              <input type="number" step="0.01" min="0" name="upgrade_bandwidth[${logId}]" 
                     class="form-control form-control-sm" 
                     id="upgrade_${logId}" 
                     disabled>
            </td>
          `;
          upgradeTable{{ $customerId }}.appendChild(row);
        });
      }
    }
    
    // Make function globally accessible
    window['updateBulkSelection{{ $customerId }}'] = updateBulkSelection{{ $customerId }};

    checkboxes{{ $customerId }}.forEach(function(cb) {
      cb.addEventListener('change', updateBulkSelection{{ $customerId }});
    });

    // Update invoice header checkbox when individual checkboxes change
    checkboxes{{ $customerId }}.forEach(function(cb) {
      cb.addEventListener('change', function() {
        // Find which invoice this checkbox belongs to
        const detailsRow = this.closest('.invoice-details-row');
        if (detailsRow) {
          const headerRow = detailsRow.previousElementSibling;
          if (headerRow && headerRow.classList.contains('invoice-header-row')) {
            const invoiceId = headerRow.getAttribute('data-invoice-id');
            const invoiceHeaderCheckbox = document.getElementById(`invoiceSelectAll{{ $customerId }}-${invoiceId}`);
            
            // Check if all items in this invoice are selected
            const invoiceCheckboxes = detailsRow.querySelectorAll(`.log-checkbox[data-customer-id="{{ $customerId }}"]`);
            const allChecked = Array.from(invoiceCheckboxes).every(c => c.checked);
            
            if (invoiceHeaderCheckbox) {
              invoiceHeaderCheckbox.checked = allChecked;
            }
          }
        }
      });
    });

    // Enable/disable upgrade bandwidth inputs based on checkbox
    if (sendToAccounts{{ $customerId }}) {
      sendToAccounts{{ $customerId }}.addEventListener('change', function() {
        if (accountsUser{{ $customerId }}) {
          accountsUser{{ $customerId }}.disabled = !this.checked;
        }
        const upgradeInputs = upgradeTable{{ $customerId }}.querySelectorAll('input[name^="upgrade_bandwidth"]');
        upgradeInputs.forEach(function(input) {
          input.disabled = !this.checked;
        }.bind(this));
      });
    }
  @endforeach
});
</script>
@endsection