@extends('layouts.app')

@php
    $plainProductDescription = trim(preg_replace(
        '/\s+/',
        ' ',
        strip_tags((string) $product->description)
    ));

    $productMetaDescription = \Illuminate\Support\Str::limit(
        $plainProductDescription !== ''
            ? $plainProductDescription
            : 'Beli ' . $product->name . ' dengan proses yang aman dan praktis di GTGStore.',
        155
    );


    $isRobux = $product->usesRobuxBalance();
    $isManualFulfillment = $product->requiresManualFulfillment();
    $showPublicStockCount = ! $product->hidesPublicStockCount();
    $hasVariants = $product->activeVariants->isNotEmpty();
    $currentVariant = $hasVariants ? $selectedVariant : null;
    $currentPrice = (int) ($currentVariant?->price ?? $product->price);
    $currentOutOfStock = $product->isOutOfStock($currentVariant);
    $currentStockCount = $product->availableStockCount($currentVariant);
    $checkoutFields = collect($product->checkout_schema ?? [])->filter(
        fn ($field) => is_array($field) && filled($field['key'] ?? null)
    )->values();
@endphp

@section('title', $product->name . ' - GTGStore')
@section('description', $productMetaDescription)
@section('canonical', route('storefront.show', $product->public_id))

@section('content')
<section class="storefront-product-detail">
    <div class="storefront-checkout-shell">
        <a href="{{ route('storefront.products') }}"
           class="storefront-back-link"
>
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" d="m15 18-6-6 6-6"/>
            </svg>
            Kembali ke katalog
        </a>

        <div class="storefront-checkout-layout">
            <article class="storefront-product-summary">
                <div class="storefront-product-summary-top">
                    <div class="storefront-product-summary-visual">
                        <div class="storefront-product-summary-media">
                            @if ($product->image_path)
                                <img
                                    src="{{ $product->image_url }}"
                                    alt="{{ $product->name }}"
                                    width="640"
                                    height="480"
                                >
                            @else
                                <div class="storefront-detail-placeholder">
                                    {{ $product->name[0] ?? 'G' }}
                                </div>
                            @endif
                        </div>

                        <span id="stock-badge"
                              data-product-id="{{ $product->public_id }}"
                              data-product-stock-badge
                              class="storefront-detail-stock storefront-detail-stock-mobile {{ $currentOutOfStock ? 'is-out' : 'is-ready' }}">
                            <span id="stock-status-label" data-stock-status-label>{{ $currentOutOfStock ? 'Stok Habis' : 'Stok Tersedia' }}</span>
                            @if ($showPublicStockCount)
                                <strong id="stock-count" data-stock-count class="storefront-detail-stock-count">
                                    {{ $currentOutOfStock ? 0 : $currentStockCount }}
                                </strong>
                            @endif
                        </span>
                    </div>

                    <div class="storefront-product-summary-copy">
                        <div class="storefront-detail-badges" aria-label="Informasi produk">
                            <span class="storefront-detail-fulfillment {{ $isManualFulfillment ? 'is-manual' : 'is-instant' }}">
                                @if ($isManualFulfillment)
                                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                        <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm7 8a7 7 0 0 0-14 0" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                                    </svg>
                                    Manual Admin
                                @else
                                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                        <path d="m13 2-8 12h7l-1 8 8-12h-7l1-8Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
                                    </svg>
                                    Instan
                                @endif
                            </span>

                            <span
                                data-product-stock-badge
                                class="storefront-detail-stock storefront-detail-stock-desktop {{ $currentOutOfStock ? 'is-out' : 'is-ready' }}"
                            >
                                <span data-stock-status-label>{{ $currentOutOfStock ? 'Stok Habis' : 'Stok Tersedia' }}</span>
                                @if ($showPublicStockCount)
                                    <strong data-stock-count class="storefront-detail-stock-count">
                                        {{ $currentOutOfStock ? 0 : $currentStockCount }}
                                    </strong>
                                @endif
                            </span>
                        </div>

                        <h1 class="storefront-detail-title font-display">
                            {{ $product->name }}
                        </h1>

                        <strong id="price-display" class="storefront-detail-price font-figures">
                            Rp {{ number_format($currentPrice, 0, ',', '.') }}
                        </strong>

                        @if ($product->isBatchable())
                            <small id="price-per-unit-note" class="storefront-detail-unit-price hidden" data-unit-label="{{ strtolower($product->unitLabel()) }}">
                                Rp {{ number_format($currentPrice, 0, ',', '.') }}
                                / {{ strtolower($product->unitLabel()) }}
                            </small>
                        @endif
                    </div>
                </div>

                <section class="storefront-detail-description-panel" aria-label="Detail produk">
                    <span class="storefront-detail-description-label">Detail Produk</span>
                    <div class="storefront-detail-description">
                        {{ \Illuminate\Support\Str::limit(preg_replace('/(?:\r\n|\r|\n){2,}/', "\n", trim((string) $product->description)), 250) }}
                    </div>
                </section>

                <section class="storefront-product-terms" aria-labelledby="product-terms-title">
                    <div class="storefront-product-terms-heading">
                        <span aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none">
                                <path d="M12 3 4.5 6.5v5.8c0 4.2 2.8 7.4 7.5 8.7 4.7-1.3 7.5-4.5 7.5-8.7V6.5L12 3Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
                                <path d="M9 12.2 11 14l4-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <div>
                            <h2 id="product-terms-title">Syarat &amp; Ketentuan</h2>
                            <p>Mohon dibaca sebelum melanjutkan pembayaran.</p>
                        </div>
                    </div>

                    <ul>
                        <li>Wajib membaca deskripsi produk dengan teliti sebelum melakukan pembelian.</li>
                        <li>Produk yang sudah dibeli dan diproses tidak dapat dikembalikan (Non-Refundable).</li>
                        <li>Garansi berlaku penuh sesuai dengan durasi yang dipilih saat pembelian. ( hanya akan aktif untuk produk yang bergaransi )</li>
                        <li>Untuk produk akun, dilarang mengubah data sensitif (Email/Password) kecuali diizinkan.</li>
                        <li>Jika terjadi kendala, segera hubungi admin dengan menyertakan Invoice ID.</li>
                    </ul>
                </section>



            </article>

            <aside class="storefront-checkout-card {{ $currentOutOfStock ? 'is-out-of-stock' : 'has-checkout-form' }}">
                @if ($currentOutOfStock)
                    <div class="storefront-out-of-stock">
                        <div class="storefront-out-of-stock-icon">
                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M12 9v4m0 4h.01M10.3 4.5 2.8 18a2 2 0 0 0 1.75 3h14.9a2 2 0 0 0 1.75-3L13.7 4.5a2 2 0 0 0-3.4 0Z" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>

                        <h2 class="font-display">Stok Sedang Habis</h2>

                        <p>
                            Produk ini belum bisa dipesan. Silakan cek produk lain
                            atau hubungi admin untuk informasi ketersediaan.
                        </p>

                        <a href="https://wa.me/{{ config('services.whatsapp.admin_number') }}"
                           target="_blank"
                           rel="noopener"
                           class="storefront-secondary-button">
                            Hubungi Admin
                        </a>
                    </div>
                @else
                    <form id="checkout-form" class="storefront-checkout-form" data-unit-price="{{ $currentPrice }}" data-product-type="{{ $product->type }}">
                        <div class="storefront-checkout-data-panel">
                            <div class="storefront-checkout-header">
                                <span>
                                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                        <rect x="5" y="10" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.7"/>
                                        <path d="M8.5 10V7.5a3.5 3.5 0 0 1 7 0V10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
                                    </svg>
                                    Checkout Aman
                                </span>
                                <h2 class="font-display">Lengkapi Pesanan</h2>
                                <p>Pilih paket dan isi data tujuan dengan benar sebelum pembayaran.</p>
                            </div>

                            <input type="hidden" name="product_public_id" value="{{ $product->public_id }}">

                            @if ($hasVariants)
                                <section class="storefront-checkout-section is-product-choice" aria-labelledby="checkout-choice-title">
                                    <div class="storefront-checkout-section-heading">
                                        <span>01</span>
                                        <div>
                                            <h3 id="checkout-choice-title">Pilihan Produk</h3>
                                            <p>Pilih paket yang sesuai. Harga dan ketersediaan akan diperbarui otomatis.</p>
                                        </div>
                                    </div>

                                    <fieldset class="storefront-variant-fieldset">
                                        <legend>{{ $product->variant_option_name ?: 'Variant' }}</legend>
                                        <div class="storefront-variant-options {{ $isRobux ? 'is-robux' : '' }}">
                                            @foreach ($product->activeVariants as $variant)
                                                @php
                                                    $variantOut = $variant->isOutOfStock();
                                                @endphp
                                                <label
                                                    class="storefront-variant-option {{ $currentVariant?->id === $variant->id ? 'is-selected' : '' }} {{ $variantOut ? 'is-disabled' : '' }}"
                                                    data-checkout-variant-option
                                                >
                                                    <input
                                                        type="radio"
                                                        name="product_variant_public_id"
                                                        value="{{ $variant->public_id }}"
                                                        data-price="{{ $variant->price }}"
                                                        data-label="{{ $variant->name }}"
                                                        data-robux-amount="{{ $variant->robux_amount }}"
                                                        {{ $currentVariant?->id === $variant->id ? 'checked' : '' }}
                                                        {{ $variantOut ? 'disabled' : '' }}
                                                        required
                                                    >
                                                    @if ($isRobux)
                                                        <span class="storefront-variant-option-icon" aria-hidden="true"></span>
                                                    @endif
                                                    <span class="storefront-variant-option-copy">
                                                        <strong>{{ $variant->name }}</strong>
                                                        @if ($variant->description)
                                                            <small>{{ $variant->description }}</small>
                                                        @endif
                                                    </span>
                                                    <span class="storefront-variant-option-price font-figures">
                                                        Rp {{ number_format($variant->price, 0, ',', '.') }}
                                                    </span>
                                                </label>
                                            @endforeach
                                        </div>
                                    </fieldset>
                                </section>
                            @endif

                            <section class="storefront-checkout-section is-order-data" aria-labelledby="storefront-order-data-title">
                                <div class="storefront-checkout-section-heading">
                                    <span>{{ $hasVariants ? '02' : '01' }}</span>
                                    <div>
                                        <h3 id="storefront-order-data-title">Data Pesanan</h3>
                                        <p>{{ $isRobux ? 'Masukkan akun Roblox tujuan dan nomor WhatsApp yang aktif.' : 'Pastikan data pembeli dan data khusus pesanan sudah benar.' }}</p>
                                    </div>
                                </div>

                                @if ($checkoutFields->isNotEmpty())
                                    <div class="storefront-order-data-section">
                                        @unless ($isRobux)
                                            <div class="storefront-order-data-heading">
                                                <h4>Data Tujuan</h4>
                                                <p>Data berikut digunakan untuk memproses produk yang dipilih.</p>
                                            </div>
                                        @endunless

                                        <div class="storefront-custom-fields-grid {{ $isRobux ? 'is-robux' : '' }}">
                                            @foreach ($checkoutFields as $field)
                                                @php
                                                    $fieldKey = (string) ($field['key'] ?? '');
                                                    $fieldType = (string) ($field['type'] ?? 'text');
                                                    $inputType = $fieldType === 'email' ? 'email' : 'text';
                                                    $inputMode = match ($fieldType) {
                                                        'number' => 'numeric',
                                                        'whatsapp' => 'tel',
                                                        default => null,
                                                    };
                                                    $fieldLabel = trim((string) ($field['label'] ?? '')) ?: \Illuminate\Support\Str::headline($fieldKey);
                                                    $autocomplete = match ($fieldType) {
                                                        'email' => 'email',
                                                        'whatsapp' => 'tel',
                                                        default => 'off',
                                                    };
                                                @endphp
                                                @if ($fieldKey !== '')
                                                    <div class="storefront-form-group">
                                                        <label for="answer-{{ $loop->index }}">{{ $fieldLabel }}</label>
                                                        <input
                                                            id="answer-{{ $loop->index }}"
                                                            type="{{ $inputType }}"
                                                            name="answers[{{ $fieldKey }}]"
                                                            {{ ($field['required'] ?? true) ? 'required' : '' }}
                                                            @if ($inputMode) inputmode="{{ $inputMode }}" @endif
                                                            @if (!empty($field['placeholder'])) placeholder="{{ $field['placeholder'] }}" @endif
                                                            maxlength="{{ max(1, min(500, (int) ($field['max_length'] ?? 100))) }}"
                                                            autocomplete="{{ $autocomplete }}"
                                                            class="storefront-input"
                                                        >
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                                @unless ($isRobux)
                                    <div class="storefront-order-data-heading is-contact-heading">
                                        <h4>Data Pembeli</h4>
                                        <p>Invoice dan informasi pesanan dikirim ke kontak berikut.</p>
                                    </div>
                                    <div class="storefront-form-grid">
                                        <div class="storefront-form-group">
                                            <label for="customer-name">Nama Lengkap</label>
                                            <input id="customer-name" type="text" name="customer_name" required autocomplete="name" placeholder="Contoh: Andi Pratama" class="storefront-input">
                                        </div>
                                        <div class="storefront-form-group">
                                            <label for="customer-whatsapp">Nomor WhatsApp</label>
                                            <input id="customer-whatsapp" type="text" name="customer_whatsapp" required inputmode="tel" autocomplete="tel" placeholder="08xxxxxxxxxx" class="storefront-input">
                                        </div>
                                        <div class="storefront-form-group is-full-span">
                                            <label for="customer-email">Email</label>
                                            <input id="customer-email" type="email" name="customer_email" required autocomplete="email" placeholder="nama@email.com" class="storefront-input">
                                        </div>
                                    </div>
                                @else
                                    <div class="storefront-form-group storefront-robux-whatsapp">
                                        <label for="customer-whatsapp">Nomor WhatsApp</label>
                                        <input id="customer-whatsapp" type="text" name="customer_whatsapp" required inputmode="tel" autocomplete="tel" placeholder="08xxxxxxxxxx" class="storefront-input">
                                        <small>Pastikan nomor aktif agar admin dapat menghubungi jika diperlukan.</small>
                                    </div>
                                @endunless
                            </section>

                            @if ($product->isBatchable())
                                @php
                                    $maxQuantity = min(
                                        $currentStockCount,
                                        \App\Http\Requests\StoreCheckoutRequest::MAX_BATCH_QUANTITY
                                    );
                                    $unitLabelLower = strtolower($product->unitLabel());
                                @endphp

                                <section class="storefront-checkout-section is-quantity" aria-labelledby="checkout-quantity-title">
                                    <div class="storefront-checkout-section-heading">
                                        <span>{{ $hasVariants ? '03' : '02' }}</span>
                                        <div>
                                            <h3 id="checkout-quantity-title">Jumlah Pembelian</h3>
                                            <p>Atur jumlah unit setelah data pesanan terisi.</p>
                                        </div>
                                    </div>

                                    <div class="storefront-form-group storefront-quantity-group">
                                        <label>Jumlah {{ $product->unitLabel() }}</label>
                                        <div class="storefront-quantity-row">
                                            <div class="storefront-quantity-control">
                                                <button type="button" id="qty-decrement" class="storefront-quantity-button" aria-label="Kurangi jumlah">&minus;</button>
                                                <input
                                                    type="text"
                                                    name="quantity"
                                                    id="qty-input"
                                                    value="1"
                                                    min="1"
                                                    max="{{ $maxQuantity }}"
                                                    data-hard-cap="{{ \App\Http\Requests\StoreCheckoutRequest::MAX_BATCH_QUANTITY }}"
                                                    inputmode="numeric"
                                                    pattern="[0-9]*"
                                                    autocomplete="off"
                                                    aria-label="Jumlah pembelian"
                                                    class="storefront-quantity-input no-spinner"
                                                >
                                                <button type="button" id="qty-increment" class="storefront-quantity-button" aria-label="Tambah jumlah">&plus;</button>
                                            </div>
                                            <div class="storefront-quantity-notes">
                                                <span id="qty-stock-note" class="storefront-quantity-note">Tersedia <strong id="qty-stock-count">{{ $currentStockCount }}</strong> {{ $unitLabelLower }}</span>
                                                <span id="qty-max-note" class="storefront-quantity-note">Maksimal {{ $maxQuantity }} {{ $unitLabelLower }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            @endif

                            <section class="storefront-checkout-section is-promo" aria-labelledby="checkout-promo-title">
                                <div class="storefront-checkout-section-heading is-compact">
                                    <span>{{ $hasVariants && $product->isBatchable() ? '04' : (($hasVariants || $product->isBatchable()) ? '03' : '02') }}</span>
                                    <div>
                                        <h3 id="checkout-promo-title">Voucher</h3>
                                        <p>Gunakan kode promo bila tersedia.</p>
                                    </div>
                                </div>
                                <div class="storefront-form-group">
                                    <label for="voucher-code">Kode Voucher <span>(opsional)</span></label>
                                    <div class="flex gap-2">
                                        <input id="voucher-code" type="text" name="voucher_code" maxlength="64" autocomplete="off" class="storefront-input flex-1" placeholder="Masukkan kode voucher" style="text-transform: uppercase">
                                        <button type="button" id="voucher-apply" class="px-4 rounded-xl border border-current font-semibold">Gunakan</button>
                                    </div>
                                    <p id="voucher-message" class="mt-2 text-sm hidden"></p>
                                </div>
                            </section>
                        </div>

                        <div class="storefront-checkout-finalize">
                            <div class="storefront-order-summary">
                                <h3>Ringkasan Pesanan</h3>
                                <dl>
                                    <div><dt>Produk</dt><dd>{{ $product->name }}</dd></div>
                                    @if ($hasVariants)
                                        <div><dt>{{ $product->variant_option_name ?: 'Variant' }}</dt><dd id="summary-variant">{{ $currentVariant?->name }}</dd></div>
                                    @endif
                                    @if ($product->isBatchable())
                                        <div><dt>Jumlah</dt><dd><span id="summary-quantity">1</span> {{ $product->unitLabel() }}</dd></div>
                                    @endif
                                    <div><dt>Harga</dt><dd id="summary-subtotal" class="font-figures">Rp {{ number_format($currentPrice, 0, ',', '.') }}</dd></div>
                                    <div id="summary-discount-row" class="hidden"><dt>Diskon Voucher</dt><dd id="summary-discount" class="font-figures">- Rp 0</dd></div>
                                    <div class="storefront-order-total"><dt>Total</dt><dd id="summary-total" class="font-figures">Rp {{ number_format($currentPrice, 0, ',', '.') }}</dd></div>
                                </dl>
                            </div>

                            <button type="submit" class="storefront-checkout-button" data-default-label="Checkout Sekarang">
                                <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                    <rect x="5" y="10" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.7"/>
                                    <path d="M8.5 10V7.5a3.5 3.5 0 0 1 7 0V10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
                                </svg>
                                <span data-checkout-button-label>Checkout Sekarang</span>
                            </button>
                            <p id="checkout-error" class="storefront-checkout-error hidden"></p>
                            <p class="storefront-checkout-note">Dengan checkout, kamu akan diarahkan ke invoice QRIS.</p>
                        </div>
                    </form>
                @endif
            </aside>
        </div>

    </div>

    <div id="checkout-confirmation-modal"
         class="storefront-confirmation-modal"
         aria-hidden="true"
         role="dialog"
         aria-modal="true"
         aria-labelledby="checkout-confirmation-title">
        <button type="button" class="storefront-confirmation-backdrop" data-confirmation-close aria-label="Tutup konfirmasi"></button>

        <div class="storefront-confirmation-dialog" role="document">
            <button type="button" class="storefront-confirmation-close" data-confirmation-close aria-label="Tutup">
                <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <path d="m7 7 10 10M17 7 7 17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                </svg>
            </button>

            <div class="storefront-confirmation-icon">
                <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <rect x="5" y="10" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.7"/>
                    <path d="M8.5 10V7.5a3.5 3.5 0 0 1 7 0V10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
                </svg>
            </div>

            <p class="storefront-confirmation-eyebrow">Secure Payment</p>
            <h2 id="checkout-confirmation-title" class="font-display">Konfirmasi Pesanan?</h2>
            <p>Dengan mengklik konfirmasi pesanan, Anda menyetujui Syarat &amp; Ketentuan yang berlaku.</p>

            <div class="storefront-confirmation-actions">
                <button type="button" class="storefront-confirmation-cancel" data-confirmation-close>Tidak, Cek Kembali</button>
                <button type="button" class="storefront-confirmation-accept" data-confirmation-accept>Ya, Konfirmasi</button>
            </div>
        </div>
    </div>
</section>
@endsection