@extends('layouts.app')

@section('title', 'Settlement')
@section('page', 'settlement')
@section('settlementNav', 'customers')

@section('content')
  @include('partials.account-settlement-nav')

  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <x-data-table
    id="settlement-bills-table"
    class="catalog-table"
    title="Customer Settlement"
    subtitle="Settle credit bills one by one and post payments to cash or bank book."
    search-placeholder="Search bills..."
    :selectable="false"
    :page-size="15"
  >
    <x-slot:afterToolbar>
      <div class="product-stats-panel">
        <div class="row g-3 product-stats product-stats--4 justify-content-start">
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--warning">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-cash-coin"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total Outstanding</p>
                <p class="product-kpi__value">{{ money($totalOutstanding) }}</p>
                <p class="product-kpi__meta">Open credit bills</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--primary">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-receipt"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Open Bills</p>
                <p class="product-kpi__value">{{ $billCount }}</p>
                <p class="product-kpi__meta">Waiting for settlement</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:head>
      <x-data-table-th label="Bill No." col="bill_no" />
      <x-data-table-th label="Date" col="date" />
      <x-data-table-th label="Customer Name" col="customer" />
      <x-data-table-th label="Note" col="note" />
      <x-data-table-th label="Due" col="due" sort-type="number" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($bills as $row)
        @php
          $billLabel = $row->bill_no ? 'Bill No '.$row->bill_no : ($row->invoice_no ?: '—');
        @endphp
        <tr data-id="{{ $row->id }}">
          <td data-col="bill_no" class="cell-primary">{{ $billLabel }}</td>
          <td data-col="date">{{ $row->sale_date?->format('Y-m-d H:i') ?? '—' }}</td>
          <td data-col="customer">{{ $row->customer?->name ?? '—' }}</td>
          <td data-col="note">{{ $row->notes ?: '—' }}</td>
          <td data-col="due" data-sort-value="{{ $row->due_amount }}" class="fw-semibold">
            {{ money((float) $row->due_amount) }}
          </td>
          <td data-edt-actions>
            @if ($canManage ?? false)
              <div class="edt-row-actions product-actions">
                <button
                  type="button"
                  class="btn btn-sm btn-primary"
                  data-settle-bill
                  data-id="{{ $row->id }}"
                  data-bill="{{ $billLabel }}"
                  data-customer="{{ $row->customer?->name ?? '—' }}"
                  data-due="{{ number_format((float) $row->due_amount, 2, '.', '') }}"
                  data-note="{{ $row->notes }}"
                  data-settle-url="{{ route('account.settlement.bills.settle', $row) }}"
                >
                  <i class="bi bi-check2-circle" aria-hidden="true"></i> Settle
                </button>
              </div>
            @endif
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="6" class="text-center text-muted py-4">No open credit bills to settle.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  @if ($canManage ?? false)
    <div class="modal fade" id="settleBillModal" tabindex="-1" aria-labelledby="settleBillModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content edt-modal">
          <form method="post" id="settle-bill-form" action="#">
            @csrf
            <div class="modal-header">
              <h2 class="modal-title fs-5" id="settleBillModalLabel">Settle bill</h2>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div class="mb-3">
                <label class="form-label">Bill No.</label>
                <input type="text" class="form-control" id="settle_bill_label" readonly>
              </div>
              <div class="mb-3">
                <label class="form-label">Customer</label>
                <input type="text" class="form-control" id="settle_customer_name" readonly>
              </div>
              <div class="mb-3">
                <label class="form-label">Due amount</label>
                <input type="text" class="form-control" id="settle_due_display" readonly>
              </div>
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label" for="settle_date">Settle date</label>
                  <input type="date" class="form-control" id="settle_date" name="settle_date" required value="{{ old('settle_date', now()->toDateString()) }}">
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="settle_amount">Settle amount</label>
                  <input type="number" class="form-control" id="settle_amount" name="amount" min="0.01" step="0.01" required value="{{ old('amount') }}">
                </div>
                <div class="col-12">
                  <label class="form-label" for="settle_receive_to">Receive to</label>
                  <select class="form-select" id="settle_receive_to" name="receive_to" required>
                    <option value="cash_book" @selected(old('receive_to', 'cash_book') === 'cash_book')>Cash Book</option>
                    <option value="bank_account" @selected(old('receive_to') === 'bank_account')>Bank Account</option>
                  </select>
                </div>
                <div class="col-12" data-settle-source="cash_book">
                  <label class="form-label" for="settle_cash_book_id">Cash Book</label>
                  <select class="form-select" id="settle_cash_book_id" name="cash_book_id">
                    <option value="">Select cash book</option>
                    @foreach ($cashBooks as $book)
                      <option value="{{ $book->id }}" @selected((string) old('cash_book_id') === (string) $book->id)>{{ $book->name }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="col-12 d-none" data-settle-source="bank_account">
                  <label class="form-label" for="settle_bank_account_id">Bank Account</label>
                  <select class="form-select" id="settle_bank_account_id" name="bank_account_id">
                    <option value="">Select bank account</option>
                    @foreach ($bankAccounts as $account)
                      <option value="{{ $account->id }}" @selected((string) old('bank_account_id') === (string) $account->id)>
                        {{ $account->name }}{{ $account->bank?->name ? ' · '.$account->bank->name : '' }}
                      </option>
                    @endforeach
                  </select>
                </div>
                <div class="col-12">
                  <label class="form-label" for="settle_notes">Note</label>
                  <input type="text" class="form-control" id="settle_notes" name="notes" maxlength="1000" value="{{ old('notes') }}" placeholder="Optional note">
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-lg"></i> Confirm settlement
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  @endif
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
@endpush

@push('scripts')
  <script src="{{ asset('assets/js/pages/settlement.js') }}"></script>
@endpush