@extends('layouts.app')

@section('title', 'Close Assigned Bandwidth Tickets')
@section('page-title', 'Close Assigned Bandwidth Tickets')

@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 Tickets Ready for Close</h5>
            <p class="text-muted mb-0">There are no closed tickets waiting for closure.</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 open tickets: {{ $logs->count() }}</small>
            </div>
            <a href="{{ route('bandwidth-logs.approved-company-wise.index') }}" class="btn btn-secondary btn-sm">Approved Company-wise</a>
          </div>
          <div class="custom-card-body">
            <!-- Bulk 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="bulkCloseBtn{{ $customerId }}" disabled data-bs-toggle="modal" data-bs-target="#bulkCloseModal{{ $customerId }}">
                  <i class="fas fa-door-closed me-1"></i> Close Selected Tickets
                </button>
                <span class="ms-2 text-muted small" id="selectedCount{{ $customerId }}">0 selected</span>
              </div>
            </div>
            
            <!-- Bulk Close Modal -->
            <div class="modal fade" id="bulkCloseModal{{ $customerId }}" tabindex="-1" aria-hidden="true">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <form method="POST" action="{{ route('bandwidth-logs.bulk-close') }}" id="bulkCloseForm{{ $customerId }}">
                    @csrf
                    <input type="hidden" name="log_ids" id="bulkLogIdsInput{{ $customerId }}" value="">
                    <div class="modal-header">
                      <h5 class="modal-title"><i class="fas fa-door-closed me-2"></i>Close Selected Tickets</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                      <div class="mb-3">
                        <label class="form-label">Note <span class="text-danger">*</span></label>
                        <textarea name="note" class="form-control" rows="3" required placeholder="Add closing note for all selected tickets..."></textarea>
                      </div>
                      <div class="mb-3">
                        <label class="form-label fw-bold">Selected Tickets - Used Bandwidth (Mbps) (Max)<span class="text-danger">*</span></label>
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                          <table class="table table-bordered table-sm mb-0" id="ticketsTable{{ $customerId }}">
                            <thead class="table-light">
                              <tr>
                                <th>Item Name</th>
                                <th>Existing Bandwidth</th>
                                <th>Approved Bandwidth</th>
                                <th>Max Useages</th>
                              </tr>
                            </thead>
                            <tbody id="ticketsList{{ $customerId }}">
                              <!-- Tickets will be populated here by JavaScript -->
                            </tbody>
                          </table>
                        </div>
                      </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">Close Selected Tickets</button>
                    </div>
                  </form>
                </div>
              </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;">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 = $firstLog->salesInvoiceItem && $firstLog->salesInvoiceItem->salesInvoice 
                        ? $firstLog->salesInvoiceItem->salesInvoice 
                        : null;
                      $invoiceNumber = $invoice 
                        ? ($invoice->invoice_number ?? $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="6" 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>Requested</th>
                              <th>Approved Qty</th>
                              <th>Assigned By</th>
                              <th>Assigned At</th>
                              <th>Actions</th>
                            </tr>
                          </thead>
                          <tbody>
                            @foreach($invoiceLogs as $log)
                              @php
                                $existingBandwidth = null;
                                $sii = $log->salesInvoiceItem;
                                if ($sii) {
                                    $unit = strtolower($sii->unit ?? '');
                                    $qty = $sii->quantity ?? null;
                                    if ($qty && ($unit === 'mbps' || str_contains($unit, 'mbps'))) {
                                        $existingBandwidth = (float)$qty;
                                    }
                                }
                              @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-item-name="{{ optional($log->salesInvoiceItem)->item_name ?? 'N/A' }}"
                               data-existing-bandwidth="{{ $existingBandwidth ?? '' }}"
                               data-approved-bandwidth="{{ $log->approved_bandwidth_mbps ?? '' }}"
                               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>{{ $log->download_speed_mbps ? number_format($log->download_speed_mbps, 2) . ' Mbps' : '-' }}</td>
                      <td>{{ $log->approved_bandwidth_mbps !== null ? number_format($log->approved_bandwidth_mbps, 2) . ' Mbps' : '-' }}</td>
                      <td>{{ optional($log->assignee)->name ?? '-' }}</td>
                      <td>{{ optional($log->assigned_at)->format('M d, Y H:i') ?? '-' }}</td>
                      <td>
                        <button class="btn btn-sm btn-danger open-close-modal" data-bs-toggle="modal" data-bs-target="#closeModal{{ $log->id }}" data-modal-id="closeModal{{ $log->id }}">
                          <i class="fas fa-door-closed me-1"></i> Close Ticket
                        </button>
                        <div class="modal fade" id="closeModal{{ $log->id }}" tabindex="-1" aria-hidden="true">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <form method="POST" action="{{ route('bandwidth-logs.close', $log) }}">
                                @csrf
                                <div class="modal-header">
                                  <h5 class="modal-title"><i class="fas fa-door-closed me-2"></i>Close Ticket #{{ $log->id }}</h5>
                                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                  <div class="mb-3">
                                    <label class="form-label">Used Bandwidth (Mbps) <span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" min="0" name="used_bandwidth_mbps" class="form-control" required>
                                  </div>
                                  <div class="mb-3">
                                    <label class="form-label">Note <span class="text-danger">*</span></label>
                                    <textarea name="note" class="form-control" rows="3" required placeholder="Add closing note..."></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">Close Ticket</button>
                                </div>
                              </form>
                            </div>
                          </div>
                        </div>
                      </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;
}
/* Modal table styling */
[id^="ticketsTable"] th {
  background-color: #f8f9fa;
  font-weight: 600;
  font-size: 0.875rem;
}
[id^="ticketsTable"] td {
  vertical-align: middle;
  font-size: 0.875rem;
}
[id^="ticketsTable"] input.form-control-sm {
  width: 100%;
}
</style>
@endsection

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

  // 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 close 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 btnElement = document.getElementById('bulkCloseBtn' + customerId);
    var inputElement = document.getElementById('bulkLogIdsInput' + customerId);
    
    if (countElement) {
      countElement.textContent = count + ' selected';
    }
    
    if (btnElement) {
      btnElement.disabled = count === 0;
    }
    
    if (inputElement) {
      var ids = Array.from(checkboxes).map(function(cb) {
        return cb.value;
      });
      inputElement.value = ids.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);
    });
  });

  // Ensure bulk close modal opens reliably and populate tickets
  document.querySelectorAll('[id^="bulkCloseBtn"]').forEach(function(btn){
    btn.addEventListener('click', function(e){
      if (this.disabled) {
        e.preventDefault();
        return false;
      }
      
      var customerId = this.id.replace('bulkCloseBtn', '');
      var targetId = this.getAttribute('data-bs-target');
      var modalEl = document.getElementById(targetId.replace('#', ''));
      
      if (window.bootstrap && modalEl) {
        try {
          // Populate tickets list before opening modal
          populateTicketsList(customerId);
          var modal = new bootstrap.Modal(modalEl);
          modal.show();
        } catch (err) {
          console.error('Error opening modal:', err);
        }
      }
    });
  });
  
  // Ensure modal close buttons work reliably
  document.querySelectorAll('[id^="bulkCloseModal"]').forEach(function(modal){
    var modalId = modal.id;
    
    // Close button in header
    var closeBtn = modal.querySelector('.btn-close');
    if (closeBtn) {
      closeBtn.addEventListener('click', function(e){
        e.preventDefault();
        e.stopPropagation();
        if (window.bootstrap && bootstrap.Modal) {
          var bsModal = bootstrap.Modal.getInstance(modal);
          if (bsModal) {
            bsModal.hide();
          } else {
            // Fallback: manually close modal
            modal.classList.remove('show');
            modal.setAttribute('aria-hidden', 'true');
            modal.style.display = 'none';
            document.body.classList.remove('modal-open');
            document.body.style.overflow = '';
            document.body.style.paddingRight = '';
            var backdrop = document.querySelector('.modal-backdrop');
            if (backdrop) {
              backdrop.remove();
            }
          }
        } else {
          // Fallback without Bootstrap
          modal.classList.remove('show');
          modal.style.display = 'none';
          document.body.classList.remove('modal-open');
          var backdrop = document.querySelector('.modal-backdrop');
          if (backdrop) backdrop.remove();
        }
      });
    }
    
    // Cancel button in footer
    var cancelBtn = modal.querySelector('.btn-secondary[data-bs-dismiss="modal"]');
    if (cancelBtn) {
      cancelBtn.addEventListener('click', function(e){
        e.preventDefault();
        e.stopPropagation();
        if (window.bootstrap && bootstrap.Modal) {
          var bsModal = bootstrap.Modal.getInstance(modal);
          if (bsModal) {
            bsModal.hide();
          } else {
            // Fallback: manually close modal
            modal.classList.remove('show');
            modal.setAttribute('aria-hidden', 'true');
            modal.style.display = 'none';
            document.body.classList.remove('modal-open');
            document.body.style.overflow = '';
            document.body.style.paddingRight = '';
            var backdrop = document.querySelector('.modal-backdrop');
            if (backdrop) {
              backdrop.remove();
            }
          }
        } else {
          // Fallback without Bootstrap
          modal.classList.remove('show');
          modal.style.display = 'none';
          document.body.classList.remove('modal-open');
          var backdrop = document.querySelector('.modal-backdrop');
          if (backdrop) backdrop.remove();
        }
      });
    }
  });
  
  // Function to populate tickets list in modal
  function populateTicketsList(customerId) {
    var checkboxes = document.querySelectorAll('.log-checkbox[data-customer-id="' + customerId + '"]:checked');
    var ticketsList = document.getElementById('ticketsList' + customerId);
    var logIdsInput = document.getElementById('bulkLogIdsInput' + customerId);
    
    if (!ticketsList) return;
    
    ticketsList.innerHTML = '';
    var logIds = [];
    
    if (checkboxes.length === 0) {
      ticketsList.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-3">No tickets selected.</td></tr>';
      return;
    }
    
    checkboxes.forEach(function(checkbox, index) {
      var logId = checkbox.value;
      var itemName = checkbox.getAttribute('data-item-name');
      var existingBandwidth = checkbox.getAttribute('data-existing-bandwidth');
      var approvedBandwidth = checkbox.getAttribute('data-approved-bandwidth');
      
      logIds.push(logId);
      
      var row = document.createElement('tr');
      row.innerHTML = `
        <td><strong>${itemName}</strong></td>
        <td>${existingBandwidth ? parseFloat(existingBandwidth).toFixed(2) : '-'}</td>
        <td>${approvedBandwidth ? parseFloat(approvedBandwidth).toFixed(2) : '-'}</td>
        <td>
          <input type="number" 
                 step="0.01" 
                 min="0" 
                 name="used_bandwidth[${logId}]" 
                 class="form-control form-control-sm" 
                 placeholder="Used Bandwidth (Mbps)"
                 required>
        </td>
      `;
      
      ticketsList.appendChild(row);
    });
    
    if (logIdsInput) {
      logIdsInput.value = logIds.join(',');
    }
  }

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