@extends('layouts.user')
@section('title', __('customers.add_customer'))

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

  <div class="flex items-center justify-between">
    <div>
      <div class="text-base font-bold text-slate-900">{{ __('customers.add_customer') }}</div>
      <div class="text-[11px] text-slate-500 mt-0.5">{{ __('customers.add_new_customer_desc') }}</div>
    </div>

    <a class="px-3 py-1.5 border border-slate-300 hover:bg-slate-50 text-xs"
       href="{{ route('user.customers.index') }}">
      {{ __('customers.back') }}
    </a>
  </div>

  @if($errors->any())
    <div class="mt-3 p-2.5 border border-rose-200 bg-rose-50 text-rose-700 text-xs">
      <div class="font-semibold mb-1">{{ __('customers.please_fix_these') }}</div>
      <ul class="list-disc ml-4">
        @foreach($errors->all() as $e)
          <li>{{ $e }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <form class="mt-4 grid gap-2.5 text-xs" method="POST" action="{{ route('user.customers.store') }}">
    @csrf

    <div>
      <label class="text-[11px] font-semibold text-slate-600">
        {{ __('customers.name') }} *
      </label>
      <input
        class="mt-1 w-full border border-slate-300 px-2.5 py-1.5 text-xs"
        name="name"
        value="{{ old('name') }}"
        required
        placeholder="{{ __('customers.customer_name') }}"
      >
    </div>

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

    <div>
      <label class="text-[11px] font-semibold text-slate-600">
        {{ __('customers.address') }} ({{ __('customers.optional') }})
      </label>
      <textarea
        class="mt-1 w-full border border-slate-300 px-2.5 py-1.5 text-xs"
        name="address"
        rows="3"
        placeholder="{{ __('customers.customer_address') }}"
      >{{ old('address') }}</textarea>
    </div>

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

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

    <button class="mt-2 px-4 py-1.5 bg-slate-900 text-white text-xs hover:bg-slate-800">
      {{ __('customers.save_customer') }}
    </button>
  </form>
</div>
@endsection