{% extends "base.html" %}

{% block content %}
<!-- Dashboard Header -->
<div class="dashboard-header mb-4 position-relative scroll-animate">
    <!-- Corner Logo -->
    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo" class="dashboard-logo-corner floating">
    
    <div class="row align-items-center">
        <div class="col-md-12">
            <h1 class="display-5 fw-bold mb-2 typewriter">Dashboard</h1>
            <p class="lead mb-0">Welcome back! Here's what's happening in your business today.</p>
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="row mb-4">
    <div class="col-md-4 mb-3">
        <div class="stat-card p-3 position-relative card-logo-bg scroll-animate">
            <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo" class="stat-card-logo floating">
            <div class="stat-icon pulse-glow" style="background: var(--gradient-primary);">
                <i class="fas fa-tshirt"></i>
            </div>
            <div class="stat-value">{{ total_products }}</div>
            <div class="stat-label">Total Products</div>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="stat-card p-3 position-relative card-logo-bg scroll-animate">
            <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo" class="stat-card-logo floating">
            <div class="stat-icon pulse-glow" style="background: var(--gradient-success);">
                <i class="fas fa-shipping-fast"></i>
            </div>
            <div class="stat-value">AED {{ "{:,.0f}".format(total_sales) }}</div>
            <div class="stat-label">Total Sales</div>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="stat-card p-3 position-relative card-logo-bg scroll-animate">
            <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo" class="stat-card-logo floating">
            <div class="stat-icon pulse-glow" style="background: var(--gradient-info);">
                <i class="fas fa-truck-loading"></i>
            </div>
            <div class="stat-value">{{ active_shipments|default(0) }}</div>
            <div class="stat-label">Active Shipments</div>
        </div>
    </div>
</div>

<!-- Contact Quick Access Section -->
<div class="row mb-4">
    <div class="col-12">
        <div class="garments-card card-logo-bg scroll-animate">
            <div class="card-header bg-transparent border-bottom-0 d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fas fa-address-card me-2 text-primary bounce"></i> Quick Contact Information
                </h5>
                <span class="badge bg-primary">Always Available</span>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-md-3 mb-3">
                        <div class="contact-quick-item p-3">
                            <div class="contact-icon-wrapper mb-3">
                                <i class="fas fa-user-tie fa-2x text-primary"></i>
                            </div>
                            <h6 class="fw-bold">Chief Executive</h6>
                            <p class="mb-1"><strong>Tipu Miah</strong></p>
                            <small class="text-muted">Business Head</small>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="contact-quick-item p-3">
                            <div class="contact-icon-wrapper mb-3">
                                <i class="fas fa-mobile-alt fa-2x text-success"></i>
                            </div>
                            <h6 class="fw-bold">Primary Mobile</h6>
                            <p class="mb-1"><strong>+971 55 320 9940</strong></p>
                            <small class="text-muted">Call/WhatsApp</small>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="contact-quick-item p-3">
                            <div class="contact-icon-wrapper mb-3">
                                <i class="fas fa-phone-alt fa-2x text-info"></i>
                            </div>
                            <h6 class="fw-bold">Secondary Mobile</h6>
                            <p class="mb-1"><strong>+971 56 901 7316</strong></p>
                            <small class="text-muted">Alternative Contact</small>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="contact-quick-item p-3">
                            <div class="contact-icon-wrapper mb-3">
                                <i class="fas fa-envelope fa-2x text-warning"></i>
                            </div>
                            <h6 class="fw-bold">Email Address</h6>
                            <p class="mb-1"><strong>tipu.miah68@gmail.com</strong></p>
                            <small class="text-muted">Business Inquiries</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Left Column -->
    <div class="col-md-8">
        <!-- Recent Sales -->
        <div class="garments-card mb-4 card-logo-bg scroll-animate">
            <div class="card-header bg-transparent border-bottom-0 d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fas fa-chart-line me-2 text-primary bounce"></i> Recent Sales
                </h5>
                <a href="{{ url_for('sales') }}" class="btn btn-sm btn-outline-primary" style="position: relative; z-index: 10;">View All</a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>📦 Product</th>
                                <th>👤 Buyer</th>
                                <th>📏 Size/🎨 Color</th>
                                <th>🔢 Qty</th>
                                <th>💰 Amount</th>
                                <th>📅 Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sale in recent_sales %}
                            <tr class="scroll-animate">
                                <td>{{ sale.product_name }}</td>
                                <td>{{ sale.buyer_name }}</td>
                                <td>{{ sale.size }}/{{ sale.color }}</td>
                                <td>{{ sale.quantity }}</td>
                                <td>AED {{ "{:,.2f}".format(sale.total_price) }}</td>
                                <td>{{ sale.sale_date }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Quick Links -->
        <div class="garments-card card-logo-bg scroll-animate">
            <div class="card-header bg-transparent border-bottom-0">
                <h5 class="card-title mb-0">
                    <i class="fas fa-link me-2 text-primary bounce"></i> Quick Links
                </h5>
            </div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    <a href="{{ url_for('products') }}" class="list-group-item list-group-item-action border-0 mb-2 rounded" style="position: relative; z-index: 10;">
                        <i class="fas fa-tshirt me-2 text-primary"></i> Manage Products
                    </a>
                    <a href="{{ url_for('sales') }}" class="list-group-item list-group-item-action border-0 mb-2 rounded" style="position: relative; z-index: 10;">
                        <i class="fas fa-chart-line me-2 text-success"></i> View Sales Records
                    </a>
                    <a href="{{ url_for('shipments') }}" class="list-group-item list-group-item-action border-0 mb-2 rounded" style="position: relative; z-index: 10;">
                        <i class="fas fa-shipping-fast me-2 text-info"></i> Track Shipments
                    </a>
                    <a href="{{ url_for('analytics') }}" class="list-group-item list-group-item-action border-0 rounded" style="position: relative; z-index: 10;">
                        <i class="fas fa-chart-pie me-2 text-warning"></i> View Analytics
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Column -->
    <div class="col-md-4">
        <!-- Quick Actions -->
        <div class="garments-card mb-4 card-logo-bg scroll-animate">
            <div class="card-header bg-transparent border-bottom-0">
                <h5 class="card-title mb-0">
                    <i class="fas fa-bolt me-2 text-warning bounce"></i> Quick Actions
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <a href="{{ url_for('products') }}" class="text-decoration-none" style="position: relative; z-index: 10;">
                            <div class="action-card">
                                <div class="action-icon floating">
                                    <i class="fas fa-tshirt"></i>
                                </div>
                                <div class="action-title">Products</div>
                                <div class="action-desc">Manage inventory</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="{{ url_for('sales') }}" class="text-decoration-none" style="position: relative; z-index: 10;">
                            <div class="action-card">
                                <div class="action-icon floating">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <div class="action-title">Sales</div>
                                <div class="action-desc">Record sales</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="{{ url_for('shipments') }}" class="text-decoration-none" style="position: relative; z-index: 10;">
                            <div class="action-card">
                                <div class="action-icon floating">
                                    <i class="fas fa-shipping-fast"></i>
                                </div>
                                <div class="action-title">Shipments</div>
                                <div class="action-desc">Track deliveries</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="{{ url_for('analytics') }}" class="text-decoration-none" style="position: relative; z-index: 10;">
                            <div class="action-card">
                                <div class="action-icon floating">
                                    <i class="fas fa-chart-pie"></i>
                                </div>
                                <div class="action-title">Analytics</div>
                                <div class="action-desc">View reports</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Business Contact Card -->
        <div class="garments-card card-logo-bg scroll-animate">
            <div class="card-header bg-transparent border-bottom-0">
                <h5 class="card-title mb-0">
                    <i class="fas fa-store me-2 text-success bounce"></i> Business Details
                </h5>
            </div>
            <div class="card-body">
                <div class="business-info">
                    <div class="d-flex align-items-center mb-3">
                        <div class="business-icon me-3">
                            <i class="fas fa-building fa-2x text-primary"></i>
                        </div>
                        <div>
                            <h6 class="mb-1 fw-bold">SUMSUL HAQUE</h6>
                            <p class="mb-0 text-muted small">READYMADE GARMENTS TRADING L.L.C</p>
                        </div>
                    </div>
                    
                    <div class="contact-info-list">
                        <div class="contact-item d-flex align-items-center mb-2">
                            <i class="fas fa-user-tie text-primary me-2"></i>
                            <span><strong>CEO:</strong> Tipu Miah</span>
                        </div>
                        <div class="contact-item d-flex align-items-center mb-2">
                            <i class="fas fa-mobile-alt text-success me-2"></i>
                            <span><strong>Phone 1:</strong> +971 55 320 9940</span>
                        </div>
                        <div class="contact-item d-flex align-items-center mb-2">
                            <i class="fas fa-phone-alt text-info me-2"></i>
                            <span><strong>Phone 2:</strong> +971 56 901 7316</span>
                        </div>
                        <div class="contact-item d-flex align-items-center mb-2">
                            <i class="fas fa-envelope text-warning me-2"></i>
                            <span><strong>Email:</strong> tipu.miah68@gmail.com</span>
                        </div>
                        <div class="contact-item d-flex align-items-start mb-2">
                            <i class="fas fa-map-marker-alt text-danger me-2 mt-1"></i>
                            <span>
                                <strong>Address:</strong><br>
                                New Industrial Area-2<br>
                                Ajman U.A.E
                            </span>
                        </div>
                    </div>
                    
                    <div class="mt-3 p-2 bg-light rounded">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            <strong>All Kind of Ready Garments Item Seller</strong>
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
// Add click-to-copy functionality for contact information
document.addEventListener('DOMContentLoaded', function() {
    const contactItems = document.querySelectorAll('.contact-item');
    
    contactItems.forEach(item => {
        item.style.cursor = 'pointer';
        item.addEventListener('click', function() {
            const text = this.textContent.replace(/CEO:|Phone 1:|Phone 2:|Email:|Address:/g, '').trim();
            
            // Copy to clipboard
            navigator.clipboard.writeText(text).then(() => {
                // Show temporary feedback
                const originalHTML = this.innerHTML;
                this.innerHTML = '<i class="fas fa-check text-success me-2"></i><span>Copied!</span>';
                
                setTimeout(() => {
                    this.innerHTML = originalHTML;
                }, 1500);
            });
        });
        
        // Add hover effect
        item.addEventListener('mouseenter', function() {
            this.style.backgroundColor = 'rgba(99, 102, 241, 0.1)';
            this.style.borderRadius = '5px';
            this.style.padding = '5px';
        });
        
        item.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
            this.style.padding = '0';
        });
    });
});
</script>

{% endblock %}