{% extends "base.html" %}

{% block title %}{{ shop.name }} - Ghana Wholesale Management{% endblock %}

{% block page_title %}{{ shop.name }} ({{ shop.code }}){% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'shop_list' %}">Shops</a></li>
    <li class="breadcrumb-item active">{{ shop.name }}</li>
{% endblock %}

{% block page_actions %}
    <div class="btn-group">
        <a href="{% url 'shop_update' shop.pk %}" class="btn btn-outline-primary">
            <i class="bi bi-pencil"></i> Edit Shop
        </a>
        <a href="{% url 'shop_inventory' shop.pk %}" class="btn btn-outline-success">
            <i class="bi bi-clipboard-data"></i> Current Inventory
        </a>
        <a href="{% url 'shop_all_products' shop.pk %}" class="btn btn-outline-info">
            <i class="bi bi-list-check"></i> All Products
        </a>
        <a href="{% url 'transfer_create' %}" class="btn btn-outline-secondary">
            <i class="bi bi-truck"></i> Create Transfer
        </a>
        {% if user.is_superuser %}
        <a href="/admin/shops/shop/{{ shop.pk }}/change/" class="btn btn-outline-warning">
            <i class="bi bi-gear"></i> Admin
        </a>
        {% endif %}
    </div>
{% endblock %}

{% block content %}
<div class="row">
    <!-- Shop Summary Cards -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-start border-primary border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-primary text-uppercase mb-1">
                            Total Items
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">{{ inventory_summary.total_items|default:0 }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-box-seam stat-icon text-primary"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-start border-success border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-success text-uppercase mb-1">
                            Total Quantity
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">{{ inventory_summary.total_quantity|default:0 }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-stack stat-icon text-success"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-start border-info border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-info text-uppercase mb-1">
                            Stock Value
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">GH₵{{ inventory_summary.total_value|default:0|floatformat:2 }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-currency-exchange stat-icon text-info"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-start border-warning border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-warning text-uppercase mb-1">
                            Low Stock Items
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">{{ inventory_summary.low_stock|default:0 }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-exclamation-triangle stat-icon text-warning"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Shop Information -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0">
                    <i class="bi bi-info-circle"></i> Shop Information
                </h6>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    <tr>
                        <th width="40%">Shop Code:</th>
                        <td><strong>{{ shop.code }}</strong></td>
                    </tr>
                    <tr>
                        <th>Shop Type:</th>
                        <td>
                            <span class="badge bg-primary">{{ shop.get_shop_type_display }}</span>
                        </td>
                    </tr>
                    <tr>
                        <th>Status:</th>
                        <td>
                            {% if shop.is_active %}
                            <span class="badge bg-success">Active</span>
                            {% else %}
                            <span class="badge bg-danger">Inactive</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>Manager:</th>
                        <td>{{ shop.manager|default:"Not Assigned" }}</td>
                    </tr>
                    <tr>
                        <th>Location:</th>
                        <td>{{ shop.location }}, {{ shop.city }}, {{ shop.region }}</td>
                    </tr>
                    <tr>
                        <th>Opening Date:</th>
                        <td>{{ shop.opening_date|date:"d M Y" }}</td>
                    </tr>
                    <tr>
                        <th>Created:</th>
                        <td>{{ shop.created_at|date:"d M Y" }}</td>
                    </tr>
                    <tr>
                        <th>Last Updated:</th>
                        <td>{{ shop.updated_at|date:"d M Y, g:i A" }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="card mt-4">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0">
                    <i class="bi bi-telephone"></i> Contact Information
                </h6>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    <tr>
                        <th width="40%">Phone:</th>
                        <td>{{ shop.phone }}</td>
                    </tr>
                    <tr>
                        <th>Manager Contact:</th>
                        <td>{{ shop.manager_phone|default:"Not provided" }}</td>
                    </tr>
                    <tr>
                        <th>Address:</th>
                        <td>
                            <small>{{ shop.location }}, {{ shop.city }}, {{ shop.region }}</small>
                        </td>
                    </tr>
                </table>
                <div class="mt-3">
                    <a href="tel:{{ shop.phone }}" class="btn btn-sm btn-outline-primary w-100">
                        <i class="bi bi-telephone"></i> Call Shop
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Inventory -->
    <div class="col-lg-4 mb-4">
        <div class="card h-100">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0">
                    <i class="bi bi-clipboard-data"></i> Recent Inventory (Top 10)
                </h6>
            </div>
            <div class="card-body">
                {% if inventory %}
                <div class="table-responsive">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>SKU</th>
                                <th>Qty</th>
                                <th>Avail</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in inventory %}
                            <tr>
                                <td>
                                    <small>{{ item.product.name|truncatechars:15 }}</small>
                                </td>
                                <td>
                                    <small class="text-muted">{{ item.product.sku }}</small>
                                </td>
                                <td>{{ item.quantity }}</td>
                                <td>
                                    <span class="badge bg-{% if item.available == 0 %}danger{% elif item.is_low_stock %}warning{% else %}success{% endif %}">
                                        {{ item.available }}
                                    </span>
                                </td>
                                <td>
                                    {% if item.available == 0 %}
                                    <span class="badge bg-danger">Out</span>
                                    {% elif item.is_low_stock %}
                                    <span class="badge bg-warning">Low</span>
                                    {% else %}
                                    <span class="badge bg-success">OK</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    <a href="{% url 'shop_inventory' shop.pk %}" class="btn btn-sm btn-outline-info w-100">
                        <i class="bi bi-eye"></i> View Current Inventory
                    </a>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="bi bi-inbox text-muted fs-1"></i>
                    <p class="mt-2">No inventory found</p>
                    <a href="{% url 'shop_inventory' shop.pk %}" class="btn btn-sm btn-primary">
                        View Inventory
                    </a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Low Stock Items -->
        <div class="card mt-4">
            <div class="card-header bg-warning text-white">
                <h6 class="mb-0">
                    <i class="bi bi-exclamation-triangle"></i> Low Stock Alerts
                </h6>
            </div>
            <div class="card-body">
                {% if low_stock %}
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Avail</th>
                                <th>Reorder</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in low_stock %}
                            <tr class="table-warning">
                                <td>
                                    <small>{{ item.product.name|truncatechars:20 }}</small>
                                </td>
                                <td>
                                    <span class="badge bg-warning">{{ item.available }}</span>
                                </td>
                                <td>{{ item.reorder_point }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-3">
                    <i class="bi bi-check-circle text-success"></i>
                    <p class="mt-2 mb-0">No low stock items</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Recent Transfers -->
    <div class="col-lg-4 mb-4">
        <div class="card h-100">
            <div class="card-header bg-secondary text-white">
                <h6 class="mb-0">
                    <i class="bi bi-truck"></i> Recent Transfers
                </h6>
            </div>
            <div class="card-body">
                {% if recent_transfers %}
                <div class="table-responsive">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th>Transfer #</th>
                                <th>Date</th>
                                <th>Type</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for transfer in recent_transfers %}
                            <tr>
                                <td>
                                    <small>
                                        <a href="{% url 'transfer_detail' transfer.pk %}">
                                            {{ transfer.transfer_number }}
                                        </a>
                                    </small>
                                </td>
                                <td>{{ transfer.created_at|date:"d M" }}</td>
                                <td>
                                    {% if transfer.from_shop == shop %}
                                    <span class="badge bg-danger">Outgoing</span>
                                    {% else %}
                                    <span class="badge bg-success">Incoming</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if transfer.status == 'draft' %}
                                    <span class="badge bg-secondary">Draft</span>
                                    {% elif transfer.status == 'pending' %}
                                    <span class="badge bg-warning">Pending</span>
                                    {% elif transfer.status == 'approved' %}
                                    <span class="badge bg-info">Approved</span>
                                    {% elif transfer.status == 'shipped' %}
                                    <span class="badge bg-primary">Shipped</span>
                                    {% elif transfer.status == 'delivered' %}
                                    <span class="badge bg-success">Delivered</span>
                                    {% elif transfer.status == 'cancelled' %}
                                    <span class="badge bg-danger">Cancelled</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    <a href="{% url 'transfer_list' %}?shop={{ shop.id }}" class="btn btn-sm btn-outline-secondary w-100">
                        <i class="bi bi-list"></i> View All Transfers
                    </a>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="bi bi-truck text-muted fs-1"></i>
                    <p class="mt-2">No recent transfers</p>
                    <a href="{% url 'transfer_create' %}" class="btn btn-sm btn-primary">
                        <i class="bi bi-plus-circle"></i> Create Transfer
                    </a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="card mt-4">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0">
                    <i class="bi bi-lightning"></i> Quick Actions
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{% url 'transfer_create' %}?from_shop={{ shop.id }}" class="btn btn-outline-primary">
                        <i class="bi bi-box-arrow-up"></i> Transfer From This Shop
                    </a>
                    <a href="{% url 'transfer_create' %}?to_shop={{ shop.id }}" class="btn btn-outline-success">
                        <i class="bi bi-box-arrow-in-down"></i> Transfer To This Shop
                    </a>
                    <a href="{% url 'shop_inventory' shop.pk %}" class="btn btn-outline-info">
                        <i class="bi bi-search"></i> Search Inventory
                    </a>
                    <a href="{% url 'shop_all_products' shop.pk %}" class="btn btn-outline-info">
                        <i class="bi bi-list-check"></i> View All Products
                    </a>
                    <a href="{% url 'shop_update' shop.pk %}" class="btn btn-outline-warning">
                        <i class="bi bi-pencil"></i> Edit Shop Details
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Inventory Summary -->
<div class="row mt-4">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-bar-chart"></i> Inventory Summary
                </h6>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-md-3 mb-3">
                        <div class="p-3 bg-light rounded">
                            <h4 class="text-primary mb-1">{{ inventory_summary.total_items|default:0 }}</h4>
                            <small class="text-muted">Total Products</small>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="p-3 bg-light rounded">
                            <h4 class="text-success mb-1">{{ inventory_summary.total_quantity|default:0 }}</h4>
                            <small class="text-muted">Total Units</small>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="p-3 bg-light rounded">
                            <h4 class="text-info mb-1">GH₵{{ inventory_summary.total_value|default:0|floatformat:2 }}</h4>
                            <small class="text-muted">Total Value</small>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="p-3 bg-light rounded">
                            <h4 class="text-warning mb-1">{{ inventory_summary.low_stock|default:0 }}</h4>
                            <small class="text-muted">Low Stock Items</small>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-3">
                    <div class="col-md-6">
                        <div class="alert alert-info">
                            <h6><i class="bi bi-info-circle"></i> Shop Type: {{ shop.get_shop_type_display }}</h6>
                            <small class="mb-0">
                                {% if shop.shop_type == 'retail' %}
                                This is a retail shop for direct customer sales.
                                {% elif shop.shop_type == 'wholesale' %}
                                This is a wholesale shop for bulk business sales.
                                {% elif shop.shop_type == 'warehouse' %}
                                This is a warehouse for storage and distribution.
                                {% elif shop.shop_type == 'supermarket' %}
                                This is a supermarket for general retail.
                                {% endif %}
                            </small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="alert alert-light">
                            <h6><i class="bi bi-geo-alt"></i> Location Information</h6>
                            <small class="mb-0">
                                <strong>Location:</strong> {{ shop.location }}<br>
                                <strong>City:</strong> {{ shop.city }}<br>
                                <strong>Region:</strong> {{ shop.region }}<br>
                                <strong>Phone:</strong> {{ shop.phone }}
                            </small>
                        </div>
                    </div>
                </div>
                
                <!-- Additional Shop Actions -->
                <div class="row mt-3">
                    <div class="col-md-12">
                        <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                            <a href="{% url 'shop_all_products' shop.pk %}" class="btn btn-lg btn-primary me-2">
                                <i class="bi bi-list-check"></i> View All Products in This Shop
                            </a>
                            <a href="{% url 'transfer_create' %}?to_shop={{ shop.id }}" class="btn btn-lg btn-success">
                                <i class="bi bi-truck"></i> Transfer Products to This Shop
                            </a>
                        </div>
                        <p class="text-center text-muted mt-2">
                            <small>View all products available or not available in this shop, and easily transfer products from warehouse or other shops.</small>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Auto-refresh shop data every 2 minutes
        setTimeout(function() {
            window.location.reload();
        }, 120000);
        
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>
{% endblock %}