<flux:main>
    <flux:heading size="xl">Pengaturan Aplikasi</flux:heading>
    <flux:separator variant="subtle" class="my-8" />
    <div class="flex flex-col lg:flex-row gap-4 lg:gap-6">
        <div class="w-80">
            <flux:heading size="xl">Umum</flux:heading>
            <flux:subheading>Kelola informasi dasar seperti nama situs, tagline, dan detail utama lainnya yang digunakan
                di seluruh sistem.</flux:subheading>
        </div>
        <div class="flex-1 space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <flux:field>
                    <flux:label>Nama Situs <span class="text-red-500 ms-1">*</span></flux:label>
                    <flux:input placeholder="Yadi Parfum" wire:model.live.debounce.500ms="generalForm.site_name"
                        autocomplete="off" />
                    <flux:error name="generalForm.site_name" />
                </flux:field>

                <flux:field>
                    <flux:label>Tagline <span class="text-red-500 ms-1">*</span></flux:label>
                    <flux:input placeholder="Seungit Pisan" wire:model.live.debounce.500ms="generalForm.site_tagline" />
                </flux:field>
            </div>

            <flux:field>
                <flux:label>Deskripsi <span class="text-red-500 ms-1">*</span></flux:label>
                <flux:textarea rows="4" placeholder="Tuliskan deskripsi singkat tentang bisnis Anda"
                    wire:model.live.debounce.500ms="generalForm.site_description" />
            </flux:field>

            <flux:field>
                <flux:label>Mode Pemeliharaan</flux:label>
                <flux:switch wire:model="generalForm.maintenance_mode" />
            </flux:field>

            @can('update general settings')
                <flux:button variant="primary" wire:click="updateGeneral">
                    Simpan
                </flux:button>
            @endcan
        </div>
    </div>
    <flux:separator variant="subtle" class="my-8" />

    <div class="flex flex-col lg:flex-row gap-4 lg:gap-6">
        <div class="w-80">
            <flux:heading size="xl">Kontak</flux:heading>
            <flux:subheading>
                Atur informasi kontak seperti alamat, nomor telepon, email, dan lokasi peta agar pelanggan
                mudah menghubungi Anda.
            </flux:subheading>
        </div>

        <div class="flex-1 space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <flux:field>
                    <flux:label>Nomor Telepon <span class="text-red-500 ms-1">*</span></flux:label>
                    <flux:input placeholder="0821 xxxx xxxx" mask="9999 9999 99999"
                        wire:model.live.debounce.500ms="contactForm.phone_number" autocomplete="off" />
                    <flux:error name="contactForm.phone_number" />
                </flux:field>

                <flux:input label="Email" placeholder="yadiparfum@.com"
                    wire:model.live.debounce.500ms="contactForm.email" autocomplete="off" />
            </div>

            <flux:field>
                <flux:label>Alamat <span class="text-red-500 ms-1">*</span></flux:label>
                <flux:textarea rows="3" wire:model.live.debounce.500ms="contactForm.address"
                    placeholder="Jl. Taman Pahlawan No.41, Nagri Kaler, Kec. Purwakarta, Kabupaten Purwakarta, Jawa Barat 41119" />
                <flux:error name="contactForm.address" />
            </flux:field>

            <flux:textarea label="Embed Map" rows="3" wire:model.live.debounce.500ms="contactForm.map_embed"
                placeholder="https://maps.app.goo.gl/n1u88DfvpuNJmfCJ7" />

            @can('update contact settings')
                <flux:button variant="primary" wire:click="updateContact">
                    Simpan
                </flux:button>
            @endcan
        </div>
    </div>
    <flux:separator variant="subtle" class="my-8" />

    <div class="flex flex-col lg:flex-row gap-4 lg:gap-6">
        <div class="w-80">
            <flux:heading size="xl">Media Sosial</flux:heading>
            <flux:subheading>
                Hubungkan situs Anda dengan berbagai platform media sosial untuk memperkuat kehadiran dan interaksi
                online.
            </flux:subheading>
        </div>

        <div class="flex-1 space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <flux:input label="Facebook" wire:model.live.debounce.500ms="socialForm.facebook"
                    placeholder="https://facebook.com/yadiparfum" />

                <flux:input label="Instagram" wire:model.live.debounce.500ms="socialForm.instagram"
                    placeholder="https://instagram.com/yadiparfum" />

                <flux:input label="YouTube" wire:model.live.debounce.500ms="socialForm.youtube"
                    placeholder="https://youtube.com/@yadiparfum" />

                <flux:input label="TikTok" wire:model.live.debounce.500ms="socialForm.tiktok"
                    placeholder="https://tiktok.com/@yadiparfum" />

                <flux:input label="WhatsApp" wire:model.live.debounce.500ms="socialForm.whatsapp"
                    placeholder="https://wa.me/6281234567890" />

                <flux:input label="Telegram" wire:model.live.debounce.500ms="socialForm.telegram"
                    placeholder="https://t.me/yadiparfum" />
            </div>

            @can('update social settings')
                <flux:button variant="primary" wire:click="updateSocial">
                    Simpan
                </flux:button>
            @endcan
        </div>
    </div>
    <flux:separator variant="subtle" class="my-8" />

    <div class="flex flex-col lg:flex-row gap-4 lg:gap-6">
        <div class="w-80">
            <flux:heading size="xl">SEO</flux:heading>
            <flux:subheading>
                Optimalkan visibilitas situs di mesin pencari dan media sosial dengan mengatur meta tag, Open Graph, dan
                informasi berbagi.
            </flux:subheading>
        </div>

        <div class="flex-1 space-y-8">
            <div class="space-y-6">
                <flux:field>
                    <flux:label>Meta Description <span class="text-red-500 ms-1">*</span></flux:label>
                    <flux:textarea rows="3" wire:model.live.debounce.500ms="seoForm.meta_description"
                        placeholder="Tulis deskripsi singkat situs Anda yang akan muncul di hasil pencarian Google." />
                    <flux:error name="seoForm.meta_description" />
                </flux:field>

                <flux:field>
                    <flux:label>Meta Keywords <span class="text-red-500 ms-1">*</span></flux:label>
                    <flux:input wire:model.live.debounce.500ms="seoForm.meta_keywords"
                        placeholder="parfum refill, parfum original, toko parfum Purwakarta" />
                    <flux:error name="seoForm.meta_keywords" />
                </flux:field>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <flux:field>
                        <flux:label>Meta Author <span class="text-red-500 ms-1">*</span></flux:label>
                        <flux:input wire:model.live.debounce.500ms="seoForm.meta_author"
                            placeholder="Yadi Parfum Official" />
                        <flux:error name="seoForm.meta_author" />
                    </flux:field>

                    <flux:input label="OG Title" wire:model.live.debounce.500ms="seoForm.og_title"
                        placeholder="Yadi Parfum – Wangi yang Mewakili Gaya Anda" />
                </div>

                <flux:textarea label="OG Description" rows="3"
                    wire:model.live.debounce.500ms="seoForm.og_description"
                    placeholder="Temukan koleksi parfum terbaik dari Yadi Parfum untuk setiap momen istimewa." />

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <flux:input label="OG Type" wire:model.live.debounce.500ms="seoForm.og_type"
                        placeholder="website, article, product, dll." />

                    <flux:input label="Twitter Card" wire:model.live.debounce.500ms="seoForm.twitter_card"
                        placeholder="summary_large_image" />

                    <flux:input label="Canonical URL" wire:model.live.debounce.500ms="seoForm.canonical_url"
                        placeholder="https://yadiparfum.com" />
                </div>
            </div>

            @can('update seo settings')
                <flux:button variant="primary" wire:click="updateSeo">
                    Simpan
                </flux:button>
            @endcan
        </div>
    </div>
</flux:main>
