@extends('layouts.merchant')

@section('title', 'Банковские реквизиты')

@section('content')
<h1 class="text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">Банковские реквизиты</h1>
<p class="mt-2 max-w-2xl text-sm leading-relaxed text-[var(--color-muted)]">
    Из них собирается счёт на оплату для покупателей-организаций. Счетов может быть несколько —
    при выставлении вы выберете, с какого выставить.
</p>

@if ($errors->any())
    <div class="mt-4 rounded-[var(--radius-md)] bg-[#FDECEE] 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-[1.5px] border-[#E1E4EA] 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 ($accounts->isNotEmpty())
    <div class="mt-6 space-y-3">
        @foreach ($accounts as $account)
            <div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-5">
                <form method="POST" action="{{ route('merchant.bank-accounts.update', $account) }}">
                    @csrf
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <h2 class="font-extrabold text-[var(--color-ink)]">{{ $account->title }}</h2>
                        @if ($account->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"><span class="{{ $label }}">Название</span>
                            <input name="title" value="{{ $account->title }}" required maxlength="120" class="{{ $input }}">
                        </label>
                        <label class="block"><span class="{{ $label }}">Банк</span>
                            <input name="bank_name" value="{{ $account->bank_name }}" required class="{{ $input }}">
                        </label>
                        <label class="block"><span class="{{ $label }}">БИК</span>
                            <input name="bic" value="{{ $account->bic }}" required inputmode="numeric" class="{{ $input }}">
                        </label>
                        <label class="block"><span class="{{ $label }}">Корр. счёт</span>
                            <input name="corr_account" value="{{ $account->corr_account }}" inputmode="numeric" class="{{ $input }}">
                        </label>
                        <label class="block sm:col-span-2"><span class="{{ $label }}">Расчётный счёт</span>
                            <input name="account" value="{{ $account->account }}" required inputmode="numeric" class="{{ $input }}">
                        </label>
                        <label class="block sm:col-span-2">
                            <span class="{{ $label }}">Примечание в счёте</span>
                            <input name="note" value="{{ $account->note }}" maxlength="500"
                                   placeholder="Например: оплата физическими лицами недопустима"
                                   class="{{ $input }}">
                            <span class="mt-1 block text-xs text-[var(--color-muted)]">Печатается в счёте красным, под итоговой суммой.</span>
                        </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($account->is_default)>
                            Использовать по умолчанию
                        </label>
                        <div class="flex items-center gap-2">
                            <button class="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-4 py-2 text-sm font-bold text-white shadow-[var(--shadow-primary)]">Сохранить</button>
                        </div>
                    </div>
                </form>

                <div class="mt-3 border-t border-[var(--color-line)] pt-3">
                    <x-confirm-form :action="route('merchant.bank-accounts.destroy', $account)" 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('merchant.bank-accounts.store') }}" class="mt-3">
        @csrf
        <div class="grid gap-3 sm:grid-cols-2">
            <label class="block"><span class="{{ $label }}">Название</span>
                <input name="title" value="{{ old('title') }}" required maxlength="120" placeholder="Например: счёт в Т-Банке" class="{{ $input }}">
            </label>
            <label class="block"><span class="{{ $label }}">Банк</span>
                <input name="bank_name" value="{{ old('bank_name') }}" required class="{{ $input }}">
            </label>
            <label class="block"><span class="{{ $label }}">БИК</span>
                <input name="bic" value="{{ old('bic') }}" required inputmode="numeric" class="{{ $input }}">
            </label>
            <label class="block"><span class="{{ $label }}">Корр. счёт</span>
                <input name="corr_account" value="{{ old('corr_account') }}" inputmode="numeric" class="{{ $input }}">
            </label>
            <label class="block sm:col-span-2"><span class="{{ $label }}">Расчётный счёт</span>
                <input name="account" value="{{ old('account') }}" required inputmode="numeric" class="{{ $input }}">
            </label>
            <label class="block sm:col-span-2"><span class="{{ $label }}">Примечание в счёте</span>
                <input name="note" value="{{ old('note') }}" maxlength="500"
                       placeholder="Например: оплата физическими лицами недопустима" 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 shadow-[var(--shadow-primary)]">Добавить</button>
        </div>
    </form>
</div>
@endsection