@extends('layouts.user')

@section('title', __('expenses.edit.page_title'))
@section('page_title', __('expenses.edit.page_title'))
@section('breadcrumb', __('expenses.edit.breadcrumb'))

@section('content')
<div class="max-w-3xl mx-auto p-4">
  <div class="bg-white border border-slate-300 shadow-sm">

    {{-- Header --}}
    <div class="border-b border-slate-300 bg-slate-50 px-4 py-3">
      <div class="flex items-center justify-between gap-3">
        <div class="text-sm font-bold text-slate-900">
          {{ __('expenses.edit.title') }}
        </div>

        <a href="{{ route('user.expenses.index') }}"
           class="border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-100">
          {{ __('expenses.edit.back') }}
        </a>
      </div>
    </div>

    {{-- Form --}}
    <form class="grid gap-3 px-4 py-4"
          method="POST"
          action="{{ route('user.expenses.update', $expense) }}"
          enctype="multipart/form-data">

      @csrf
      @method('PUT')

      <div class="grid gap-3 md:grid-cols-2">

        <div>
          <label class="text-xs font-semibold text-slate-700">
            {{ __('expenses.edit.fields.category') }}
          </label>

          <select name="expense_category_id"
                  class="mt-1 w-full border border-slate-300 bg-white px-2.5 py-2 text-xs text-slate-800 outline-none transition focus:border-slate-500"
                  required>
            @foreach($categories as $c)
              <option value="{{ $c->id }}"
                @selected(old('expense_category_id', $expense->expense_category_id) == $c->id)>
                {{ $c->name }}
              </option>
            @endforeach
          </select>

          @error('expense_category_id')
            <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
          @enderror
        </div>

        <div>
          <label class="text-xs font-semibold text-slate-700">
            {{ __('expenses.edit.fields.account') }}
          </label>

          <select name="user_account_id"
                  class="mt-1 w-full border border-slate-300 bg-white px-2.5 py-2 text-xs text-slate-800 outline-none transition focus:border-slate-500"
                  required>
            @foreach($accounts as $a)
              <option value="{{ $a->id }}"
                @selected(old('user_account_id', $expense->user_account_id) == $a->id)>
                {{ $a->name }}
              </option>
            @endforeach
          </select>

          @error('user_account_id')
            <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
          @enderror
        </div>

      </div>

      <div class="grid gap-3 md:grid-cols-2">

        <div>
          <label class="text-xs font-semibold text-slate-700">
            {{ __('expenses.edit.fields.amount') }}
          </label>

          <input name="amount"
                 type="number"
                 step="any"
                 min="0"
                 class="mt-1 w-full border border-slate-300 bg-white px-2.5 py-2 text-xs text-slate-800 outline-none transition focus:border-slate-500"
                 value="{{ old('amount', $expense->amount) }}"
                 required>

          @error('amount')
            <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
          @enderror
        </div>

        <div>
          <label class="text-xs font-semibold text-slate-700">
            {{ __('expenses.edit.fields.posted_at') }}
          </label>

          <input name="posted_at"
                 type="datetime-local"
                 class="mt-1 w-full border border-slate-300 bg-white px-2.5 py-2 text-xs text-slate-800 outline-none transition focus:border-slate-500"
                 value="{{ old('posted_at', optional($expense->posted_at)->format('Y-m-d\TH:i')) }}">

          @error('posted_at')
            <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
          @enderror
        </div>

      </div>

      <div>
        <label class="text-xs font-semibold text-slate-700">
          {{ __('expenses.edit.fields.trx_no') }}
        </label>

        <input name="trx_no"
               class="mt-1 w-full border border-slate-300 bg-white px-2.5 py-2 text-xs text-slate-800 outline-none transition focus:border-slate-500"
               value="{{ old('trx_no', $expense->trx_no) }}"
               maxlength="50">

        @error('trx_no')
          <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
        @enderror
      </div>

      <div>
        <label class="text-xs font-semibold text-slate-700">
          {{ __('expenses.edit.fields.note') }}
        </label>

        <textarea name="note"
                  class="mt-1 w-full border border-slate-300 bg-white px-2.5 py-2 text-xs text-slate-800 outline-none transition focus:border-slate-500"
                  rows="3">{{ old('note', $expense->note) }}</textarea>

        @error('note')
          <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
        @enderror
      </div>

      <div class="grid gap-2">
        <label class="text-xs font-semibold text-slate-700">
          {{ __('expenses.edit.fields.proof_photo') }}
        </label>

        @if($expense->proof_photo)
          <div class="text-[11px] text-slate-600">
            {{ __('expenses.edit.current') }}:
            <a class="underline"
               target="_blank"
               href="{{ asset($expense->proof_photo) }}">
              {{ __('expenses.edit.view') }}
            </a>
          </div>

          <label class="inline-flex items-center gap-2 text-xs text-slate-700">
            <input type="checkbox" name="remove_proof" value="1" class="h-3.5 w-3.5">
            {{ __('expenses.edit.remove_current_proof') }}
          </label>
        @endif

        <input type="file"
               name="proof_photo"
               accept=".jpg,.jpeg,.png,.webp,.pdf"
               class="w-full border border-slate-300 bg-white px-2.5 py-2 text-xs text-slate-800 file:mr-3 file:border-0 file:bg-slate-900 file:px-3 file:py-1.5 file:text-[11px] file:font-medium file:text-white">

        <div class="text-[11px] text-slate-500">
          {{ __('expenses.edit.proof_hint') }}
        </div>

        @error('proof_photo')
          <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
        @enderror
      </div>

      <div class="mt-3 flex gap-2">
        <button class="border border-slate-900 bg-slate-900 px-4 py-2 text-xs font-semibold text-white transition hover:bg-slate-800">
          {{ __('expenses.edit.update') }}
        </button>

        <a href="{{ route('user.expenses.index') }}"
           class="border border-slate-300 bg-slate-100 px-4 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-200">
          {{ __('expenses.edit.cancel') }}
        </a>
      </div>

    </form>
  </div>
</div>
@endsection