@extends('admin.layout.app')

@section('title', 'Invoice Payments')

@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">Invoice Payments List</h5>
        <a href="{{ route('admin.invoicepayment.create') }}" class="btn btn-sm btn-primary">
          <i class="bi bi-plus-circle me-1"></i> New Payment
        </a>
      </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="paymentsTable" class="table table-hover table-bordered table-striped text-nowrap align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Actions</th> <!-- New Action column -->
                            <th>Payment Date</th>
                            <th>Amount (€)</th>
                            <th>Invoice Number</th>
                            <th>Invoice Type</th>
                            <th>From</th>
                            <th>To</th>
                            <th>Received By</th>
                            <th>Tickets</th>
                            <th>Payment Method</th>
                            <th>Notes</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($payments as $payment)
                        <tr>
                          <td>
                            <div class="dropdown">
                              <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton{{ $payment->id }}" data-bs-toggle="dropdown" aria-expanded="false">
                                Actions
                              </button>
                              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ $payment->id }}">
                                <li>
                                  <a class="dropdown-item" href="{{ route('admin.invoicepayment.show', $payment->id) }}">
                                    <i class="bi bi-eye"></i> View
                                  </a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="{{ route('admin.invoicepayment.edit', $payment->id) }}">
                                    <i class="bi bi-pencil-square"></i> Edit
                                  </a>
                                </li>
                              </ul>
                            </div>
                          </td>
                            <td>{{ $payment->payment_date }}</td>
                            <td>€{{ number_format($payment->amount, 2) }}</td>
                            <td>{{ optional($payment->invoice)->invoice_number }}</td>
                            <td>{{ optional($payment->invoice)->invoice_type ? ucfirst($payment->invoice->invoice_type) : '-' }}</td>
                            <td>{{ optional($payment->invoice->fromUser)->first_name }} {{ optional($payment->invoice->fromUser)->last_name }}</td>
                            <td>{{ optional($payment->invoice->toUser)->first_name }} {{ optional($payment->invoice->toUser)->last_name }}</td>
                            <td>{{ optional($payment->receivedBy)->first_name }} {{ optional($payment->receivedBy)->last_name }}</td>
                            <td>
                                @foreach($payment->ticketPayments as $tp)
                                    <span class="badge bg-info text-dark mb-1">
                                        {{ $tp->ticket->ticket_number ?? 'T#'.$tp->ticket_id }} €{{ number_format($tp->received_amount, 2) }}
                                    </span>
                                @endforeach
                            </td>
                            <td>{{ $payment->payment_method }}</td>
                            <td>{{ Str::limit($payment->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('#paymentsTable')) {
        $('#paymentsTable').DataTable().destroy();
      }
    $('#paymentsTable').DataTable({
        responsive: true,
        ordering: true,
        searching: true,
        paging: true,
        pageLength: 25,
        fixedHeader: true,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search payments..."
        }
    });
});
</script>
@endpush