<!-- MARQUEE BAR -->
<div class="marquee-bar">
    <div class="marquee-inner">
        <span>🎨 FREE SHIPPING on all original artworks above ₹2,999</span>
        <span>✦</span>
        <span>🖼️ Custom commissions open — Book your artist today</span>
        <span>✦</span>
        <span>🎨 FREE SHIPPING on all prints worldwide — Limited time offer</span>
        <span>✦</span>
        <span>🖌️ New collection: "Monsoon Whispers" — Now Live</span>
        <span>✦</span>
        <span>🎨 FREE SHIPPING on all original artworks above ₹2,999</span>
        <span>✦</span>
        <span>🖼️ Custom commissions open — Book your artist today</span>
        <span>✦</span>
        <span>🎨 FREE SHIPPING on all prints worldwide — Limited time offer</span>
        <span>✦</span>
        <span>🖌️ New collection: "Monsoon Whispers" — Now Live</span>
        <span>✦</span>
    </div>
</div>

<!-- NAVBAR -->
<nav class="navbar-main" id="mainNav">
    <div class="container">
        <div class="d-flex align-items-center justify-content-between">
            <a href="<?php echo e(route('home')); ?>" class="navbar-brand-logo">
                <img src="<?php echo e(asset('website/assets/images/logo.png')); ?>" alt="Logo">
            </a>

            <!-- Desktop Nav -->
            <div class="d-none d-lg-flex align-items-center gap-1" id="navLinks">
                <a href="#home" class="nav-link-item active">Home</a>
                <a href="#about" class="nav-link-item">About</a>

                <!-- Illustration Dropdown -->
                <div class="nav-dropdown">
                    <span class="nav-link-item">Illustration</span>
                    <div class="nav-dropdown-menu">
                        <?php $__currentLoopData = $illustrationCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <a href="#illustrations/<?php echo e($category->slug); ?>"><?php echo e($category->name_en); ?></a>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <div class="dropdown-divider"></div>
                        <a href="#illustrations">All Illustrations</a>
                    </div>
                </div>

                <!-- Art Dropdown -->
                <div class="nav-dropdown">
                    <span class="nav-link-item">Art</span>
                    <div class="nav-dropdown-menu">
                        <?php $__currentLoopData = $paintingCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <a href="#art/<?php echo e($category->slug); ?>"><?php echo e($category->name_en); ?></a>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <div class="dropdown-divider"></div>
                        <a href="#artworks">All Artworks</a>
                    </div>
                </div>

                <a href="#artists" class="nav-link-item">Artist Gallery</a>
                <a href="#contact" class="nav-link-item">Contact Us</a>

                <?php if(auth()->guard()->guest()): ?>
                    <button class="btn-login ms-3" id="showLoginModal">
                        <i class="fas fa-user me-1"></i> Login
                    </button>
                <?php else: ?>
                    <div class="dropdown ms-3">
                        <button class="btn-login dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-user me-1"></i> <?php echo e(Auth::user()->first_name); ?>

                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" id="logoutBtn">Logout</a></li>
                        </ul>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Mobile Toggle -->
            <button class="border-0 d-lg-none" type="button" id="mobileToggle" style="background:none;font-size:22px;color:var(--ink);">
                <i class="fas fa-bars"></i>
            </button>
        </div>

        <!-- Mobile Nav -->
        <div class="d-lg-none" id="mobileNav" style="display:none;">
            <div class="mobile-nav-wrap">
                <a href="#home" class="nav-link-item d-block">Home</a>
                <a href="#about" class="nav-link-item d-block">About</a>

                <div class="nav-link-item d-block mobile-toggle-sub" onclick="toggleMobileSub('mobIllus',this)">
                    Illustration <i class="fas fa-chevron-down"></i>
                </div>
                <div class="mobile-sub" id="mobIllus" style="display:none;">
                    <?php $__currentLoopData = $illustrationCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <a href="#illustrations/<?php echo e($category->slug); ?>"><?php echo e($category->name_en); ?></a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <div class="dropdown-divider d-block"></div>
                    <a href="#illustrations">All Illustrations</a>
                </div>

                <div class="nav-link-item d-block mobile-toggle-sub" onclick="toggleMobileSub('mobArt',this)">
                    Art <i class="fas fa-chevron-down"></i>
                </div>
                <div class="mobile-sub" id="mobArt" style="display:none;">
                    <?php $__currentLoopData = $paintingCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <a href="#art/<?php echo e($category->slug); ?>"><?php echo e($category->name_en); ?></a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <div class="dropdown-divider d-block"></div>
                    <a href="#artworks">All Artworks</a>
                </div>

                <a href="#artists" class="nav-link-item d-block">Artist Gallery</a>
                <a href="#contact" class="nav-link-item d-block">Contact Us</a>

                <?php if(auth()->guard()->guest()): ?>
                    <button class="btn-login mt-3 w-100" id="showLoginModalMobile">
                        <i class="fas fa-user me-1"></i> Login
                    </button>
                <?php else: ?>
                    <button class="btn-login mt-3 w-100" id="logoutBtnMobile">
                        <i class="fas fa-sign-out-alt me-1"></i> Logout (<?php echo e(Auth::user()->first_name); ?>)
                    </button>
                <?php endif; ?>
            </div>
        </div>
    </div>
</nav>

<!-- LOGIN/SIGNUP MODAL (with tabs) -->
<div class="login-overlay" id="authModal" onclick="if(event.target===this)closeAuthModal()">
    <div class="login-card">
        <button class="login-close" onclick="closeAuthModal()">&times;</button>

        <!-- Tabs -->
        <ul class="nav nav-tabs mb-4" id="authTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#loginPanel" type="button" role="tab">Login</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#registerPanel" type="button" role="tab">Sign Up</button>
            </li>
        </ul>

        <div class="tab-content">
            <!-- Login Form -->
            <div class="tab-pane fade show active" id="loginPanel" role="tabpanel">
                <form id="loginForm">
                    <?php echo csrf_field(); ?>
                    <div class="mb-3">
                        <label class="form-label">Email Address</label>
                        <input type="email" name="email" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Password</label>
                        <input type="password" name="password" class="form-control" required>
                    </div>
                    <button type="submit" class="btn-login-submit w-100">Sign In</button>
                </form>
            </div>

            <!-- Register Form -->
            <div class="tab-pane fade" id="registerPanel" role="tabpanel">
                <form id="registerForm">
                    <?php echo csrf_field(); ?>
                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label">First Name</label>
                            <input type="text" name="first_name" class="form-control" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Last Name</label>
                            <input type="text" name="last_name" class="form-control" required>
                        </div>
                    </div>
                    <div class="mb-3 mt-3">
                        <label class="form-label">Email Address</label>
                        <input type="email" name="email" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Password</label>
                        <input type="password" name="password" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Confirm Password</label>
                        <input type="password" name="password_confirmation" class="form-control" required>
                    </div>
                    <button type="submit" class="btn-login-submit w-100">Create Account</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Toast Notification Container -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1100;">
    <div id="liveToast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
        <div class="d-flex">
            <div class="toast-body" id="toastMessage">Success message</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>

<script>
    // ---- Mobile Nav Toggle ----
    document.getElementById('mobileToggle')?.addEventListener('click', function() {
        let mn = document.getElementById('mobileNav');
        mn.style.display = mn.style.display === 'none' ? 'block' : 'none';
    });
    window.toggleMobileSub = function(id, btn) {
        let el = document.getElementById(id);
        let isOpen = el.style.display === 'block';
        el.style.display = isOpen ? 'none' : 'block';
        btn.classList.toggle('open', !isOpen);
    };

    // ---- Auth Modal ----
    function showAuthModal() {
        document.getElementById('authModal').classList.add('active');
    }
    function closeAuthModal() {
        document.getElementById('authModal').classList.remove('active');
    }
    document.querySelectorAll('#showLoginModal, #showLoginModalMobile').forEach(btn => {
        btn?.addEventListener('click', showAuthModal);
    });

    // ---- Login AJAX ----
    $('#loginForm').on('submit', function(e) {
        e.preventDefault();
        let formData = $(this).serialize();
        let submitBtn = $(this).find('button[type="submit"]');
        submitBtn.html('<span class="spinner-border spinner-border-sm me-2"></span> Logging...').prop('disabled', true);
        $.ajax({
            url: "<?php echo e(route('website.login')); ?>",
            type: "POST",
            data: formData,
            success: function(res) {
                if (res.success) {
                    showToast(res.message, 'success');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    showToast(res.message, 'danger');
                    submitBtn.html('Sign In').prop('disabled', false);
                }
            },
            error: function(xhr) {
                let errors = xhr.responseJSON?.errors;
                let msg = errors ? Object.values(errors).flat().join('\n') : 'Login failed.';
                showToast(msg, 'danger');
                submitBtn.html('Sign In').prop('disabled', false);
            }
        });
    });

    // ---- Register AJAX ----
    $('#registerForm').on('submit', function(e) {
        e.preventDefault();
        let formData = $(this).serialize();
        let submitBtn = $(this).find('button[type="submit"]');
        submitBtn.html('<span class="spinner-border spinner-border-sm me-2"></span> Registering...').prop('disabled', true);
        $.ajax({
            url: "<?php echo e(route('website.register')); ?>",
            type: "POST",
            data: formData,
            success: function(res) {
                if (res.success) {
                    showToast(res.message, 'success');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    showToast(res.message, 'danger');
                    submitBtn.html('Create Account').prop('disabled', false);
                }
            },
            error: function(xhr) {
                let errors = xhr.responseJSON?.errors;
                let msg = errors ? Object.values(errors).flat().join('\n') : 'Registration failed.';
                showToast(msg, 'danger');
                submitBtn.html('Create Account').prop('disabled', false);
            }
        });
    });

    // ---- Logout ----
    $('#logoutBtn, #logoutBtnMobile').on('click', function(e) {
        e.preventDefault();
        $.ajax({
            url: "<?php echo e(route('website.logout')); ?>",
            type: "POST",
            data: { _token: '<?php echo e(csrf_token()); ?>' },
            success: function(res) {
                if (res.success) location.reload();
            }
        });
    });

    // ---- Toast helper ----
    function showToast(message, type = 'success') {
        let toastEl = $('#liveToast');
        toastEl.removeClass('bg-success bg-danger');
        toastEl.addClass(type === 'success' ? 'bg-success' : 'bg-danger');
        $('#toastMessage').text(message);
        let toast = new bootstrap.Toast(toastEl);
        toast.show();
    }
</script><?php /**PATH /home/creattat/public_html/creativevalley9.website/laravel/resources/views/website/includes/header.blade.php ENDPATH**/ ?>