{{-- Checkout con Vue 3 (CDN): evita Alpine en la columna de entradas por compatibilidad entre navegadores. --}}
<script>
    window.rtCheckoutStrings = @json([
        'attendeesRequired' => __('Completa el nombre y correo de todos los asistentes.'),
        'guestEmailRequired' => __('Indica el correo con el que quieres acceder a tus entradas.'),
        'purchaseError' => __('No pudimos procesar tu compra. Inténtalo de nuevo.'),
        'networkError' => __('Error de red. Verifica tu conexión.'),
    ]);
</script>

<script type="application/json" id="rt-checkout-config">@json($checkoutConfig)</script>

<div
    id="rt-checkout-mount"
    data-is-guest="{{ auth()->guest() ? '1' : '0' }}"
    data-buyer-name="{{ auth()->check() ? e(auth()->user()->name) : '' }}"
    data-buyer-email="{{ auth()->check() ? e(auth()->user()->email) : '' }}"
    data-max-date="{{ now()->format('Y-m-d') }}"
></div>

<script type="text/x-template" id="rt-checkout-template">
    <div class="rt-checkout-vue-root">
        <div v-if="isGuest" class="mb-3">
            <label class="form-label" for="rt-checkout-guest-email">{{ __('Correo para tu cuenta RegiTicket') }}</label>
            <input
                type="email"
                class="form-control form-control-sm"
                id="rt-checkout-guest-email"
                name="checkout_email"
                autocomplete="email"
                required
                placeholder="tu@correo.com"
                v-model.trim="guestEmail"
            >
            <div class="form-text">{{ __('Tras pagar podrás iniciar sesión con este correo; si es tu primera compra, recibirás un enlace para crear tu contraseña.') }}</div>
        </div>

        <section class="rt-tickets-wrapper" aria-labelledby="rt-tickets-title">
            <header class="rt-tickets-header">
                <h2 id="rt-tickets-title" class="rt-tickets-title h4 mb-0">{{ __('Entradas') }}</h2>
                <p class="rt-tickets-subtitle small text-secondary mb-0">
                    {{ __('Selecciona tus entradas y completa los datos de cada asistente.') }}
                </p>
            </header>

            <ul class="rt-tickets-list list-unstyled m-0">
                <li
                    v-for="t in tickets"
                    v-bind:key="t.id"
                    class="rt-tickets-item"
                    v-bind:class="{ 'rt-tickets-item--soldout': isSoldOut(t.id) }"
                >
                    <div class="rt-tickets-item-main">
                        <h3 class="rt-tickets-item-title h6 mb-1 text-white" v-text="t.name"></h3>
                        <p v-if="t.description" class="rt-tickets-item-desc small text-secondary mb-0" v-text="t.description"></p>
                    </div>

                    <div class="rt-tickets-item-extra">
                        <span class="rt-tickets-item-price" v-text="t.price_label"></span>
                        <span v-if="!t.unlimited" class="rt-tickets-item-available small text-secondary">
                            <span v-text="remaining(t.id)"></span>
                            {{ __('disponibles') }}
                        </span>
                        <span v-else class="rt-tickets-item-available small text-secondary">{{ __('Ilimitado') }}</span>
                    </div>

                    <div class="rt-tickets-item-quantity" role="group" v-bind:aria-label="'{{ __('Cantidad para') }} ' + t.name">
                        <button
                            type="button"
                            class="rt-tickets-qty-btn"
                            aria-label="{{ __('Reducir cantidad') }}"
                            v-on:click="decrement(t.id)"
                            v-bind:disabled="quantities[t.id] <= 0"
                        >−</button>
                        <input
                            type="number"
                            class="rt-tickets-qty-input"
                            aria-label="{{ __('Cantidad') }}"
                            min="0"
                            v-bind:max="maxFor(t.id)"
                            step="1"
                            v-model.number="quantities[t.id]"
                            v-on:input="clampQuantity(t.id)"
                        >
                        <button
                            type="button"
                            class="rt-tickets-qty-btn"
                            aria-label="{{ __('Incrementar cantidad') }}"
                            v-on:click="increment(t.id)"
                            v-bind:disabled="quantities[t.id] >= maxFor(t.id)"
                        >+</button>
                    </div>
                </li>
            </ul>

            <footer class="rt-tickets-footer">
                <div class="rt-tickets-footer-summary">
                    <span class="rt-tickets-footer-label small text-secondary">{{ __('Cantidad') }}</span>
                    <span class="rt-tickets-footer-value text-white" v-text="totalQty"></span>
                </div>
                <div class="rt-tickets-footer-summary">
                    <span class="rt-tickets-footer-label small text-secondary">{{ __('Total') }}</span>
                    <span class="rt-tickets-footer-value text-white" v-text="formatMoney(totalPrice)"></span>
                </div>
                <button
                    type="button"
                    class="btn rt-btn-cherry rt-tickets-buy-btn"
                    v-bind:disabled="totalQty === 0"
                    v-bind:aria-disabled="totalQty === 0"
                    v-on:click="openModal()"
                >
                    <i class="bi bi-ticket-perforated-fill" aria-hidden="true"></i>
                    {{ __('Obtener Entradas') }}
                </button>
            </footer>
        </section>

        <teleport to="body">
            <div
                class="swal2-container swal2-center swal2-backdrop-show rt-checkout-swal-wrap"
                v-show="modalOpen"
                v-cloak
                v-on:click.self="closeModal()"
                role="dialog"
                aria-modal="true"
                aria-labelledby="rt-checkout-modal-title"
                style="overflow-y: auto;"
            >
                <div class="swal2-popup swal2-modal rt-checkout-swal-popup" style="display: grid;" v-on:click.stop>
                    <button type="button" class="swal2-close" aria-label="{{ __('Cerrar') }}" v-on:click="closeModal()"></button>
                    <h2 id="rt-checkout-modal-title" class="swal2-title">{{ __('Detalle de los asistentes') }}</h2>

                    <div class="swal2-html-container rt-checkout-swal-html text-start">
                        <form class="rt-checkout-form" v-on:submit.prevent="submitOrder()" novalidate>
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">

                            <template v-for="ticket in selectedTickets" v-bind:key="ticket.id">
                                <div class="rt-checkout-ticket-block">
                                    <h3 class="rt-checkout-ticket-title h6 mb-2">
                                        <span v-text="ticket.name"></span>
                                        <span class="text-secondary">×</span>
                                        <span v-text="quantities[ticket.id]"></span>
                                    </h3>

                                    <template v-for="idx in attendeeRange(ticket.id)" v-bind:key="String(ticket.id) + '-' + idx">
                                        <fieldset class="rt-checkout-attendee">
                                            <legend class="rt-checkout-attendee-legend small text-secondary">
                                                {{ __('Asistente') }} <span v-text="idx + 1"></span>
                                            </legend>

                                            <div class="row g-2 g-md-3">
                                                <div class="col-md-6">
                                                    <div class="rt-form-row">
                                                        <label class="rt-form-label" v-bind:for="'att-' + ticket.id + '-' + idx + '-name'">
                                                            {{ __('Nombre completo') }}
                                                            <span class="rt-form-required" aria-hidden="true">*</span>
                                                        </label>
                                                        <input
                                                            type="text"
                                                            class="rt-form-control"
                                                            v-bind:id="'att-' + ticket.id + '-' + idx + '-name'"
                                                            v-bind:name="'attendees[' + ticket.id + '][' + idx + '][holder_name]'"
                                                            v-model="attendees[ticket.id][idx].holder_name"
                                                            v-bind:required="ticket.iac !== 'none'"
                                                            autocomplete="name"
                                                        >
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="rt-form-row">
                                                        <label class="rt-form-label" v-bind:for="'att-' + ticket.id + '-' + idx + '-email'">
                                                            {{ __('Correo electrónico') }}
                                                            <span class="rt-form-required" aria-hidden="true">*</span>
                                                        </label>
                                                        <input
                                                            type="email"
                                                            class="rt-form-control"
                                                            v-bind:id="'att-' + ticket.id + '-' + idx + '-email'"
                                                            v-bind:name="'attendees[' + ticket.id + '][' + idx + '][holder_email]'"
                                                            v-model="attendees[ticket.id][idx].holder_email"
                                                            v-bind:required="ticket.iac !== 'none'"
                                                            autocomplete="email"
                                                        >
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row g-2 g-md-3 mt-1">
                                                <template v-for="cf in customFieldsFor(ticket.id)" v-bind:key="cf.id">
                                                    <div v-bind:class="customFieldColClass(cf)">
                                                        <div class="rt-form-row" v-bind:class="'rt-form-row--' + cf.type">
                                                            <label class="rt-form-label" v-bind:for="'att-' + ticket.id + '-' + idx + '-' + cf.slug">
                                                                <span v-text="cf.label"></span>
                                                                <span v-if="cf.required" class="rt-form-required" aria-hidden="true">*</span>
                                                            </label>

                                                            <input
                                                                v-if="cf.type === 'text'"
                                                                type="text"
                                                                class="rt-form-control"
                                                                v-bind:id="'att-' + ticket.id + '-' + idx + '-' + cf.slug"
                                                                v-bind:name="'attendees[' + ticket.id + '][' + idx + '][meta][' + cf.slug + ']'"
                                                                v-model="attendees[ticket.id][idx].meta[cf.slug]"
                                                                v-bind:required="cf.required"
                                                            >

                                                            <input
                                                                v-if="cf.type === 'date'"
                                                                type="date"
                                                                class="rt-form-control"
                                                                v-bind:id="'att-' + ticket.id + '-' + idx + '-' + cf.slug"
                                                                v-bind:name="'attendees[' + ticket.id + '][' + idx + '][meta][' + cf.slug + ']'"
                                                                v-model="attendees[ticket.id][idx].meta[cf.slug]"
                                                                v-bind:required="cf.required"
                                                                v-bind:max="maxDate"
                                                            >

                                                            <textarea
                                                                v-if="cf.type === 'textarea'"
                                                                class="rt-form-control"
                                                                rows="3"
                                                                v-bind:id="'att-' + ticket.id + '-' + idx + '-' + cf.slug"
                                                                v-bind:name="'attendees[' + ticket.id + '][' + idx + '][meta][' + cf.slug + ']'"
                                                                v-model="attendees[ticket.id][idx].meta[cf.slug]"
                                                                v-bind:required="cf.required"
                                                            ></textarea>

                                                            <select
                                                                v-if="cf.type === 'select'"
                                                                class="rt-form-control"
                                                                v-bind:id="'att-' + ticket.id + '-' + idx + '-' + cf.slug"
                                                                v-bind:name="'attendees[' + ticket.id + '][' + idx + '][meta][' + cf.slug + ']'"
                                                                v-model="attendees[ticket.id][idx].meta[cf.slug]"
                                                                v-bind:required="cf.required"
                                                            >
                                                                <option value="">{{ __('Selecciona una opción') }}</option>
                                                                <option v-for="opt in cf.options" v-bind:key="opt" v-bind:value="opt" v-text="opt"></option>
                                                            </select>

                                                            <div v-if="cf.type === 'radio'" class="rt-form-radio-group">
                                                                <label v-for="opt in cf.options" v-bind:key="opt" class="rt-form-radio">
                                                                    <input
                                                                        type="radio"
                                                                        v-bind:name="'attendees[' + ticket.id + '][' + idx + '][meta][' + cf.slug + ']'"
                                                                        v-bind:value="opt"
                                                                        v-model="attendees[ticket.id][idx].meta[cf.slug]"
                                                                        v-bind:required="cf.required"
                                                                    >
                                                                    <span v-text="opt"></span>
                                                                </label>
                                                            </div>

                                                            <label v-if="cf.type === 'checkbox'" class="rt-form-checkbox">
                                                                <input
                                                                    type="checkbox"
                                                                    value="1"
                                                                    v-bind:id="'att-' + ticket.id + '-' + idx + '-' + cf.slug"
                                                                    v-bind:name="'attendees[' + ticket.id + '][' + idx + '][meta][' + cf.slug + ']'"
                                                                    v-model="attendees[ticket.id][idx].meta[cf.slug]"
                                                                    v-bind:required="cf.required"
                                                                >
                                                                <span v-if="cf.options && cf.options[0]" v-text="cf.options[0]"></span>
                                                                <span v-else>{{ __('Aceptar') }}</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </template>
                                            </div>
                                        </fieldset>
                                    </template>
                                </div>
                            </template>

                            <div class="rt-checkout-summary">
                                <div class="rt-checkout-summary-row rt-checkout-summary-row--total">
                                    <span class="text-dark">{{ __('Total a pagar') }}</span>
                                    <span class="text-dark fw-bold" v-text="formatMoney(grandTotal)"></span>
                                </div>
                            </div>

                            <div class="rt-checkout-modal-footer border-0 pt-3 mt-2">
                                <button type="button" class="btn btn-sm btn-outline-secondary" v-on:click="closeModal()">
                                    {{ __('Cancelar') }}
                                </button>
                                <button type="submit" class="btn rt-btn-cherry" v-bind:disabled="submitting">
                                    <span v-if="submitting">{{ __('Procesando…') }}</span>
                                    <span v-else>{{ __('Completar la compra') }}</span>
                                </button>
                            </div>

                            <p
                                class="rt-checkout-error small text-danger mt-2 mb-0"
                                v-show="errorMessage !== ''"
                                v-text="errorMessage"
                            ></p>
                        </form>
                    </div>
                </div>
            </div>
        </teleport>
    </div>
</script>
