<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $__env->yieldContent('title', 'The Mini Port - B2B Marketplace'); ?></title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="<?php echo $__env->yieldContent('meta_description', 'The Mini Port - India\'s leading B2B marketplace for wholesale products. Connect with verified suppliers, get best prices on bulk orders. MOQ 10-150 units.'); ?>">
    <meta name="keywords" content="<?php echo $__env->yieldContent('meta_keywords', 'B2B marketplace, wholesale products, bulk orders, verified suppliers, India, manufacturers, exporters, importers, trade'); ?>">
    <meta name="author" content="The Mini Port">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="<?php echo e(url()->current()); ?>">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?php echo e(url()->current()); ?>">
    <meta property="og:title" content="<?php echo $__env->yieldContent('og_title', 'The Mini Port - B2B Marketplace'); ?>">
    <meta property="og:description" content="<?php echo $__env->yieldContent('og_description', 'Connect with verified suppliers and get best prices on bulk orders.'); ?>">
    <meta property="og:image" content="<?php echo $__env->yieldContent('og_image', asset('images/miniport_logo.jpg')); ?>">
    <meta property="og:site_name" content="The Mini Port">
    <meta property="og:locale" content="en_IN">

    <!-- Facebook Pixel Code -->
    <?php
        $fbPixelId = null;
        try {
            if (class_exists(\App\Models\Setting::class)) {
                $fbPixelId = \App\Models\Setting::getValue('facebook_pixel_id');
            }
        } catch (\Exception $e) {
            // Silently fail if Setting model has issues
        }
    ?>

    <?php if($fbPixelId): ?>
    <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '<?php echo e($fbPixelId); ?>');
    fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=<?php echo e($fbPixelId); ?>&ev=PageView&noscript=1"
    /></noscript>
    <?php endif; ?>
    <!-- End Facebook Pixel Code -->
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="<?php echo e(url()->current()); ?>">
    <meta name="twitter:title" content="<?php echo $__env->yieldContent('twitter_title', 'The Mini Port - B2B Marketplace'); ?>">
    <meta name="twitter:description" content="<?php echo $__env->yieldContent('twitter_description', 'Connect with verified suppliers and get best prices on bulk orders.'); ?>">
    <meta name="twitter:image" content="<?php echo $__env->yieldContent('twitter_image', asset('images/miniport_logo.jpg')); ?>">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="<?php echo e(asset('favicon.ico')); ?>">
    <link rel="apple-touch-icon" href="<?php echo e(asset('images/miniport_logo.jpg')); ?>">
    
    <!-- Schema.org Organization Markup -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "The Mini Port",
        "url": "<?php echo e(config('app.url')); ?>",
        "logo": "<?php echo e(asset('images/miniport_logo.jpg')); ?>",
        "description": "India's leading B2B marketplace for wholesale products",
        "address": {
            "@type": "PostalAddress",
            "addressLocality": "Mumbai",
            "addressRegion": "Maharashtra",
            "addressCountry": "IN"
        },
        "contactPoint": {
            "@type": "ContactPoint",
            "contactType": "customer service",
            "availableLanguage": ["English", "Hindi"]
        }
    }
    </script>
    <?php echo $__env->yieldPushContent('schema'); ?>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    
    <!-- Tailwind CSS (CDN for hybrid approach) -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            prefix: 'tw-', // Prefix to avoid conflicts with Bootstrap
            theme: {
                extend: {
                    colors: {
                        primary: '#f97316', // Orange
                        secondary: '#6c757d',
                    }
                }
            }
        }
    </script>

    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <link href="<?php echo e(asset('css/app.min.css')); ?>" rel="stylesheet">
    <?php echo $__env->yieldPushContent('styles'); ?>
    <style>
        /* Orange Theme Overrides */
        :root {
            --bs-primary: #f97316;
            --bs-primary-rgb: 249, 115, 22;
            --bs-link-color: #f97316;
            --bs-link-hover-color: #ea580c;
            scroll-padding-top: 120px; /* Offset for sticky header */
            scroll-behavior: smooth;
        }
        .text-primary { color: #f97316 !important; }
        .bg-primary { background-color: #f97316 !important; }
        .btn-primary {
            --bs-btn-bg: #f97316;
            --bs-btn-border-color: #f97316;
            --bs-btn-hover-bg: #ea580c;
            --bs-btn-hover-border-color: #ea580c;
            --bs-btn-active-bg: #ea580c;
            --bs-btn-active-border-color: #ea580c;
        }
        .btn-outline-primary {
            --bs-btn-color: #f97316;
            --bs-btn-border-color: #f97316;
            --bs-btn-hover-bg: #f97316;
            --bs-btn-hover-border-color: #f97316;
            --bs-btn-active-bg: #f97316;
            --bs-btn-active-border-color: #f97316;
        }
        
        /* Global Banner Styles */
        .global-banner-side {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
            width: 120px; /* Adjust width as needed */
            display: none; /* Hidden on mobile by default */
        }
        @media (min-width: 1200px) {
            .global-banner-side {
                display: block;
            }
        }
        .global-banner-left { left: 10px; }
        .global-banner-right { right: 10px; }
        
        /* Preloader Styles */
        #global-spinner {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s ease-out, visibility 0.5s;
        }
        #global-spinner.fade-out {
            opacity: 0;
            visibility: hidden;
        }

        /* Sticky Header */
        .sticky-header {
            position: sticky;
            top: 0;
            z-index: 1020;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Remove Preloader
            window.addEventListener('load', function() {
                const spinner = document.getElementById('global-spinner');
                if (spinner) {
                    spinner.classList.add('fade-out');
                    setTimeout(() => {
                        spinner.style.display = 'none';
                    }, 500);
                }
            });
            // Fallback for long loads
            setTimeout(function() {
                const spinner = document.getElementById('global-spinner');
                if (spinner && !spinner.classList.contains('fade-out')) {
                    spinner.classList.add('fade-out');
                    spinner.style.display = 'none';
                }
            }, 3000);

            function startVerticalSlider(selector) {
                const slides = document.querySelectorAll(selector + ' .vertical-slide');
                if (slides.length > 1) {
                    let current = 0;
                    slides[0].classList.add('active');
                    setInterval(() => {
                        slides[current].classList.remove('active');
                        current = (current + 1) % slides.length;
                        slides[current].classList.add('active');
                    }, 3000); 
                } else if (slides.length === 1) {
                    slides[0].classList.add('active');
                }
            }
            startVerticalSlider('.global-banner-left');
            startVerticalSlider('.global-banner-right');
        });
    </script>
</head>
<body>
    <div id="global-spinner">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

    <?php if(session('impersonate')): ?>
        <div class="bg-danger text-white text-center py-2 fixed-top" style="z-index: 2000;">
            <span class="me-2">You are currently impersonating <strong><?php echo e(Auth::user()->name); ?></strong>.</span>
            <a href="<?php echo e(route('impersonate.leave')); ?>" class="btn btn-sm btn-light fw-bold">Back to Admin</a>
        </div>
        <div style="height: 40px;"></div> <!-- Spacer -->
    <?php endif; ?>

    <?php echo $__env->make('partials.header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

    <main class="flex-grow-1">
        <?php echo $__env->yieldContent('content'); ?>
    </main>

    <?php echo $__env->make('partials.footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
    

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <!-- jQuery Validation -->
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <!-- Custom JS -->
    <script src="<?php echo e(asset('js/app.min.js')); ?>"></script>
    
    <?php echo $__env->yieldPushContent('scripts'); ?>
    <!-- Quick View Modal -->
    <div class="modal fade" id="quickViewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
                <div class="modal-body p-0" id="quickViewContent">
                    <!-- Content loaded via AJAX -->
                    <div class="d-flex justify-content-center align-items-center p-5" style="min-height: 300px;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn-close position-absolute top-0 end-0 m-3 bg-white p-2 shadow-sm rounded-circle" data-bs-dismiss="modal" aria-label="Close" style="z-index: 10;"></button>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // Quick View Handler
            $(document).on('click', '.quick-view-btn', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                const slug = $(this).data('slug');
                const modal = new bootstrap.Modal(document.getElementById('quickViewModal'));
                const content = $('#quickViewContent');
                
                // Show modal with loading state
                content.html(`
                    <div class="d-flex justify-content-center align-items-center p-5" style="min-height: 300px;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                `);
                modal.show();
                
                // Fetch content
                $.get(`/products/${slug}/quick-view`)
                    .done(function(html) {
                        content.html(html);
                    })
                    .fail(function() {
                        content.html(`
                            <div class="text-center p-5">
                                <i class="bi bi-exclamation-circle text-danger display-1 mb-3"></i>
                                <h5>Failed to load product details</h5>
                                <p class="text-muted">Please try again later.</p>
                                <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                            </div>
                        `);
                    });
            });
        });
    </script>
</body>
</html>
<?php /**PATH /home/u281583269/domains/theminiport.com/public_html/resources/views/layouts/master.blade.php ENDPATH**/ ?>