@extends('portal.layout')

@section('title', 'Enhance your event')
@section('topbar', 'Add-ons')

@push('styles')
<style>
    .wizard { display: grid; grid-template-columns: 1fr 300px; gap: 1.25rem; align-items: start; }
    .steps {
        display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem;
    }
    .steps span {
        padding: .35rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
        background: #F1F5F9; color: var(--muted);
    }
    .steps .on { background: var(--primary-soft); color: var(--mexco-primary-dark); }
    .addon-grid { display: grid; gap: .75rem; }
    .addon-card {
        display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start;
        border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; background: #FAFBFC;
    }
    .addon-card.on { border-color: #DDD6FE; background: #FAF8FF; }
    .addon-card h3 { margin: 0; font-size: .95rem; font-weight: 800; }
    .addon-card p { margin: .3rem 0 0; font-size: .82rem; color: var(--muted); }
    .addon-price { font-weight: 800; white-space: nowrap; }
    .summary .row { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; font-size: .88rem; }
    .summary .total { border-top: 1px solid var(--border); margin-top: .75rem; padding-top: .75rem; font-weight: 800; }
    .live-addons { margin: .5rem 0; font-size: .82rem; color: var(--muted); }
    @media (max-width: 960px) { .wizard { grid-template-columns: 1fr; } }
</style>
@endpush

@section('content')
<div class="pg-head">
    <div>
        <h1>Enhance your event</h1>
        <p>{{ $order->event?->name }} · {{ $plan->name }} plan</p>
    </div>
</div>

<div class="steps">
    <span>1. Event</span>
    <span class="on">2. Add-ons</span>
    <span>3. Review</span>
    <span>4. Payment</span>
</div>

<form method="POST" action="{{ route('mexco.checkout.addons.store') }}" class="wizard" id="addonForm">
    @csrf
    <div class="card" style="padding:1.25rem">
        @if($addons->isEmpty())
            <div class="alert-flash alert-info" style="margin:0">No add-ons are available for the {{ $plan->name }} plan. Continue to review.</div>
        @else
            <div class="addon-grid">
                @foreach($addons as $addon)
                    @php $checked = in_array($addon->id, $selected, true); @endphp
                    <label class="addon-card {{ $checked ? 'on' : '' }}">
                        <input type="checkbox" name="addon_ids[]" value="{{ $addon->id }}"
                               @checked($checked)
                               data-price="{{ $addon->price_cents }}"
                               data-name="{{ $addon->name }}"
                               class="addon-check">
                        <div>
                            <h3>{{ $addon->name }}</h3>
                            <p>{{ $addon->description ?: 'Optional enhancement for this event license.' }}</p>
                        </div>
                        <div class="addon-price">{{ $addon->formattedPrice() }}</div>
                    </label>
                @endforeach
            </div>
        @endif

        <div style="display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.25rem">
            <button type="submit" class="btn-purple">Continue to review</button>
            <a href="{{ route('mexco.checkout.review') }}" class="btn-outline">Skip add-ons</a>
        </div>
    </div>

    <aside class="card summary" style="padding:1.25rem" id="liveSummary"
           data-plan="{{ $plan->price_cents }}"
           data-currency="{{ $plan->currency ?? 'MYR' }}">
        <h2 style="margin:0 0 .75rem;font-size:1.05rem;font-weight:800">Order summary</h2>
        <div class="row"><span>{{ $plan->name }}</span><strong id="planPrice">{{ $plan->formattedPrice() }}</strong></div>
        <div class="live-addons" id="addonLines">No add-ons selected</div>
        <div class="row total"><span>Total</span><strong id="totalPrice">{{ ($plan->currency ?? 'MYR').' '.number_format($order->total_cents / 100, 0) }}</strong></div>
    </aside>
</form>
@endsection

@push('scripts')
<script>
(function () {
    const form = document.getElementById('addonForm');
    const summary = document.getElementById('liveSummary');
    if (!form || !summary) return;

    const planCents = parseInt(summary.dataset.plan || '0', 10);
    const currency = summary.dataset.currency || 'MYR';

    function money(cents) {
        return currency + ' ' + Math.round(cents / 100).toLocaleString();
    }

    function refresh() {
        const checks = [...form.querySelectorAll('.addon-check:checked')];
        let addonTotal = 0;
        const lines = checks.map(c => {
            const price = parseInt(c.dataset.price || '0', 10);
            addonTotal += price;
            return c.dataset.name + ' ' + money(price);
        });
        document.getElementById('addonLines').textContent = lines.length ? lines.join(' · ') : 'No add-ons selected';
        document.getElementById('totalPrice').textContent = money(planCents + addonTotal);
        form.querySelectorAll('.addon-card').forEach(card => {
            const input = card.querySelector('.addon-check');
            card.classList.toggle('on', !!(input && input.checked));
        });
    }

    form.addEventListener('change', refresh);
    refresh();
})();
</script>
@endpush
