@extends('layouts.user')
@section('title', __('suppliers.add_payment'))

@section('content')
<div class="max-w-3xl mx-auto border border-slate-200 bg-white p-4 shadow-sm text-[13px]">

  <div class="flex items-center justify-between gap-3 border-b border-slate-200 pb-3">
    <div>
      <div class="text-base font-bold text-slate-800">{{ __('suppliers.add_payment') }}</div>
      <div class="mt-0.5 text-[11px] text-slate-500">
        {{ $supplier->name }}
      </div>
    </div>

    <a href="{{ route('user.suppliers.ledger.index', $supplier->id) }}"
       class="border border-slate-300 px-3 py-1.5 text-[12px] text-slate-700 hover:bg-slate-50">
       {{ __('suppliers.back') }}
    </a>
  </div>

  {{-- Error message --}}
  @if(session('err'))
  <div class="mt-4 border border-rose-200 bg-rose-50 p-3 text-[12px] text-rose-700">
      {{ session('err') }}
  </div>
  @endif

  {{-- Validation errors --}}
  @if($errors->any())
  <div class="mt-4 border border-rose-200 bg-rose-50 p-3 text-[12px] text-rose-700">
      <ul class="ml-4 list-disc space-y-0.5">
          @foreach($errors->all() as $e)
              <li>{{ $e }}</li>
          @endforeach
      </ul>
  </div>
  @endif

  <form class="mt-4 grid gap-4"
        method="POST"
        action="{{ route('user.suppliers.ledger.payment.store', $supplier->id) }}"
        enctype="multipart/form-data">

      @csrf

      {{-- Type --}}
      <div>
        <label class="text-[11px] font-semibold text-slate-600">{{ __('suppliers.type') }}</label>

        <input type="text"
               value="{{ __('suppliers.payment') }}"
               disabled
               class="mt-1 w-full border border-slate-300 bg-slate-50 px-3 py-2 text-[12px] text-slate-600">
      </div>

      {{-- Account --}}
      <div>
        <label class="text-[11px] font-semibold text-slate-600">{{ __('suppliers.account') }} *</label>

        <select name="user_account_id"
                required
                class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]">

            <option value="">{{ __('suppliers.select_account') }}</option>

            @foreach($accounts as $a)
            <option value="{{ $a->id }}"
                @selected(old('user_account_id') == $a->id)>
                {{ $a->name }} ({{ strtoupper($a->type) }})
            </option>
            @endforeach

        </select>
      </div>

      {{-- Amount + Date --}}
      <div class="grid gap-3 md:grid-cols-2">

        <div>
          <label class="text-[11px] font-semibold text-slate-600">
              {{ __('suppliers.credit_amount') }} *
          </label>

          <input type="number"
                 name="credit"
                 step="any"
                 min="0"
                 required
                 value="{{ old('credit') }}"
                 placeholder="Amount (e.g. 1000)"
                 class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]">
        </div>

        <div>
          <label class="text-[11px] font-semibold text-slate-600">
              {{ __('suppliers.posted_at_optional') }}
          </label>

          <input type="datetime-local"
                 name="posted_at"
                 value="{{ old('posted_at') }}"
                 class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]">
        </div>

      </div>

      {{-- Proof --}}
      <div>
        <label class="text-[11px] font-semibold text-slate-600">
            {{ __('suppliers.payment_proof_optional') }}
        </label>

        <input type="file"
               name="payment_proof_photo"
               accept=".jpg,.jpeg,.png,.webp"
               class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px] file:mr-3 file:border-0 file:bg-slate-100 file:px-3 file:py-1.5 file:text-[12px] file:font-medium file:text-slate-700 hover:file:bg-slate-200">

        <div class="mt-1 text-[11px] text-slate-500">
          {{ __('suppliers.image_types_only') }}
        </div>
      </div>

      {{-- Note --}}
      <div>
        <label class="text-[11px] font-semibold text-slate-600">{{ __('suppliers.note') }} </label>

        <textarea name="note"
                  rows="3"
                  class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]">{{ old('note') }}</textarea>
      </div>

      <div class="border-t border-slate-200 pt-3">
        <button type="submit"
                class="bg-emerald-600 px-4 py-2 text-[12px] font-medium text-white hover:bg-emerald-700">
            {{ __('suppliers.save_payment') }}
        </button>
      </div>

  </form>

</div>
@endsection