@extends('layouts.app')

@section('title', 'Approved Bandwidth Logs - Company Wise')
@section('page-title', 'Approved Bandwidth Logs - Company Wise')

@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
  <div class="row">
    <div class="col-12">
      @if(($groups ?? 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 Approved Tickets Available</h5>
            <p class="text-muted mb-0">There are no approved tickets waiting for assignment.</p>
          </div>
        </div>
      @else
        @foreach($groups 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 approved logs: {{ $logs->count() }}</small>
            </div>
          </div>
          <div class="custom-card-body">
            <!-- Bulk Action Buttons -->
            <div class="mb-3 d-flex justify-content-between align-items-center">
              <div>
                <form method="POST" action="{{ route('bandwidth-logs.bulk-assign') }}" id="bulkAssignForm{{ $customerId }}" class="d-inline">
                  @csrf
                  <input type="hidden" name="log_ids" id="logIdsInput{{ $customerId }}" value="">
                  <button type="submit" class="btn btn-success btn-sm" id="bulkAssignBtn{{ $customerId }}" disabled onclick="return confirm('Are you sure you want to assign bandwidth to all selected items?')">
                    <i class="fas fa-network-wired me-1"></i> Assign Selected Items
                  </button>
                </form>
                <span class="ms-2 text-muted small" id="selectedCount{{ $customerId }}">0 selected</span>
              </div>
            </div>
            @php
              $logsByInvoice = $logs->groupBy(function($log) {
                return $log->salesInvoiceItem && $log->salesInvoiceItem->salesInvoice 
                  ? ($log->salesInvoiceItem->salesInvoice->id ?? 'no-invoice')
                  : 'no-invoice';
              });
            @endphp
            <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 && $firstLog->salesInvoiceItem->salesInvoice 
                        ? $firstLog->salesInvoiceItem->salesInvoice 
                        : null;
                      $invoiceNumber = $invoice 
                        ? ($invoice->invoice_no ?? 'N/A')
                        : 'No Invoice';
                      $invoiceDate = $invoice && $invoice->invoice_date 
                        ? $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 }}">
                      <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="4" class="p-0">
                        <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">
                                <input type="checkbox" class="form-check-input select-all-checkbox" data-customer-id="{{ $customerId }}" id="selectAll{{ $customerId }}-{{ $invoiceId }}">
                              </th>
                              <th>ID</th>
                              <th>Sales Invoice Item</th>
                              <th>Previous Bandwidth</th>
                              <th>Requested Bandwidth</th>
                              <th>Approve Bandwidth Qty</th>
                              <th>Log Date</th>
                              <th>Status</th>
                              <th>Approval</th>
                            </tr>
                          </thead>
                          <tbody>
                            @foreach($invoiceLogs as $log)
                    <tr>
                      <td class="text-center">
                        @if((!$log->assigned_by && !is_null($log->approved_bandwidth_mbps)) || ($log->closed_at && !$log->final_closed_at))
                          <input type="checkbox" 
                                 class="form-check-input log-checkbox" 
                                 data-customer-id="{{ $customerId }}" 
                                 data-log-id="{{ $log->id }}" 
                                 data-is-final-close="{{ $log->closed_at && !$log->final_closed_at ? '1' : '0' }}"
                                 data-item-name="{{ optional($log->salesInvoiceItem)->item_name ?? 'N/A' }}"
                                 value="{{ $log->id }}">
                        @endif
                      </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;
                          $sii = $log->salesInvoiceItem;
                          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>{{ optional($log->log_date)->format('M d, Y H:i') ?? '-' }}</td>
                      <td><span class="badge bg-{{ $log->status === 'active' ? 'success' : ($log->status === 'inactive' ? 'danger' : 'warning') }}">{{ ucfirst($log->status) }}</span></td>
                      <td>
                        <span class="badge bg-success" data-bs-toggle="tooltip" title="{{ $log->approver ? 'Approved by: ' . $log->approver->name : 'Approved' }}">Approved</span>
                      </td>
                    </tr>
                            @endforeach
                          </tbody>
                          </table>
                        </div>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </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); }
.custom-card-header { background:#fff; border-bottom:1px solid #dee2e6; padding: 1rem 1.5rem; }
.custom-card-body { padding: 1rem 1.5rem; }
/* smaller table fonts as requested */
.table.table-sm { font-size: 0.85rem; }
.table.table-sm thead th { font-size: 0.78rem; }
/* invoice table accordion styling */
.invoice-header-row:hover { background-color: #e9ecef !important; }
.invoice-details-row { 
  border-top: none !important; 
  transition: opacity 0.3s ease;
}
.invoice-details-row td { border-top: 2px solid #dee2e6 !important; }
.accordion-icon { transition: transform 0.3s ease; }
/* checkbox column styling */
.log-checkbox, .select-all-checkbox {
  cursor: pointer;
  margin: 0;
}
.table td.text-center {
  vertical-align: middle;
}
.table th.text-center {
  vertical-align: middle;
}
/* upgrade bandwidth table styling */
[id^="upgradeBandwidthTable"] th {
  background-color: #f8f9fa;
  font-weight: 600;
  font-size: 0.875rem;
}
[id^="upgradeBandwidthTable"] td {
  vertical-align: middle;
  font-size: 0.875rem;
}
[id^="upgradeBandwidthTable"] input.form-control-sm {
  width: 100%;
}
</style>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function(){
  if (window.bootstrap) {
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el){
      new bootstrap.Tooltip(el);
    });
  }
  // Ensure Final Close modal opens even if data attributes fail
  document.querySelectorAll('.open-final-close-modal').forEach(function(btn){
    btn.addEventListener('click', function(){
      var id = this.getAttribute('data-modal-id');
      var el = document.getElementById(id);
      if (window.bootstrap && el) {
        try { new bootstrap.Modal(el).show(); } catch (e) {}
      }
    });
  });

  // enable/disable account select tied to checkbox
  document.querySelectorAll('[id^="sendToAccounts"]').forEach(function(cb){
    cb.addEventListener('change', function(){
      var suffix = this.id.replace('sendToAccounts','');
      var sel = document.getElementById('accountsUser' + suffix);
      if(sel){ sel.disabled = !this.checked; }
    });
  });

  // Handle invoice table row accordion clicks
  document.querySelectorAll('.invoice-header-row').forEach(function(row){
    row.addEventListener('click', function(e){
      // Don't trigger if clicking on interactive elements
      if (e.target.tagName === 'BUTTON' || e.target.tagName === 'A' || e.target.closest('button') || e.target.closest('a') || e.target.closest('form') || e.target.closest('input[type="checkbox"]')) {
        return;
      }
      
      // Get target and icon IDs from data attributes
      var targetId = this.getAttribute('data-target-id');
      var iconId = this.getAttribute('data-icon-id');
      
      if (!targetId || !iconId) {
        return;
      }
      
      var target = document.getElementById(targetId);
      var icon = document.getElementById(iconId);
      
      if (!target || !icon) {
        return;
      }
      
      var computedStyle = window.getComputedStyle(target);
      var isHidden = computedStyle.display === 'none' || target.style.display === 'none';
      
      if (isHidden) {
        // Show the row
        target.style.display = 'table-row';
        target.style.opacity = '0';
        target.style.transition = 'opacity 0.3s ease';
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');
        
        // Trigger a reflow to ensure the transition works
        target.offsetHeight;
        setTimeout(function() {
          target.style.opacity = '1';
        }, 10);
      } else {
        // Hide the row
        target.style.opacity = '0';
        setTimeout(function() {
          target.style.display = 'none';
          icon.classList.remove('fa-chevron-up');
          icon.classList.add('fa-chevron-down');
        }, 300);
      }
    });
  });
  
  // Prevent accordion toggle when clicking inside nested table
  document.querySelectorAll('.invoice-details-row table').forEach(function(nestedTable){
    nestedTable.addEventListener('click', function(e){
      e.stopPropagation();
    });
  });

  // Bulk assign functionality
  function updateSelectedCount(customerId) {
    var checkboxes = document.querySelectorAll('.log-checkbox[data-customer-id="' + customerId + '"]:checked');
    var count = checkboxes.length;
    var countElement = document.getElementById('selectedCount' + customerId);
    var assignBtnElement = document.getElementById('bulkAssignBtn' + customerId);
    var assignInputElement = document.getElementById('logIdsInput' + customerId);
    
    if (countElement) {
      countElement.textContent = count + ' selected';
    }
    
    // Filter checkboxes for assign (only unassigned items)
    var assignCheckboxes = Array.from(checkboxes).filter(function(cb) {
      return cb.getAttribute('data-is-final-close') === '0';
    });
    
    if (assignBtnElement) {
      assignBtnElement.disabled = assignCheckboxes.length === 0;
    }
    
    if (assignInputElement) {
      var assignIds = assignCheckboxes.map(function(cb) {
        return cb.value;
      });
      assignInputElement.value = assignIds.join(',');
    }
  }

  // Handle individual checkbox changes
  document.querySelectorAll('.log-checkbox').forEach(function(checkbox){
    checkbox.addEventListener('change', function(){
      var customerId = this.getAttribute('data-customer-id');
      updateSelectedCount(customerId);
      
      // Update select all checkbox state
      var invoiceId = this.closest('table').querySelector('.select-all-checkbox');
      if (invoiceId) {
        var allCheckboxes = invoiceId.closest('table').querySelectorAll('.log-checkbox[data-customer-id="' + customerId + '"]');
        var checkedCount = invoiceId.closest('table').querySelectorAll('.log-checkbox[data-customer-id="' + customerId + '"]:checked').length;
        invoiceId.checked = checkedCount === allCheckboxes.length && allCheckboxes.length > 0;
        invoiceId.indeterminate = checkedCount > 0 && checkedCount < allCheckboxes.length;
      }
    });
  });

  // Handle select all checkbox
  document.querySelectorAll('.select-all-checkbox').forEach(function(selectAll){
    selectAll.addEventListener('change', function(){
      var customerId = this.getAttribute('data-customer-id');
      var table = this.closest('table');
      var checkboxes = table.querySelectorAll('.log-checkbox[data-customer-id="' + customerId + '"]');
      
      checkboxes.forEach(function(cb){
        cb.checked = selectAll.checked;
      });
      
      updateSelectedCount(customerId);
    });
  });

  // Initialize counts on page load
  document.querySelectorAll('[id^="selectedCount"]').forEach(function(element){
    var customerId = element.id.replace('selectedCount', '');
    updateSelectedCount(customerId);
  });
});
</script>
@endpush