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

@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">{{ __('suppliers.add_supplier') }}</div>
      <div class="mt-0.5 text-[11px] text-slate-500">{{ __('suppliers.add_new_supplier') }}</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.suppliers.index') }}">
      {{ __('suppliers.back') }}
    </a>
  </div>

  @if($errors->any())
    <div class="mt-4 border border-rose-200 bg-rose-50 p-3 text-[12px] text-rose-700">
      <div class="mb-1 font-semibold">{{ __('suppliers.please_fix_these') }}</div>
      <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.suppliers.store') }}">
    @csrf

    <div>
      <label class="text-[11px] font-semibold text-slate-600">{{ __('suppliers.name') }} *</label>
      <input class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]"
             name="name"
             value="{{ old('name') }}"
             required
             placeholder="{{ __('suppliers.supplier_name') }}">
    </div>

    <div>
      <label class="text-[11px] font-semibold text-slate-600">{{ __('suppliers.phone') }} *</label>
      <input class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]"
             name="phone"
             value="{{ old('phone') }}"
             required
             placeholder="{{ __('suppliers.phone_placeholder') }}">
    </div>

    <div>
      <label class="text-[11px] font-semibold text-slate-600">{{ __('suppliers.address_optional') }}</label>
      <textarea class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]"
                name="address"
                rows="3"
                placeholder="{{ __('suppliers.supplier_address') }}">{{ old('address') }}</textarea>
    </div>

    <div class="grid gap-3 md:grid-cols-2">
      <div>
        <label class="text-[11px] font-semibold text-slate-600">{{ __('suppliers.opening_balance_due') }}</label>
        <input type="number"
               step="any"
               class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]"
               name="opening_balance"
               value="{{ old('opening_balance', 0) }}">
        <div class="mt-1 text-[11px] text-slate-500">{{ __('suppliers.opening_due_amount_optional') }}</div>
      </div>

      <div>
        <label class="text-[11px] font-semibold text-slate-600">{{ __('suppliers.status') }}</label>
        <select class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px]"
                name="status"
                required>
          <option value="active" @selected(old('status', 'active') === 'active')>{{ __('suppliers.active') }}</option>
          <option value="inactive" @selected(old('status') === 'inactive')>{{ __('suppliers.inactive') }}</option>
        </select>
      </div>
    </div>

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