@extends('admin.layout')

@section('title', 'Tambah Produk')

@section('content')
<div class="admin-product-form-page">
    <section class="admin-section-header">
        <div>
            <a
                href="{{ route('admin.products.index') }}"
                class="admin-order-back-link"
            >
                <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.8"
                    aria-hidden="true"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="m15 18-6-6 6-6"
                    />
                </svg>

                Kembali ke Produk
            </a>

            <span class="admin-page-eyebrow">
                Product Management
            </span>

            <h1 class="admin-section-title font-display">
                Tambah <span>Produk</span>
            </h1>

            <p class="admin-section-description">
                Lengkapi informasi produk, sistem pengiriman, harga, dan pengaturan stok.
            </p>
        </div>
    </section>

    <form
        method="POST"
        action="{{ route('admin.products.store') }}"
        enctype="multipart/form-data"
        class="admin-product-form"
    >
        @csrf

        <div class="admin-product-form-layout">
            <div class="admin-product-form-main">
                {{-- Informasi produk --}}
                <section class="admin-form-panel">
                    <header class="admin-form-panel-header">
                        <span class="admin-form-panel-icon">
                            <svg
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="1.7"
                                aria-hidden="true"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="M21 8 12 3 3 8m18 0-9 5m9-5v9l-9 5m0-9L3 8m9 5v9M3 8v9l9 5"
                                />
                            </svg>
                        </span>

                        <div>
                            <span class="admin-panel-eyebrow">Product Detail</span>
                            <h2 class="admin-panel-title font-display">
                                Informasi Produk
                            </h2>
                        </div>
                    </header>

                    <div class="admin-form-panel-body">
                        <div class="admin-form-group">
                            <label for="product-name" class="admin-form-label">
                                Nama Produk
                                <span>*</span>
                            </label>

                            <input
                                id="product-name"
                                type="text"
                                name="name"
                                value="{{ old('name') }}"
                                required
                                class="admin-form-control"
                                placeholder="Contoh: Canva Pro 1 Bulan"
                            >

                            @error('name')
                                <p class="admin-form-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="admin-form-grid">
                            <div class="admin-form-group">
                                <label for="product-category" class="admin-form-label">
                                    Kategori
                                </label>

                                <select
                                    id="product-category"
                                    name="category_id"
                                    class="admin-form-control"
                                >
                                    <option value="">Tanpa kategori</option>

                                    @foreach ($categories as $category)
                                        <option
                                            value="{{ $category->id }}"
                                            @selected(old('category_id') == $category->id)
                                        >
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>

                                @error('category_id')
                                    <p class="admin-form-error">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="admin-form-group">
                                <label for="type-select" class="admin-form-label">
                                    Tipe Produk
                                    <span>*</span>
                                </label>

                                <select
                                    id="type-select"
                                    name="type"
                                    required
                                    onchange="toggleDeliveryFields()"
                                    class="admin-form-control"
                                >
                                    <option
                                        value="account"
                                        @selected(old('type', 'account') === 'account')
                                    >
                                        Data Unik - Akun
                                    </option>

                                    <option
                                        value="redeem_code"
                                        @selected(old('type') === 'redeem_code')
                                    >
                                        Data Unik - Redeem Code
                                    </option>

                                    <option
                                        value="link_invite"
                                        @selected(old('type') === 'link_invite')
                                    >
                                        Link Berkapasitas
                                    </option>

                                    <option
                                        value="manual"
                                        @selected(old('type') === 'manual')
                                    >
                                        Manual - Diproses Admin
                                    </option>

                                    <option
                                        value="robux"
                                        @selected(old('type') === 'robux')
                                    >
                                        Robux - Saldo Bersama
                                    </option>
                                </select>

                                @error('type')
                                    <p class="admin-form-error">{{ $message }}</p>
                                @enderror
                                <p class="admin-form-help">Manual: tanpa stok otomatis. Robux: diproses admin dengan satu saldo bersama untuk seluruh paket. Data Unik: satu baris = satu stok. Link Berkapasitas: satu link memiliki sejumlah slot.</p>
                            </div>
                        </div>

                        <div class="admin-form-group">
                            <label for="product-description" class="admin-form-label">
                                Deskripsi Produk
                            </label>

                            <textarea
                                id="product-description"
                                name="description"
                                rows="5"
                                class="admin-form-control admin-form-textarea"
                                placeholder="Jelaskan benefit, durasi, ketentuan, dan informasi produk."
                            >{{ old('description') }}</textarea>

                            @error('description')
                                <p class="admin-form-error">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </section>

                {{-- Fulfillment --}}
                <section class="admin-form-panel">
                    <header class="admin-form-panel-header">
                        <span class="admin-form-panel-icon">
                            <svg
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="1.7"
                                aria-hidden="true"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6l7-3Z"
                                />
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="m9 12 2 2 4-4"
                                />
                            </svg>
                        </span>

                        <div>
                            <span class="admin-panel-eyebrow">Delivery Setup</span>
                            <h2 class="admin-panel-title font-display">
                                Sistem Pengiriman
                            </h2>
                        </div>
                    </header>

                    <div class="admin-form-panel-body">
                        <div id="delivery-fields-wrap" class="admin-form-group">
                            <label for="delivery-fields-input" class="admin-form-label">
                                Field Pengiriman
                                <span>*</span>
                            </label>

                            <input
                                id="delivery-fields-input"
                                type="text"
                                name="delivery_fields"
                                value="{{ old('delivery_fields') }}"
                                required
                                class="admin-form-control font-figures"
                                placeholder="email,password,pin"
                            >

                            <p class="admin-form-help">
                                Pisahkan setiap field menggunakan koma. Field ini akan menjadi input saat menambahkan stok.
                            </p>

                            @error('delivery_fields')
                                <p class="admin-form-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <div
                            id="manual-type-note"
                            class="admin-form-notice hidden"
                        >
                            <span class="admin-form-notice-icon">
                                <svg
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="1.7"
                                    aria-hidden="true"
                                >
                                    <circle cx="12" cy="12" r="9"></circle>
                                    <path
                                        stroke-linecap="round"
                                        d="M12 11v5M12 8h.01"
                                    ></path>
                                </svg>
                            </span>

                            <p id="manual-type-note-copy">
                                Produk manual tidak memakai stok otomatis. Order akan diselesaikan admin melalui halaman detail order.
                            </p>
                        </div>

                        <div
                            id="manual-stock-wrap"
                            class="admin-form-group hidden"
                        >
                            <label class="admin-form-switch-card">
                                <input type="hidden" name="is_stock_available" value="0">
                                <input
                                    type="checkbox"
                                    name="is_stock_available"
                                    value="1"
                                    @checked(old('is_stock_available', true))
                                >

                                <span class="admin-form-switch">
                                    <span></span>
                                </span>

                                <span class="admin-form-switch-content">
                                    <strong>Stok produk tersedia</strong>
                                    <small>
                                        Nonaktifkan saat produk manual sedang habis atau belum dapat dijual.
                                    </small>
                                </span>
                            </label>
                        </div>

                        <div id="robux-balance-wrap" class="admin-form-group hidden">
                            <label for="initial-robux-balance" class="admin-form-label">
                                Saldo Awal Robux
                            </label>
                            <input
                                id="initial-robux-balance"
                                type="number"
                                name="initial_robux_balance"
                                value="{{ old('initial_robux_balance', 0) }}"
                                min="0"
                                max="1000000000000"
                                inputmode="numeric"
                                class="admin-form-control font-figures"
                                placeholder="Contoh: 10000"
                            >
                            <p class="admin-form-help">Saldo ini dipakai bersama oleh seluruh variant. Setelah produk dibuat, restock dilakukan secara additive dari halaman stok Robux.</p>
                            @error('initial_robux_balance')<p class="admin-form-error">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </section>

                {{-- Pricing --}}
                <section class="admin-form-panel">
                    <header class="admin-form-panel-header">
                        <span class="admin-form-panel-icon">
                            <svg
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="1.7"
                                aria-hidden="true"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="M4 7h16v10H4V7Zm3 3h.01M17 14h.01M12 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z"
                                />
                            </svg>
                        </span>

                        <div>
                            <span class="admin-panel-eyebrow">Pricing</span>
                            <h2 class="admin-panel-title font-display">
                                Harga dan Pembayaran
                            </h2>
                        </div>
                    </header>

                    <div class="admin-form-panel-body">
                        <div class="admin-form-grid">
                            <div id="base-price-wrap" class="admin-form-group">
                                <label for="product-price" class="admin-form-label">
                                    Harga Produk
                                    <span>*</span>
                                </label>

                                <div class="admin-form-prefix-control">
                                    <span>Rp</span>

                                    <input
                                        id="product-price"
                                        type="number"
                                        name="price"
                                        value="{{ old('price') }}"
                                        required
                                        min="0"
                                        class="admin-form-control font-figures"
                                        placeholder="0"
                                    >
                                </div>

                                @error('price')
                                    <p class="admin-form-error">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="admin-form-group">
                                <label for="low-stock-threshold" class="admin-form-label">
                                    Batas Stok Kritis
                                    <span>*</span>
                                </label>

                                <input
                                    id="low-stock-threshold"
                                    type="number"
                                    name="low_stock_threshold"
                                    value="{{ old('low_stock_threshold', 5) }}"
                                    required
                                    min="0"
                                    class="admin-form-control font-figures"
                                >

                                <p class="admin-form-help">
                                    Produk akan ditandai kritis saat stok mencapai jumlah ini.
                                </p>

                                @error('low_stock_threshold')
                                    <p class="admin-form-error">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="admin-form-group">
                            <label for="fee-payer" class="admin-form-label">
                                Biaya Pembayaran
                            </label>

                            @if (in_array($activePaymentGateway, ['belibayar', 'binderpay'], true))
                                <input type="hidden" name="fee_payer" value="seller">

                                <div class="admin-form-notice">
                                    <div>
                                        <strong>Biaya mengikuti konfigurasi gateway</strong>
                                        <p>Website mengirim harga pesanan sebagai nominal dasar. Biaya QRIS dari {{ $activePaymentGateway === 'binderpay' ? 'BinderPay' : 'Belibayar' }} akan dibaca dari respons transaksi.</p>
                                    </div>
                                </div>
                            @elseif ($activePaymentGateway === 'dompetx')
                                <input type="hidden" name="fee_payer" value="buyer">

                                <div class="admin-form-notice">
                                    <span class="admin-form-notice-icon" aria-hidden="true">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
                                            <circle cx="12" cy="12" r="9"></circle>
                                            <path stroke-linecap="round" d="M12 11v5M12 8h.01"></path>
                                        </svg>
                                    </span>
                                    <div>
                                        <strong>Pembeli menanggung biaya pembayaran</strong>
                                        <p>DompetX sedang aktif. Biaya QRIS ditambahkan oleh DompetX ke pembayaran customer, sehingga produk baru menggunakan kebijakan Pembeli.</p>
                                    </div>
                                </div>
                            @else
                                <select
                                    id="fee-payer"
                                    name="fee_payer"
                                    class="admin-form-control"
                                >
                                    <option
                                        value="buyer"
                                        @selected(old('fee_payer', 'buyer') === 'buyer')
                                    >
                                        Pembeli - biaya pembayaran ditambahkan ke total customer
                                    </option>

                                    <option
                                        value="seller"
                                        @selected(old('fee_payer') === 'seller')
                                    >
                                        Toko - customer membayar sesuai total pesanan
                                    </option>
                                </select>
                            @endif

                            @error('fee_payer')
                                <p class="admin-form-error">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </section>

                @include('admin.products.partials.configuration-fields', ['product' => $product ?? null])
            </div>

            {{-- Sidebar --}}
            <aside class="admin-product-form-sidebar">
                <section class="admin-form-panel admin-product-image-panel">
                    <header class="admin-form-panel-header">
                        <span class="admin-form-panel-icon">
                            <svg
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="1.7"
                                aria-hidden="true"
                            >
                                <rect x="3" y="4" width="18" height="16" rx="2"></rect>
                                <circle cx="9" cy="10" r="2"></circle>
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="m21 15-5-5L5 20"
                                />
                            </svg>
                        </span>

                        <div>
                            <span class="admin-panel-eyebrow">Visual</span>
                            <h2 class="admin-panel-title font-display">
                                Foto Produk
                            </h2>
                        </div>
                    </header>

                    <div class="admin-form-panel-body">
                        <label
                            for="image-input"
                            class="admin-product-upload"
                        >
                            <span class="admin-product-upload-icon">
                                <svg
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="1.7"
                                    aria-hidden="true"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        d="M12 16V4m0 0-4 4m4-4 4 4M5 14v5h14v-5"
                                    />
                                </svg>
                            </span>

                            <strong>Pilih gambar produk</strong>
                            <span>JPG, PNG, atau WEBP</span>
                            <small>Maksimal 2 MB</small>
                        </label>

                        <input
                            id="image-input"
                            type="file"
                            name="image"
                            accept=".jpg,.jpeg,.png,.webp"
                            class="admin-product-file-input"
                        >

                        @error('image')
                            <p class="admin-form-error">{{ $message }}</p>
                        @enderror

                        <div class="admin-product-image-tip">
                            Gunakan gambar persegi agar tampil rapi pada storefront dan dashboard.
                        </div>
                    </div>
                </section>


                <section class="admin-form-panel">
                    <div class="admin-product-submit-content">
                        <span class="admin-panel-eyebrow">
                            Homepage Highlight
                        </span>

                        <h2 class="admin-panel-title font-display">
                            Produk Pilihan
                        </h2>

                        <label class="admin-form-switch-card">
                            <input
                                type="checkbox"
                                name="is_featured"
                                value="1"
                                @checked(old('is_featured'))
                            >

                            <span class="admin-form-switch">
                                <span></span>
                            </span>

                            <span class="admin-form-switch-content">
                                <strong>Tampilkan di homepage</strong>
                                <small>
                                    Produk dapat dipilih sebagai produk unggulan di etalase homepage.
                                </small>
                            </span>
                        </label>

                        @error('is_featured')
                            <p class="admin-form-error">{{ $message }}</p>
                        @enderror
                    </div>
                </section>

                <section class="admin-form-panel admin-product-submit-panel">
                    <div class="admin-product-submit-content">
                        <span class="admin-panel-eyebrow">
                            Publish Product
                        </span>

                        <h2 class="admin-panel-title font-display">
                            Simpan Produk
                        </h2>

                        <p>
                            Periksa kembali nama, tipe, harga, dan sistem pengiriman sebelum menyimpan.
                        </p>

                        <button
                            type="submit"
                            class="admin-button admin-button-primary admin-product-submit-button"
                        >
                            <svg
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="1.8"
                                aria-hidden="true"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="m5 13 4 4L19 7"
                                />
                            </svg>

                            Simpan Produk
                        </button>

                        <a
                            href="{{ route('admin.products.index') }}"
                            class="admin-product-cancel-button"
                        >
                            Batal
                        </a>
                    </div>
                </section>
            </aside>
        </div>
    </form>
</div>

<script>
function toggleDeliveryFields() {
    const typeSelect = document.getElementById('type-select');
    const deliveryWrap = document.getElementById('delivery-fields-wrap');
    const deliveryInput = document.getElementById('delivery-fields-input');
    const manualNote = document.getElementById('manual-type-note');
    const manualNoteCopy = document.getElementById('manual-type-note-copy');
    const manualStockWrap = document.getElementById('manual-stock-wrap');
    const robuxBalanceWrap = document.getElementById('robux-balance-wrap');

    if (!typeSelect || !deliveryWrap || !deliveryInput || !manualNote || !manualStockWrap || !robuxBalanceWrap) {
        return;
    }

    const isManual = typeSelect.value === 'manual';
    const isRobux = typeSelect.value === 'robux';
    const isAdminFulfilled = isManual || isRobux;

    deliveryWrap.classList.toggle('hidden', isAdminFulfilled);
    manualNote.classList.toggle('hidden', !isAdminFulfilled);
    manualStockWrap.classList.toggle('hidden', !isManual);
    robuxBalanceWrap.classList.toggle('hidden', !isRobux);
    deliveryInput.required = !isAdminFulfilled;

    if (manualNoteCopy) {
        manualNoteCopy.textContent = isRobux
            ? 'Produk Robux memakai saldo bersama, reservasi saat order dibuat, dan tetap diselesaikan admin melalui detail order.'
            : 'Produk manual tidak memakai stok otomatis. Order diselesaikan admin melalui detail order.';
    }
}

toggleDeliveryFields();
</script>

@include('admin.products.partials.configuration-script')
@include('admin.products.partials.delivery-note-editor-script')

@include('admin.products.partials.image-crop-modal')
@endsection