@extends('admin.admin_dashboard')
@section('admin')

{{-- jQuery & Select2 --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link
  href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div class="page-content">
  {{-- Breadcrumb & Title --}}
  <div class="page-breadcrumb d-flex flex-column flex-sm-row 
              align-items-center justify-content-between mb-3 p-3 
              bg-primary text-white rounded shadow-sm">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb mb-0 p-0">
        <li class="breadcrumb-item">
          <a href="{{ route('ap.payments.index') }}" class="text-white">
            <i class="bx bx-chevron-left"></i> Back
          </a>
        </li>
        <li class="breadcrumb-item active text-white">
          Edit Payment #{{ $payment->id }}
        </li>
      </ol>
    </nav>
    <h5 class="mb-0">Edit Payment #{{ $payment->id }}</h5>
  </div>

  <div class="card shadow-sm rounded-lg border-0">
    <div class="card-body p-4">
      @if($errors->any())
      <div class="alert alert-danger">
        <ul class="mb-0">
          @foreach($errors->all() as $e)
            <li>{{ $e }}</li>
          @endforeach
        </ul>
      </div>
      @endif

      <form method="POST" action="{{ route('ap.payments.update', $payment->id) }}">
        @csrf
        @method('PUT')

        <div class="row g-3 mb-4">
          {{-- Vendor Bill --}}
          <div class="col-md-4">
            <label class="form-label">Vendor Bill</label>
            <select name="bill_id" class="form-select bill-select">
              @foreach($bills as $b)
                <option
                  value="{{ $b->id }}"
                  @selected(old('bill_id', $payment->bill_id)==$b->id)
                >
                  #{{ $b->reference }} — {{ $b->vendor->name }}
                </option>
              @endforeach
            </select>
            @error('bill_id')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>

          {{-- Payment Date --}}
          <div class="col-md-4">
            <label class="form-label">Payment Date</label>
            <input
              type="date"
              name="payment_date"
              class="form-control"
              value="{{ old(
                'payment_date',
                $payment->payment_date
                  ? \Carbon\Carbon::parse($payment->payment_date)->format('Y-m-d')
                  : ''
              ) }}"
            >
            @error('payment_date')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>

          {{-- Amount --}}
          <div class="col-md-4">
            <label class="form-label">Amount</label>
            <input
              type="number"
              step="0.01"
              name="amount"
              class="form-control text-end"
              value="{{ old('amount', $payment->amount) }}"
            >
            @error('amount')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>

          {{-- Method --}}
          <div class="col-md-4">
            <label class="form-label">Method</label>
            <input
              type="text"
              name="payment_method"
              class="form-control"
              value="{{ old('payment_method', $payment->payment_method) }}"
            >
            @error('payment_method')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>

          {{-- Notes --}}
          <div class="col-md-12">
            <label class="form-label">Notes</label>
            <textarea name="notes" class="form-control">{{ old('notes', $payment->notes) }}</textarea>
          </div>
        </div>

        <div class="text-end">
          <button class="btn btn-primary px-4">
            <i class="bx bx-save me-1"></i> Update Payment
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
$(function(){
  $('.bill-select').select2({
    theme: 'bootstrap-5',
    placeholder: 'Select bill',
    allowClear: true,
    width: '100%'
  });
});
</script>

@endsection