@extends('admin.layout.app')

@section('title', 'Invoices')

@push('styles')
  <link href="/csstemplate/libs/downloaded/bootstrap.min.css" rel="stylesheet">
  <link href="/csstemplate/libs/downloaded/dataTables.bootstrap5.min.css" rel="stylesheet">
  <style> a{text-decoration: none !important; } </style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">Invoices List</h5>
      <a href="{{ route('admin.invoice.create') }}" class="btn btn-sm btn-primary">
        <i class="bi bi-plus-circle me-1"></i> New Invoice
      </a> 
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table id="invoiceTable" class="table table-hover table-bordered table-striped text-nowrap">
          <thead class="table-light">
            <tr>
              <th>Actions</th>
              <th>Invoice Date</th>
              <th>Due Date</th>
              <th>Invoice Number</th>
              <th>Status</th>
              <th>Invoice From</th>
              <th>Bank</th>
              <th>Invoice To</th>
              <th>Total Amount (€)</th>
              <th>Tickets</th>
              <th>Notes</th>
            </tr>
          </thead>
          <tbody>
            @foreach($invoices as $index => $invoice)
            <tr style="cursor:pointer;">
                {{-- <td>{{ $index + 1 }}</td> --}}
                <td>
                  <div class="dropdown">
                    <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton{{ $invoice->id }}" data-bs-toggle="dropdown" aria-expanded="false">
                      Actions
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ $invoice->id }}">
                      <li>
                        <a class="dropdown-item" href="{{ route('admin.invoice.show', $invoice->id) }}">
                          <i class="bi bi-eye"></i> View
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="{{ route('admin.invoice.edit', $invoice->id) }}">
                          <i class="bi bi-pencil-square"></i> Edit
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="{{ route('admin.invoice.download', $invoice->id) }}">
                          <i class="bi bi-pencil-square"></i> Download PDF
                        </a>
                      </li>
                    </ul>
                  </div>
                </td>
                <td>{{ $invoice->invoice_date->format('d M Y') }}</td>
                <td 
                  @if($invoice->status !== 'paid' && \Carbon\Carbon::parse($invoice->due_date)->isPast()) 
                      style="color: red; font-weight: bold;" 
                  @endif
              >
                  {{ $invoice->due_date->format('d M Y') }}
              </td>
                <td>{{ $invoice->invoice_number }}</td>
                <td>
                @if($invoice->status === 'paid')
                    <span class="badge bg-success">Paid</span>
                @elseif($invoice->status === 'unpaid')
                    <span class="badge bg-danger">Unpaid</span>
                @else
                    <span class="badge bg-secondary">{{ ucfirst($invoice->status) }}</span>
                @endif
                </td>
                <td>{{ optional($invoice->fromUser)->first_name }} {{ optional($invoice->fromUser)->last_name }}</td>
                <td>{{ optional($invoice->bank)->bank_name ?? 'N/A' }}</td>
                <td>{{ optional($invoice->toUser)->first_name }} {{ optional($invoice->toUser)->last_name }}</td>
                <td>€{{ number_format($invoice->total_amount, 2) }}</td>
                <td>
                @foreach($invoice->tickets as $ticket)
                    <span class="badge bg-info text-dark">{{ $ticket->ticket_number }}</span>
                @endforeach
                </td>
                <td>{{ Str::limit($invoice->notes, 40) }}</td>
            </tr>
            @endforeach
        </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
  <script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>

  <script>
    $(document).ready(function () {
     if ($.fn.DataTable.isDataTable('#invoiceTable')) {
        $('#invoiceTable').DataTable().destroy();
      }
      $('#invoiceTable').DataTable({
        responsive: true,
        ordering: true,
        searching: true,
        paging: true,
        pageLength: 25,
        fixedHeader: true, // 👈 Enable sticky header
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search invoices..."
        }
      });
      // Enable row click navigation
      $('#invoiceTable tbody').on('click', 'tr', function () {
        const url = $(this).data('href');
        if (url) {
          window.location.href = url;
        }
      });
    });
  </script>
@endpush