@extends('app-new')

@section('content')
<div class="container-fluid py-3">
  <div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
    <div>
      <nav aria-label="breadcrumb" class="small">
        <ol class="breadcrumb mb-1">
          <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
          <li class="breadcrumb-item"><a href="{{ route('payment-registers.index') }}">Payment Registers</a></li>
          <li class="breadcrumb-item active" aria-current="page">Disbursements</li>
        </ol>
      </nav>
      <h4 class="mb-0">Disbursement Queue</h4>
      <div class="text-muted small">Approved payments awaiting disbursement.</div>
    </div>
  </div>

  @if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif
  @if (session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
  @endif

  <div class="card border-0 shadow-sm pr-card">
    <div class="table-responsive">
      <table class="table table-striped mb-0 js-datatable">
        <thead>
          <tr>
            <th>Register</th>
            <th>Project/Tender</th>
            <th>Vendor</th>
            <th class="text-end">Requested</th>
            <th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($paymentRegisters as $register)
            <tr>
              <td>{{ $register->register_no }}</td>
              <td>{{ $register->project_name ?: $register->tender_code }}</td>
              <td>{{ $register->vendor_name }}</td>
              <td class="text-end">{{ $register->amount_requested !== null ? number_format((float) $register->amount_requested, 2) : '' }}</td>
              <td class="text-end">
                <a href="{{ route('payment-registers.show', $register) }}" class="btn btn-sm btn-outline-secondary">View</a>
                <button class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#disburseModal" data-id="{{ $register->id }}">Disburse</button>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
    @if ($paymentRegisters->hasPages())
      <div class="card-body">
        {{ $paymentRegisters->links() }}
      </div>
    @endif
  </div>
</div>

<div class="modal fade" id="disburseModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" id="disburseForm" class="pr-form">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title">Disburse Payment</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Paid Amount</label>
            <input type="text" name="paid_amount" class="form-control" data-money="1" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Payment Source</label>
            <input type="text" name="payment_source" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Payment Mode</label>
            <input type="text" name="payment_mode" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Payment Ref No</label>
            <input type="text" name="payment_ref_no" class="form-control">
          </div>
          <div class="mb-3">
            <label class="form-label">Beneficiary Account No</label>
            <input type="text" name="beneficiary_account_no" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Beneficiary IFSC</label>
            <input type="text" name="beneficiary_ifsc" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Beneficiary Email</label>
            <input type="email" name="beneficiary_email" class="form-control">
          </div>
          <div class="mb-3">
            <label class="form-label">Beneficiary Bank Name</label>
            <input type="text" name="beneficiary_bank_name" class="form-control">
          </div>
          <div class="mb-3">
            <label class="form-label">Disburse Remarks</label>
            <textarea name="disburse_remarks" class="form-control pr-textarea"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success js-confirm-action">Disburse</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="{{ asset('assets/css/payment-registers.css') }}">
<script src="{{ asset('assets/js/payment-registers.js') }}"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const disburseForm = document.getElementById('disburseForm');
    document.querySelectorAll('[data-bs-target="#disburseModal"]').forEach(btn => {
      btn.addEventListener('click', () => {
        disburseForm.action = `{{ url('payment-registers') }}/${btn.dataset.id}/disburse`;
      });
    });
  });
</script>
@endpush