@php
    $content = $content ?? [];
    $noun = $noun ?? 'items';
    $word = $word ?? 'shipping';
    $hasFlat = old('shipping_type', $content['shipping_type'] ?? 'none') === 'flat';
@endphp
<label class="mb-4 flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
    <div>
        <p class="text-sm font-semibold text-slate-900">Accept payments</p>
        <p class="mt-0.5 text-xs text-slate-500">Customers can add {{ $noun }} to cart and pay online. Leave off for a display-only page.</p>
    </div>
    <div class="relative ml-4 shrink-0">
        <input type="hidden" name="accepts_payment" value="0">
        <input type="checkbox" name="accepts_payment" value="1" class="sr-only peer" @checked(old('accepts_payment', $content['accepts_payment'] ?? false))>
        <div class="h-6 w-11 rounded-full bg-slate-200 transition-colors duration-200 peer-checked:bg-indigo-600"></div>
        <div class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200 peer-checked:translate-x-5"></div>
    </div>
</label>

<div x-data="{ hasFee: {{ $hasFlat ? 'true' : 'false' }} }" class="mb-4 overflow-hidden rounded-xl border border-slate-200 bg-white">
    <label class="flex cursor-pointer items-center justify-between px-4 py-3">
        <div>
            <p class="text-sm font-semibold text-slate-900">Charge for {{ $word }}</p>
            <p class="mt-0.5 text-xs text-slate-500">Add a flat {{ $word }} fee to customer orders.</p>
        </div>
        <div class="relative ml-4 shrink-0">
            <input type="checkbox" x-model="hasFee" class="sr-only peer">
            <div class="h-6 w-11 rounded-full bg-slate-200 transition-colors duration-200 peer-checked:bg-indigo-600"></div>
            <div class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200 peer-checked:translate-x-5"></div>
        </div>
    </label>
    <input type="hidden" name="shipping_type" :value="hasFee ? 'flat' : 'none'">
    <div x-show="hasFee" x-cloak class="border-t border-slate-100 px-4 pb-4 pt-3 space-y-3">
        <div>
            <label class="block text-[11px] font-medium text-slate-500">Flat {{ $word }} fee</label>
            <input type="number" name="shipping_fee" value="{{ old('shipping_fee', $content['shipping_fee'] ?? '0') }}"
                   min="0" step="0.01" placeholder="e.g. 15.00"
                   class="mt-1 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
        </div>
        <div>
            <label class="block text-[11px] font-medium text-slate-500">Free {{ $word }} above <span class="font-normal text-slate-400">(optional)</span></label>
            <input type="number" name="free_shipping_above" value="{{ old('free_shipping_above', $content['free_shipping_above'] ?? '0') }}"
                   min="0" step="0.01" placeholder="e.g. 200.00"
                   class="mt-1 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
            <p class="mt-1 text-[10px] text-slate-400">Waive the fee when the cart reaches this amount. Enter 0 to always charge.</p>
        </div>
    </div>
</div>