{% extends "layout.html" %}

{% block title %}{{ shopping_list.store_display_name }} Shopping List{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>
                    <i class="fas fa-store"></i> {{ shopping_list.store_display_name }}
                    <small class="text-muted">Shopping List</small>
                </h1>
                <div class="btn-group" role="group">
                    <a href="{{ url_for('shopping_lists') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back to All Lists
                    </a>
                    {% if shopping_list.base_url %}
                    <a href="{{ shopping_list.base_url }}" target="_blank" class="btn btn-success">
                        <i class="fas fa-external-link-alt"></i> Visit Store
                    </a>
                    {% endif %}
                    <button class="btn btn-info" onclick="window.print()">
                        <i class="fas fa-print"></i> Print List
                    </button>
                </div>
            </div>

            <!-- Summary Card -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card border-primary">
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-3">
                                    <h3 class="text-primary">{{ shopping_list.item_count }}</h3>
                                    <p class="mb-0">Items to Buy</p>
                                </div>
                                <div class="col-md-3">
                                    <h3 class="text-success">£{{ "%.2f"|format(shopping_list.total_cost) }}</h3>
                                    <p class="mb-0">Total Cost</p>
                                </div>
                                <div class="col-md-3">
                                    <h3 class="text-info">£{{ "%.2f"|format(shopping_list.total_savings) }}</h3>
                                    <p class="mb-0">Total Savings</p>
                                </div>
                                <div class="col-md-3">
                                    <h3 class="text-warning">
                                        {{ "%.1f"|format((shopping_list.total_savings / (shopping_list.total_cost + shopping_list.total_savings) * 100) if (shopping_list.total_cost + shopping_list.total_savings) > 0 else 0) }}%
                                    </h3>
                                    <p class="mb-0">Savings Rate</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Shopping Items -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-shopping-cart"></i> 
                                Items to Buy ({{ shopping_list.item_count }})
                            </h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th width="5%">#</th>
                                            <th width="45%">Product</th>
                                            <th width="15%" class="text-center">Price</th>
                                            <th width="15%" class="text-center">Savings</th>
                                            <th width="15%" class="text-center">Last Updated</th>
                                            <th width="5%" class="text-center">Link</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in shopping_list.items %}
                                        <tr class="shopping-item">
                                            <td class="align-middle">
                                                <span class="badge badge-secondary">{{ loop.index }}</span>
                                            </td>
                                            <td class="align-middle">
                                                <strong>{{ item.product_name }}</strong>
                                                {% if item.savings_vs_most_expensive > 0 %}
                                                <br><small class="text-success">
                                                    <i class="fas fa-arrow-down"></i> Best price!
                                                </small>
                                                {% endif %}
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="h5 text-success mb-0">
                                                    £{{ "%.2f"|format(item.current_price) }}
                                                </span>
                                            </td>
                                            <td class="align-middle text-center">
                                                {% if item.savings_vs_most_expensive > 0 %}
                                                <span class="text-info font-weight-bold">
                                                    £{{ "%.2f"|format(item.savings_vs_most_expensive) }}
                                                </span>
                                                {% else %}
                                                <span class="text-muted">-</span>
                                                {% endif %}
                                            </td>
                                            <td class="align-middle text-center">
                                                <small class="text-muted">
                                                    {{ item.last_updated.strftime('%Y-%m-%d %H:%M') if item.last_updated else 'Unknown' }}
                                                </small>
                                            </td>
                                            <td class="align-middle text-center">
                                                {% if item.store_url %}
                                                <a href="{{ item.store_url }}" target="_blank" 
                                                   class="btn btn-sm btn-outline-primary" 
                                                   title="View product on {{ shopping_list.store_display_name }}">
                                                    <i class="fas fa-external-link-alt"></i>
                                                </a>
                                                {% else %}
                                                <span class="text-muted">-</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                    <tfoot class="table-light">
                                        <tr>
                                            <th colspan="2" class="text-right">Totals:</th>
                                            <th class="text-center">
                                                <span class="h5 text-success">£{{ "%.2f"|format(shopping_list.total_cost) }}</span>
                                            </th>
                                            <th class="text-center">
                                                <span class="h5 text-info">£{{ "%.2f"|format(shopping_list.total_savings) }}</span>
                                            </th>
                                            <th colspan="2"></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Shopping Tips -->
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-lightbulb"></i> Shopping Tips
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <ul class="list-unstyled">
                                        <li><i class="fas fa-check text-success"></i> This list shows items where <strong>{{ shopping_list.store_display_name }}</strong> has the best price</li>
                                        <li><i class="fas fa-check text-success"></i> You're saving <strong>£{{ "%.2f"|format(shopping_list.total_savings) }}</strong> compared to other stores</li>
                                        <li><i class="fas fa-check text-success"></i> Prices were last updated from live store data</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <ul class="list-unstyled">
                                        <li><i class="fas fa-info-circle text-info"></i> Click product links to go directly to store pages</li>
                                        <li><i class="fas fa-info-circle text-info"></i> Print this list for easy shopping reference</li>
                                        <li><i class="fas fa-info-circle text-info"></i> Check other stores for remaining items on your list</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.shopping-item {
    transition: all 0.2s ease;
}

.shopping-item:hover {
    background-color: #f8f9fa;
}

@media print {
    .btn-group, .card:last-child {
        display: none !important;
    }
    
    .table {
        font-size: 12px;
    }
    
    .card-body {
        padding: 0.5rem !important;
    }
    
    .shopping-item:hover {
        background-color: transparent !important;
    }
    
    .page-break {
        page-break-after: always;
    }
}
</style>
{% endblock %}