@extends('layouts.account')

@section('title', 'Мои организации — teeu')

@section('content')
<h1 class="text-[22px] font-extrabold tracking-[-0.5px] text-[var(--color-ink)] sm:text-[24px]">Мои организации</h1>
<p class="mt-2 max-w-2xl text-sm leading-relaxed text-[var(--color-slate)]">
    На них продавец выпишет счёт, если при оформлении выбрать оплату по счёту.
    Заполните один раз — дальше просто выбирайте нужную в заказе.
</p>

@if ($errors->any())
    <div class="mt-4 rounded-[var(--radius-md)] bg-[var(--color-sale-soft)] px-4 py-3 text-sm font-semibold text-[var(--color-sale)]">{{ $errors->first() }}</div>
@endif

@php($input = 'w-full rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white px-3 py-2 text-sm outline-none focus:border-[var(--color-primary)]')
@php($label = 'mb-1 block text-sm font-semibold text-[var(--color-ink)]')

@if ($organizations->isNotEmpty())
    <div class="mt-6 space-y-3">
        @foreach ($organizations as $organization)
            <div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-5">
                <form method="POST" action="{{ route('account.organizations.update', $organization) }}">
                    @csrf
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <h2 class="font-extrabold text-[var(--color-ink)]">{{ $organization->name }}</h2>
                        @if ($organization->is_default)
                            <span class="rounded-full bg-[var(--color-primary-soft)] px-2.5 py-1 text-xs font-bold text-[var(--color-primary)]">по умолчанию</span>
                        @endif
                    </div>

                    <div class="mt-3 grid gap-3 sm:grid-cols-2">
                        <label class="block sm:col-span-2"><span class="{{ $label }}">Название</span>
                            <input name="name" value="{{ $organization->name }}" required class="{{ $input }}">
                        </label>
                        <label class="block"><span class="{{ $label }}">ИНН</span>
                            <input name="inn" value="{{ $organization->inn }}" required inputmode="numeric" class="{{ $input }}">
                        </label>
                        <label class="block"><span class="{{ $label }}">КПП</span>
                            <input name="kpp" value="{{ $organization->kpp }}" inputmode="numeric" class="{{ $input }}">
                        </label>
                        <label class="block sm:col-span-2"><span class="{{ $label }}">Адрес</span>
                            <input name="address" value="{{ $organization->address }}" maxlength="500" class="{{ $input }}">
                        </label>
                    </div>

                    <div class="mt-3 flex flex-wrap items-center justify-between gap-3">
                        <label class="flex items-center gap-2 text-sm text-[var(--color-slate)]">
                            <input type="checkbox" name="is_default" value="1" @checked($organization->is_default)>
                            Выбирать по умолчанию
                        </label>
                        <button class="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-4 py-2 text-sm font-bold text-white">Сохранить</button>
                    </div>
                </form>

                <div class="mt-3 border-t border-[var(--color-line)] pt-3">
                    <x-confirm-form :action="route('account.organizations.destroy', $organization)" method="DELETE"
                                    title="Удалить организацию?"
                                    message="Уже выставленные счета не изменятся — реквизиты в них сохранены отдельно."
                                    confirm="Удалить" :danger="true">
                        <button type="button" class="text-sm font-semibold text-[var(--color-sale)] hover:underline">Удалить</button>
                    </x-confirm-form>
                </div>
            </div>
        @endforeach
    </div>
@endif

<div class="mt-6 rounded-[var(--radius-lg)] border border-dashed border-[var(--color-line)] bg-white p-5">
    <h2 class="font-extrabold text-[var(--color-ink)]">Добавить организацию</h2>
    <form method="POST" action="{{ route('account.organizations.store') }}" class="mt-3">
        @csrf
        <div class="grid gap-3 sm:grid-cols-2">
            <label class="block sm:col-span-2"><span class="{{ $label }}">Название</span>
                <input name="name" value="{{ old('name') }}" required placeholder="ООО «Ромашка»" class="{{ $input }}">
            </label>
            <label class="block"><span class="{{ $label }}">ИНН</span>
                <input name="inn" value="{{ old('inn') }}" required inputmode="numeric" class="{{ $input }}">
            </label>
            <label class="block">
                <span class="{{ $label }}">КПП</span>
                <input name="kpp" value="{{ old('kpp') }}" inputmode="numeric" class="{{ $input }}">
                <span class="mt-1 block text-xs text-[var(--color-muted)]">У ИП его нет — оставьте пустым.</span>
            </label>
            <label class="block sm:col-span-2"><span class="{{ $label }}">Адрес</span>
                <input name="address" value="{{ old('address') }}" maxlength="500" class="{{ $input }}">
            </label>
        </div>
        <div class="mt-3 flex flex-wrap items-center justify-between gap-3">
            <label class="flex items-center gap-2 text-sm text-[var(--color-slate)]">
                <input type="checkbox" name="is_default" value="1">
                Выбирать по умолчанию
            </label>
            <button class="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-5 py-2.5 text-sm font-bold text-white">Добавить</button>
        </div>
    </form>
</div>
@endsection