@extends('layouts.admin')

@section('title', 'Create Coupon')

@section('content')
<x-admin.form-page
    title="Create Coupon"
    :crumbs="[['label' => 'Marketing', 'url' => null], ['label' => 'Coupons', 'url' => route('admin.coupons.index')], 'Create']"
    :back-url="route('admin.coupons.index')"
    :action="route('admin.coupons.store')"
    method="POST"
    form-id="couponForm"
    submit-label="Save Coupon"
>
    <section class="pp-card">
        <div class="pp-card__head">
            <span class="pp-card__icon"><i class="bi bi-ticket-perforated"></i></span>
            <div>
                <h2 class="pp-card__title">Coupon Identity</h2>
                <p class="pp-card__sub">Code customers enter at checkout</p>
            </div>
        </div>
        <div class="pp-card__body">
            <div class="pp-grid pp-grid--2">
                <div class="pp-field">
                    <label for="code">Coupon Code <span class="pp-req">*</span></label>
                    <input type="text" name="code" id="code" class="form-control"
                           value="{{ old('code') }}" style="text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;"
                           placeholder="e.g. GOLD10" required data-cp-sync>
                    <span class="pp-hint">Stored uppercase — letters &amp; numbers work best</span>
                </div>
                <div class="pp-field">
                    <label for="type">Discount Type <span class="pp-req">*</span></label>
                    <select name="type" id="type" class="form-select" required data-cp-sync>
                        <option value="percentage" {{ old('type', 'percentage') === 'percentage' ? 'selected' : '' }}>Percentage (%)</option>
                        <option value="flat" {{ old('type') === 'flat' ? 'selected' : '' }}>Flat Amount (₹)</option>
                    </select>
                    <span class="pp-hint">Percentage of cart, or a fixed rupee off</span>
                </div>
            </div>
        </div>
    </section>

    <section class="pp-card">
        <div class="pp-card__head">
            <span class="pp-card__icon"><i class="bi bi-currency-rupee"></i></span>
            <div>
                <h2 class="pp-card__title">Discount Rules</h2>
                <p class="pp-card__sub">Value and cart thresholds</p>
            </div>
        </div>
        <div class="pp-card__body">
            <div class="pp-grid pp-grid--3">
                <div class="pp-field">
                    <label for="value">Value <span class="pp-req">*</span></label>
                    <input type="number" step="0.01" min="0" name="value" id="value" class="form-control"
                           value="{{ old('value') }}" placeholder="0" required data-cp-sync>
                    <span class="pp-hint" id="valueHint">Percent off the cart</span>
                </div>
                <div class="pp-field">
                    <label for="min_cart_value">Min Cart Value (₹)</label>
                    <input type="number" step="0.01" min="0" name="min_cart_value" id="min_cart_value" class="form-control"
                           value="{{ old('min_cart_value') }}" placeholder="Optional" data-cp-sync>
                    <span class="pp-hint">Order must reach this amount</span>
                </div>
                <div class="pp-field">
                    <label for="max_discount">Max Discount (₹)</label>
                    <input type="number" step="0.01" min="0" name="max_discount" id="max_discount" class="form-control"
                           value="{{ old('max_discount') }}" placeholder="Optional" data-cp-sync>
                    <span class="pp-hint">Cap for percentage coupons</span>
                </div>
            </div>
        </div>
    </section>

    <section class="pp-card">
        <div class="pp-card__head">
            <span class="pp-card__icon"><i class="bi bi-calendar-range"></i></span>
            <div>
                <h2 class="pp-card__title">Schedule &amp; Limits</h2>
                <p class="pp-card__sub">Validity window and usage controls</p>
            </div>
        </div>
        <div class="pp-card__body">
            <div class="pp-grid pp-grid--2">
                <div class="pp-field">
                    <label for="starts_at">Starts At <span class="pp-req">*</span></label>
                    <input type="datetime-local" name="starts_at" id="starts_at" class="form-control"
                           value="{{ old('starts_at') }}" required data-cp-sync>
                </div>
                <div class="pp-field">
                    <label for="ends_at">Ends At <span class="pp-req">*</span></label>
                    <input type="datetime-local" name="ends_at" id="ends_at" class="form-control"
                           value="{{ old('ends_at') }}" required data-cp-sync>
                </div>
                <div class="pp-field">
                    <label for="usage_limit">Total Usage Limit</label>
                    <input type="number" min="0" name="usage_limit" id="usage_limit" class="form-control"
                           value="{{ old('usage_limit') }}" placeholder="Unlimited" data-cp-sync>
                    <span class="pp-hint">Global redemptions across all customers</span>
                </div>
                <div class="pp-field">
                    <label for="usage_per_user">Per-Customer Limit</label>
                    <input type="number" min="0" name="usage_per_user" id="usage_per_user" class="form-control"
                           value="{{ old('usage_per_user') }}" placeholder="Unlimited" data-cp-sync>
                    <span class="pp-hint">How many times one customer can use it</span>
                </div>
            </div>

            <div class="pp-toggles">
                <label class="pp-toggle" for="isActive">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" class="form-check-input" role="switch" name="is_active" id="isActive"
                           value="1" {{ old('is_active', true) ? 'checked' : '' }} data-cp-sync>
                    Active
                </label>
            </div>
        </div>
    </section>

    <x-slot:aside>
        <section class="pp-card">
            <div class="pp-card__head">
                <span class="pp-card__icon pp-card__icon--profit"><i class="bi bi-eye"></i></span>
                <div>
                    <h2 class="pp-card__title">Live Preview</h2>
                </div>
            </div>
            <div class="pp-card__body">
                <div class="pp-profit__value" style="flex-direction: column; align-items: flex-start; gap: 0.35rem;">
                    <span class="pp-profit__amount is-pos" id="cpPreviewCode" style="font-size: 1.35rem; letter-spacing: 0.08em;">—</span>
                    <span class="pp-profit__label" id="cpPreviewOffer">Enter details to preview</span>
                </div>
                <div class="pp-profit__rows">
                    <div class="pp-profit__row"><span>Type</span><span id="cpPreviewType">—</span></div>
                    <div class="pp-profit__row"><span>Min cart</span><span id="cpPreviewMin">—</span></div>
                    <div class="pp-profit__row"><span>Max off</span><span id="cpPreviewMax">—</span></div>
                    <div class="pp-profit__row"><span>Global uses</span><span id="cpPreviewGlobal">—</span></div>
                    <div class="pp-profit__row"><span>Per customer</span><span id="cpPreviewUser">—</span></div>
                </div>
            </div>
        </section>

        <section class="pp-card">
            <div class="pp-card__head">
                <span class="pp-card__icon pp-card__icon--summary"><i class="bi bi-tags"></i></span>
                <div>
                    <h2 class="pp-card__title">Summary</h2>
                </div>
            </div>
            <div class="pp-card__body">
                <span class="pp-summary__status" id="cpSummaryStatus">Active</span>
                <div class="pp-summary__rows">
                    <div class="pp-summary__row"><span>Window</span><span id="cpSummaryWindow">—</span></div>
                    <div class="pp-summary__row"><span>Example on ₹5,000</span><span id="cpSummaryExample">—</span></div>
                </div>
                <button type="submit" class="pp-btn pp-btn--primary pp-btn--block">
                    <i class="bi bi-save"></i> Save Coupon
                </button>
            </div>
        </section>
    </x-slot:aside>
</x-admin.form-page>
@endsection

@push('scripts')
<script>
(function () {
    const money = (n) => '₹' + (Math.round((n + Number.EPSILON) * 100) / 100).toLocaleString('en-IN', {
        minimumFractionDigits: n % 1 === 0 ? 0 : 2,
        maximumFractionDigits: 2,
    });

    function fmtDate(v) {
        if (!v) return null;
        const d = new Date(v);
        if (Number.isNaN(d.getTime())) return null;
        return d.toLocaleString('en-IN', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
    }

    function refresh() {
        const code = (document.getElementById('code')?.value || '').trim().toUpperCase();
        const type = document.getElementById('type')?.value || 'percentage';
        const value = parseFloat(document.getElementById('value')?.value) || 0;
        const minCart = parseFloat(document.getElementById('min_cart_value')?.value) || 0;
        const maxDisc = parseFloat(document.getElementById('max_discount')?.value) || 0;
        const global = document.getElementById('usage_limit')?.value;
        const perUser = document.getElementById('usage_per_user')?.value;
        const active = document.getElementById('isActive')?.checked;
        const start = fmtDate(document.getElementById('starts_at')?.value);
        const end = fmtDate(document.getElementById('ends_at')?.value);

        const valueHint = document.getElementById('valueHint');
        if (valueHint) valueHint.textContent = type === 'flat' ? 'Fixed rupees off the cart' : 'Percent off the cart';

        document.getElementById('cpPreviewCode').textContent = code || '—';
        document.getElementById('cpPreviewType').textContent = type === 'flat' ? 'Flat (₹)' : 'Percentage';
        document.getElementById('cpPreviewMin').textContent = minCart > 0 ? money(minCart) : 'No minimum';
        document.getElementById('cpPreviewMax').textContent = maxDisc > 0 ? money(maxDisc) : (type === 'percentage' ? 'No cap' : '—');
        document.getElementById('cpPreviewGlobal').textContent = global ? global : 'Unlimited';
        document.getElementById('cpPreviewUser').textContent = perUser ? perUser : 'Unlimited';

        let offer = 'Enter details to preview';
        if (value > 0) {
            offer = type === 'flat' ? money(value) + ' off' : value + '% off';
            if (maxDisc > 0 && type === 'percentage') offer += ' (max ' + money(maxDisc) + ')';
        }
        document.getElementById('cpPreviewOffer').textContent = offer;

        const status = document.getElementById('cpSummaryStatus');
        if (status) {
            status.textContent = active ? 'Active' : 'Inactive';
            status.classList.toggle('is-inactive', !active);
        }

        document.getElementById('cpSummaryWindow').textContent =
            start && end ? (start + ' → ' + end) : (start || end || '—');

        let example = '—';
        if (value > 0) {
            const cart = 5000;
            let off = type === 'flat' ? value : (cart * value / 100);
            if (maxDisc > 0) off = Math.min(off, maxDisc);
            off = Math.min(off, cart);
            example = money(off) + ' off';
        }
        document.getElementById('cpSummaryExample').textContent = example;
    }

    document.querySelectorAll('[data-cp-sync]').forEach((el) => {
        el.addEventListener('input', refresh);
        el.addEventListener('change', refresh);
    });
    refresh();
})();
</script>
@endpush