{% extends 'base.html' %}
{% load static %}

{% block title %}Generate Purchase Order - {{ block.super }}{% endblock %}

{% block css %}
<style>
.po-header {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}
.item-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.item-card.selected {
    border-color: #007bff;
    background: #f8f9ff;
}
.item-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 15px;
}
.item-details {
    flex: 1;
}
.item-name {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}
.item-sku {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 10px;
}
.stock-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 10px 0;
}
.stock-level {
    display: flex;
    align-items: center;
    gap: 10px;
}
.stock-bar {
    width: 100px;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}
.stock-fill {
    height: 100%;
    transition: width 0.3s ease;
}
.stock-critical { background: #dc3545; }
.stock-low { background: #ffc107; }
.stock-normal { background: #28a745; }
.quantity-input {
    width: 100px;
    text-align: center;
}
.price-info {
    text-align: right;
}
.unit-price {
    font-weight: bold;
    color: #007bff;
}
.total-price {
    font-size: 1.1rem;
    font-weight: bold;
    color: #28a745;
}
.supplier-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: all 0.3s ease;
}
.supplier-card:hover {
    border-color: #007bff;
    transform: translateY(-2px);
}
.supplier-card.selected {
    border-color: #007bff;
    background: #f8f9ff;
}
.supplier-name {
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}
.supplier-info {
    color: #6c757d;
    font-size: 0.9rem;
}
.supplier-rating {
    color: #ffc107;
    margin: 5px 0;
}
.delivery-info {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 10px;
    margin: 10px 0;
}
.po-summary {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #dee2e6;
}
.summary-row:last-child {
    border-bottom: none;
    font-weight: bold;
    font-size: 1.1rem;
}
.filter-panel {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.category-badge {
    background: #e9ecef;
    color: #495057;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
}
.priority-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
}
.priority-high { background: #f8d7da; color: #dc3545; }
.priority-medium { background: #fff3cd; color: #ffc107; }
.priority-low { background: #d4edda; color: #28a745; }
.suggested-qty {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.9rem;
    margin: 5px 0;
}
.bulk-discount {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.9rem;
    color: #155724;
    margin: 5px 0;
}
.lead-time {
    color: #6c757d;
    font-size: 0.9rem;
}
.approval-section {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
}
.step-indicator {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}
.step {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    margin: 0 5px;
    background: #f8f9fa;
    color: #6c757d;
}
.step.active {
    background: #007bff;
    color: white;
}
.step.completed {
    background: #28a745;
    color: white;
}
</style>
{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4><i class="fas fa-file-invoice"></i> Generate Purchase Order</h4>
                        <h6>Create purchase orders for inventory items</h6>
                    </div>
                    <div class="page-btn">
                        <button class="btn btn-secondary me-2" id="saveDraft">
                            <i class="fas fa-save"></i> Save Draft
                        </button>
                        <button class="btn btn-info me-2" id="previewPO">
                            <i class="fas fa-eye"></i> Preview
                        </button>
                        <button class="btn btn-success" id="generatePO">
                            <i class="fas fa-file-alt"></i> Generate PO
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- PO Header -->
        <div class="row">
            <div class="col-12">
                <div class="po-header">
                    <div class="row">
                        <div class="col-md-8">
                            <h5><i class="fas fa-shopping-cart"></i> Purchase Order Generator</h5>
                            <p>Select items, choose suppliers, and generate purchase orders efficiently</p>
                        </div>
                        <div class="col-md-4">
                            <div class="text-end">
                                <h6>PO Number: <span class="badge bg-light text-dark">PO-2024-001234</span></h6>
                                <p>Date: {{ today|date:"M d, Y" }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Step Indicator -->
        <div class="row">
            <div class="col-12">
                <div class="step-indicator">
                    <div class="step active">
                        <i class="fas fa-list"></i><br>
                        <small>Select Items</small>
                    </div>
                    <div class="step">
                        <i class="fas fa-building"></i><br>
                        <small>Choose Supplier</small>
                    </div>
                    <div class="step">
                        <i class="fas fa-edit"></i><br>
                        <small>Review Details</small>
                    </div>
                    <div class="step">
                        <i class="fas fa-check"></i><br>
                        <small>Generate PO</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Panel -->
        <div class="row">
            <div class="col-12">
                <div class="filter-panel">
                    <div class="row">
                        <div class="col-md-2">
                            <label>Category</label>
                            <select class="form-control" id="categoryFilter">
                                <option value="">All Categories</option>
                                <option value="medications">Medications</option>
                                <option value="supplies">Medical Supplies</option>
                                <option value="equipment">Equipment</option>
                                <option value="consumables">Consumables</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label>Stock Level</label>
                            <select class="form-control" id="stockFilter">
                                <option value="">All Levels</option>
                                <option value="critical">Critical</option>
                                <option value="low">Low Stock</option>
                                <option value="normal">Normal</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label>Priority</label>
                            <select class="form-control" id="priorityFilter">
                                <option value="">All Priorities</option>
                                <option value="high">High</option>
                                <option value="medium">Medium</option>
                                <option value="low">Low</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label>Supplier</label>
                            <select class="form-control" id="supplierFilter">
                                <option value="">All Suppliers</option>
                                <option value="pharmacorp">PharmaCorp</option>
                                <option value="medsupply">MedSupply Inc</option>
                                <option value="healthcare">Healthcare Solutions</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label>Search</label>
                            <input type="text" class="form-control" id="searchFilter" placeholder="Search items...">
                        </div>
                        <div class="col-md-1">
                            <label>&nbsp;</label>
                            <button class="btn btn-primary form-control" id="applyFilters">
                                <i class="fas fa-filter"></i>
                            </button>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <div class="d-flex gap-2">
                                <button class="btn btn-sm btn-outline-danger" id="selectCritical">
                                    <i class="fas fa-exclamation-triangle"></i> Select Critical Items
                                </button>
                                <button class="btn btn-sm btn-outline-warning" id="selectLowStock">
                                    <i class="fas fa-exclamation"></i> Select Low Stock
                                </button>
                                <button class="btn btn-sm btn-outline-info" id="selectSuggested">
                                    <i class="fas fa-lightbulb"></i> Select Suggested Items
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" id="clearSelection">
                                    <i class="fas fa-times"></i> Clear Selection
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Items Selection -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-boxes"></i> Available Items</h5>
                        <div class="card-tools">
                            <span class="badge bg-info">0 Selected</span>
                            <span class="badge bg-success">Total: $0.00</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Critical Stock Item -->
                        <div class="item-card" data-category="medications" data-stock="critical" data-priority="high">
                            <div class="row">
                                <div class="col-md-1">
                                    <input type="checkbox" class="form-check-input item-checkbox" value="MED-001234">
                                </div>
                                <div class="col-md-1">
                                    <img src="https://via.placeholder.com/60x60/007bff/ffffff?text=MED" class="item-image" alt="Medication">
                                </div>
                                <div class="col-md-6">
                                    <div class="item-details">
                                        <div class="item-name">Morphine 10mg/ml Injectable</div>
                                        <div class="item-sku">SKU: MED-001234</div>
                                        <div class="d-flex gap-2 mb-2">
                                            <span class="category-badge">Controlled Substances</span>
                                            <span class="priority-badge priority-high">HIGH PRIORITY</span>
                                        </div>
                                        <div class="stock-info">
                                            <div class="stock-level">
                                                <span>Current: 2</span>
                                                <div class="stock-bar">
                                                    <div class="stock-fill stock-critical" style="width: 5%"></div>
                                                </div>
                                                <span>Min: 50</span>
                                            </div>
                                            <span class="lead-time">Lead Time: 3-5 days</span>
                                        </div>
                                        <div class="suggested-qty">
                                            <i class="fas fa-lightbulb"></i> Suggested: 200 units (30-day supply)
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <label>Quantity</label>
                                    <input type="number" class="form-control quantity-input" value="200" min="1">
                                    <small class="text-muted">Unit: Vials</small>
                                </div>
                                <div class="col-md-2">
                                    <div class="price-info">
                                        <div class="unit-price">$45.50/unit</div>
                                        <div class="total-price">$9,100.00</div>
                                        <div class="bulk-discount">
                                            <i class="fas fa-tag"></i> 5% bulk discount
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Low Stock Item -->
                        <div class="item-card" data-category="supplies" data-stock="low" data-priority="medium">
                            <div class="row">
                                <div class="col-md-1">
                                    <input type="checkbox" class="form-check-input item-checkbox" value="SUP-005678">
                                </div>
                                <div class="col-md-1">
                                    <img src="https://via.placeholder.com/60x60/28a745/ffffff?text=SUP" class="item-image" alt="Supply">
                                </div>
                                <div class="col-md-6">
                                    <div class="item-details">
                                        <div class="item-name">Surgical Gloves (Size M)</div>
                                        <div class="item-sku">SKU: SUP-005678</div>
                                        <div class="d-flex gap-2 mb-2">
                                            <span class="category-badge">Medical Supplies</span>
                                            <span class="priority-badge priority-medium">MEDIUM PRIORITY</span>
                                        </div>
                                        <div class="stock-info">
                                            <div class="stock-level">
                                                <span>Current: 45</span>
                                                <div class="stock-bar">
                                                    <div class="stock-fill stock-low" style="width: 25%"></div>
                                                </div>
                                                <span>Min: 100</span>
                                            </div>
                                            <span class="lead-time">Lead Time: 1-2 days</span>
                                        </div>
                                        <div class="suggested-qty">
                                            <i class="fas fa-lightbulb"></i> Suggested: 500 boxes (bulk order)
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <label>Quantity</label>
                                    <input type="number" class="form-control quantity-input" value="500" min="1">
                                    <small class="text-muted">Unit: Boxes</small>
                                </div>
                                <div class="col-md-2">
                                    <div class="price-info">
                                        <div class="unit-price">$12.75/box</div>
                                        <div class="total-price">$6,375.00</div>
                                        <div class="bulk-discount">
                                            <i class="fas fa-tag"></i> 10% bulk discount
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Normal Stock Item -->
                        <div class="item-card" data-category="medications" data-stock="normal" data-priority="low">
                            <div class="row">
                                <div class="col-md-1">
                                    <input type="checkbox" class="form-check-input item-checkbox" value="MED-002345">
                                </div>
                                <div class="col-md-1">
                                    <img src="https://via.placeholder.com/60x60/ffc107/ffffff?text=MED" class="item-image" alt="Medication">
                                </div>
                                <div class="col-md-6">
                                    <div class="item-details">
                                        <div class="item-name">Paracetamol 500mg Tablets</div>
                                        <div class="item-sku">SKU: MED-002345</div>
                                        <div class="d-flex gap-2 mb-2">
                                            <span class="category-badge">Pain Relief</span>
                                            <span class="priority-badge priority-low">LOW PRIORITY</span>
                                        </div>
                                        <div class="stock-info">
                                            <div class="stock-level">
                                                <span>Current: 850</span>
                                                <div class="stock-bar">
                                                    <div class="stock-fill stock-normal" style="width: 75%"></div>
                                                </div>
                                                <span>Min: 200</span>
                                            </div>
                                            <span class="lead-time">Lead Time: 2-3 days</span>
                                        </div>
                                        <div class="suggested-qty">
                                            <i class="fas fa-lightbulb"></i> Suggested: 1000 tablets (restock)
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <label>Quantity</label>
                                    <input type="number" class="form-control quantity-input" value="1000" min="1">
                                    <small class="text-muted">Unit: Tablets</small>
                                </div>
                                <div class="col-md-2">
                                    <div class="price-info">
                                        <div class="unit-price">$0.25/tablet</div>
                                        <div class="total-price">$250.00</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Equipment Item -->
                        <div class="item-card" data-category="equipment" data-stock="normal" data-priority="medium">
                            <div class="row">
                                <div class="col-md-1">
                                    <input type="checkbox" class="form-check-input item-checkbox" value="EQP-003456">
                                </div>
                                <div class="col-md-1">
                                    <img src="https://via.placeholder.com/60x60/6f42c1/ffffff?text=EQP" class="item-image" alt="Equipment">
                                </div>
                                <div class="col-md-6">
                                    <div class="item-details">
                                        <div class="item-name">Digital Thermometer</div>
                                        <div class="item-sku">SKU: EQP-003456</div>
                                        <div class="d-flex gap-2 mb-2">
                                            <span class="category-badge">Diagnostic Equipment</span>
                                            <span class="priority-badge priority-medium">MEDIUM PRIORITY</span>
                                        </div>
                                        <div class="stock-info">
                                            <div class="stock-level">
                                                <span>Current: 15</span>
                                                <div class="stock-bar">
                                                    <div class="stock-fill stock-normal" style="width: 60%"></div>
                                                </div>
                                                <span>Min: 10</span>
                                            </div>
                                            <span class="lead-time">Lead Time: 5-7 days</span>
                                        </div>
                                        <div class="suggested-qty">
                                            <i class="fas fa-lightbulb"></i> Suggested: 25 units (department needs)
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <label>Quantity</label>
                                    <input type="number" class="form-control quantity-input" value="25" min="1">
                                    <small class="text-muted">Unit: Pieces</small>
                                </div>
                                <div class="col-md-2">
                                    <div class="price-info">
                                        <div class="unit-price">$35.00/unit</div>
                                        <div class="total-price">$875.00</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- PO Summary & Supplier Selection -->
            <div class="col-md-4">
                <!-- PO Summary -->
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-calculator"></i> Purchase Order Summary</h5>
                    </div>
                    <div class="card-body">
                        <div class="po-summary">
                            <div class="summary-row">
                                <span>Selected Items:</span>
                                <span id="selectedCount">0</span>
                            </div>
                            <div class="summary-row">
                                <span>Subtotal:</span>
                                <span id="subtotal">$0.00</span>
                            </div>
                            <div class="summary-row">
                                <span>Bulk Discounts:</span>
                                <span id="discounts">-$0.00</span>
                            </div>
                            <div class="summary-row">
                                <span>Tax (8.5%):</span>
                                <span id="tax">$0.00</span>
                            </div>
                            <div class="summary-row">
                                <span>Shipping:</span>
                                <span id="shipping">$0.00</span>
                            </div>
                            <div class="summary-row">
                                <span>Total Amount:</span>
                                <span id="totalAmount">$0.00</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Supplier Selection -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="fas fa-building"></i> Select Supplier</h5>
                    </div>
                    <div class="card-body">
                        <div class="supplier-card selected">
                            <div class="supplier-name">PharmaCorp International</div>
                            <div class="supplier-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                4.8/5
                            </div>
                            <div class="supplier-info">
                                <i class="fas fa-phone"></i> +1-555-0123<br>
                                <i class="fas fa-envelope"></i> orders@pharmacorp.com<br>
                                <i class="fas fa-map-marker-alt"></i> New York, NY
                            </div>
                            <div class="delivery-info">
                                <strong>Delivery:</strong> 3-5 business days<br>
                                <strong>Payment Terms:</strong> Net 30<br>
                                <strong>Minimum Order:</strong> $500
                            </div>
                        </div>

                        <div class="supplier-card">
                            <div class="supplier-name">MedSupply Solutions</div>
                            <div class="supplier-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                                4.2/5
                            </div>
                            <div class="supplier-info">
                                <i class="fas fa-phone"></i> +1-555-0456<br>
                                <i class="fas fa-envelope"></i> sales@medsupply.com<br>
                                <i class="fas fa-map-marker-alt"></i> Chicago, IL
                            </div>
                            <div class="delivery-info">
                                <strong>Delivery:</strong> 2-4 business days<br>
                                <strong>Payment Terms:</strong> Net 15<br>
                                <strong>Minimum Order:</strong> $300
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Delivery Information -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="fas fa-truck"></i> Delivery Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group mb-3">
                            <label>Delivery Address</label>
                            <select class="form-control">
                                <option>Main Hospital - 123 Medical Center Dr</option>
                                <option>Pharmacy Department - Building A</option>
                                <option>Emergency Department - Building B</option>
                                <option>ICU - Floor 3</option>
                            </select>
                        </div>
                        <div class="form-group mb-3">
                            <label>Requested Delivery Date</label>
                            <input type="date" class="form-control" value="2024-02-01">
                        </div>
                        <div class="form-group mb-3">
                            <label>Special Instructions</label>
                            <textarea class="form-control" rows="3" placeholder="Any special delivery instructions..."></textarea>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="urgentDelivery">
                            <label class="form-check-label" for="urgentDelivery">
                                Urgent delivery required
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Approval Section -->
        <div class="row">
            <div class="col-12">
                <div class="approval-section">
                    <h6><i class="fas fa-user-check"></i> Approval Required</h6>
                    <p>This purchase order requires approval due to the total amount exceeding $5,000.</p>
                    <div class="row">
                        <div class="col-md-6">
                            <label>Approver</label>
                            <select class="form-control">
                                <option>Dr. Sarah Johnson - Department Head</option>
                                <option>Michael Chen - Procurement Manager</option>
                                <option>Lisa Rodriguez - Finance Director</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label>Justification</label>
                            <textarea class="form-control" rows="2" placeholder="Reason for this purchase order..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Item selection
    $('.item-checkbox').change(function() {
        var card = $(this).closest('.item-card');
        if ($(this).is(':checked')) {
            card.addClass('selected');
        } else {
            card.removeClass('selected');
        }
        updateSummary();
    });
    
    // Quantity change
    $('.quantity-input').change(function() {
        updateSummary();
    });
    
    // Supplier selection
    $('.supplier-card').click(function() {
        $('.supplier-card').removeClass('selected');
        $(this).addClass('selected');
        updateSummary();
    });
    
    // Filter functionality
    $('#applyFilters').click(function() {
        var category = $('#categoryFilter').val();
        var stock = $('#stockFilter').val();
        var priority = $('#priorityFilter').val();
        var supplier = $('#supplierFilter').val();
        var search = $('#searchFilter').val().toLowerCase();
        
        $('.item-card').each(function() {
            var show = true;
            
            if (category && $(this).data('category') !== category) {
                show = false;
            }
            
            if (stock && $(this).data('stock') !== stock) {
                show = false;
            }
            
            if (priority && $(this).data('priority') !== priority) {
                show = false;
            }
            
            if (search && !$(this).text().toLowerCase().includes(search)) {
                show = false;
            }
            
            $(this).toggle(show);
        });
    });
    
    // Quick selection buttons
    $('#selectCritical').click(function() {
        $('.item-card[data-stock="critical"] .item-checkbox').prop('checked', true).trigger('change');
    });
    
    $('#selectLowStock').click(function() {
        $('.item-card[data-stock="low"] .item-checkbox').prop('checked', true).trigger('change');
    });
    
    $('#selectSuggested').click(function() {
        $('.item-card[data-priority="high"] .item-checkbox').prop('checked', true).trigger('change');
    });
    
    $('#clearSelection').click(function() {
        $('.item-checkbox').prop('checked', false).trigger('change');
    });
    
    // Action buttons
    $('#saveDraft').click(function() {
        alert('Purchase order saved as draft');
    });
    
    $('#previewPO').click(function() {
        alert('Opening purchase order preview...');
    });
    
    $('#generatePO').click(function() {
        var selectedItems = $('.item-checkbox:checked').length;
        if (selectedItems === 0) {
            alert('Please select at least one item');
            return;
        }
        
        if (confirm('Generate purchase order for ' + selectedItems + ' items?')) {
            alert('Purchase order generated successfully!');
        }
    });
    
    // Update summary
    function updateSummary() {
        var selectedCount = $('.item-checkbox:checked').length;
        var subtotal = 0;
        var discounts = 0;
        
        $('.item-checkbox:checked').each(function() {
            var card = $(this).closest('.item-card');
            var quantity = parseInt(card.find('.quantity-input').val()) || 0;
            var unitPrice = parseFloat(card.find('.unit-price').text().replace('$', '').replace('/unit', '').replace('/box', '').replace('/tablet', '')) || 0;
            var itemTotal = quantity * unitPrice;
            
            subtotal += itemTotal;
            
            // Calculate bulk discounts
            if (card.find('.bulk-discount').length > 0) {
                var discountText = card.find('.bulk-discount').text();
                var discountPercent = parseInt(discountText.match(/\d+/)) || 0;
                discounts += itemTotal * (discountPercent / 100);
            }
            
            // Update item total display
            card.find('.total-price').text('$' + itemTotal.toLocaleString('en-US', {minimumFractionDigits: 2}));
        });
        
        var afterDiscount = subtotal - discounts;
        var tax = afterDiscount * 0.085;
        var shipping = selectedCount > 0 ? 50 : 0;
        var total = afterDiscount + tax + shipping;
        
        $('#selectedCount').text(selectedCount);
        $('#subtotal').text('$' + subtotal.toLocaleString('en-US', {minimumFractionDigits: 2}));
        $('#discounts').text('-$' + discounts.toLocaleString('en-US', {minimumFractionDigits: 2}));
        $('#tax').text('$' + tax.toLocaleString('en-US', {minimumFractionDigits: 2}));
        $('#shipping').text('$' + shipping.toLocaleString('en-US', {minimumFractionDigits: 2}));
        $('#totalAmount').text('$' + total.toLocaleString('en-US', {minimumFractionDigits: 2}));
        
        // Update card tools
        $('.card-tools .badge:contains("Selected")').text(selectedCount + ' Selected');
        $('.card-tools .badge:contains("Total")').text('Total: $' + total.toLocaleString('en-US', {minimumFractionDigits: 2}));
    }
    
    // Initialize
    updateSummary();
});
</script>
{% endblock %}