@extends('layouts.user')
@section('title', __('customers.edit_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 border-b border-slate-200 pb-3">
    <div>
      <div class="text-base font-bold text-slate-800">{{ __('customers.edit_payment') }}</div>
      <div class="mt-0.5 text-[11px] text-slate-500">{{ $customer->name }}</div>
    </div>
    <a class="border border-slate-300 px-3 py-1.5 text-[12px] text-slate-700 hover:bg-slate-50"
       href="{{ route('user.customers.ledger.index', $customer) }}">
       {{ __('customers.back') }}
    </a>
  </div>

  @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-3"
        method="POST"
        action="{{ route('user.customers.ledger.update', [$customer, $trx]) }}"
        enctype="multipart/form-data">
    @csrf
    @method('PUT')

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

    {{-- Account --}}
    <div>
      <label class="text-[11px] font-semibold text-slate-600">{{ __('customers.user_account') }} *</label>
      <select class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]"
              name="user_account_id"
              required>
        <option value="">{{ __('customers.select_account') }}</option>
        @foreach($accounts as $a)
          <option value="{{ $a->id }}"
                  @selected(old('user_account_id', $trx->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">{{ __('customers.credit_amount') }} *</label>
        <input type="number"
               step="any"
               class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]"
               name="credit"
               value="{{ old('credit', $trx->credit) }}"
               required>
      </div>
      <div>
        <label class="text-[11px] font-semibold text-slate-600">{{ __('customers.posted_at') }}</label>
        <input type="datetime-local"
               class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]"
               name="posted_at"
               value="{{ old('posted_at', optional($trx->posted_at)->format('Y-m-d\TH:i')) }}">
      </div>
    </div>

    {{-- Proof --}}
    <div class="grid gap-3 md:grid-cols-2">
      <div>
        <label class="text-[11px] font-semibold text-slate-600">{{ __('customers.replace_payment_proof_optional') }}</label>
        <input type="file"
               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"
               name="payment_proof_photo"
               accept=".jpg,.jpeg,.png,.webp,.pdf">
        <div class="mt-1 text-[11px] text-slate-500">{{ __('customers.max_4mb') }}</div>
      </div>

      <div class="text-[12px]">
        <label class="text-[11px] font-semibold text-slate-600">{{ __('customers.current_proof') }}</label>
        <div class="mt-2">
          @if($trx->payment_proof_photo)
            <a class="text-slate-800 underline"
               target="_blank"
               href="{{ asset($trx->payment_proof_photo) }}">
              {{ __('customers.view_proof') }}
            </a>
          @else
            <span class="text-slate-500">{{ __('customers.no_file') }}</span>
          @endif
        </div>
      </div>
    </div>

    {{-- Note --}}
    <div>
      <label class="text-[11px] font-semibold text-slate-600">{{ __('customers.note') }}</label>
      <textarea class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]"
                name="note"
                rows="3"
                placeholder="{{ __('customers.write_note_about_payment') }}">{{ old('note', $trx->note) }}</textarea>
    </div>

    {{-- Submit --}}
    <div class="border-t border-slate-200 pt-3">
      <button class="mt-1 bg-emerald-600 px-4 py-2 text-[12px] font-medium text-white hover:bg-emerald-700">
        {{ __('customers.update_payment') }}
      </button>
    </div>
  </form>
</div>
@endsection