

<?php $__env->startSection('title', 'Shop Closed'); ?>

<?php $__env->startSection('styles'); ?>
<style>
    .closed-container {
        min-height: calc(100vh - 160px); /* Account for header and footer */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
        position: relative;
    }
    
    .closed-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23B5702F" opacity="0.03"/><circle cx="75" cy="75" r="1" fill="%23B5702F" opacity="0.03"/><circle cx="50" cy="10" r="0.5" fill="%23B5702F" opacity="0.02"/><circle cx="10" cy="60" r="0.5" fill="%23B5702F" opacity="0.02"/><circle cx="90" cy="40" r="0.5" fill="%23B5702F" opacity="0.02"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        pointer-events: none;
    }
    
    .closed-card {
        background: white;
        border-radius: 20px;
        padding: 3rem 2rem;
        text-align: center;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(181, 112, 47, 0.15);
        max-width: 500px;
        width: 100%;
        animation: fadeInUp 0.8s ease-out;
        position: relative;
        backdrop-filter: blur(10px);
    }
    
    .closed-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(181, 112, 47, 0.05) 0%, rgba(255, 255, 255, 0.1) 100%);
        border-radius: 20px;
        pointer-events: none;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .closed-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 1.5rem;
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #dc2626;
        animation: iconPulse 2s ease-in-out infinite;
        box-shadow: 0 4px 16px rgba(220, 38, 38, 0.2);
    }
    
    @keyframes iconPulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
    }
    
    .closed-title {
        font-family: 'Lato', sans-serif;
        font-size: 2.25rem;
        font-weight: 700;
        color: #371C16;
        margin: 0 0 1rem 0;
        line-height: 1.2;
    }
    
    .closed-message {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.125rem;
        color: #6b7280;
        line-height: 1.6;
        margin: 0 0 2rem 0;
    }
    
    .refresh-btn {
        font-family: 'Lato', sans-serif;
        font-weight: 600;
        background: #B5702F;
        color: white;
        border: none;
        padding: 16px 32px;
        border-radius: 12px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        min-height: 52px;
    }
    
    .refresh-btn:hover {
        background: #371C16;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(181, 112, 47, 0.3);
    }
    
    .refresh-btn:active {
        transform: translateY(0);
    }
    
    .refresh-btn.loading {
        pointer-events: none;
        opacity: 0.8;
    }
    
    .refresh-btn.loading .refresh-icon {
        animation: spin 1s linear infinite;
    }
    
    .refresh-btn.loading .btn-text {
        opacity: 0.7;
    }
    
    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    .status-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: #fee2e2;
        color: #dc2626;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 2rem;
        font-family: 'Montserrat', sans-serif;
    }
    
    .pulse-dot {
        width: 8px;
        height: 8px;
        background: #dc2626;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }
    
    /* Mobile Responsive */
    @media (max-width: 768px) {
        .closed-container {
            padding: 1rem 0.5rem;
            min-height: calc(100vh - 140px);
        }
        
        .closed-card {
            padding: 2rem 1.5rem;
            margin: 0;
        }
        
        .closed-title {
            font-size: 1.875rem;
        }
        
        .closed-message {
            font-size: 1rem;
        }
        
        .closed-icon {
            width: 64px;
            height: 64px;
        }
        
        .refresh-btn {
            padding: 16px 24px;
            font-size: 16px;
            width: 100%;
        }
    }
    
    @media (max-width: 480px) {
        .closed-card {
            padding: 1.5rem 1rem;
        }
        
        .closed-title {
            font-size: 1.625rem;
        }
        
        .closed-message {
            font-size: 0.9375rem;
        }
        
        .refresh-btn {
            padding: 14px 20px;
            font-size: 15px;
        }
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="closed-container">
    <div class="closed-card">
        <div class="status-indicator">
            <div class="pulse-dot"></div>
            Shop Closed
        </div>
        
        <div class="closed-icon">
            <svg width="40" height="40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
            </svg>
        </div>
        
        <h1 class="closed-title">Shop is Currently Closed</h1>
        
        <p class="closed-message">
            We're temporarily closed for new orders. Please check back later or contact us for more information about when we'll be accepting orders again.
        </p>
        
        <button class="refresh-btn" onclick="refreshPage()">
            <svg class="refresh-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
            </svg>
            <span class="btn-text">Check Again</span>
        </button>
    </div>
</div>

<script>
function refreshPage() {
    const btn = document.querySelector('.refresh-btn');
    const icon = btn.querySelector('.refresh-icon');
    const text = btn.querySelector('.btn-text');
    
    // Add loading state
    btn.classList.add('loading');
    text.textContent = 'Checking...';
    
    // Reload the page after a short delay to show the loading state
    setTimeout(() => {
        location.reload();
    }, 500);
}
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.student', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\lindsey-leather-order-management-system\resources\views/shop-closed.blade.php ENDPATH**/ ?>