@extends('layouts.app')

@section('title', 'Bandwidth Upgrade Requests')
@section('page-title', 'Bandwidth Upgrade Requests')

@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

  <!-- Summary Header -->
  <div class="row mb-3">
    <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-arrow-up me-1"></i>Bandwidth Upgrade Requests</h6>
              <small class="text-muted" style="font-size: 0.7rem;">Invoices with bandwidth upgrade requests</small>
            </div>
            <div class="text-end">
              <h5 class="mb-0 text-primary" style="font-size: 1.35rem;">{{ $totalUpgradeRequests ?? 0 }}</h5>
              <small class="text-muted" style="font-size: 0.7rem;">Total Requests</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      @if(($invoiceGroups ?? 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 Bandwidth Upgrade Requests</h5>
            <p class="text-muted mb-0">There are no bandwidth upgrade requests in the system.</p>
          </div>
        </div>
      @else
        <div class="custom-card">
          <div class="custom-card-body p-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"></th>
                    <th>Invoice</th>
                    <th>Invoice Date</th>
                    <th>Customer</th>
                    <th>Total Items</th>
                    <th>Action</th>
                    <th style="width: 50px;" class="text-center"></th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($invoiceGroups as $invoiceId => $logs)
                    @php
                      $firstLog = $logs->first();
                      $invoice = $firstLog->salesInvoice ?? $firstLog->salesInvoiceItem->salesInvoice ?? null;
                      $customer = $firstLog->customer ?? ($invoice ? $invoice->customer : null);
                      $uniqueId = 'invoice-' . $invoiceId;
                      $invoiceNumber = $invoice ? ($invoice->invoice_no ?? 'N/A') : 'No Invoice';
                      $invoiceDate = $invoice && $invoice->invoice_date ? $invoice->invoice_date->format('M d, Y') : '';
                    @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>
                        @if($customer)
                          <strong>{{ $customer->company_name ?? $customer->name ?? 'N/A' }}</strong>
                          @if($customer->email)
                            <br><small class="text-muted">{{ $customer->email }}</small>
                          @endif
                        @else
                          <span class="text-muted">N/A</span>
                        @endif
                      </td>
                      <td>
                        <span class="badge bg-info">{{ $logs->count() }} item(s)</span>
                      </td>
                      <td>
                        <a href="{{ route('reseller.sales-invoices.edit-sales', $invoiceId) }}" class="btn btn-sm btn-primary create-invoice-btn disabled" data-invoice-id="{{ $invoiceId }}" data-invoice-number="{{ $invoiceNumber }}" style="pointer-events: none; opacity: 0.6;" onclick="return checkInvoiceCheckbox(event, '{{ $invoiceId }}');">
                          <i class="fas fa-plus-circle me-1"></i>Upgrade Invoice
                        </a>
                      </td>
                      <td class="text-center">
                        <input type="checkbox" class="form-check-input invoice-checkbox" id="invoice-checkbox-{{ $invoiceId }}" value="{{ $invoiceId }}">
                      </td>
                    </tr>
                    <tr class="invoice-details-row" id="collapse{{ $uniqueId }}" style="display: none;">
                      <td colspan="7" class="p-0">
                        <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>Upgrade Bandwidth (Mbps)</th>
                                <th>Log Date</th>
                                <th>Status</th>
                                <th>Approval Status</th>
                                <th>Actions</th>
                              </tr>
                            </thead>
                            <tbody>
                              @foreach($logs as $log)
                                @php
                                  $sii = $log->salesInvoiceItem;
                                  $prevBandwidth = null;
                                  if ($sii) {
                                    $unit = strtolower($sii->unit ?? '');
                                    $qty = $sii->quantity ?? null;
                                    if ($qty && ($unit === 'mbps' || str_contains($unit, 'mbps'))) {
                                      $prevBandwidth = (float)$qty;
                                    }
                                  }
                                  $requestedBandwidth = $log->download_speed_mbps ?? 0;
                                @endphp
                                <tr>
                                  <td><span class="badge bg-primary">{{ $log->id }}</span></td>
                                  <td>
                                    <strong>{{ optional($log->salesInvoiceItem)->item_name ?? 'N/A' }}</strong>
                                  </td>
                                  <td>
                                    @if($prevBandwidth !== null)
                                      <strong>{{ number_format($prevBandwidth, 2) }} Mbps</strong>
                                    @else
                                      <span class="text-muted">N/A</span>
                                    @endif
                                  </td>
                                  <td>
                                    @if($requestedBandwidth)
                                      <strong>{{ number_format($requestedBandwidth, 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->upgrade_bandwidth_mbps))
                                      <strong class="text-success">{{ number_format($log->upgrade_bandwidth_mbps, 2) }} Mbps</strong>
                                    @else
                                      <span class="text-muted">-</span>
                                    @endif
                                  </td>
                                  <td>{{ optional($log->log_date)->format('M d, Y') ?? '-' }}</td>
                                  <td>
                                    <span class="badge bg-{{ $log->status === 'active' ? 'success' : ($log->status === 'inactive' ? 'danger' : 'warning') }}">
                                      {{ ucfirst($log->status) }}
                                    </span>
                                  </td>
                                  <td>
                                    @if($log->approval_status === 'approved')
                                      <span class="badge bg-success">Approved</span>
                                    @elseif($log->approval_status === 'rejected')
                                      <span class="badge bg-danger">Rejected</span>
                                    @else
                                      <span class="badge bg-warning">Pending</span>
                                    @endif
                                  </td>
                                  <td>
                                    <a href="{{ route('bandwidth-logs.show', $log->id) }}" class="btn btn-sm btn-info" title="View Details">
                                      <i class="fas fa-eye"></i>
                                    </a>
                                  </td>
                                </tr>
                              @endforeach
                            </tbody>
                          </table>
                        </div>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      @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; }
.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; }
.collapse-content { padding: 0.5rem; }
</style>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Accordion functionality for invoice rows
  document.querySelectorAll('.invoice-header-row').forEach(function(headerRow) {
    headerRow.addEventListener('click', function(e) {
      // Don't toggle if clicking on a link, button, checkbox, or their containers
      if (e.target.tagName === 'A' || e.target.tagName === 'BUTTON' || e.target.tagName === 'INPUT' || 
          e.target.closest('a') || e.target.closest('button') || e.target.closest('.d-flex')) {
        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 && icon) {
        const isCurrentlyVisible = detailsRow.style.display !== 'none';
        
        if (isCurrentlyVisible) {
          // Close
          detailsRow.style.display = 'none';
          detailsRow.style.opacity = '0';
          icon.style.transform = 'rotate(0deg)';
        } else {
          // Open
          detailsRow.style.display = 'table-row';
          detailsRow.style.opacity = '1';
          icon.style.transform = 'rotate(180deg)';
        }
      }
    });
  });

  // Checkbox functionality for Upgrade Invoice button
  document.querySelectorAll('.invoice-checkbox').forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
      const invoiceId = this.value;
      const link = document.querySelector(`.create-invoice-btn[data-invoice-id="${invoiceId}"]`);
      if (link) {
        if (this.checked) {
          link.classList.remove('disabled');
          link.style.pointerEvents = 'auto';
          link.style.opacity = '1';
        } else {
          link.classList.add('disabled');
          link.style.pointerEvents = 'none';
          link.style.opacity = '0.6';
        }
      }
    });
  });

  // Checkbox functionality to enable/disable Upgrade Invoice button
  function checkInvoiceCheckbox(event, invoiceId) {
    const checkbox = document.getElementById('invoice-checkbox-' + invoiceId);
    if (!checkbox || !checkbox.checked) {
      event.preventDefault();
      event.stopPropagation();
      alert('Please check the checkbox first to proceed with upgrading the invoice.');
      return false;
    }
    return true;
  }
});
</script>
@endsection