<?php $__env->startSection('title', 'Dashboard'); ?>
<?php $__env->startSection('page-title', 'Dashboard'); ?>

<?php $__env->startSection('styles'); ?>
<style>
    /* Stats Cards */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .stat-card {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        border: 1px solid #e5e7eb;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    .stat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }
    
    .stat-title {
        font-size: 0.875rem;
        font-weight: 500;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .stat-icon.pending {
        background: #fef3c7;
        color: #d97706;
    }
    
    .stat-icon.completed {
        background: #d1fae5;
        color: #059669;
    }
    
    .stat-icon.total {
        background: #dbeafe;
        color: #2563eb;
    }
    
    .stat-value {
        font-family: 'Lato', sans-serif;
        font-size: 2.25rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
    }
    
    /* Orders Section */
    .orders-section {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        border: 1px solid #e5e7eb;
        overflow: hidden;
    }
    
    .section-header {
        padding: 1.5rem 2rem;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .header-controls {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .refresh-btn {
        background: #6b7280;
        color: white;
        border: none;
        padding: 0.5rem;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .refresh-btn:hover {
        background: #4b5563;
        transform: rotate(180deg);
    }
    
    .section-title {
        font-family: 'Lato', sans-serif;
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
    }
    
    .filter-tabs {
        display: flex;
        gap: 0.5rem;
    }
    
    .filter-tab {
        padding: 0.5rem 1rem;
        border: 1px solid #e5e7eb;
        background: white;
        color: #6b7280;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .filter-tab.active {
        background: #371C16;
        color: white;
        border-color: #371C16;
    }
    
    .filter-tab:hover:not(.active) {
        background: #f9fafb;
        border-color: #d1d5db;
    }
    
    /* Orders Table */
    .orders-table-container {
        padding: 0;
    }
    
    .table-header {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
        gap: 1rem;
        padding: 1rem 2rem;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        font-weight: 600;
        color: #6b7280;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .order-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
        gap: 1rem;
        padding: 1rem 2rem;
        border-bottom: 1px solid #e5e7eb;
        transition: all 0.3s ease;
        align-items: center;
    }
    
    .order-row:hover {
        background: #f9fafb;
    }
    
    .order-cell {
        display: flex;
        align-items: center;
    }
    
    .order-student {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .student-name {
        font-family: 'Lato', sans-serif;
        font-size: 1rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.25rem;
    }
    
    .order-meta {
        font-size: 0.875rem;
        color: #6b7280;
    }
    
    .order-text {
        font-size: 0.875rem;
        color: #4b5563;
        font-family: monospace;
    }
    
    .order-stamps {
        font-size: 0.875rem;
        color: #4b5563;
    }
    
    .status-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .status-badge.pending {
        background: #fef3c7;
        color: #d97706;
    }
    
    .status-badge.completed {
        background: #d1fae5;
        color: #059669;
    }
    
    .order-actions {
        display: flex;
        gap: 0.5rem;
    }
    
    .btn {
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .btn-primary {
        background: #371C16;
        color: white;
    }
    
    .btn-primary:hover {
        background: #2a150f;
    }
    
    .btn-success {
        background: #059669;
        color: white;
    }
    
    .btn-success:hover {
        background: #047857;
    }
    
    .btn-warning {
        background: #d97706;
        color: white;
    }
    
    .btn-warning:hover {
        background: #b45309;
    }
    
    .btn-danger {
        background: #dc2626;
        color: white;
    }
    
    .btn-danger:hover {
        background: #b91c1c;
    }
    
    /* Mobile Responsive */
    @media (max-width: 768px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }
        
        .order-row {
            grid-template-columns: 1fr;
        }
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<!-- Statistics Cards -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-header">
            <span class="stat-title">Pending Orders</span>
            <div class="stat-icon pending">
                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
        </div>
        <h2 class="stat-value"><?php echo e($pendingOrders->count()); ?></h2>
    </div>

    <div class="stat-card">
        <div class="stat-header">
            <span class="stat-title">Completed Orders</span>
            <div class="stat-icon completed">
                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
        </div>
        <h2 class="stat-value"><?php echo e($completedOrders->count()); ?></h2>
    </div>

    <div class="stat-card">
        <div class="stat-header">
            <span class="stat-title">Total Orders</span>
            <div class="stat-icon total">
                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                </svg>
            </div>
        </div>
        <h2 class="stat-value"><?php echo e($pendingOrders->count() + $completedOrders->count()); ?></h2>
    </div>

    <!-- Shop Status Card -->
    <div class="stat-card">
        <div class="stat-header">
            <span class="stat-title">Shop Status</span>
            <div class="stat-icon <?php echo e($shopStatus ? 'completed' : 'pending'); ?>">
                <?php if($shopStatus): ?>
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                <?php else: ?>
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L5.636 5.636"></path>
                    </svg>
                <?php endif; ?>
            </div>
        </div>
        <div style="display: flex; align-items: center; gap: 1rem;">
            <span class="stat-value" style="font-size: 1.5rem;"><?php echo e($shopStatus ? 'Open' : 'Closed'); ?></span>
            <button id="shopToggle" class="btn <?php echo e($shopStatus ? 'btn-danger' : 'btn-success'); ?>" onclick="toggleShopStatus()">
                <?php echo e($shopStatus ? 'Close Shop' : 'Open Shop'); ?>

            </button>
        </div>
    </div>
</div>

<!-- Orders Section -->
<div class="orders-section">
    <div class="section-header">
        <h2 class="section-title">Recent Orders</h2>
        <div class="header-controls">
            <button class="refresh-btn" onclick="refreshOrders()" title="Refresh Orders">
                <svg width="16" height="16" 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>
            </button>
            <div class="filter-tabs">
                <button class="filter-tab active" data-filter="all">All Orders</button>
                <button class="filter-tab" data-filter="pending">Pending</button>
                <button class="filter-tab" data-filter="completed">Completed</button>
            </div>
        </div>
    </div>

    <div class="orders-table-container">
        <div class="table-header">
            <div>Student & Product</div>
            <div>Text</div>
            <div>Stamps</div>
            <div>Status</div>
            <div>Actions</div>
        </div>
        <?php $__empty_1 = true; $__currentLoopData = $pendingOrders->take(10); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $order): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <div class="order-row" data-status="<?php echo e($order->status); ?>">
                <div class="order-cell order-student">
                    <div class="student-name"><?php echo e($order->student_name); ?></div>
                    <div class="order-meta"><?php echo e(ucfirst($order->product->name)); ?> • <?php echo e($order->created_at->format('M j, Y g:i A')); ?></div>
                </div>
                
                <div class="order-cell order-text">
                    <?php echo e(implode('', $order->text_characters)); ?>

                </div>
                
                <div class="order-cell order-stamps">
                    <?php if($order->selected_stamps && count($order->selected_stamps) > 0): ?>
                        <?php echo e(count($order->selected_stamps)); ?> selected
                    <?php else: ?>
                        None
                    <?php endif; ?>
                </div>
                
                <div class="order-cell order-status">
                    <span class="status-badge <?php echo e($order->status); ?>"><?php echo e(ucfirst($order->status)); ?></span>
                </div>
                
                <div class="order-cell order-actions">
                    <a href="<?php echo e(route('admin.order-details', $order->id)); ?>" class="btn btn-primary">
                        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                        </svg>
                        View
                    </a>
                    
                    <?php if($order->status === 'pending'): ?>
                        <button class="btn btn-success" onclick="markCompleted(<?php echo e($order->id); ?>)">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            Complete
                        </button>
                    <?php else: ?>
                        <button class="btn btn-warning" onclick="markPending(<?php echo e($order->id); ?>)">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            Revert
                        </button>
                    <?php endif; ?>
                    
                    <button class="btn btn-danger" onclick="deleteOrder(<?php echo e($order->id); ?>)">
                        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                        </svg>
                        Delete
                    </button>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div style="text-align: center; padding: 3rem; color: #6b7280;">
                <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin: 0 auto 1rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                </svg>
                <h3 style="margin: 0 0 0.5rem 0; font-family: 'Lato', sans-serif;">No orders yet</h3>
                <p style="margin: 0;">Orders will appear here once students start placing them.</p>
            </div>
        <?php endif; ?>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    // Initialize Konva previews
    function initializeKonvaPreviews() {
        const previewElements = document.querySelectorAll('[data-preview-json]');
        previewElements.forEach(element => {
            try {
                const previewJson = JSON.parse(element.dataset.previewJson);
                if (previewJson && previewJson.attrs) {
                    const containerWidth = element.offsetWidth;
                    const containerHeight = element.offsetHeight;
                    const stage = Konva.Node.create(previewJson, element);
                    const scaleX = containerWidth / previewJson.attrs.width;
                    const scaleY = containerHeight / previewJson.attrs.height;
                    const scale = Math.min(scaleX, scaleY);
                    stage.width(containerWidth);
                    stage.height(containerHeight);
                    stage.scaleX(scale);
                    stage.scaleY(scale);
                    stage.x((containerWidth - previewJson.attrs.width * scale) / 2);
                    stage.y((containerHeight - previewJson.attrs.height * scale) / 2);
                    stage.draw();
                }
            } catch (error) {
                console.error('Error loading Konva preview:', error);
                element.innerHTML = '<span style="color: #9ca3af; font-size: 0.875rem;">Preview unavailable</span>';
            }
        });
    }

    // Filter orders
    function filterOrders(status) {
        const orderRows = document.querySelectorAll('.order-row');
        const filterTabs = document.querySelectorAll('.filter-tab');
        
        // Update active tab
        filterTabs.forEach(tab => {
            tab.classList.remove('active');
            if (tab.dataset.filter === status) {
                tab.classList.add('active');
            }
        });
        
        // Show/hide orders
        orderRows.forEach(row => {
            if (status === 'all' || row.dataset.status === status) {
                row.style.display = 'grid';
            } else {
                row.style.display = 'none';
            }
        });
    }

    // Mark order as completed
    function markCompleted(orderId) {
        if (confirm('Mark this order as completed?')) {
            fetch(`/admin/orders/${orderId}/complete`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Error updating order status');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error updating order status');
            });
        }
    }

    // Mark order as pending
    function markPending(orderId) {
        if (confirm('Revert this order back to pending?')) {
            fetch(`/admin/orders/${orderId}/pending`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Error updating order status');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error updating order status');
            });
        }
    }

    // Delete order
    function deleteOrder(orderId) {
        if (confirm('Are you sure you want to delete this order? This action cannot be undone.')) {
            fetch(`/admin/orders/${orderId}/delete`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Error deleting order');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error deleting order');
            });
        }
    }

    // Refresh orders
    function refreshOrders() {
        location.reload();
    }

    // Toggle shop status
    function toggleShopStatus() {
        const button = document.getElementById('shopToggle');
        button.disabled = true;
        button.textContent = 'Updating...';

        fetch('/admin/toggle-shop', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error updating shop status');
                button.disabled = false;
                button.textContent = data.isOpen ? 'Close Shop' : 'Open Shop';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error updating shop status');
            button.disabled = false;
        });
    }

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        initializeKonvaPreviews();
        
        // Add filter tab event listeners
        document.querySelectorAll('.filter-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                filterOrders(this.dataset.filter);
            });
        });
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/tqxferau/lindsay-boswell.com/resources/views/admin/dashboard.blade.php ENDPATH**/ ?>