@extends('modules.head') @section('contenido')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Live Editor</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Alpine js -->
<script defer src="{{ asset('flash_ticket_builder/assets/js/alpinejs@3.x.x.min.js') . '?v=' . time() }}"></script>
<!-- appcss -->
<script src="{{ asset('flash_ticket_builder/assets/js/script.js') . '?v=' . time() }}"></script>
<link rel="stylesheet" href="{{ asset('flash_ticket_builder/assets/css/styles.css') . '?v=' . time() }}" />
</head>
@php
$parameters = json_decode($ticketParameters->value ?? '{}');
$parameterEncoded = json_encode($parameters);
@endphp
{{-- <body x-data="builder_sections (JSON.parse('{{ $parameterEncoded }}'))"> --}}
<body x-data="builder_sections ('{{ $parameterEncoded }}', {{ $backgroundByDefault->value ?? 'false'}})">
@csrf
<main class="container" x-data="tabs">
<!-- Tabs container -->
<section class="tabs__container">
<ul class="tabs">
<li class="tab">
<a class="tab__link" :class="activeTab == 'editor' && 'tab__link--active'" href="#editor"
@click.prevent="activeTab = 'editor'">
<span class="tab__label">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="tab__icon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
<path d="M13.5 6.5l4 4" />
</svg>
Editor
</span>
</a>
</li>
<li class="tab">
<a class="tab__link" :class="activeTab == 'preview' && 'tab__link--active'" href="#preview"
@click.prevent="activeTab = 'preview'">
<span class="tab__label">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="tab__icon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path
d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
</svg>
Preview
</span>
</a>
</li>
</ul>
</section>
<!-- main content -->
<section class="playground" x-data="dragger" @dblclick="reset" @mousemove="drag" @mouseup="stopDrag">
<section class="playground__panel editor" :class="activeTab == 'editor' && 'playground__panel--active'"
:style="`width: ${editorWidth}%`">
<!-- Editor -->
<section class="editor__container">
<header class="editor__header">
<h3>Secciones</h3>
<div class="editor__actions">
<button class="float__button float__button--primary" :disabled="saving" @click="savePersonalization">
<span>Guardar</span>
<svg x-cloak="" aria-hidden="true" class="spinner" x-show="saving" viewBox="0 0 100 101"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor" />
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill" />
</svg>
</button>
</div>
</header>
<article class="editor__header">
<label class="checkbox checkbox--w-full checkbox--justify-between">
<span class="checkbox__label"> {{__('Use image by default')}} </span>
<input type="checkbox" class="checkbox__input"
x-model="backgroundByDefault" />
<span class="checkbox__indicator"></span>
</label>
</article>
<section class="editor__content">
<div class="editor__actions" x-data="accordion(0)">
<template x-for="(prop, indx) in Object.entries(sections)" :key="indx">
<article class="accordion" x-data="{ section: prop[1] }">
<header class="accordion__header" @click="toggleAccordion(indx)"
:class="activeAccordion == indx && 'accordion__header--active'">
<h3 class="accordion__title" x-text="section.label"></h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="accordion__icon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M6 9l6 6l6 -6" />
</svg>
</header>
<section x-show="activeAccordion == indx" x-transition class="accordion__content"
:class="activeAccordion == indx && 'accordion__content--active'">
<div class="form">
<p class="form__helper-text" x-text="section.help_text"></p>
</div>
<hr class="accordion__divider" />
<div class="form__group">
<label class="checkbox checkbox--w-full checkbox--justify-between">
<span class="checkbox__label"> Mostrar sección </span>
<input type="checkbox" class="checkbox__input"
x-model="section.visible" />
<span class="checkbox__indicator"></span>
</label>
<section x-cloak x-show="!section.visible" x-transition
class="alert alert--warning">
<span class="alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="currentColor"
class="icon icon-tabler icons-tabler-filled icon-tabler-alert-triangle">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
</svg>
</span>
<span class="alert__text">
Esta sección se encuentra oculta
</span>
</section>
</div>
<hr class="accordion__divider" />
<template x-for="(prop_s, iindx) in Object.entries(section.settings)"
:key="iindx">
<div x-data="{ item: prop_s[1] }">
<section class="form__group">
<label class="form__label"
:for="indx + '_' + iindx + '_form_section'">
<span
class="form__label-text form__label-text--flex form__label-text--items-center form__label-text--justify-between"
:class="(!section.visible || !item.visible) &&
'form__label-text--disabled'">
<span x-text="item.label"></span>
<label
class="checkbox checkbox--size-small checkbox--justify-between">
<input type="checkbox" class="checkbox__input"
x-model="item.visible"
:disabled="!section.visible" />
<span class="checkbox__indicator"></span>
</label>
</span>
<div>
<template x-if="item.type == 'text'">
<input type="text" class="input"
x-model="item.value"
:placeholder="item.placeholder"
:disabled="!section.visible || !item.visible" />
</template>
<template x-if="item.type == 'textarea'">
<textarea class="input" x-model="item.value" :placeholder="item.placeholder"
:disabled="!section.visible || !item.visible" :id="indx + '_' + iindx + '_form_section'"></textarea>
</template>
<template x-if="item.type == 'color'">
<div>
<input type="color" class="input"
x-model="item.value"
:disabled="!section.visible || !item.visible"
:id="indx + '_' + iindx + '_form_section'" />
<input type="text" class="input"
x-model="item.value"
:disabled="!section.visible || !item.visible" />
</div>
</template>
<template x-if="item.type == 'number'">
<input type="number" class="input"
x-model="item.value"
:disabled="!section.visible || !item.visible"
:id="indx + '_' + iindx + '_form_section'" />
</template>
<template x-if="item.type == 'image'">
<div x-data="upload_image" class="form__group">
<input type="file" class="input"
accept="image/*"
:disabled="!section.visible || !item.visible"
:data-section="prop[0]"
:data-setting="prop_s[0]"
@change="uploadFile($event, item)"
x-model="item.value"
:id="indx + '_' + iindx + '_form_section'"
:name="(section.label).replace(/ /g, '_') + '_' + (item
.label.replace(/ /g, '_')) + '_img'" />
<label :for="indx + '_' + iindx + '_form_section'"
class="form__previewer"
:class="!section.visible || !item.visible &&
'form__previewer--disabled'">
<img class="form__previewer-img"
x-bind:src="imgURL"
x-ref="previewer_img" x-show="imgURL" />
<svg xmlns="http://www.w3.org/2000/svg"
width="24" height="24"
viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="form__previewer-icon">
<path stroke="none" d="M0 0h24v24H0z"
fill="none" />
<path d="M15 8h.01" />
<path
d="M6 13l2.644 -2.644a1.21 1.21 0 0 1 1.712 0l3.644 3.644" />
<path
d="M13 13l1.644 -1.644a1.21 1.21 0 0 1 1.712 0l1.644 1.644" />
<path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
<path d="M4 16v2a2 2 0 0 0 2 2h2" />
<path d="M16 4h2a2 2 0 0 1 2 2v2" />
<path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
</svg>
</label>
</div>
</template>
</div>
<span class="form__helper-text"
x-text="item.help_text"></span>
</label>
<template x-if="item.styles && item.styles.length > 0">
<div class="accordion accordion--style-minimal"
x-data="accordion">
<header class="accordion__header"
@click="toggleAccordion('styles')"
:class="activeAccordion == 'styles' &&
'accordion__header--active'">
<h3 class="accordion__title">Estilos</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="accordion__icon">
<path stroke="none" d="M0 0h24v24H0z"
fill="none" />
<path d="M6 9l6 6l6 -6" />
</svg>
</header>
<section x-show="activeAccordion == 'styles'" x-transition
class="accordion__content"
:class="activeAccordion == 'styles' &&
'accordion__content--active'">
<section class="form__group">
<template x-for="(style, sindx) in item.styles"
:key="sindx">
<label class="form__label">
<span x-text="style.label"></span>
<template x-if="style.type == 'color'">
<div>
<input type="color"
class="input input--size-small"
x-model="style.value"
:disabled="!section.visible || !item
.visible" />
<input type="text"
class="input input--size-small"
x-model="style.value"
:disabled="!section.visible || !item
.visible" />
</div>
</template>
<template x-if="style.type == 'number'">
<input type="number"
class="input input--size-small"
x-model="style.value"
:disabled="!section.visible || !item.visible" />
</template>
<template x-if="style.type == 'text'">
<input type="text"
class="input input--size-small"
x-model="style.value"
:disabled="!section.visible || !item.visible" />
</template>
<template x-if="style.type == 'select'">
<select class="input input--size-small"
x-model="style.value"
:disabled="!section.visible || !item.visible">
<template
x-for="option in style.options">
<option :value="option">
<span
x-text="option"></span>
</option>
</template>
</select>
</template>
</label>
</template>
</section>
</section>
</div>
</template>
</section>
<hr x-show="iindx < Object.entries(section.settings).length - 1"
class="accordion__divider" />
</div>
</template>
</section>
</article>
</template>
</div>
</section>
</section>
</section>
<span class="gutter" @mousedown.prevent="startDrag">
<svg width="5" height="30" viewBox="0 0 5 30" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<rect width="2" height="2" />
<rect x="3" width="2" height="2" />
<rect y="8" width="2" height="2" />
<rect x="3" y="8" width="2" height="2" />
<rect y="12" width="2" height="2" />
<rect x="3" y="12" width="2" height="2" />
<rect y="4" width="2" height="2" />
<rect x="3" y="4" width="2" height="2" />
<rect y="16" width="2" height="2" />
<rect x="3" y="16" width="2" height="2" />
<rect y="24" width="2" height="2" />
<rect x="3" y="24" width="2" height="2" />
<rect y="28" width="2" height="2" />
<rect x="3" y="28" width="2" height="2" />
<rect y="20" width="2" height="2" />
<rect x="3" y="20" width="2" height="2" />
</svg>
</span>
<section class="playground__panel preview" :class="activeTab == 'preview' && 'playground__panel--active'"
:style="`width: ${previewWidth}%`">
<x-flash-ticket-builder.section debug="true" />
</section>
</section>
</main>
<!-- <section class="float">
<div class="float__wrapper">
<button class="float__button float__button--primary" :disabled="saving" @click="savePersonalization">
<span>Guardar</span>
<svg x-cloak="" aria-hidden="true" class="spinner" x-show="saving" viewBox="0 0 100 101"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor" />
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill" />
</svg>
</button>
</div>
</section> -->
</body>
</html>
@endsection