@extends('layouts.user')

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

@section('content')
<div class="max-w-3xl mx-auto p-4">

  <div class="border border-slate-300 bg-white 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>
          <div class="text-sm font-bold text-slate-900">
            {{ __('expenses.create.title') }}
          </div>
        </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.create.back') }}
        </a>
      </div>
    </div>

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

      @csrf

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

        <div>
          <label class="text-xs font-semibold text-slate-700">
            {{ __('expenses.create.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>
            <option value="">{{ __('expenses.create.select') }}</option>

            @foreach($categories as $c)
              <option value="{{ $c->id }}"
                @selected(old('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.create.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>
            <option value="">{{ __('expenses.create.select') }}</option>

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

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

          @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.create.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') }}"
                 placeholder="{{ __('expenses.create.placeholders.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.create.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') }}">

          @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.create.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') }}"
               placeholder="{{ __('expenses.create.placeholders.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.create.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"
                  placeholder="{{ __('expenses.create.placeholders.note') }}">{{ old('note') }}</textarea>

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

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

        <input type="file"
               name="proof_photo"
               accept=".jpg,.jpeg,.png,.webp,.pdf"
               class="mt-1 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="mt-1 text-[11px] text-slate-500">
          {{ __('expenses.create.proof_hint') }}
        </div>

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

      <div class="flex gap-2 pt-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.create.save') }}
        </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.create.cancel') }}
        </a>
      </div>

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