@extends('layouts.user')

@section('title', __('customers.add_adjust'))

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

    {{-- Header --}}
    <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.add_adjust') }}
            </div>
            <div class="text-[11px] text-slate-500 mt-0.5">
                {{ $customer->name }}
            </div>
        </div>

        <a href="{{ route('user.customers.ledger.index', $customer) }}"
           class="px-3 py-1 border border-slate-300 hover:bg-slate-50 text-[12px]">
            {{ __('customers.back') }}
        </a>
    </div>

    {{-- Errors --}}
    @if ($errors->any())
        <div class="mt-3 p-2 border border-rose-200 bg-rose-50 text-rose-700 text-[12px]">
            <ul class="list-disc ml-4 space-y-0.5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Form --}}
    <form method="POST"
          action="{{ route('user.customers.ledger.adjust.store', $customer) }}"
          class="mt-4 grid gap-3">
        @csrf

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

        {{-- Debit & Credit --}}
        <div class="grid md:grid-cols-2 gap-3">

            {{-- Debit --}}
            <div>
                <label class="text-[11px] font-semibold text-slate-600">
                    {{ __('customers.debit_optional') }}
                </label>
                <input type="number"
                       name="debit"
                       step="any"
                       value="{{ old('debit') }}"
                       placeholder="Example 100"
                       class="mt-1 w-full border border-slate-300 px-2 py-1 text-[12px]">
            </div>

            {{-- Credit --}}
            <div>
                <label class="text-[11px] font-semibold text-slate-600">
                    {{ __('customers.credit_optional') }}
                </label>
                <input type="number"
                       name="credit"
                       step="any"
                       value="{{ old('credit') }}"
                       placeholder="Example 100"
                       class="mt-1 w-full border border-slate-300 px-2 py-1 text-[12px]">
            </div>

        </div>

        {{-- Date --}}
        <div>
            <label class="text-[11px] font-semibold text-slate-600">
                {{ __('customers.posted_at_optional') }}
            </label>
            <input type="datetime-local"
                   name="posted_at"
                   value="{{ old('posted_at') }}"
                   class="mt-1 w-full border border-slate-300 px-2 py-1 text-[12px]">
        </div>

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

        {{-- Submit --}}
        <div class="pt-2 border-t border-slate-200">
            <button type="submit"
                    class="px-4 py-1.5 bg-slate-900 text-white text-[12px] hover:bg-slate-800">
                {{ __('customers.save_adjust') }}
            </button>
        </div>

    </form>
</div>
@endsection