Kent-logistics-Laravel/resources/views/admin/invoice.blade.php

@extends('admin.layouts.app')

@section('page-title', 'Invoice List')

@section('content')
<style>
    /*Remove horizontal scroll bar*/
  html, body {
    overflow-x: hidden !important;
}

/* Invoice Management Styles */
.invoice-management-box {
  background: #fff; 
  border-radius: 17px; 
  box-shadow: 0 7px 38px #dde3fa77, 0 2px 9px #e5e7ff80;
  margin-bottom: 33px; 
  margin-top: 10px; 
}

.invoice-management-bar {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  border-radius: 17px 17px 0 0; 
  background: #fceeb8ff;
  min-height: 54px; 
  padding: 15px 26px 10px 22px; 
  border-bottom: 1.4px solid #e8e2cf;
  box-shadow: 0 1px 13px #ffe2a888;
}

.invoice-management-title {
  font-size: 1.32rem; 
  font-weight: 800; 
  color: #2451af; 
  letter-spacing: .08em;
  display: flex; 
  align-items: center; 
  gap: 11px;
}

.invoice-management-title i { 
  font-size: 1.12em; 
  color: #336ad3; 
}

/* Tools Row Styling */
.invoice-tools-row {
  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
  padding: 20px 25px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.search-box {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 10px;
  padding: 8px 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border: 1px solid #e2e8f0;
  min-width: 300px;
  flex: 1;
  max-width: 400px;
}

.search-box i {
  color: #64748b;
  margin-right: 10px;
  font-size: 1.1rem;
}

.search-box input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
  color: #334155;
}

.search-box input::placeholder {
  color: #94a3b8;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-select {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #334155;
  outline: none;
  min-width: 150px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

.filter-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.create-invoice-btn {
  background: linear-gradient(90deg, #226ad6, #46b4fd 123%);
  padding: 10px 24px; 
  font-weight: 600; 
  border: none; 
  border-radius: 9px; 
  color: #fff;
  font-size: 14px; 
  box-shadow: 0 2px 13px #dde7fa42;
  transition: all 0.3s ease;
  display: flex; 
  align-items: center; 
  gap: 8px; 
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.create-invoice-btn:hover {
  background: linear-gradient(90deg, #3264f8, #3acfff 140%);
  box-shadow: 0 4px 25px #5ab8f880;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

.invoice-management-main { 
  background: #fff; 
  border-radius: 0 0 17px 17px; 
  padding: 0;
}

/* Table Styling - CENTERED CONTENT */
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  border-radius: 0 0 17px 17px;
}

.table-container::-webkit-scrollbar {
  height: 6px;
}
.table-container::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #a7b8ff, #6c8eff);
  border-radius: 10px;
}
.table-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #5a78ff, #3f63e0);
}
.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.table {
  width: 100%;
  min-width: 1100px;
  border-collapse: separate;
  border-spacing: 0 8px; /* Add gap between rows */
  margin-bottom: 0;
}

/* Center all table content */
.table thead tr {
  background: #feebbe !important;
}

.table thead th:first-child {
    border-top-left-radius: 17px;
}
.table thead th:last-child {
    border-top-right-radius: 17px;
}

.table thead th {
  background: transparent !important;
  border: none;
  font-weight: 700; 
  color: #343535; 
  letter-spacing: 0.02em; 
  font-size: 13px;
  padding: 16px 12px;
  white-space: nowrap;
  position: relative;
  border-bottom: 2px solid #e8e2cf;
  text-align: center !important; /* Center header text */
  vertical-align: middle;
}

.table thead th:first-child { 
  padding-left: 25px;
}
.table thead th:last-child { 
  padding-right: 25px;
}

/* Soft blue background for ALL table rows */
.table-striped tbody tr {
  background: #f0f8ff !important; /* Soft blue background for all rows */
  transition: all 0.2s ease;
  border-radius: 12px; /* Rounded corners for each row */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for separation */
}

.table-striped tbody tr:hover {
  background: #e6f3ff !important; /* Slightly darker blue on hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover */
  transform: translateY(-1px); /* Lift effect on hover */
}

/* Remove striped pattern - all rows same soft blue */
.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(even) { 
  background: #f0f8ff !important; /* Same soft blue for all rows */
}

/* Center all table cells with proper spacing */
.table td {
  padding: 16px 12px; /* Increased vertical padding */
  border: none;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 13px;
  color: #4a5568;
  text-align: center !important; /* Center all cell content */
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

/* First and last cell rounded corners */
.table td:first-child {
  padding-left: 25px;
  font-weight: 600;
  color: #2d3748;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.table td:last-child {
  padding-right: 25px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Invoice Number with Curved Boxes */
.invoice-number-cell {
  display: flex;
  align-items: center;
  justify-content: center; /* Center the invoice number */
  gap: 12px;
  padding: 8px 0;
}

.invoice-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px; /* Curved border radius */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  font-weight: bold;
  border: 2px solid rgba(255,255,255,0.3); /* Subtle border */
}

/* Different curved background colors for each invoice */
.invoice-icon-1 { 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
  border-radius: 8px;
}
.invoice-icon-2 { 
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
  border-radius: 8px;
}
.invoice-icon-3 { 
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); 
  border-radius: 8px;
}
.invoice-icon-4 { 
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); 
  border-radius: 8px;
}
.invoice-icon-5 { 
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); 
  border-radius: 8px;
}
.invoice-icon-6 { 
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); 
  border-radius: 8px;
}
.invoice-icon-7 { 
  background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%); 
  border-radius: 8px;
}
.invoice-icon-8 { 
  background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); 
  border-radius: 8px;
}

.invoice-number-link {
  color: #2469d6;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 13px;
  text-align: center;
}

.invoice-number-link:hover {
  color: #1a4fb3;
  text-decoration: none;
}

/* Badge Styling - Centered with custom backgrounds and icons */
.badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 6px 12px 6px 8px !important;
  border-radius: 20px !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-size: cover !important;
  background-position: center !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  border: 2px solid transparent !important;
  min-width: 40px;
  box-sizing: border-box;
  line-height: 1.2;
  gap: 6px;
}

/* Status icons */
.status-icon {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom status badge backgrounds with icons */
.badge-paid { 
  background: url('/images/status-bg-paid.png') !important;
}

.badge-pending { 
  background: url('/images/status-bg-pending.png') !important;
}

.badge-overdue { 
  background: url('/images/status-bg-overdue.png') !important;
}

/* Fallback colors if images don't load - ALL WITH SAME SIZE */
.badge.badge-paid { 
  background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
  color: #065f46 !important;
  border-color: #10b981 !important;
  width: 98px;
}

.badge.badge-pending { 
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  color: #d97706 !important;
  border-color: #f59e0b !important;
}

.badge.badge-overdue { 
  background: linear-gradient(135deg, #e9d5ff, #c4b5fd) !important;
  color: #6b21a8 !important;
  border-color: #8b5cf6 !important;
}

/* Action Button - Centered */
.btn-primary {
  background: linear-gradient(135deg, #3492f8 55%, #1256cc 110%);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 4px rgba(52, 146, 248, 0.3);
  color: white;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #46b4fd 55%, #226ad6 110%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(52, 146, 248, 0.4);
  color: white;
}

/* Amount Styling - Centered */
.amount-cell {
  font-weight: 600;
  color: #194073;
  font-size: 13px;
  text-align: center !important;
}

.gst-cell {
  font-weight: 500;
  color: #63709b;
  font-size: 13px;
  text-align: center !important;
}

/* Date Styling - Centered */
.date-cell {
  font-size: 12.5px;
  color: #718096;
  font-weight: 500;
  text-align: center !important;
}

/* Customer Name Styling - Centered */
.customer-cell {
  font-weight: 500;
  color: #2d3748;
  font-size: 13px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center !important;
  margin: 0 auto;
}

/* Modal Styling */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

.modal.show .modal-dialog {
  transform: none;
}

.modal-content {
  border: none;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
  padding: 15px 25px;
  border-radius: 20px 20px 0 0;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin: 0;
}

.modal-header .btn-close {
  filter: invert(1);
  opacity: 0.8;
  transition: all 0.3s ease;
}

.modal-header .btn-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.modal-body {
  padding: 30px;
  background: #f8fafc;
  max-height: 70vh;
  overflow-y: auto;
}

/* Date Range Picker Styles */
.date-range-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-input {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #334155;
  outline: none;
  min-width: 130px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

.date-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-separator {
  color: #64748b;
  font-weight: 500;
}

/* Stats Summary - Centered */
.stats-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 20px 25px;
  padding: 0;
}

.stat-card {
  background: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  text-align: center;
  border-left: 3px solid #667eea;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 3px;
  text-align: center;
}

.stat-label {
  font-size: 0.85rem;
  color: #718096;
  font-weight: 600;
  text-align: center;
}

/* Column Headers - Centered */
.column-header {
  text-align: center !important;
  font-weight: 600;
  color: #2d3748;
}

/* Remove extra spacing */
.no-extra-space {
  margin: 0;
  padding: 0;
}

.compact-view {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure all content in table is centered */
.table tbody tr td {
  text-align: center !important;
}

.table tbody tr td .invoice-number-cell {
  justify-content: center;
}

.table tbody tr td .btn-primary {
  margin: 0 auto;
}

/* Empty State - Centered */
.text-muted {
  color: #8a9bb9 !important;
  font-style: italic;
  padding: 30px !important;
  text-align: center;
  font-size: 14px;
}

/* Card Styling */
.card {
  border-radius: 0 0 17px 17px; 
  border: none; 
  margin-bottom: 0 !important;
  box-shadow: none;
}

.card-header {
  background: #f8f9fa !important;
  border-bottom: 1px solid #e9ecef;
  border-radius: 0 !important;
  padding: 15px 25px;
  text-align: center;
}

.card-header h4 {
  margin: 0;
  color: #2451af;
  font-weight: 700;
  font-size: 1.3rem;
  text-align: center;
}

/* Mobile Responsive Styles */
.mobile-invoice-card {
  display: none;
  background: #f0f8ff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #667eea;
}

.mobile-invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.mobile-invoice-number {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-invoice-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.mobile-invoice-number-text {
  font-weight: 600;
  color: #2469d6;
  font-size: 14px;
}

.mobile-invoice-status {
  font-size: 10px !important;
  padding: 4px 8px 4px 6px !important;
  min-width: 70px;
}

.mobile-invoice-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.mobile-detail-item {
  display: flex;
  flex-direction: column;
}

.mobile-detail-label {
  font-size: 11px;
  color: #718096;
  margin-bottom: 2px;
}

.mobile-detail-value {
  font-size: 13px;
  font-weight: 500;
  color: #2d3748;
}

.mobile-invoice-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.mobile-action-btn {
  flex: 1;
  text-align: center;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.mobile-action-btn.view {
  background: #f0f8ff;
  color: #2469d6;
  border: 1px solid #2469d6;
}

.mobile-action-btn.edit {
  background: linear-gradient(135deg, #3492f8 55%, #1256cc 110%);
  color: white;
  border: none;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .invoice-tools-row {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .search-box {
    max-width: 100%;
    min-width: auto;
  }
  
  .filter-group {
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 992px) {
  .stats-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .invoice-management-bar {
    padding: 12px 20px;
  }
  
  .invoice-tools-row {
    padding: 15px;
  }
  
  .table th, .table td {
    font-size: 12px;
    padding: 12px 8px;
  }
  
  .badge {
    font-size: 10px !important;
    padding: 5px 10px 5px 6px !important;
    min-width: 70px;
    gap: 4px;
  }
  
  .status-icon {
    font-size: 10px;
  }
  
  .btn-primary {
    padding: 4px 8px;
    font-size: 11px;
  }
  
  .filter-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-select {
    min-width: auto;
    width: 100%;
  }
  
  .create-invoice-btn {
    width: 100%;
    justify-content: center;
  }
  
  .invoice-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  /* Show mobile cards and hide table on small screens */
  .desktop-table {
    display: none;
  }
  
  .mobile-invoice-card {
    display: block;
  }
  
  .date-range-container {
    flex-direction: column;
    width: 100%;
  }
  
  .date-input {
    width: 100%;
  }
  
  .stats-summary {
    grid-template-columns: 1fr;
    margin: 15px;
  }
}

@media (max-width: 576px) {
  .invoice-management-title {
    font-size: 1.1rem;
  }
  
  .card-header h4 {
    font-size: 1.1rem;
  }
  
  .mobile-invoice-details {
    grid-template-columns: 1fr;
  }
  
  .mobile-invoice-actions {
    flex-direction: column;
  }
}
</style>

<div class="container-fluid py-3">
  <!-- INVOICE MANAGEMENT -->
  <div class="invoice-management-box">
    <div class="invoice-management-bar">
      <span class="invoice-management-title">
        <i class="bi bi-receipt"></i> Invoice Management
      </span>
    </div>

    <!-- TOOLS ROW - Search, Filter, Create Button -->
    <div class="invoice-tools-row">
      <!-- Search Box -->
      <div class="search-box">
        <i class="bi bi-search"></i>
        <input type="text" id="invoiceSearch" placeholder="Search by invoice number, customer name...">
      </div>

      <!-- Filter Group -->
      <div class="filter-group">
        <select class="filter-select" id="statusFilter">
          <option value="">All Status</option>
          <option value="paid">Paid</option>
          <option value="pending">Pending</option>
          <option value="overdue">Overdue</option>
        </select>

        <!-- Date Range Picker -->
        <div class="date-range-container">
          <input type="date" class="date-input" id="startDate">
          <span class="date-separator">to</span>
          <input type="date" class="date-input" id="endDate">
        </div>
      </div>

      <!-- Create Invoice Button -->
      <a href="{{ route('admin.invoices.create') }}" class="create-invoice-btn">
        <i class="bi bi-plus-circle"></i> Create Invoice
      </a>
    </div>

    <div class="invoice-management-main no-extra-space">
      <!-- Quick Stats Summary -->
      <div class="stats-summary">
        <div class="stat-card">
          <div class="stat-value">{{ $invoices->count() }}</div>
          <div class="stat-label">Total Invoices</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">₹{{ number_format($invoices->sum('final_amount_with_gst'), 2) }}</div>
          <div class="stat-label">Total Revenue</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ $invoices->where('status', 'paid')->count() }}</div>
          <div class="stat-label">Paid Invoices</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ $invoices->where('status', 'pending')->count() }}</div>
          <div class="stat-label">Pending Invoices</div>
        </div>
      </div>

      <!-- ALL INVOICES - Desktop Table -->
      <div class="card shadow-sm desktop-table">
        <div class="card-header bg-light d-flex justify-content-between align-items-center compact-view">
          <h4 class="mb-0">All Invoices</h4>
          <span class="text-muted" style="font-size: 12px;">
            {{ $invoices->count() }} invoices
          </span>
        </div>
        
        <div class="card-body p-0">
          <div class="table-container">
            <table class="table table-striped align-middle" id="invoicesTable">
              <thead class="table-light">
                <tr>
                  <th class="column-header">#</th>
                  <th class="column-header">Invoice Number</th>
                  <th class="column-header">Customer</th>
                  <th class="column-header">Final Amount</th>
                  <th class="column-header">GST %</th>
                  <th class="column-header">Total w/GST</th>
                  <th class="column-header">Status</th>
                  <th class="column-header">Invoice Date</th>
                  <th class="column-header">Due Date</th>
                  <th class="column-header">Action</th>
                </tr>
              </thead>

              <tbody>
                @php
                    $totalInvoices = $invoices->count();
                    $sortedInvoices = $invoices->sortByDesc('created_at'); // Latest first
                @endphp
                
                @forelse($sortedInvoices as $i => $invoice)
                <tr>
                  <td>{{ $totalInvoices - $i }}</td>

                  <td>
                    <div class="invoice-number-cell">
                      <div class="invoice-icon invoice-icon-{{ (($totalInvoices - $i) % 8) + 1 }}">
                        <i class="bi bi-file-earmark-text"></i>
                      </div>
                      <a href="#" class="invoice-number-link open-invoice-popup" data-id="{{ $invoice->id }}">
                        {{ $invoice->invoice_number }}
                      </a>
                    </div>
                  </td>

                  <td class="customer-cell">{{ $invoice->customer_name }}</td>

                  <td class="amount-cell">₹{{ number_format($invoice->final_amount, 2) }}</td>
                  <td class="gst-cell">{{ $invoice->gst_percent }}%</td>
                  <td class="amount-cell">₹{{ number_format($invoice->final_amount_with_gst, 2) }}</td>

                  <td>
                    <span class="badge badge-{{ $invoice->status }}">
                      @if($invoice->status == 'paid')
                        <i class="bi bi-check-circle-fill status-icon"></i>
                      @elseif($invoice->status == 'pending')
                        <i class="bi bi-clock-fill status-icon"></i>
                      @elseif($invoice->status == 'overdue')
                        <i class="bi bi-exclamation-triangle-fill status-icon"></i>
                      @endif
                      {{ ucfirst($invoice->status) }}
                    </span>
                  </td>

                  <td class="date-cell">{{ $invoice->invoice_date }}</td>
                  <td class="date-cell">{{ $invoice->due_date }}</td>

                  <td>
                    <a href="{{ route('admin.invoices.edit', $invoice->id) }}" 
                       class="btn btn-sm btn-primary">
                      <i class="bi bi-pencil"></i> Edit
                    </a>
                  </td>
                </tr>
                @empty
                <tr>
                  <td colspan="10" class="text-muted">No invoices found</td>
                </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- ALL INVOICES - Mobile Cards -->
      <div class="mobile-invoices-container">
        @php
            $totalInvoices = $invoices->count();
            $sortedInvoices = $invoices->sortByDesc('created_at'); // Latest first
        @endphp
        
        @forelse($sortedInvoices as $i => $invoice)
        <div class="mobile-invoice-card" data-invoice-id="{{ $invoice->id }}">
          <div class="mobile-invoice-header">
            <div class="mobile-invoice-number">
              <div class="mobile-invoice-icon invoice-icon-{{ (($totalInvoices - $i) % 8) + 1 }}">
                <i class="bi bi-file-earmark-text"></i>
              </div>
              <span class="mobile-invoice-number-text">{{ $invoice->invoice_number }}</span>
            </div>
            <span class="badge badge-{{ $invoice->status }} mobile-invoice-status">
              @if($invoice->status == 'paid')
                <i class="bi bi-check-circle-fill status-icon"></i>
              @elseif($invoice->status == 'pending')
                <i class="bi bi-clock-fill status-icon"></i>
              @elseif($invoice->status == 'overdue')
                <i class="bi bi-exclamation-triangle-fill status-icon"></i>
              @endif
              {{ ucfirst($invoice->status) }}
            </span>
          </div>
          
          <div class="mobile-invoice-details">
            <div class="mobile-detail-item">
              <span class="mobile-detail-label">Customer</span>
              <span class="mobile-detail-value">{{ $invoice->customer_name }}</span>
            </div>
            <div class="mobile-detail-item">
              <span class="mobile-detail-label">Amount</span>
              <span class="mobile-detail-value">₹{{ number_format($invoice->final_amount, 2) }}</span>
            </div>
            <div class="mobile-detail-item">
              <span class="mobile-detail-label">GST</span>
              <span class="mobile-detail-value">{{ $invoice->gst_percent }}%</span>
            </div>
            <div class="mobile-detail-item">
              <span class="mobile-detail-label">Total</span>
              <span class="mobile-detail-value">₹{{ number_format($invoice->final_amount_with_gst, 2) }}</span>
            </div>
            <div class="mobile-detail-item">
              <span class="mobile-detail-label">Invoice Date</span>
              <span class="mobile-detail-value">{{ $invoice->invoice_date }}</span>
            </div>
            <div class="mobile-detail-item">
              <span class="mobile-detail-label">Due Date</span>
              <span class="mobile-detail-value">{{ $invoice->due_date }}</span>
            </div>
          </div>
          
          <div class="mobile-invoice-actions">
            <a href="#" class="mobile-action-btn view open-invoice-popup" data-id="{{ $invoice->id }}">
              <i class="bi bi-eye"></i> View
            </a>
            <a href="{{ route('admin.invoices.edit', $invoice->id) }}" class="mobile-action-btn edit">
              <i class="bi bi-pencil"></i> Edit
            </a>
          </div>
        </div>
        @empty
        <div class="text-muted text-center py-4">No invoices found</div>
        @endforelse
      </div>
    </div>
  </div>
</div>

{{-- POPUP MODAL --}}
<div class="modal fade" id="invoiceModal" tabindex="-1">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Invoice Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body" id="invoiceModalBody">
        <p class="text-center text-muted">Loading...</p>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Invoice popup functionality
  document.addEventListener('click', function(e) {
    if (e.target.closest('.open-invoice-popup')) {
      e.preventDefault();
      const id = e.target.closest('.open-invoice-popup').dataset.id;
      const modal = new bootstrap.Modal(document.getElementById('invoiceModal'));

      document.getElementById('invoiceModalBody').innerHTML =
        "<div class='text-center py-4'><div class='spinner-border text-primary' role='status'></div><p class='mt-2 text-muted'>Loading invoice details...</p></div>";

      modal.show();

      fetch(`/admin/invoices/${id}/popup`)
        .then(res => {
          if (!res.ok) {
            throw new Error('Network response was not ok');
          }
          return res.text();
        })
        .then(html => {
          document.getElementById('invoiceModalBody').innerHTML = html;
        })
        .catch(error => {
          console.error('Error loading invoice details:', error);
          document.getElementById('invoiceModalBody').innerHTML = 
            "<div class='text-center py-4 text-danger'><i class='bi bi-exclamation-triangle fs-1'></i><p class='mt-2'>Failed to load invoice details. Please try again.</p></div>";
        });
    }
  });

  // Search and filter functionality for both desktop and mobile
  const searchInput = document.getElementById('invoiceSearch');
  const statusFilter = document.getElementById('statusFilter');
  const startDateInput = document.getElementById('startDate');
  const endDateInput = document.getElementById('endDate');
  
  // Desktop table elements
  const table = document.getElementById('invoicesTable');
  const tableRows = table ? table.getElementsByTagName('tbody')[0].getElementsByTagName('tr') : [];
  
  // Mobile card elements
  const mobileCards = document.querySelectorAll('.mobile-invoice-card');

  function filterInvoices() {
    const searchTerm = searchInput.value.toLowerCase();
    const statusValue = statusFilter.value;
    const startDate = startDateInput.value;
    const endDate = endDateInput.value;

    // Filter desktop table rows
    for (let row of tableRows) {
      const cells = row.getElementsByTagName('td');
      if (cells.length < 9) continue;
      
      const invoiceNumber = cells[1].textContent.toLowerCase();
      const customerName = cells[2].textContent.toLowerCase();
      const status = cells[6].textContent.toLowerCase();
      const invoiceDate = cells[7].textContent;
      
      const matchesSearch = invoiceNumber.includes(searchTerm) || customerName.includes(searchTerm);
      const matchesStatus = !statusValue || status.includes(statusValue);
      
      // Date filtering
      let matchesDate = true;
      if (startDate || endDate) {
        const cellDate = new Date(invoiceDate);
        const start = startDate ? new Date(startDate) : null;
        const end = endDate ? new Date(endDate) : null;
        
        if (start && cellDate < start) matchesDate = false;
        if (end && cellDate > end) matchesDate = false;
      }

      row.style.display = matchesSearch && matchesStatus && matchesDate ? '' : 'none';
    }

    // Filter mobile cards
    for (let card of mobileCards) {
      const invoiceNumber = card.querySelector('.mobile-invoice-number-text').textContent.toLowerCase();
      const customerName = card.querySelector('.mobile-detail-item:nth-child(1) .mobile-detail-value').textContent.toLowerCase();
      const status = card.querySelector('.badge').textContent.toLowerCase();
      const invoiceDate = card.querySelector('.mobile-detail-item:nth-child(5) .mobile-detail-value').textContent;
      
      const matchesSearch = invoiceNumber.includes(searchTerm) || customerName.includes(searchTerm);
      const matchesStatus = !statusValue || status.includes(statusValue);
      
      // Date filtering
      let matchesDate = true;
      if (startDate || endDate) {
        const cellDate = new Date(invoiceDate);
        const start = startDate ? new Date(startDate) : null;
        const end = endDate ? new Date(endDate) : null;
        
        if (start && cellDate < start) matchesDate = false;
        if (end && cellDate > end) matchesDate = false;
      }

      card.style.display = matchesSearch && matchesStatus && matchesDate ? '' : 'none';
    }
  }

  // Add event listeners for filtering
  searchInput.addEventListener('input', filterInvoices);
  statusFilter.addEventListener('change', filterInvoices);
  startDateInput.addEventListener('change', filterInvoices);
  endDateInput.addEventListener('change', filterInvoices);

  // Add hover effects to table rows
  for (let row of tableRows) {
    row.addEventListener('mouseenter', function() {
      this.style.cursor = 'pointer';
    });
  }
});
</script>

@endsection