@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title ?? 'Pengaturan' }}" />

    @if(session('success'))
        <div class="mb-4 rounded-lg bg-success-50 p-4 text-sm text-success-700 dark:bg-success-500/15 dark:text-success-500">
            {{ session('success') }}
        </div>
    @endif

    @php
        // aman kalau key settings kosong + bikin URL logo konsisten
        $logoFull = $settings['shop_logo'] ?? null;
        if ($logoFull && !\Illuminate\Support\Str::startsWith($logoFull, ['http://', 'https://'])) {
            $logoFull = asset($logoFull);
        }

        $logoIcon = $settings['shop_logo_icon'] ?? null;
        if ($logoIcon && !\Illuminate\Support\Str::startsWith($logoIcon, ['http://', 'https://'])) {
            $logoIcon = asset($logoIcon);
        }
    @endphp

    <div class="mx-auto max-w-7xl">
        <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:gap-8">
                <!-- Left Column: General Settings -->
                <div class="space-y-6">
                    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Pengaturan Toko</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Informasi utama toko untuk struk & faktur</p>
                        </div>
                        <div class="p-5 space-y-5">
                            {{-- Logo Upload Section --}}
                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                {{-- Logo Full --}}
                                <div
                                    x-data="{
                                        preview: @js($logoFull),
                                        handleFileSelect(e) {
                                            const file = e.target.files[0];
                                            if (file) {
                                                this.preview = URL.createObjectURL(file);
                                            }
                                        }
                                    }"
                                >
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                                        Logo Utama
                                    </label>
                                    <div class="relative flex h-32 cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 transition-colors hover:border-brand-400 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-brand-600"
                                        @click="$refs.logoInput.click()">
                                        <template x-if="preview">
                                            <img :src="preview" class="h-full max-h-28 object-contain p-2" alt="Logo Preview">
                                        </template>
                                        <template x-if="!preview">
                                            <div class="text-center">
                                                <svg class="mx-auto size-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                                </svg>
                                                <p class="mt-1 text-xs text-gray-500">Klik untuk upload</p>
                                            </div>
                                        </template>
                                        <input type="file" name="shop_logo" x-ref="logoInput" @change="handleFileSelect($event)"
                                            accept="image/jpeg,image/png" class="hidden">
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500">Logo lebar (max 2MB)</p>
                                    @error('shop_logo')
                                        <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
                                    @enderror
                                </div>

                                {{-- Logo Icon --}}
                                <div
                                    x-data="{
                                        preview: @js($logoIcon),
                                        handleFileSelect(e) {
                                            const file = e.target.files[0];
                                            if (file) {
                                                this.preview = URL.createObjectURL(file);
                                            }
                                        }
                                    }"
                                >
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                                        Logo Icon
                                    </label>
                                    <div class="relative flex h-32 cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 transition-colors hover:border-brand-400 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-brand-600"
                                        @click="$refs.iconInput.click()">
                                        <template x-if="preview">
                                            <img :src="preview" class="h-full max-h-28 object-contain p-2" alt="Icon Preview">
                                        </template>
                                        <template x-if="!preview">
                                            <div class="text-center">
                                                <svg class="mx-auto size-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                                </svg>
                                                <p class="mt-1 text-xs text-gray-500">Klik untuk upload</p>
                                            </div>
                                        </template>
                                        <input type="file" name="shop_logo_icon" x-ref="iconInput" @change="handleFileSelect($event)"
                                            accept="image/jpeg,image/png" class="hidden">
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500">Logo kotak (max 1MB)</p>
                                    @error('shop_logo_icon')
                                        <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <x-form.input
                                name="shop_name"
                                label="Nama Toko"
                                placeholder="Nama percetakan"
                                :value="$settings['shop_name'] ?? ''"
                                :required="true"
                            />

                            <x-form.textarea
                                name="shop_address"
                                label="Alamat"
                                placeholder="Alamat lengkap toko"
                                :value="$settings['shop_address'] ?? ''"
                                rows="3"
                            />

                            <x-form.input
                                name="shop_phone"
                                label="No. Telepon"
                                placeholder="08xx-xxxx-xxxx"
                                :value="$settings['shop_phone'] ?? ''"
                            />

                            <x-form.input
                                name="shop_footer"
                                label="Footer Struk"
                                placeholder="Terima kasih atas kepercayaan Anda"
                                :value="$settings['shop_footer'] ?? ''"
                                hint="Teks yang akan ditampilkan di bagian bawah struk"
                            />
                        </div>
                    </div>
                </div>

                <!-- Right Column: WA Settings -->
                <div class="space-y-6">
                    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
                         x-data="{
                            defaultTemplate: `Halo Kak *{nama}*,\n\nKami ingin menginformasikan bahwa orderan Kakak sudah *selesai* dan *siap diambil* ya.\n\n*Detail Order:*\n- No. Invoice: *{invoice}*\n- Tanggal Order: {tanggal}\n\nDitunggu kedatangannya, terima kasih!`,
                            defaultPiutang: `- Sisa Pembayaran: Rp {sisa}\n\nMohon untuk dapat melunasi sisa pembayaran saat pengambilan ya Kak.`,
                            resetDefaults() {
                                this.$refs.waTemplate.value = this.defaultTemplate;
                                this.$refs.waPiutang.value = this.defaultPiutang;
                            }
                         }">
                        <div class="flex items-center justify-between border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Template WhatsApp</h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Format pesan notifikasi order</p>
                            </div>
                            <button type="button" @click="resetDefaults()" class="text-xs text-brand-500 hover:text-brand-600 font-medium px-3 py-1.5 rounded-lg border border-brand-200 hover:bg-brand-50 dark:border-brand-500/30 dark:hover:bg-brand-500/10 transition-colors">
                                Reset Default
                            </button>
                        </div>
                        <div class="p-5 space-y-5">
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                                    Template Utama
                                </label>
                                <textarea x-ref="waTemplate" name="wa_template" rows="8" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 shadow-sm placeholder:text-gray-400 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800">{{ $settings['wa_template'] ?? '' }}</textarea>
                                @error('wa_template')
                                    <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                                    Template Tambahan Piutang
                                </label>
                                <textarea x-ref="waPiutang" name="wa_template_piutang" rows="4" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 shadow-sm placeholder:text-gray-400 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800">{{ $settings['wa_template_piutang'] ?? '' }}</textarea>
                                <p class="mt-1 text-xs text-gray-500">Teks ini ditambahkan jika order piutang belum lunas</p>
                                @error('wa_template_piutang')
                                    <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="rounded-lg bg-gray-50 dark:bg-gray-800 p-3">
                                <p class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">Variabel yang tersedia:</p>
                                <div class="grid grid-cols-2 gap-1 text-xs text-gray-500 dark:text-gray-400">
    <span><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{nama}</code> - Nama pelanggan</span>
    <span><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{invoice}</code> - No. invoice</span>
    <span><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{tanggal}</code> - Tanggal order</span>
    <span><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{total}</code> - Total harga</span>
    {{-- BARU: list item order --}}
    <span><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{items}</code> - Daftar item (produk + bahan + ukuran + qty)</span>
    <span><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{sisa}</code> - Sisa pembayaran</span>
    <span><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{dibayar}</code> - Jumlah dibayar</span>
</div>
                                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Gunakan *teks* untuk bold di WhatsApp</p>
                                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Kalau masih gk paham juga , Hub. Developer (Rio) pada tombol paling atas halaman utama berwarna hijau.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-6 flex items-center justify-end border-t border-gray-200 pt-6 dark:border-gray-700">
                <button type="submit" class="rounded-lg bg-brand-500 px-6 py-2.5 text-sm font-medium text-white hover:bg-brand-600 shadow-sm hover:shadow-md transition-all">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
@endsection