<div x-data>

    {{-- Header --}}
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-slate-800">Pengaturan</h1>
        <p class="text-sm text-slate-500 mt-0.5">Kelola konfigurasi dasar sistem Titipin Ba Be.</p>
    </div>

    {{-- Tab Navigation --}}
    <div class="flex flex-wrap gap-2 mb-6 border-b border-slate-200 pb-px">
        <button type="button" wire:click="setTab('store')"
            class="px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors
                {{ $activeTab === 'store' ? 'border-orange-500 text-orange-600' : 'border-transparent text-slate-500 hover:text-slate-700' }}">
            Identitas Toko
        </button>
        <button type="button" wire:click="setTab('operational')"
            class="px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors
                {{ $activeTab === 'operational' ? 'border-orange-500 text-orange-600' : 'border-transparent text-slate-500 hover:text-slate-700' }}">
            Operasional
        </button>
        <button type="button" wire:click="setTab('order')"
            class="px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors
                {{ $activeTab === 'order' ? 'border-orange-500 text-orange-600' : 'border-transparent text-slate-500 hover:text-slate-700' }}">
            Pesanan
        </button>
        <button type="button" wire:click="setTab('notification')"
            class="px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors
                {{ $activeTab === 'notification' ? 'border-orange-500 text-orange-600' : 'border-transparent text-slate-500 hover:text-slate-700' }}">
            Notifikasi
        </button>
        <button type="button" wire:click="setTab('payment')"
            class="px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors
                {{ $activeTab === 'payment' ? 'border-orange-500 text-orange-600' : 'border-transparent text-slate-500 hover:text-slate-700' }}">
            Pembayaran
        </button>
    </div>

    <div class="max-w-2xl">

        {{-- ══════════════ TAB: Identitas Toko ══════════════ --}}
        @if ($activeTab === 'store')
            <form wire:submit.prevent="saveStoreIdentity" class="bg-white rounded-xl border border-slate-200 p-6 space-y-5">
                <div>
                    <h2 class="font-semibold text-slate-800">Identitas Toko</h2>
                    <p class="text-sm text-slate-500 mt-0.5">Informasi dasar yang ditampilkan ke customer.</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Nama Toko <span class="text-red-500">*</span></label>
                    <input wire:model="store_name" type="text" placeholder="Contoh: Titipin Ba Be"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                    @error('store_name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Upload Logo --}}
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Logo Toko</label>

                    @if ($existing_logo && ! $store_logo)
                        <div class="relative inline-block mb-2 group">
                            <img src="{{ Storage::url($existing_logo) }}"
                                class="w-24 h-24 object-cover rounded-xl border border-slate-200" />
                            <button type="button" wire:click="removeLogo" wire:confirm="Hapus logo ini?"
                                class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-600">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            </button>
                        </div>
                    @endif

                    @if ($store_logo)
                        <div class="relative inline-block mb-2">
                            <img src="{{ $store_logo->temporaryUrl() }}"
                                class="w-24 h-24 object-cover rounded-xl border border-slate-200" />
                            <button type="button" wire:click="$set('store_logo', null)"
                                class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            </button>
                        </div>
                    @endif

                    <div>
                        <label class="inline-flex items-center gap-2 px-3 py-2 text-sm text-slate-600 bg-slate-50 border border-slate-300 rounded-lg cursor-pointer hover:bg-slate-100 transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 7.5m0 0L7.5 12m4.5-4.5v9"/>
                            </svg>
                            {{ $existing_logo || $store_logo ? 'Ganti Logo' : 'Unggah Logo' }}
                            <input type="file" wire:model="store_logo" accept="image/jpeg,image/png,image/webp" class="hidden" />
                        </label>
                        <p class="mt-1 text-xs text-slate-400">JPG, PNG, WEBP. Maks 2MB.</p>
                    </div>

                    @error('store_logo') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror

                    <div wire:loading wire:target="store_logo" class="mt-2 flex items-center gap-2 text-xs text-slate-500">
                        <svg class="animate-spin w-3.5 h-3.5 text-orange-500" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                        </svg>
                        Mengunggah...
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Nomor WhatsApp Admin</label>
                    <input wire:model="wa_admin" type="text" placeholder="08xxxxxxxxxx"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                    @error('wa_admin') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Email</label>
                    <input wire:model="store_email" type="email" placeholder="toko@titipinbabe.com"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                    @error('store_email') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Alamat</label>
                    <textarea wire:model="store_address" rows="3" placeholder="Alamat lengkap toko..."
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 resize-none"></textarea>
                    @error('store_address') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="flex justify-end pt-2 border-t border-slate-100">
                    <button type="submit"
                        class="px-4 py-2 text-sm font-medium text-white bg-orange-500 rounded-lg hover:bg-orange-600"
                        wire:loading.attr="disabled" wire:target="saveStoreIdentity">
                        <span wire:loading.remove wire:target="saveStoreIdentity">Simpan Identitas Toko</span>
                        <span wire:loading wire:target="saveStoreIdentity">Menyimpan...</span>
                    </button>
                </div>
            </form>
        @endif

        {{-- ══════════════ TAB: Operasional ══════════════ --}}
        @if ($activeTab === 'operational')
            <form wire:submit.prevent="saveOperational" class="bg-white rounded-xl border border-slate-200 p-6 space-y-5">
                <div>
                    <h2 class="font-semibold text-slate-800">Operasional</h2>
                    <p class="text-sm text-slate-500 mt-0.5">Pengaturan jam operasional dan transaksi.</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Jam Operasional</label>
                    <input wire:model="operating_hours" type="text" placeholder="Contoh: 07.00 – 21.00 WIB"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                    <p class="mt-1 text-xs text-slate-400">Ditulis bebas, contoh: "07.00 – 21.00 WIB" atau "Senin–Sabtu, 08.00–20.00".</p>
                    @error('operating_hours') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Minimal Belanja <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400 font-medium">Rp</span>
                        <input wire:model="min_order" type="number" min="0" step="500" placeholder="0"
                            class="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                    </div>
                    <p class="mt-1 text-xs text-slate-400">Batas minimal total belanja agar customer bisa checkout.</p>
                    @error('min_order') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Mode Perhitungan Ongkir <span class="text-red-500">*</span></label>
                    <select wire:model="shipping_mode"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 bg-white">
                        @foreach ($shippingModes as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-400">
                        <span class="font-medium text-slate-600">Flat per Pesanan</span> = perilaku saat ini.
                        Mode lain (Per Mitra, Manual Admin) akan aktif pada sprint berikutnya.
                    </p>
                    @error('shipping_mode') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Ongkir Default <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400 font-medium">Rp</span>
                        <input wire:model="default_delivery_cost" type="number" min="0" step="500" placeholder="0"
                            class="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                    </div>
                    <p class="mt-1 text-xs text-slate-400">Dipakai jika area pengiriman customer tidak terdaftar di Area Ongkir.</p>
                    @error('default_delivery_cost') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="flex justify-end pt-2 border-t border-slate-100">
                    <button type="submit"
                        class="px-4 py-2 text-sm font-medium text-white bg-orange-500 rounded-lg hover:bg-orange-600"
                        wire:loading.attr="disabled" wire:target="saveOperational">
                        <span wire:loading.remove wire:target="saveOperational">Simpan Operasional</span>
                        <span wire:loading wire:target="saveOperational">Menyimpan...</span>
                    </button>
                </div>
            </form>
        @endif

        {{-- ══════════════ TAB: Pesanan ══════════════ --}}
        @if ($activeTab === 'order')
            <form wire:submit.prevent="saveOrder" class="bg-white rounded-xl border border-slate-200 p-6 space-y-5">
                <div>
                    <h2 class="font-semibold text-slate-800">Pesanan</h2>
                    <p class="text-sm text-slate-500 mt-0.5">Aturan otomatis terkait alur pesanan.</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Auto Cancel Pesanan Pending <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input wire:model="auto_cancel_pending_minutes" type="number" min="0" step="5" placeholder="60"
                            class="w-full px-3 py-2 pr-14 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-slate-400 pointer-events-none">menit</span>
                    </div>
                    <p class="mt-1 text-xs text-slate-400">Pesanan berstatus "Menunggu Pembayaran" otomatis dibatalkan setelah durasi ini. Isi 0 untuk menonaktifkan.</p>
                    @error('auto_cancel_pending_minutes') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Durasi Checkout <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input wire:model="checkout_duration_minutes" type="number" min="1" step="1" placeholder="15"
                            class="w-full px-3 py-2 pr-14 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-slate-400 pointer-events-none">menit</span>
                    </div>
                    <p class="mt-1 text-xs text-slate-400">Batas waktu customer menyelesaikan proses checkout sebelum keranjang kedaluwarsa.</p>
                    @error('checkout_duration_minutes') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="flex justify-end pt-2 border-t border-slate-100">
                    <button type="submit"
                        class="px-4 py-2 text-sm font-medium text-white bg-orange-500 rounded-lg hover:bg-orange-600"
                        wire:loading.attr="disabled" wire:target="saveOrder">
                        <span wire:loading.remove wire:target="saveOrder">Simpan Pengaturan Pesanan</span>
                        <span wire:loading wire:target="saveOrder">Menyimpan...</span>
                    </button>
                </div>
            </form>
        @endif

        {{-- ══════════════ TAB: Notifikasi ══════════════ --}}
        @if ($activeTab === 'notification')
            <form wire:submit.prevent="saveNotification" class="bg-white rounded-xl border border-slate-200 p-6 space-y-5">
                <div>
                    <h2 class="font-semibold text-slate-800">Notifikasi</h2>
                    <p class="text-sm text-slate-500 mt-0.5">Kelola pengiriman notifikasi otomatis.</p>
                </div>

                <div class="flex items-center justify-between py-2">
                    <div>
                        <p class="text-sm font-medium text-slate-700">Notifikasi WhatsApp</p>
                        <p class="text-xs text-slate-400">Kirim notifikasi otomatis ke customer via WhatsApp (status pesanan, dll).</p>
                    </div>
                    <button type="button" wire:click="$toggle('wa_notification_enabled')"
                        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors shrink-0 ml-4
                            {{ $wa_notification_enabled ? 'bg-orange-500' : 'bg-slate-200' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform
                            {{ $wa_notification_enabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>

                <div class="flex justify-end pt-2 border-t border-slate-100">
                    <button type="submit"
                        class="px-4 py-2 text-sm font-medium text-white bg-orange-500 rounded-lg hover:bg-orange-600"
                        wire:loading.attr="disabled" wire:target="saveNotification">
                        <span wire:loading.remove wire:target="saveNotification">Simpan Notifikasi</span>
                        <span wire:loading wire:target="saveNotification">Menyimpan...</span>
                    </button>
                </div>
            </form>
        @endif

        {{-- ══════════════ TAB: Pembayaran ══════════════ --}}
        @if ($activeTab === 'payment')
            <form wire:submit.prevent="savePayment" class="space-y-5">

                {{-- Rekening Bank --}}
                <div class="bg-white rounded-xl border border-slate-200 p-6">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h2 class="font-semibold text-slate-800">Rekening Bank</h2>
                            <p class="text-xs text-slate-500 mt-0.5">Ditampilkan ke customer setelah checkout transfer.</p>
                        </div>
                        <button type="button" wire:click="addBank"
                            class="text-xs font-medium text-orange-600 hover:text-orange-700 border border-orange-300
                                   hover:bg-orange-50 px-3 py-1.5 rounded-lg transition-colors">
                            + Tambah Rekening
                        </button>
                    </div>

                    <div class="space-y-4">
                        @forelse ($bank_accounts as $i => $bank)
                            <div class="p-4 border border-slate-200 rounded-xl space-y-3 relative">
                                <button type="button" wire:click="removeBank({{ $i }})"
                                    class="absolute top-3 right-3 text-slate-300 hover:text-red-400 transition-colors">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                                <div>
                                    <label class="block text-xs font-medium text-slate-600 mb-1">Nama Bank</label>
                                    <input type="text" wire:model="bank_accounts.{{ $i }}.bank_name"
                                           placeholder="Contoh: BCA, BRI, Mandiri, BNI"
                                           class="w-full h-9 px-3 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-400" />
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-slate-600 mb-1">Nomor Rekening</label>
                                    <input type="text" wire:model="bank_accounts.{{ $i }}.account_number"
                                           placeholder="Contoh: 1234567890"
                                           class="w-full h-9 px-3 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 font-mono" />
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-slate-600 mb-1">Atas Nama</label>
                                    <input type="text" wire:model="bank_accounts.{{ $i }}.account_name"
                                           placeholder="Nama pemilik rekening"
                                           class="w-full h-9 px-3 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-400" />
                                </div>
                            </div>
                        @empty
                            <p class="text-sm text-slate-400 text-center py-4">
                                Belum ada rekening. Klik "+ Tambah Rekening".
                            </p>
                        @endforelse
                    </div>

                    <div class="mt-4">
                        <label class="block text-xs font-medium text-slate-600 mb-1">Instruksi Transfer</label>
                        <textarea wire:model="transfer_instruction" rows="3"
                                  placeholder="Instruksi transfer yang ditampilkan ke customer setelah checkout..."
                                  class="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm
                                         focus:outline-none focus:ring-2 focus:ring-orange-400 resize-none"></textarea>
                        <p class="text-xs text-slate-400 mt-1">Kosongkan untuk menggunakan instruksi default.</p>
                    </div>
                </div>

                {{-- QRIS --}}
                <div class="bg-white rounded-xl border border-slate-200 p-6">
                    <div class="mb-4">
                        <h2 class="font-semibold text-slate-800">QRIS</h2>
                        <p class="text-xs text-slate-500 mt-0.5">Upload gambar QRIS statis dari provider Anda.</p>
                    </div>

                    @if ($existing_qris_image)
                        <div class="mb-4 flex items-start gap-4">
                            <img src="{{ Storage::url($existing_qris_image) }}" alt="QRIS"
                                 class="w-36 h-36 object-contain border border-slate-200 rounded-xl" />
                            <div>
                                <p class="text-xs text-slate-600 mb-2">QRIS aktif</p>
                                <button type="button" wire:click="removeQris"
                                    wire:confirm="Hapus gambar QRIS?"
                                    class="text-xs text-red-500 hover:text-red-700 border border-red-200
                                           hover:bg-red-50 px-3 py-1.5 rounded-lg transition-colors">
                                    Hapus QRIS
                                </button>
                            </div>
                        </div>
                    @endif

                    <div class="mb-4">
                        <label class="block text-xs font-medium text-slate-600 mb-1">
                            {{ $existing_qris_image ? 'Ganti Gambar QRIS' : 'Upload Gambar QRIS' }}
                        </label>
                        <input type="file" wire:model="qris_image_file" accept="image/*"
                               class="w-full text-sm text-slate-600 file:mr-3 file:py-1.5 file:px-3
                                      file:rounded-lg file:border file:border-slate-200 file:text-xs
                                      file:font-medium file:text-slate-600 file:bg-white hover:file:bg-slate-50" />
                        @error('qris_image_file') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                        <p class="text-xs text-slate-400 mt-1">Format: JPG, PNG, WebP. Maks. 2MB.</p>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-slate-600 mb-1">Instruksi QRIS</label>
                        <textarea wire:model="qris_instruction" rows="3"
                                  placeholder="Instruksi QRIS yang ditampilkan ke customer setelah checkout..."
                                  class="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm
                                         focus:outline-none focus:ring-2 focus:ring-orange-400 resize-none"></textarea>
                        <p class="text-xs text-slate-400 mt-1">Kosongkan untuk menggunakan instruksi default.</p>
                    </div>
                </div>

                {{-- Simpan --}}
                <div class="flex justify-end">
                    <button type="submit"
                        wire:loading.attr="disabled" wire:target="savePayment"
                        class="h-10 px-6 bg-orange-500 hover:bg-orange-600 text-white text-sm font-semibold
                               rounded-xl transition-colors disabled:opacity-70">
                        <span wire:loading.remove wire:target="savePayment">Simpan Pembayaran</span>
                        <span wire:loading wire:target="savePayment">Menyimpan...</span>
                    </button>
                </div>
            </form>
        @endif

    </div>

    <x-admin.toast />
</div>
