@extends('layouts.app')

@section('content')
    @php
        $planRows = old('plans', [[
            'name' => 'Standard',
            'description' => '',
            'tier' => 'standard',
            'price_usd' => '',
            'seat_price_usd' => '',
            'price_sats' => '',
            'billing_period' => 'monthly',
            'stripe_price_id' => '',
            'is_active' => true,
        ]]);
    @endphp

    <article class="active text">
        <header>
            <h2 class="h2 article-title">Create Product</h2>
        </header>

        <section>
            <form method="POST" action="{{ route('admin.product.store') }}">
                @csrf
                <div class="mb-3">
                    <label for="name" class="form-label">Name</label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ old('name') }}" required>
                </div>
                <div class="mb-3">
                    <label for="slug" class="form-label">Slug</label>
                    <input type="text" class="form-control" id="slug" name="slug" value="{{ old('slug') }}" required>
                </div>
                <div class="mb-3">
                    <label for="description" class="form-label">Description</label>
                    <textarea class="form-control" id="description" name="description" rows="5">{{ old('description') }}</textarea>
                </div>
                <div class="form-check mb-3">
                    <input type="checkbox" class="form-check-input" id="is_active" name="is_active" value="1" checked>
                    <label for="is_active" class="form-check-label">Active</label>
                </div>
                <div class="mb-3">
                    <label for="purchase_type" class="form-label">Purchase Type</label>
                    <select class="form-select" id="purchase_type" name="purchase_type" required>
                        <option value="subscription" @selected(old('purchase_type', 'subscription') === 'subscription')>Subscription</option>
                        <option value="one_time" @selected(old('purchase_type') === 'one_time')>One-Time Purchase</option>
                    </select>
                </div>
                <div class="form-check mb-3">
                    <input type="checkbox" class="form-check-input" id="requires_license_key" name="requires_license_key" value="1" @checked(old('requires_license_key', true))>
                    <label for="requires_license_key" class="form-check-label">Generate License Key on Purchase</label>
                </div>
                <div class="form-check mb-3">
                    <input type="checkbox" class="form-check-input" id="is_tiered" name="is_tiered" value="1" @checked(old('is_tiered', true))>
                    <label for="is_tiered" class="form-check-label">Multi-Tier (offers different subscription levels)</label>
                </div>

                @if ($errors->has('plans'))
                    <div class="alert alert-danger">{{ $errors->first('plans') }}</div>
                @endif

                <hr>

                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="mb-0">Pricing Options</h4>
                    <button type="button" class="btn btn-outline-primary btn-sm" data-add-plan>Add Tier</button>
                </div>

                <div data-plan-rows>
                    @foreach ($planRows as $index => $plan)
                        @include('admin.product._plan_fields', [
                            'index' => $index,
                            'plan' => $plan,
                            'heading' => old('is_tiered', true) ? 'Tier ' . ($index + 1) : 'Price',
                        ])
                    @endforeach
                </div>

                <button type="submit" class="btn btn-primary">Save</button>
            </form>
        </section>
    </article>
@endsection

@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const planRowsContainer = document.querySelector('[data-plan-rows]');
            const addPlanButton = document.querySelector('[data-add-plan]');
            const tieredCheckbox = document.getElementById('is_tiered');
            const purchaseTypeSelect = document.getElementById('purchase_type');

            const replaceIndex = (value, index) => value
                .replace(/\[\d+\]/g, '[' + index + ']')
                .replace(/_\d+$/g, '_' + index);

            const nextIndex = () => planRowsContainer.querySelectorAll('[data-plan-row]').length;

            const syncPurchaseType = () => {
                const isOneTime = purchaseTypeSelect.value === 'one_time';

                planRowsContainer.querySelectorAll('[data-plan-row]').forEach((row) => {
                    const billingSelect = row.querySelector('.plan-billing-period-group select');
                    const billingGroup = row.querySelector('.plan-billing-period-group');

                    if (isOneTime) {
                        billingSelect.value = 'one_time';
                        billingSelect.setAttribute('disabled', 'disabled');
                        billingGroup.classList.add('d-none');
                        return;
                    }

                    billingGroup.classList.remove('d-none');
                    billingSelect.removeAttribute('disabled');

                    if (billingSelect.value === 'one_time') {
                        billingSelect.value = 'monthly';
                    }
                });
            };

            const syncTiering = () => {
                const rows = Array.from(planRowsContainer.querySelectorAll('[data-plan-row]'));
                const visibleRows = [];

                rows.forEach((row, index) => {
                    const hidden = !tieredCheckbox.checked && index > 0;
                    row.classList.toggle('d-none', hidden);
                    row.querySelector('h5').textContent = tieredCheckbox.checked ? 'Tier ' + (visibleRows.length + 1 || 1) : 'Price';

                    row.querySelectorAll('input, textarea, select').forEach((field) => {
                        if (hidden) {
                            field.setAttribute('disabled', 'disabled');
                        } else {
                            field.removeAttribute('disabled');
                        }
                    });

                    if (!hidden) {
                        visibleRows.push(row);
                    }
                });

                visibleRows.forEach((row, index) => {
                    row.querySelector('h5').textContent = tieredCheckbox.checked ? 'Tier ' + (index + 1) : 'Price';
                    const removeButton = row.querySelector('[data-remove-plan]');
                    removeButton.classList.toggle('d-none', visibleRows.length === 1);
                });

                addPlanButton.classList.toggle('d-none', !tieredCheckbox.checked);
                syncPurchaseType();
            };

            addPlanButton.addEventListener('click', function () {
                const sourceRow = planRowsContainer.querySelector('[data-plan-row]');
                const clone = sourceRow.cloneNode(true);
                const index = nextIndex();

                clone.querySelectorAll('label').forEach((label) => {
                    if (label.htmlFor) {
                        label.htmlFor = replaceIndex(label.htmlFor, index);
                    }
                });

                clone.querySelectorAll('input, textarea, select').forEach((field) => {
                    if (field.name) {
                        field.name = replaceIndex(field.name, index);
                    }

                    if (field.id) {
                        field.id = replaceIndex(field.id, index);
                    }

                    if (field.type === 'hidden') {
                        field.remove();
                        return;
                    }

                    if (field.type === 'checkbox') {
                        field.checked = field.name.endsWith('[is_active]');
                        return;
                    }

                    if (field.tagName === 'SELECT') {
                        field.value = field.name.endsWith('[billing_period]') ? 'monthly' : '';
                        return;
                    }

                    field.value = field.name.endsWith('[tier]') ? 'standard' : '';
                });

                planRowsContainer.appendChild(clone);
                syncTiering();
            });

            planRowsContainer.addEventListener('click', function (event) {
                const removeButton = event.target.closest('[data-remove-plan]');

                if (!removeButton) {
                    return;
                }

                const row = removeButton.closest('[data-plan-row]');
                row.remove();
                syncTiering();
            });

            tieredCheckbox.addEventListener('change', syncTiering);
            purchaseTypeSelect.addEventListener('change', syncPurchaseType);

            syncTiering();
        });
    </script>
@endsection