

<?php $__env->startSection('content'); ?>
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-dark mb-0"><i class="bi bi-grid-3x3-gap-fill me-2"></i> Diseño de Salón</h2>
            <p class="text-muted mb-0">Arrastra las mesas y guarda la distribución</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#areaModal">
                <i class="bi bi-plus-circle me-2"></i> Nueva Zona
            </button>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tableModal">
                <i class="bi bi-plus-lg me-2"></i> Nueva Mesa
            </button>
            <button class="btn btn-success fw-bold px-4 shadow" onclick="savePositions()" id="btnSave">
                <i class="bi bi-save me-2"></i> Guardar Diseño
            </button>
        </div>
    </div>

    <ul class="nav nav-tabs mb-3" id="areaTabs" role="tablist">
        <?php $__currentLoopData = $areas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $area): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <li class="nav-item" role="presentation">
                <button class="nav-link <?php echo e($index == 0 ? 'active' : ''); ?> fw-bold" 
                        id="tab-<?php echo e($area->id); ?>" 
                        data-bs-toggle="tab" 
                        data-bs-target="#area-<?php echo e($area->id); ?>" 
                        type="button" role="tab">
                    <?php echo e($area->name); ?>

                </button>
            </li>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </ul>

    <div class="tab-content" id="areaTabsContent">
        <?php $__currentLoopData = $areas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $area): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="tab-pane fade <?php echo e($index == 0 ? 'show active' : ''); ?>" id="area-<?php echo e($area->id); ?>" role="tabpanel">
                
                <div class="d-flex justify-content-between align-items-center mb-2 bg-white p-2 border rounded">
                    <small class="text-muted"><i class="bi bi-info-circle me-1"></i> Arrastra las mesas y luego presiona <b>Guardar Diseño</b>.</small>
                    <form action="<?php echo e(route('tables.destroyArea', $area->id)); ?>" method="POST" onsubmit="return confirm('¿Eliminar esta zona y sus mesas?')">
                        <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                        <button class="btn btn-sm btn-outline-danger border-0">Eliminar Zona</button>
                    </form>
                </div>

                <div class="salon-canvas bg-white border rounded shadow-sm position-relative" style="height: 600px; background-image: radial-gradient(#dee2e6 1px, transparent 1px); background-size: 20px 20px; overflow: hidden;">
                    <?php $__currentLoopData = $area->tables; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $table): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="draggable-table position-absolute d-flex flex-column align-items-center justify-content-center bg-white border shadow-sm rounded-3"
                             id="table-<?php echo e($table->id); ?>"
                             data-id="<?php echo e($table->id); ?>"
                             style="width: 100px; height: 100px; 
                                    left: <?php echo e($table->x_pos); ?>px; 
                                    top: <?php echo e($table->y_pos); ?>px; 
                                    cursor: grab; z-index: 10;
                                    transition: box-shadow 0.2s;">
                            
                            <i class="bi bi-display fs-3 <?php echo e($table->status == 'available' ? 'text-success' : 'text-danger'); ?> mb-1"></i>
                            <span class="fw-bold small text-center text-truncate w-100 px-1"><?php echo e($table->name); ?></span>
                            
                            <form action="<?php echo e(route('tables.destroyTable', $table->id)); ?>" method="POST" class="position-absolute top-0 end-0 m-1">
                                <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                <button class="btn btn-sm p-0 text-danger opacity-25 hover-opacity-100" onclick="return confirm('¿Borrar mesa?')">
                                    <i class="bi bi-x-circle-fill"></i>
                                </button>
                            </form>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
</div>

<div class="modal fade" id="areaModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <form action="<?php echo e(route('tables.storeArea')); ?>" method="POST" class="modal-content">
            <?php echo csrf_field(); ?>
            <div class="modal-header bg-light"><h5 class="modal-title fw-bold">Nueva Zona</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body"><label>Nombre</label><input type="text" name="name" class="form-control" required></div>
            <div class="modal-footer"><button class="btn btn-primary w-100">Crear</button></div>
        </form>
    </div>
</div>
<div class="modal fade" id="tableModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <form action="<?php echo e(route('tables.storeTable')); ?>" method="POST" class="modal-content">
            <?php echo csrf_field(); ?>
            <div class="modal-header bg-light"><h5 class="modal-title fw-bold">Nueva Mesa</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <div class="mb-3"><label>Nombre</label><input type="text" name="name" class="form-control" placeholder="Mesa 1" required></div>
                <div class="mb-3"><label>Zona</label><select name="area_id" class="form-select"><?php $__currentLoopData = $areas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $area): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <option value="<?php echo e($area->id); ?>"><?php echo e($area->name); ?></option> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?></select></div>
            </div>
            <div class="modal-footer"><button class="btn btn-primary w-100">Crear</button></div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const draggables = document.querySelectorAll('.draggable-table');
        let activeDrag = null;
        let initialX, initialY, currentX, currentY;

        draggables.forEach(el => el.addEventListener('mousedown', dragStart));
        document.addEventListener('mouseup', dragEnd);
        document.addEventListener('mousemove', drag);

        function dragStart(e) {
            if (e.target.closest('form')) return; // No arrastrar si clickea en borrar
            activeDrag = e.currentTarget;
            
            // Obtener posición actual real
            let rect = activeDrag.getBoundingClientRect();
            let parentRect = activeDrag.parentElement.getBoundingClientRect();
            
            // Calculamos la posición relativa al contenedor
            let styleLeft = activeDrag.offsetLeft;
            let styleTop = activeDrag.offsetTop;

            initialX = e.clientX - styleLeft;
            initialY = e.clientY - styleTop;

            activeDrag.style.cursor = 'grabbing';
            activeDrag.style.zIndex = 100;
            activeDrag.classList.add('shadow-lg');
        }

        function dragEnd() {
            if(!activeDrag) return;
            activeDrag.style.cursor = 'grab';
            activeDrag.style.zIndex = 10;
            activeDrag.classList.remove('shadow-lg');
            activeDrag = null;
        }

        function drag(e) {
            if (activeDrag) {
                e.preventDefault();
                currentX = e.clientX - initialX;
                currentY = e.clientY - initialY;

                // Límites simples (evitar que salga mucho)
                if(currentX < 0) currentX = 0;
                if(currentY < 0) currentY = 0;

                activeDrag.style.left = currentX + "px";
                activeDrag.style.top = currentY + "px";
            }
        }
    });

    function savePositions() {
        let btn = document.getElementById('btnSave');
        let originalText = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Guardando...';
        btn.disabled = true;

        let positions = [];
        document.querySelectorAll('.draggable-table').forEach(el => {
            positions.push({
                id: el.getAttribute('data-id'),
                x: parseInt(el.style.left.replace('px', '') || 0),
                y: parseInt(el.style.top.replace('px', '') || 0)
            });
        });

        fetch("<?php echo e(route('tables.updatePositions')); ?>", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "<?php echo e(csrf_token()); ?>"
            },
            body: JSON.stringify({ positions: positions })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Error en el servidor: ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            if(data.status === 'success') {
                alert('¡Diseño guardado con éxito! ✅');
            } else {
                alert('Error al guardar: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('¡Ocurrió un error al guardar! \nVerifica que hayas ejecutado "php artisan migrate". \nDetalle: ' + error.message);
        })
        .finally(() => {
            btn.innerHTML = originalText;
            btn.disabled = false;
        });
    }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\restaurante\resources\views/tables/index.blade.php ENDPATH**/ ?>