@extends('layouts.app')

@section('title', 'Overdue Invoices')

@section('content')
<div id="salesOverdueInvoicesModule">
  <div class="card mb-3" id="overdueInvoicesTableCard">
    <div class="card-header py-2">
      <div class="row flex-between-center g-0">
        <div class="col-6 col-sm-auto d-flex align-items-center pe-0">
          <h6 class="mb-0">Overdue Invoices</h6>
          <span class="badge bg-soft-warning text-warning ms-2">Read Only</span>
        </div>
        <div class="col-6 col-sm-auto text-end ps-2">
          <div id="table-overdue-replace-element">
            <button class="btn btn-falcon-default btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#overdueFilters">
              <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
              <span class="d-none d-sm-inline-block ms-1">Filter</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="collapse" id="overdueFilters">
      <div class="card-body border-top fs-10">
        <form id="overdueFiltersForm" class="row gy-2 gx-2 align-items-end">
          <div class="col-auto">
            <select id="filter_customer" class="form-select form-select-sm" name="customer_id">
              <option value="">All Customers</option>
            </select>
          </div>

          <div class="col-auto">
            <input id="filter_search" type="text" class="form-control form-control-sm" placeholder="Invoice No" name="search">
          </div>

          <div class="col-auto">
            <input id="filter_min_days" type="number" min="0" class="form-control form-control-sm" style="width: 160px;" name="min_days" placeholder="Min days (e.g. 30)">
          </div>

          <div class="col-auto">
            <input type="date" id="filter_date_from" class="form-control form-control-sm" name="date_from" placeholder="Date From">
          </div>

          <div class="col-auto">
            <input type="date" id="filter_date_to" class="form-control form-control-sm" name="date_to" placeholder="Date To">
          </div>

          <div class="col-auto d-flex align-items-center">
            <button class="btn btn-primary btn-sm me-2" type="button" id="applyOverdueFilters"><i class="fas fa-search"></i> Apply</button>
            <button class="btn btn-outline-secondary btn-sm" type="button" id="clearOverdueFilters"><i class="fas fa-times"></i> Clear</button>
          </div>
        </form>
      </div>
    </div>

    <div class="card-body p-0">
      <div class="table-responsive scrollbar js-vh-table">
        <table class="table table-sm fs-10 mb-0 overflow-hidden" id="overdueInvoicesTable">
          <thead class="bg-200">
            <tr>
              <th class="text-900 align-middle">Invoice No</th>
              <th class="text-900 align-middle">Invoice Date</th>
              <th class="text-900 align-middle">Customer</th>
              <th class="text-900 align-middle">GSTIN</th>
              <th class="text-900 align-middle text-end">Total</th>
              <th class="text-900 align-middle text-end">Paid</th>
              <th class="text-900 align-middle text-end">Outstanding</th>
              <th class="text-900 align-middle text-end">Days Pending</th>
              <th class="text-900 align-middle">Status</th>
            </tr>
          </thead>
          <tbody class="list" id="overdueTbody">
            <tr>
              <td colspan="9" class="text-center py-4 text-muted">Loading...</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<link rel="stylesheet" href="{{ asset('assets/css/forms-standard.css') }}">
<script src="{{ asset('assets/js/custom/sales/overdue-invoices.js') }}"></script>
@endpush