<?php $__env->startSection('title', 'Customize Your Bracelet - Lindsay\'s Leather'); ?>

<?php $__env->startSection('head'); ?>
<style>
            body.with-order-header {
                font-family: 'Montserrat', sans-serif;
                background-color: #f8f9fa;
                margin: 0;
                padding: 0;
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .landing-container {
                max-width: 900px;
                width: 100%;
                padding: 2rem;
                margin: 0 auto; /* Center the container */
            }
            
            .lindsay-card {
                background: white;
                border-radius: 16px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                padding: 2rem;
                border: 1px solid rgba(181, 112, 47, 0.1);
                width: 100%;
            }
            
            .flex {
                display: flex;
            }
            
            .justify-between {
                justify-content: space-between;
            }
            
            .items-center {
                align-items: center;
            }
            
            .mb-6 {
                margin-bottom: 1.5rem;
            }
            
            
            .body-text {
                font-family: 'Montserrat', sans-serif;
                font-weight: 400;
            }
            
            .progress-bar {
                height: 4px;
                background: #e5e7eb;
                border-radius: 2px;
                overflow: hidden;
                margin-bottom: 2rem;
            }
            
            .progress-fill {
                height: 100%;
                background: #B5702F;
                border-radius: 2px;
                transition: width 0.5s ease;
            }
            
            .landing-title {
                font-family: 'Lato', sans-serif;
                font-weight: 700;
                font-size: 2.5rem;
                color: #371C16;
                margin-bottom: 1rem;
                line-height: 1.2;
                text-align: center;
            }
            
            /* 8-Box Display Area - ALWAYS SINGLE LINE */
            .boxes-display {
                display: flex;
                gap: 0.5rem;
                justify-content: center;
                margin-bottom: 2rem;
                flex-wrap: nowrap; /* NEVER WRAP */
                overflow-x: auto; /* Enable horizontal scroll */
                overflow-y: hidden;
                padding: 1rem 0.5rem;
                max-width: 100%;
                -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
                scroll-behavior: smooth;
                /* Scrollbar styling */
                scrollbar-width: thin;
                scrollbar-color: #B5702F #f3f4f6;
            }
            
            /* Custom scrollbar for webkit browsers */
            .boxes-display::-webkit-scrollbar {
                height: 8px;
            }
            
            .boxes-display::-webkit-scrollbar-track {
                background: #f3f4f6;
                border-radius: 4px;
            }
            
            .boxes-display::-webkit-scrollbar-thumb {
                background: #B5702F;
                border-radius: 4px;
            }
            
            .boxes-display::-webkit-scrollbar-thumb:hover {
                background: #371C16;
            }
            
            .box-item {
                min-width: 70px;
                width: 70px;
                height: 70px;
                border: 3px solid #e5e7eb;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: white;
                position: relative;
                transition: all 0.2s ease;
                flex-shrink: 0; /* NEVER SHRINK */
            }
            
            .box-item.filled {
                border-color: #B5702F;
                background: rgba(181, 112, 47, 0.05);
            }
            
            .box-item.active {
                border-color: #B5702F;
                box-shadow: 0 0 0 3px rgba(181, 112, 47, 0.2);
            }
            
            .box-content {
                font-family: 'Lato', sans-serif;
                font-weight: 700;
                font-size: 32px;
                color: #371C16;
            }
            
            .box-content img {
                max-width: 60px;
                max-height: 60px;
                object-fit: contain;
            }
            
            .box-delete {
                position: absolute;
                top: -8px;
                right: -8px;
                width: 24px;
                height: 24px;
                background: #dc2626;
                color: white;
                border-radius: 50%;
                border: 2px solid white;
                cursor: pointer;
                display: none;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                font-weight: bold;
                transition: all 0.2s ease;
            }
            
            .box-item.filled:hover .box-delete {
                display: flex;
            }
            
            .box-delete:hover {
                background: #b91c1c;
                transform: scale(1.1);
            }
            
            /* Selection Tray */
            .selection-tray {
                background: #f8f9fa;
                border-radius: 12px;
                padding: 1.5rem;
                border: 2px solid #e5e7eb;
            }
            
            .tray-section {
                margin-bottom: 1.5rem;
            }
            
            .tray-section:last-child {
                margin-bottom: 0;
            }
            
            .tray-title {
                font-family: 'Lato', sans-serif;
                font-weight: 600;
                font-size: 16px;
                color: #371C16;
                margin-bottom: 0.75rem;
            }
            
                .tray-grid {
                    display: grid;
                    gap: 0.5rem;
                    grid-auto-rows: 1fr;
                }
            
            .letters-grid {
                grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
            }
            
            .numbers-grid {
                grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
            }
            
            .stamps-grid {
                grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
            }
            
            .tray-button {
                aspect-ratio: 1;
                border: 2px solid #e5e7eb;
                border-radius: 8px;
                background: white;
                cursor: pointer;
                transition: all 0.2s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: 'Lato', sans-serif;
                font-weight: 600;
                font-size: 20px;
                color: #371C16;
                padding: 8px;
                min-height: 48px;
                min-width: 48px;
            }
            
            .tray-button:hover:not(:disabled) {
                border-color: #B5702F;
                background: rgba(181, 112, 47, 0.05);
                transform: scale(1.05);
            }
            
            .tray-button:disabled {
                opacity: 0.3;
                cursor: not-allowed;
                transform: none;
            }
            
            .tray-button img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }
            
            .lindsay-btn {
                font-family: 'Lato', sans-serif;
                font-weight: 600;
                border-radius: 12px;
                padding: 16px 32px;
                min-height: 52px;
                transition: all 0.3s ease;
                border: none;
                cursor: pointer;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                background: #B5702F;
                color: white;
                width: 100%;
                margin-top: 2rem;
            }
            
            .lindsay-btn:hover:not(:disabled) {
                background: #371C16;
                transform: translateY(-1px);
                box-shadow: 0 6px 20px rgba(181, 112, 47, 0.3);
            }
            
            .lindsay-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
                transform: none;
                box-shadow: none;
            }
            
            /* Mobile Optimization - Tablets (768px and below) */
            @media (max-width: 768px) {
                html, body {
                    width: 100%;
                    overflow-x: hidden; /* Prevent side cut-off */
                }
                * {
                    -webkit-tap-highlight-color: rgba(181, 112, 47, 0.1);
                }
                
                body.with-order-header {
                    padding: 0;
                }
                
                .landing-container {
                    box-sizing: border-box; /* Include padding in width */
                    padding: 1rem;
                    width: 100vw; /* Match viewport width exactly */
                    max-width: 100vw;
                    overflow-x: hidden;
                    margin: 0 auto;
                }
                
                .lindsay-card {
                    box-sizing: border-box;
                    padding: 1.5rem 1rem;
                    margin: 0;
                    border-radius: 12px;
                }
                
                .landing-title {
                    font-size: 2rem;
                    margin-bottom: 1rem;
                }
                
                /* 8-Box System - SINGLE LINE with horizontal scroll */
                .boxes-display {
                    gap: 0.5rem;
                    justify-content: center;
                    flex-wrap: nowrap; /* NEVER WRAP */
                    padding: 0.75rem 0.5rem;
                    max-width: 100%;
                    overflow-x: auto; /* Enable scroll */
                }
                
                .box-item {
                    /* Scale with viewport, but stay within accessible bounds */
                    min-width: clamp(52px, 14vw, 60px);
                    width: clamp(52px, 14vw, 60px);
                    height: clamp(52px, 14vw, 60px);
                }
                
                .box-content {
                    font-size: 28px;
                }
                
                .box-content img {
                    max-width: 45px;
                    max-height: 45px;
                }
                
                .box-delete {
                    width: 26px;
                    height: 26px;
                    font-size: 16px;
                    top: -10px;
                    right: -10px;
                }
                
                /* Selection Tray - Scrollable on Mobile */
                .selection-tray {
                    padding: 1.25rem 1rem;
                    max-width: 100%;
                }
                
                .tray-section {
                    margin-bottom: 1.25rem;
                }
                
                .tray-title {
                    font-size: 15px;
                    margin-bottom: 0.75rem;
                }
                
                /* Letters - Wrap in Grid */
                .letters-grid {
                    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
                    gap: 0.5rem;
                }
                
                /* Numbers - Wrap in Grid */
                .numbers-grid {
                    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
                    gap: 0.5rem;
                }
                
                /* Stamps - Wrap in Grid */
                .stamps-grid {
                    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
                    gap: 0.5rem;
                }
                
                .tray-button {
                    font-size: 17px;
                    min-height: clamp(40px, 11vw, 48px);
                    min-width: clamp(40px, 11vw, 48px);
                    padding: 6px;
                    touch-action: manipulation;
                }
                
                .lindsay-btn {
                    margin-top: 1.5rem;
                    min-height: 56px;
                    padding: 16px 24px;
                    font-size: 17px;
                }
            }
            
            /* Mobile Phones (480px and below) */
            @media (max-width: 480px) {
                .landing-container { padding: 0.75rem 0.5rem; width: 95vw; max-width: 100vw; box-sizing: border-box; }
                
                .lindsay-card {
                    padding: 1.25rem 0.75rem;
                    border-radius: 10px;
                }
                
                .landing-title {
                    font-size: 1.75rem;
                    margin-bottom: 0.75rem;
                }
                
                /* 8-Box System - SINGLE LINE with horizontal scroll */
                .boxes-display {
                    gap: 0.4rem;
                    padding: 0.5rem 0.25rem;
                    flex-wrap: nowrap; /* NEVER WRAP */
                    overflow-x: auto; /* Enable scroll */
                }
                
                .box-item {
                    min-width: clamp(48px, 16vw, 56px);
                    width: clamp(48px, 16vw, 56px);
                    height: clamp(48px, 16vw, 56px);
                    border-width: 2px;
                }
                
                .box-content {
                    font-size: 22px;
                }
                
                .box-content img {
                    max-width: 38px;
                    max-height: 38px;
                }
                
                .box-delete {
                    width: 24px;
                    height: 24px;
                    font-size: 14px;
                }
                
                /* Selection Tray */
                .selection-tray {
                    padding: 1rem 0.75rem;
                }
                
                .tray-title {
                    font-size: 14px;
                }
                
                /* Letters Grid - Smaller */
                .letters-grid {
                    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
                    gap: 0.4rem;
                }
                
                /* Numbers Grid - Smaller */
                .numbers-grid {
                    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
                    gap: 0.4rem;
                }
                
                /* Stamps Grid - Smaller */
                .stamps-grid {
                    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
                    gap: 0.4rem;
                }
                
                .tray-button {
                    font-size: 15px;
                    min-height: clamp(36px, 12vw, 44px);
                    min-width: clamp(36px, 12vw, 44px);
                    padding: 4px;
                }
                
                .lindsay-btn {
                    min-height: 52px;
                    padding: 14px 20px;
                    font-size: 16px;
                }
            }
            
            /* Extra Small Mobile (375px and below) */
            @media (max-width: 375px) {
                .landing-container { padding: 0.5rem 0.35rem; width: 100vw; max-width: 100vw; box-sizing: border-box; }
                
                .lindsay-card {
                    padding: 1rem 0.65rem;
                }
                
                .landing-title {
                    font-size: 1.5rem;
                }
                
                /* 8-Box System - SINGLE LINE with horizontal scroll */
                .boxes-display {
                    gap: 0.3rem;
                    padding: 0.4rem 0.2rem;
                    flex-wrap: nowrap; /* NEVER WRAP */
                    overflow-x: auto; /* Enable scroll */
                }
                
                .box-item {
                    min-width: clamp(44px, 18vw, 50px);
                    width: clamp(44px, 18vw, 50px);
                    height: clamp(44px, 18vw, 50px);
                }
                
                .box-content {
                    font-size: 20px;
                }
                
                .box-content img {
                    max-width: 34px;
                    max-height: 34px;
                }
                
                /* Selection Tray - Very Compact */
                .selection-tray {
                    padding: 0.85rem 0.6rem;
                }
                
                .tray-title {
                    font-size: 13px;
                    margin-bottom: 0.6rem;
                }
                
                .letters-grid {
                    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
                    gap: 0.35rem;
                }
                
                .numbers-grid {
                    grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
                    gap: 0.35rem;
                }
                
                .stamps-grid {
                    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
                    gap: 0.35rem;
                }
                
                .tray-button {
                    font-size: 14px;
                    min-height: clamp(34px, 14vw, 40px);
                    min-width: clamp(34px, 14vw, 40px);
                    padding: 3px;
                }
                
                .lindsay-btn {
                    min-height: 50px;
                    padding: 13px 18px;
                    font-size: 15px;
                }
            }
        </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="landing-container">
            <div class="lindsay-card">
                <!-- Back Button and Step Indicator -->
                <div class="flex justify-between items-center mb-6">
                    <?php if (isset($component)) { $__componentOriginal5c84f04e4e4c3f6b2afa5416a6776687 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal5c84f04e4e4c3f6b2afa5416a6776687 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.back-button','data' => ['route' => 'student.index']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('back-button'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['route' => 'student.index']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal5c84f04e4e4c3f6b2afa5416a6776687)): ?>
<?php $attributes = $__attributesOriginal5c84f04e4e4c3f6b2afa5416a6776687; ?>
<?php unset($__attributesOriginal5c84f04e4e4c3f6b2afa5416a6776687); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal5c84f04e4e4c3f6b2afa5416a6776687)): ?>
<?php $component = $__componentOriginal5c84f04e4e4c3f6b2afa5416a6776687; ?>
<?php unset($__componentOriginal5c84f04e4e4c3f6b2afa5416a6776687); ?>
<?php endif; ?>
                    <span class="body-text" style="color: #6b7280;">Step 2 of 3</span>
                </div>

                <!-- Progress Bar -->
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 66%;"></div>
                </div>

                <!-- Page Title -->
                <h1 class="landing-title">Customize Your Bracelet</h1>
                <p class="body-text" style="color: #6b7280; text-align: center; margin-bottom: 2rem;">
                    Fill up to 8 boxes with letters, numbers, or symbols
                </p>

                <!-- Error Messages -->
                <?php if($errors->any()): ?>
                    <div style="background: #fee2e2; border: 1px solid #ef4444; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;">
                        <p style="color: #dc2626; font-weight: 600; margin-bottom: 0.5rem;">Please fix the following errors:</p>
                        <ul style="color: #dc2626; margin-left: 1.5rem;">
                            <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li><?php echo e($error); ?></li>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </ul>
                    </div>
                <?php endif; ?>

                <?php if(session('error')): ?>
                    <div style="background: #fee2e2; border: 1px solid #ef4444; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;">
                        <p style="color: #dc2626; font-weight: 600;"><?php echo e(session('error')); ?></p>
                    </div>
                <?php endif; ?>

                <form id="customizeForm" method="POST" action="<?php echo e(route('student.submit-bracelet')); ?>">
                    <?php echo csrf_field(); ?>
                    <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">
                    <input type="hidden" name="size" value="<?php echo e($size); ?>">
                    <input type="hidden" name="selections" id="selectionsInput">

                    <!-- Scroll Hint (Mobile Only) -->
                    <div id="scrollHint" style="text-align: center; color: #6b7280; font-size: 13px; margin-bottom: 0.5rem; display: none;">
                        ← Swipe to see all boxes →
                    </div>

                    <!-- 8-Box Display Area -->
                    <div class="boxes-display" id="boxesDisplay">
                        <?php for($i = 0; $i < 8; $i++): ?>
                            <div class="box-item <?php echo e($i === 0 ? 'active' : ''); ?>" data-index="<?php echo e($i); ?>">
                                <div class="box-content"></div>
                                <div class="box-delete" onclick="removeBox(<?php echo e($i); ?>)">×</div>
                            </div>
                        <?php endfor; ?>
                    </div>

                    <!-- Selection Tray -->
                    <div class="selection-tray">
                        <!-- Letters Section -->
                        <div class="tray-section">
                            <div class="tray-title">Letters</div>
                            <div class="tray-grid letters-grid" id="lettersGrid">
                                <?php $__currentLoopData = range('A', 'Z'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $letter): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <button type="button" class="tray-button" data-type="letter" data-value="<?php echo e($letter); ?>" onclick="addToBox('letter', '<?php echo e($letter); ?>')">
                                        <?php echo e($letter); ?>

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

                        <!-- Numbers Section -->
                        <div class="tray-section">
                            <div class="tray-title">Numbers</div>
                            <div class="tray-grid numbers-grid" id="numbersGrid">
                                <?php $__currentLoopData = range(0, 9); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $number): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <button type="button" class="tray-button" data-type="number" data-value="<?php echo e($number); ?>" onclick="addToBox('number', '<?php echo e($number); ?>')">
                                        <?php echo e($number); ?>

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

                        <!-- Stamps Section -->
                        <div class="tray-section">
                            <div class="tray-title">Symbols</div>
                            <div class="tray-grid stamps-grid" id="stampsGrid">
                                <?php $__currentLoopData = $stamps; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $stamp): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <button type="button" class="tray-button" data-type="stamp" data-value="<?php echo e($stamp->image_path); ?>" onclick="addToBox('stamp', '<?php echo e($stamp->image_path); ?>')">
                                        <img src="/images/stamps/small/<?php echo e($stamp->image_path); ?>" alt="<?php echo e(pathinfo($stamp->image_path, PATHINFO_FILENAME)); ?>">
                                    </button>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        </div>
                    </div>

                    <!-- Continue Button -->
                    <button type="submit" 
                            id="continueBtn" 
                            class="lindsay-btn" 
                            disabled>
                        Continue to Preview →
                    </button>
                </form>
            </div>
        </div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
        document.addEventListener('DOMContentLoaded', function() {
            const boxes = document.querySelectorAll('.box-item');
            const continueBtn = document.getElementById('continueBtn');
            const selectionsInput = document.getElementById('selectionsInput');
            const boxesDisplay = document.getElementById('boxesDisplay');
            const scrollHint = document.getElementById('scrollHint');
            let selections = [];
            let currentBoxIndex = 0;

            // Show scroll hint on mobile if boxes overflow
            function checkScrollHint() {
                if (window.innerWidth <= 768 && boxesDisplay.scrollWidth > boxesDisplay.clientWidth) {
                    scrollHint.style.display = 'block';
                    // Hide hint after first scroll
                    boxesDisplay.addEventListener('scroll', function() {
                        scrollHint.style.display = 'none';
                    }, { once: true });
                } else {
                    scrollHint.style.display = 'none';
                }
            }

            // Initialize
            updateUI();
            checkScrollHint();
            
            // Recheck on window resize
            window.addEventListener('resize', checkScrollHint);

            window.addToBox = function(type, value) {
                // Prevent adding if all boxes are filled
                if (currentBoxIndex >= 8) {
                    return;
                }

                // Add to selections array
                selections.push({
                    type: type,
                    value: value
                });

                // Update box display
                const box = boxes[currentBoxIndex];
                const content = box.querySelector('.box-content');
                
                if (type === 'stamp') {
                    content.innerHTML = `<img src="/images/stamps/small/${value}" alt="stamp">`;
                } else {
                    content.textContent = value;
                }
                
                box.classList.add('filled');
                box.classList.remove('active');
                
                // Move to next box
                currentBoxIndex++;
                if (currentBoxIndex < 8) {
                    boxes[currentBoxIndex].classList.add('active');
                }

                updateUI();
            };

            window.removeBox = function(index) {
                // Remove from array
                selections.splice(index, 1);
                
                // Rebuild all boxes
                boxes.forEach((box, i) => {
                    box.classList.remove('filled', 'active');
                    const content = box.querySelector('.box-content');
                    content.innerHTML = '';
                    
                    if (selections[i]) {
                        const sel = selections[i];
                        if (sel.type === 'stamp') {
                            content.innerHTML = `<img src="/images/stamps/small/${sel.value}" alt="stamp">`;
                        } else {
                            content.textContent = sel.value;
                        }
                        box.classList.add('filled');
                    }
                });
                
                // Update current box index
                currentBoxIndex = selections.length;
                if (currentBoxIndex < 8) {
                    boxes[currentBoxIndex].classList.add('active');
                }
                
                updateUI();
            };

            function updateUI() {
                // Update hidden input
                selectionsInput.value = JSON.stringify(selections);
                
                // Update continue button
                if (selections.length > 0) {
                    continueBtn.disabled = false;
                    continueBtn.style.opacity = '1';
                    continueBtn.style.cursor = 'pointer';
                } else {
                    continueBtn.disabled = true;
                    continueBtn.style.opacity = '0.5';
                    continueBtn.style.cursor = 'not-allowed';
                }
                
                // Disable tray buttons if all boxes filled
                const trayButtons = document.querySelectorAll('.tray-button');
                trayButtons.forEach(btn => {
                    btn.disabled = (currentBoxIndex >= 8);
                });
            }

            // Form submission
            document.getElementById('customizeForm').addEventListener('submit', function(e) {
                console.log('Form submitting with selections:', selections);
                console.log('Selections JSON:', JSON.stringify(selections));
                console.log('Hidden input value:', selectionsInput.value);
                
                if (selections.length === 0) {
                    e.preventDefault();
                    alert('Please add at least one letter, number, or symbol to your bracelet.');
                    return false;
                }
                
                // Final check before submission
                if (!selectionsInput.value) {
                    console.error('ERROR: Hidden input is empty!');
                    e.preventDefault();
                    alert('Error: Form data not properly prepared. Please try again.');
                    return false;
                }
                
                console.log('Form validation passed, submitting...');
            });
        });
        </script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
        // Additional scripts if needed
</script>
<?php $__env->stopSection(); ?>


<?php echo $__env->make('layouts.student', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/tqxferau/lindsay-boswell.com/resources/views/student/bracelet-customize.blade.php ENDPATH**/ ?>