@extends('admin.layout')

@section('title', 'Edit 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">
                Edit <span>Produk</span>
            </h1>

            <p class="admin-section-description">
                Perbarui informasi dan pengaturan produk {{ $product->name }}.
            </p>
        </div>

        <span
            class="admin-status-pill
            {{ $product->is_active ? 'is-success' : 'is-neutral' }}"
        >
            <span></span>
            {{ $product->is_active ? 'Aktif' : 'Nonaktif' }}
        </span>
    </section>

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

        <div class="admin-product-form-layout">
            <div class="admin-product-form-main">
                <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', $product->name) }}"
                                required
                                class="admin-form-control"
                            >

                            @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', $product->category_id) == $category->id)
                                        >
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </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', $product->type) === 'account')
                                    >
                                        Data Unik - Akun
                                    </option>

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

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

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

                                    <option
                                        value="robux"
                                        @selected(old('type', $product->type) === 'robux')
                                    >
                                        Robux - Saldo Bersama
                                    </option>
                                </select>
                            </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"
                            >{{ old('description', $product->description) }}</textarea>
                        </div>

                        <div id="robux-balance-wrap" class="admin-form-group hidden">
                            <div class="admin-form-notice">
                                <p>
                                    Saldo Robux dikelola terpisah agar reservasi order pending tetap aman.
                                    <a href="{{ route('admin.stock.index', $product) }}" class="underline font-semibold">Buka pengelolaan saldo Robux</a>.
                                </p>
                            </div>
                        </div>
                    </div>
                </section>

                <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', implode(',', $product->delivery_schema ?? [])) }}"
                                required
                                class="admin-form-control font-figures"
                                placeholder="email,password,pin"
                            >

                            <p class="admin-form-help">
                                Pisahkan setiap field menggunakan koma. Contoh: <strong class="font-figures">email,password</strong>.
                            </p>

                            <div class="admin-form-warning">
                                Mengubah field ini tidak mengubah stok yang sudah tersedia. Perubahan hanya berlaku untuk stok baru.
                            </div>

                            @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 diselesaikan admin melalui 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', $product->is_stock_available))
                                >

                                <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 tidak dapat dijual.
                                    </small>
                                </span>
                            </label>
                        </div>
                    </div>
                </section>

                <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', $product->price) }}"
                                        required
                                        min="0"
                                        class="admin-form-control font-figures"
                                    >
                                </div>
                            </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', $product->low_stock_threshold) }}"
                                    required
                                    min="0"
                                    class="admin-form-control font-figures"
                                >
                            </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="{{ old('fee_payer', $product->fee_payer) }}">

                                <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="{{ old('fee_payer', $product->fee_payer) }}">

                                <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>Order DompetX selalu menggunakan Pembeli</strong>
                                        <p>Kebijakan produk untuk Pakasir tetap disimpan sebagai <strong>{{ $product->fee_payer === 'buyer' ? 'Pembeli' : 'Toko' }}</strong> dan tidak diubah saat kamu menyimpan produk ini.</p>
                                    </div>
                                </div>
                            @else
                                <select
                                    id="fee-payer"
                                    name="fee_payer"
                                    class="admin-form-control"
                                >
                                    <option
                                        value="buyer"
                                        @selected(old('fee_payer', $product->fee_payer) === 'buyer')
                                    >
                                        Pembeli - biaya pembayaran ditambahkan ke total customer
                                    </option>

                                    <option
                                        value="seller"
                                        @selected(old('fee_payer', $product->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])
            </div>

            <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">
                        @if ($product->image_path)
                            <div class="admin-product-current-image">
                                <img
                                    src="{{ $product->image_url }}"
                                    alt="{{ $product->name }}"
                                >

                                <div>
                                    <strong>Gambar saat ini</strong>
                                    <span>Upload gambar baru untuk menggantinya.</span>
                                </div>
                            </div>

                            <label class="admin-form-danger-check">
                                <input
                                    type="checkbox"
                                    name="remove_image"
                                    value="1"
                                    @checked(old('remove_image'))
                                >

                                <span>
                                    Hapus foto produk saat ini
                                </span>
                            </label>
                        @endif

                        <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 baru</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"
                        >
                    </div>
                </section>

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

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

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

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

                            <span class="admin-form-switch-content">
                                <strong>Produk aktif</strong>
                                <small>
                                    Produk dapat ditemukan dan dibeli melalui storefront.
                                </small>
                            </span>
                        </label>


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

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

                            <span class="admin-form-switch-content">
                                <strong>Tampilkan di homepage</strong>
                                <small>
                                    Tandai sebagai produk pilihan untuk 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">
                            Save Changes
                        </span>

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

                        <p>
                            Simpan seluruh perubahan informasi dan konfigurasi produk.
                        </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>

                            Update 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