@extends('layouts.student')

@section('title', 'Choose Keychain Style - Lindsay\'s Leather')

@section('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);
            }
            
            .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;
            }
            
            .version-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
                margin-top: 2rem;
            }
            
            .version-card {
                border: 3px solid #e5e7eb;
                border-radius: 12px;
                padding: 1.5rem;
                cursor: pointer;
                transition: all 0.3s ease;
                background: white;
                text-align: center;
            }
            
            .version-card:hover {
                border-color: #B5702F;
                transform: translateY(-4px);
                box-shadow: 0 8px 20px rgba(181, 112, 47, 0.2);
            }
            
            .version-card.selected {
                border-color: #B5702F;
                background: rgba(181, 112, 47, 0.05);
                box-shadow: 0 4px 12px rgba(181, 112, 47, 0.3);
            }
            
            .version-title {
                font-family: 'Lato', sans-serif;
                font-weight: 700;
                font-size: 1.5rem;
                color: #371C16;
                margin-bottom: 1rem;
            }
            
            .version-description {
                font-size: 14px;
                color: #6b7280;
                margin-bottom: 1rem;
            }
            
            .version-preview {
                width: 100%;
                height: 200px;
                background: #f3f4f6;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 1rem;
                position: relative;
                overflow: hidden;
            }
            
            .version-preview 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;
            }
            
            @media (max-width: 768px) {
                .version-grid {
                    grid-template-columns: 1fr;
                    gap: 1.5rem;
                }
                
                .landing-title {
                    font-size: 1.8rem;
                }
            }
        </style>
@endsection

@section('content')
<div class="landing-container">
            <div class="lindsay-card">
                <!-- Back Button and Step Indicator -->
                <div class="flex justify-between items-center mb-6">
                    <x-back-button route="student.index" />
                    <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: 50%;"></div>
                </div>

                <!-- Page Title -->
                <h1 class="landing-title">Choose Your Keychain Style</h1>
                <p class="body-text" style="color: #6b7280; text-align: center; margin-bottom: 2rem;">
                    Select a layout for your custom keychain
                </p>

                <form id="versionForm" method="GET" action="{{ route('student.keychain-customize') }}">
                    <input type="hidden" name="version" id="versionInput">

                    <!-- Version Selection Grid -->
                    <div class="version-grid">
                        <!-- Version 1: 3 Letters + Large Stamp -->
                        <div class="version-card" data-version="1" onclick="selectVersion(1)">
                            <div class="version-title">Classic Style</div>
                            <div class="version-description">3 letters horizontally + 1 large symbol</div>
                            <div class="version-preview">
                                <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
                                    <div style="font-size: 32px; font-weight: bold; color: #371C16; line-height: 1;">MOM</div>
                                    <div style="width: 60px; height: 60px; background: #B5702F; border-radius: 50%; margin-top: 8px;"></div>
                                </div>
                            </div>
                            <div class="body-text" style="font-size: 12px; color: #9ca3af;">
                                Perfect for names or initials
                            </div>
                        </div>

                        <!-- Version 2: 6 Letters Circular + Small Stamp -->
                        <div class="version-card" data-version="2" onclick="selectVersion(2)">
                            <div class="version-title">Circular Style</div>
                            <div class="version-description">6 letters in circle + 1 small symbol in center</div>
                            <div class="version-preview">
                                <div style="width: 140px; height: 140px; position: relative;">
                                    <!-- Circular text representation -->
                                    <div style="position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 20px; font-weight: bold; color: #371C16;">M</div>
                                    <div style="position: absolute; top: 30px; right: 20px; font-size: 20px; font-weight: bold; color: #371C16;">R</div>
                                    <div style="position: absolute; bottom: 30px; right: 20px; font-size: 20px; font-weight: bold; color: #371C16;">F</div>
                                    <div style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 20px; font-weight: bold; color: #371C16;">A</div>
                                    <div style="position: absolute; bottom: 30px; left: 20px; font-size: 20px; font-weight: bold; color: #371C16;">C</div>
                                    <div style="position: absolute; top: 30px; left: 20px; font-size: 20px; font-weight: bold; color: #371C16;">E</div>
                                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #B5702F; border-radius: 50%;"></div>
                                </div>
                            </div>
                            <div class="body-text" style="font-size: 12px; color: #9ca3af;">
                                Great for longer names or words
                            </div>
                        </div>
                    </div>

                    <!-- Continue Button -->
                    <button type="submit" 
                            id="continueBtn" 
                            class="lindsay-btn" 
                            disabled>
                        Continue to Customize →
                    </button>
                </form>
            </div>
        </div>
@endsection

@section('scripts')
<script>
        let selectedVersion = null;

        function selectVersion(version) {
            selectedVersion = version;
            
            // Update UI
            document.querySelectorAll('.version-card').forEach(card => {
                card.classList.remove('selected');
            });
            document.querySelector(`.version-card[data-version="${version}"]`).classList.add('selected');
            
            // Update hidden input
            document.getElementById('versionInput').value = version;
            
            // Enable continue button
            document.getElementById('continueBtn').disabled = false;
            document.getElementById('continueBtn').style.opacity = '1';
            document.getElementById('continueBtn').style.cursor = 'pointer';
            
            console.log('Selected keychain version:', version);
        }

        document.getElementById('versionForm').addEventListener('submit', function(e) {
            console.log('=== FORM SUBMISSION DEBUG ===');
            console.log('Form action:', this.action);
            console.log('Form method:', this.method);
            console.log('Selected version:', selectedVersion);
            console.log('Version input value:', document.getElementById('versionInput').value);
            
            if (!selectedVersion) {
                e.preventDefault();
                alert('Please select a keychain style');
                return false;
            }
            
            console.log('Form will submit to:', this.action + '?version=' + selectedVersion);
        });
        </script>
@endsection

@section('scripts')
<script>
        // Additional scripts if needed
</script>
@endsection


