
<?php
    $venueMapData ??= null;
    $vmInitial = is_array($venueMapData) ? $venueMapData : ['enabled' => false, 'zones' => [], 'markers' => []];
?>

<div
    id="rt-venue-map-section"
    x-data="rtVenueMapBuilder(<?php echo \Illuminate\Support\Js::from($vmInitial)->toHtml() ?>)"
    x-init="init()"
    class="mt-3"
>
    
    <input type="hidden" name="venue_map_json" :value="mapJson">

    
    <div class="d-flex align-items-center justify-content-between mb-2">
        <div class="d-flex align-items-center gap-2">
            <span class="badge badge-secondary" style="font-size:.7rem; letter-spacing:.04em">
                <i class="bi bi-map me-1" aria-hidden="true"></i><?php echo e(__('Mapa de venue')); ?>

            </span>
            <span class="text-muted" style="font-size:.8rem"><?php echo e(__('Opcional — arrastra zonas para configurar la disposición')); ?></span>
        </div>
        <div class="custom-control custom-switch mb-0">
            <input
                type="checkbox"
                class="custom-control-input"
                id="rt-map-enabled"
                x-model="enabled"
            >
            <label class="custom-control-label" for="rt-map-enabled"><?php echo e(__('Activar mapa')); ?></label>
        </div>
    </div>

    
    <div x-show="enabled" x-cloak>
        <div class="row">
            
            <div class="col-md-3 rt-map-panel mb-3 mb-md-0">

                
                <p class="font-weight-bold text-uppercase mb-1" style="font-size:.7rem; letter-spacing:.06em; color:#5a5c69">
                    <i class="bi bi-bounding-box me-1" aria-hidden="true"></i><?php echo e(__('Añadir zona')); ?>

                </p>
                <div class="d-flex flex-wrap gap-1 mb-3">
                    <template x-for="tpl in zoneTpls" :key="tpl.key">
                        <button
                            type="button"
                            class="btn btn-sm btn-outline-secondary"
                            style="font-size:.72rem; padding:.2rem .55rem;"
                            @click="addZone(tpl)"
                            x-text="tpl.label"
                        ></button>
                    </template>
                </div>

                
                <p class="font-weight-bold text-uppercase mb-1" style="font-size:.7rem; letter-spacing:.06em; color:#5a5c69">
                    <i class="bi bi-geo-alt me-1" aria-hidden="true"></i><?php echo e(__('Marcadores')); ?>

                </p>
                <div class="d-flex flex-wrap gap-1 mb-3">
                    <template x-for="tpl in markerTpls" :key="tpl.type">
                        <button
                            type="button"
                            class="btn btn-sm btn-outline-secondary"
                            style="font-size:.72rem; padding:.2rem .55rem;"
                            @click="addMarker(tpl)"
                            x-text="tpl.label"
                        ></button>
                    </template>
                </div>

                
                <template x-if="selectedZone">
                    <div class="card card-body py-2 px-3 mb-2" style="font-size:.8rem">
                        <p class="font-weight-bold mb-2 rt-cherry-text" style="font-size:.75rem; letter-spacing:.03em">
                            <i class="bi bi-pencil-square me-1" aria-hidden="true"></i><?php echo e(__('Zona seleccionada')); ?>

                        </p>
                        <div class="form-group mb-2">
                            <label class="font-weight-bold mb-0" style="font-size:.72rem"><?php echo e(__('Nombre')); ?></label>
                            <input type="text" class="form-control form-control-sm" x-model="selectedZone.label">
                        </div>
                        <div class="form-group mb-2">
                            <label class="font-weight-bold mb-0" style="font-size:.72rem"><?php echo e(__('Capacidad')); ?></label>
                            <input type="number" class="form-control form-control-sm" min="0" x-model.number="selectedZone.capacity">
                        </div>
                        <label class="font-weight-bold mb-1 d-block" style="font-size:.72rem"><?php echo e(__('Color')); ?></label>
                        <div class="d-flex flex-wrap gap-1 mb-2">
                            <template x-for="c in colorPalette" :key="c">
                                <button
                                    type="button"
                                    class="rt-map-color-swatch"
                                    :style="'background:' + c"
                                    :class="selectedZone.color === c ? 'rt-swatch-active' : ''"
                                    @click="selectedZone.color = c"
                                ></button>
                            </template>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-danger mt-1" @click="removeSelected()">
                            <i class="bi bi-trash me-1" aria-hidden="true"></i><?php echo e(__('Eliminar')); ?>

                        </button>
                    </div>
                </template>

                
                <template x-if="selectedMarker">
                    <div class="card card-body py-2 px-3 mb-2" style="font-size:.8rem">
                        <p class="font-weight-bold mb-2 rt-cherry-text" style="font-size:.75rem; letter-spacing:.03em">
                            <i class="bi bi-geo-alt-fill me-1" aria-hidden="true"></i><?php echo e(__('Marcador seleccionado')); ?>

                        </p>
                        <div class="form-group mb-2">
                            <label class="font-weight-bold mb-0" style="font-size:.72rem"><?php echo e(__('Etiqueta')); ?></label>
                            <input type="text" class="form-control form-control-sm" x-model="selectedMarker.label">
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-danger mt-1" @click="removeSelected()">
                            <i class="bi bi-trash me-1" aria-hidden="true"></i><?php echo e(__('Eliminar')); ?>

                        </button>
                    </div>
                </template>

                
                <template x-if="!selectedZone && !selectedMarker">
                    <p class="text-muted" style="font-size:.75rem; line-height:1.4">
                        <i class="bi bi-cursor me-1" aria-hidden="true"></i><?php echo e(__('Haz clic en una zona o marcador del canvas para editarlo.')); ?>

                    </p>
                </template>

                
                <div class="mt-3 pt-2 border-top">
                    <p class="rt-map-total-cap text-muted mb-1">
                        <?php echo e(__('Capacidad total:')); ?>

                        <strong x-text="totalCapacity.toLocaleString()"></strong>
                    </p>
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-block mt-1" @click="if(confirm('<?php echo e(__('¿Borrar todo el mapa?')); ?>')) clearAll()">
                        <i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i><?php echo e(__('Limpiar mapa')); ?>

                    </button>
                </div>
            </div>

            
            <div class="col-md-9">
                <div class="rt-map-canvas-wrap" x-ref="canvas" @click.self="selectedId = null">
                    <div class="rt-map-canvas">

                        
                        <template x-for="zone in zones" :key="zone.id">
                            <div
                                class="rt-map-zone"
                                :class="selectedId === zone.id ? 'rt-map-selected' : ''"
                                :style="`
                                    left: ${pct(zone.x, CW)};
                                    top:  ${pct(zone.y, CH)};
                                    width: ${pct(zone.w, CW)};
                                    height: ${pct(zone.h, CH)};
                                    background: ${zone.color};
                                `"
                                @mousedown.stop="selectedId = zone.id; startDrag($event, zone)"
                                @touchstart.stop="selectedId = zone.id; startDrag($event, zone)"
                            >
                                <span class="rt-map-zone__label" x-text="zone.label"></span>
                                <span class="rt-map-zone__cap" x-show="zone.capacity > 0" x-text="zone.capacity.toLocaleString() + ' cap.'"></span>

                                
                                <div
                                    class="rt-map-resize-handle"
                                    @mousedown.stop="startResize($event, zone)"
                                    @touchstart.stop="startResize($event, zone)"
                                ></div>
                            </div>
                        </template>

                        
                        <template x-for="marker in markers" :key="marker.id">
                            <div
                                class="rt-map-marker"
                                :class="selectedId === marker.id ? 'rt-map-selected' : ''"
                                :style="`
                                    left: ${pct(marker.x, CW)};
                                    top:  ${pct(marker.y, CH)};
                                    width: ${pct(marker.w, CW)};
                                    height: ${pct(marker.h, CH)};
                                    background: ${marker.fill};
                                `"
                                @mousedown.stop="selectedId = marker.id; startDrag($event, marker)"
                                @touchstart.stop="selectedId = marker.id; startDrag($event, marker)"
                            >
                                <span class="rt-map-marker__label" x-text="marker.label"></span>
                            </div>
                        </template>

                    </div>
                </div>

                
                <p class="text-muted mt-1" style="font-size:.73rem; line-height:1.4">
                    <i class="bi bi-info-circle me-1" aria-hidden="true"></i>
                    <?php echo e(__('Arrastra para mover · Esquina inferior derecha para redimensionar · Clic en zona para editar · Clic en fondo para deseleccionar')); ?>

                </p>
            </div>
        </div>
    </div>
</div>
<?php /**PATH /var/www/html/resources/views/dashboard/events/partials/venue-map-builder.blade.php ENDPATH**/ ?>