<?php $__env->startSection('title', 'Customize Bookmark - Style 3 - 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;
    }
    
    .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);
    }
    
    .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;
    }
    
    /* Section Labels */
    .section-label {
        font-family: 'Lato', sans-serif;
        font-weight: 600;
        font-size: 14px;
        color: #6b7280;
        text-align: center;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* Box Display Area */
    .boxes-display {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        margin-bottom: 1.5rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1rem 0.5rem;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: #B5702F #f3f4f6;
    }
    
    .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;
    }
    
    .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;
    }
    
    .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;
    }
    
    .scroll-hint {
        text-align: center;
        color: #6b7280;
        font-size: 13px;
        margin-bottom: 0.5rem;
    }
    
    /* Mobile Responsive */
    @media (max-width: 768px) {
        .landing-container {
            padding: 1rem;
        }
        
        .lindsay-card {
            padding: 1.5rem 1rem;
            width: 100%;
        }
        
        .landing-title {
            font-size: 2rem;
        }
        
        .box-item {
            min-width: 60px;
            width: 60px;
            height: 60px;
        }
        
        .box-content {
            font-size: 28px;
        }
        
        .box-content img {
            max-width: 50px;
            max-height: 50px;
        }
    }
    
    @media (max-width: 480px) {
        .box-item {
            min-width: 52px;
            width: 52px;
            height: 52px;
        }
        
        .box-content {
            font-size: 22px;
        }
        
        .box-content img {
            max-width: 38px;
            max-height: 38px;
        }
    }
</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.bookmark-style']] + (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.bookmark-style']); ?>
<?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 3 of 4</span>
        </div>

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

        <!-- Page Title -->
        <h1 class="landing-title">Customize Your Bookmark</h1>
        <p class="body-text" style="color: #6b7280; text-align: center; margin-bottom: 2rem;">
            Style 3: 8 text characters + Bottom stamp
        </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-bookmark')); ?>">
            <?php echo csrf_field(); ?>
            <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">
            <input type="hidden" name="text_characters" id="textCharactersInput">
            <input type="hidden" name="bottom_stamp" id="bottomStampInput">

            <!-- Text Boxes (8 characters) -->
            <div class="section-label">Text (8 Characters Max)</div>
            <div id="scrollHint" class="scroll-hint" style="display: none;">← Swipe to see all boxes →</div>
            <div class="boxes-display" id="textBoxesDisplay">
                <?php for($i = 0; $i < 8; $i++): ?>
                    <div class="box-item <?php echo e($i === 0 ? 'active' : ''); ?>" data-index="<?php echo e($i); ?>" data-type="text">
                        <div class="box-content"></div>
                        <div class="box-delete" onclick="removeBox(<?php echo e($i); ?>)">×</div>
                    </div>
                <?php endfor; ?>
            </div>

            <!-- Bottom Stamp Box -->
            <div class="section-label">Bottom Stamp</div>
            <div class="boxes-display">
                <div class="box-item" data-index="8" data-type="stamp">
                    <div class="box-content"></div>
                    <div class="box-delete" onclick="removeBox(8)">×</div>
                </div>
            </div>

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

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

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

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

                <!-- Stamps Section (shown when stamp box is active) -->
                <div class="tray-section" id="stampsSection" style="display: none;">
                    <div class="tray-title">Select Stamp</div>
                    <div class="tray-grid stamps-grid">
                        <?php $__currentLoopData = $stamps; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $stamp): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <button type="button" class="tray-button" onclick="addToBox('stamp', '<?php echo e($stamp->image_path); ?>')">
                                <img src="/images/stamps/large/<?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 lettersSection = document.getElementById('lettersSection');
        const numbersSection = document.getElementById('numbersSection');
        const stampsSection = document.getElementById('stampsSection');
        const scrollHint = document.getElementById('scrollHint');
        const textBoxesDisplay = document.getElementById('textBoxesDisplay');
        
        let textCharacters = [];
        let bottomStamp = null;
        let currentActiveIndex = 0;

        // Check for scroll hint
        function checkScrollHint() {
            if (window.innerWidth <= 768 && textBoxesDisplay.scrollWidth > textBoxesDisplay.clientWidth) {
                scrollHint.style.display = 'block';
                textBoxesDisplay.addEventListener('scroll', function() {
                    scrollHint.style.display = 'none';
                }, { once: true });
            } else {
                scrollHint.style.display = 'none';
            }
        }

        checkScrollHint();
        window.addEventListener('resize', checkScrollHint);

        // Initialize - show letter/number tray for text
        updateTrayVisibility();

        // Add box click handlers
        boxes.forEach((box, index) => {
            box.addEventListener('click', function() {
                // Remove active from all boxes
                boxes.forEach(b => b.classList.remove('active'));
                // Add active to clicked box
                this.classList.add('active');
                currentActiveIndex = index;
                updateTrayVisibility();
            });
        });

        window.addToBox = function(type, value) {
            const activeBox = boxes[currentActiveIndex];
            const boxType = activeBox.dataset.type;
            const content = activeBox.querySelector('.box-content');
            
            // Validate: only stamps for stamp box, only text for text boxes
            if (boxType === 'stamp' && type !== 'stamp') {
                return; // Ignore non-stamp selections for stamp box
            }
            if (boxType === 'text' && type === 'stamp') {
                return; // Ignore stamp selections for text boxes
            }
            
            // Fill the box
            if (type === 'stamp') {
                content.innerHTML = `<img src="/images/stamps/large/${value}" alt="stamp">`;
                bottomStamp = value;
            } else {
                content.textContent = value;
                // For text boxes (index 0-7)
                textCharacters[currentActiveIndex] = value;
            }
            
            activeBox.classList.add('filled');
            activeBox.classList.remove('active');
            
            // Move to next empty box
            moveToNextEmptyBox();
            updateForm();
        };

        window.removeBox = function(index) {
            const box = boxes[index];
            const boxType = box.dataset.type;
            const content = box.querySelector('.box-content');
            
            // Clear the box
            content.innerHTML = '';
            box.classList.remove('filled');
            
            // Update data
            if (boxType === 'stamp') {
                bottomStamp = null;
            } else if (boxType === 'text') {
                textCharacters.splice(index, 1);
                // Rebuild text boxes
                for (let i = 0; i < 8; i++) {
                    const textBox = boxes[i];
                    const textContent = textBox.querySelector('.box-content');
                    textContent.textContent = '';
                    textBox.classList.remove('filled');
                    if (textCharacters[i]) {
                        textContent.textContent = textCharacters[i];
                        textBox.classList.add('filled');
                    }
                }
            }
            
            // Set this box as active
            boxes.forEach(b => b.classList.remove('active'));
            box.classList.add('active');
            currentActiveIndex = index;
            
            updateTrayVisibility();
            updateForm();
        };

        function moveToNextEmptyBox() {
            // Find next empty box
            for (let i = 0; i < boxes.length; i++) {
                if (!boxes[i].classList.contains('filled')) {
                    boxes.forEach(b => b.classList.remove('active'));
                    boxes[i].classList.add('active');
                    currentActiveIndex = i;
                    updateTrayVisibility();
                    return;
                }
            }
            // All filled
            boxes.forEach(b => b.classList.remove('active'));
            currentActiveIndex = -1;
            updateTrayVisibility();
        }

        function updateTrayVisibility() {
            if (currentActiveIndex === -1) {
                // All boxes filled - hide all trays
                lettersSection.style.display = 'none';
                numbersSection.style.display = 'none';
                stampsSection.style.display = 'none';
                return;
            }
            
            const activeBox = boxes[currentActiveIndex];
            const boxType = activeBox.dataset.type;
            
            if (boxType === 'stamp') {
                // Show stamp tray only
                lettersSection.style.display = 'none';
                numbersSection.style.display = 'none';
                stampsSection.style.display = 'block';
            } else if (boxType === 'text') {
                // Show letters and numbers trays
                lettersSection.style.display = 'block';
                numbersSection.style.display = 'block';
                stampsSection.style.display = 'none';
            }
        }

        function updateForm() {
            // Update hidden inputs
            document.getElementById('bottomStampInput').value = bottomStamp || '';
            document.getElementById('textCharactersInput').value = JSON.stringify(textCharacters.filter(t => t));
            
            // Enable/disable continue button
            const hasBottomStamp = bottomStamp !== null;
            const hasText = textCharacters.filter(t => t).length > 0;
            
            continueBtn.disabled = !(hasBottomStamp && hasText);
        }

        // Form submission validation
        document.getElementById('customizeForm').addEventListener('submit', function(e) {
            console.log('=== FORM SUBMISSION ===');
            console.log('Bottom stamp:', bottomStamp);
            console.log('Text characters:', textCharacters);
            
            if (!bottomStamp || textCharacters.filter(t => t).length === 0) {
                e.preventDefault();
                alert('Please fill the bottom stamp and at least one text character.');
                return false;
            }
            
            console.log('Form validation passed, submitting...');
        });
    });
</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/bookmark-customize-style3.blade.php ENDPATH**/ ?>