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

{% block title %}Inventory Locations - Inventory Management{% endblock %}
{% block css %}
<link href="{% static 'plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css' %}" rel="stylesheet" />
<style>
.page-header-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-color);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-size: 1.25rem;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #495057;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.filters-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.orders-table-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
}

.section-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: #495057;
    display: flex;
    justify-content: between;
    align-items: center;
}

.status-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-draft { background: #f8f9fa; color: #6c757d; }
.status-pending { background: #fff3cd; color: #856404; }
.status-approved { background: #d1ecf1; color: #0c5460; }
.status-ordered { background: #d4edda; color: #155724; }
.status-received { background: #d4edda; color: #155724; }
.status-cancelled { background: #f8d7da; color: #721c24; }

.priority-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.priority-low { background: #d4edda; color: #155724; }
.priority-medium { background: #fff3cd; color: #856404; }
.priority-high { background: #f8d7da; color: #721c24; }
.priority-urgent { background: #f5c6cb; color: #721c24; }

.action-buttons {
    display: flex;
    gap: 0.25rem;
}

.btn-action {
    padding: 0.375rem 0.5rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.btn-view { background: #e3f2fd; color: #1976d2; }
.btn-edit { background: #fff3e0; color: #f57c00; }
.btn-delete { background: #ffebee; color: #d32f2f; }
.btn-approve { background: #e8f5e8; color: #2e7d32; }

.btn-action:hover {
    transform: scale(1.05);
    opacity: 0.8;
}

.bulk-actions {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    display: none;
}

.bulk-actions.show {
    display: block;
}

.quick-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.quick-filter {
    padding: 0.5rem 1rem;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
    text-decoration: none;
    color: #495057;
}

.quick-filter:hover, .quick-filter.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
    text-decoration: none;
}

.order-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.order-amount {
    font-weight: bold;
    color: #28a745;
}

.order-items {
    font-size: 0.875rem;
    color: #6c757d;
}

.supplier-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.supplier-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.table-actions {
    display: flex;
    justify-content: between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

@media (max-width: 768px) {
    .page-header-section {
        padding: 1.5rem;
    }

    .stats-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-row {
        grid-template-columns: 1fr;
    }

    .quick-filters {
        justify-content: center;
    }

    .action-buttons {
        flex-direction: column;
    }

    .table-actions {
        flex-direction: column;
        gap: 1rem;
    }
}

@media print {
    .filters-section, .bulk-actions, .action-buttons, .table-actions {
        display: none !important;
    }

    .section-header {
        background: none;
        border-bottom: 2px solid #000;
        color: #000;
    }
}
</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>Inventory Locations</h4>
                        <h6>Manage storage locations and warehouses</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'inventory:location_create' %}" class="btn btn-added">
                            <i class="fas fa-plus me-1"></i>Add New Location
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Location Statistics -->
    <div class="row mb-4" >
        <!-- Room Status Stats -->
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card bg-gradient-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="h4 mb-1">{{ stats.total_locations|default:7 }}</div>
                            <div class="small">Total Locations</div>
                        </div>
                        <div class="fa-2x">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card bg-gradient-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="h4 mb-1">{{ stats.active_locations|default:22 }}</div>
                            <div class="small">Active Locations</div>
                        </div>
                        <div class="fa-2x">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card bg-gradient-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="h4 mb-1">{{ stats.controlled_locations|default:6 }}</div>
                            <div class="small">Controlled Access</div>
                        </div>
                        <div class="fa-2x">
                            <i class="fas fa-lock"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card bg-gradient-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="h4 mb-1">{{ stats.climate_controlled|default:8 }}</div>
                            <div class="small">Climate Controlled</div>
                        </div>
                        <div class="fa-2x">
                            <i class="fas fa-thermometer-half"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!-- Filters and Search -->
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="search-set">
                        <div class="search-path">
                            <a class="btn btn-filter" id="filter_search">
                                <i class="fas fa-filter"></i>
                                <span><i class="fas fa-times"></i></span>
                            </a>
                        </div>
                        <div class="input-group">
                            <a class="btn btn-sm btn-outline-secondary" id="search_input">
                                <i class="fas fa-search"></i>
                            </a>
                            <input class="form-control form-control-sm" type="text" id="searchInput" placeholder="Search locations...">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">

                                <a class="btn brn-xs btn-outline-primary me-1" data-bs-toggle="tooltip" data-bs-placement="top" title="PDF" onclick="exportToPDF()">
                                    <i class="fas fa-file-pdf"></i>
                                </a>

                                <a class="btn brn-xs btn-outline-success me-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Excel" onclick="exportToExcel()">
                                    <i class="fas fa-file-excel"></i>
                                </a>

                                <a class="btn brn-xs btn-outline-red" data-bs-toggle="tooltip" data-bs-placement="top" title="Print" onclick="printTable()">
                                    <i class="fas fa-print"></i>
                                </a>

                    </div>
                </div>

                <!-- Filter Panel -->
                <div class="card mb-0" id="filter_inputs" style="display: none;">
                    <div class="card-body pb-0">
                        <div class="row">
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <select class="select" id="locationTypeFilter">
                                        <option value="">All Location Types</option>
                                        <option value="WAREHOUSE">Warehouse</option>
                                        <option value="STOREROOM">Storeroom</option>
                                        <option value="PHARMACY">Pharmacy</option>
                                        <option value="NURSING_UNIT">Nursing Unit</option>
                                        <option value="OR_STORAGE">OR Storage</option>
                                        <option value="LAB_STORAGE">Lab Storage</option>
                                        <option value="RADIOLOGY">Radiology Storage</option>
                                        <option value="CENTRAL_SUPPLY">Central Supply</option>
                                        <option value="REFRIGERATOR">Refrigerator</option>
                                        <option value="FREEZER">Freezer</option>
                                        <option value="CONTROLLED">Controlled Substance</option>
                                        <option value="QUARANTINE">Quarantine</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <select class="select" id="buildingFilter">
                                        <option value="">All Buildings</option>
                                        <option value="Main Hospital">Main Hospital</option>
                                        <option value="Medical Office Building">Medical Office Building</option>
                                        <option value="Outpatient Center">Outpatient Center</option>
                                        <option value="Emergency Department">Emergency Department</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <select class="select" id="accessControlFilter">
                                        <option value="">All Access Types</option>
                                        <option value="OPEN">Open Access</option>
                                        <option value="BADGE">Badge Access</option>
                                        <option value="KEY">Key Access</option>
                                        <option value="BIOMETRIC">Biometric Access</option>
                                        <option value="DUAL_CONTROL">Dual Control</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <select class="select" id="statusFilter">
                                        <option value="">All Status</option>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="temperatureControlledFilter">
                                        <label class="form-check-label" for="temperatureControlledFilter">
                                            Temperature Controlled Only
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="secureLocationFilter">
                                        <label class="form-check-label" for="secureLocationFilter">
                                            Secure Locations Only
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <a class="btn btn-filters ms-auto" onclick="applyFilters()">
                                        <i class="fas fa-search"></i>
                                    </a>
                                    <a class="btn btn-filters ms-2" onclick="clearFilters()">
                                        <i class="fas fa-times-circle"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Locations Table -->
                <div class="table-responsive">
                    <table class="table" id="locationsTable">
                        <thead>
                            <tr>
                                <th>
                                    <label class="checkboxs">
                                        <input type="checkbox" id="select-all">
                                        <span class="checkmarks"></span>
                                    </label>
                                </th>
                                <th>Location Code</th>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Building</th>
                                <th>Full Address</th>
                                <th>Access Control</th>
                                <th>Climate Control</th>
                                <th>Items</th>
                                <th>Manager</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for location in locations %}
                            <tr>
                                <td>
                                    <label class="checkboxs">
                                        <input type="checkbox" value="{{ location.id }}">
                                        <span class="checkmarks"></span>
                                    </label>
                                </td>
                                <td>{{ location.location_code }}</td>
                                <td>
                                    <div class="productimgname">
                                        <a href="{% url 'inventory:location_detail' location.id %}" class="product-img">
                                            <i class="fas fa-warehouse"></i>
                                        </a>
                                        <a href="{% url 'inventory:location_detail' location.id %}">{{ location.name }}</a>
                                    </div>
                                </td>
                                <td>
                                    <span class="badges bg-lightgreen">{{ location.get_location_type_display }}</span>
                                </td>
                                <td>{{ location.building|default:"-" }}</td>
                                <td>{{ location.full_address|default:"-" }}</td>
                                <td>
                                    {% if location.access_control == 'OPEN' %}
                                        <span class="badges bg-lightgrey">{{ location.get_access_control_display }}</span>
                                    {% elif location.access_control == 'BADGE' %}
                                        <span class="badges bg-lightblue">{{ location.get_access_control_display }}</span>
                                    {% elif location.access_control == 'BIOMETRIC' %}
                                        <span class="badges bg-lightred">{{ location.get_access_control_display }}</span>
                                    {% else %}
                                        <span class="badges bg-lightyellow">{{ location.get_access_control_display }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if location.temperature_controlled or location.humidity_controlled %}
                                        <span class="badges bg-lightgreen">
                                            {% if location.temperature_controlled %}Temp{% endif %}
                                            {% if location.humidity_controlled %}{% if location.temperature_controlled %}/{% endif %}Humidity{% endif %}
                                        </span>
                                    {% else %}
                                        <span class="badges bg-lightgrey">None</span>
                                    {% endif %}
                                </td>
                                <td>{{ location.total_items|default:0 }}</td>
                                <td>{{ location.location_manager.get_full_name|default:"-" }}</td>
                                <td>
                                    {% if location.is_active %}
                                        <span class="badges bg-lightgreen">Active</span>
                                    {% else %}
                                        <span class="badges bg-lightred">Inactive</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a class="me-3" href="{% url 'inventory:location_detail' location.id %}">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a class="me-3" href="{% url 'inventory:location_update' location.id %}">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a class="confirm-text" href="{% url 'inventory:location_delete' location.id %}">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="12" class="text-center">No locations found</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                {% include 'partial/pagination.html' %}
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize search functionality
    const searchInput = document.getElementById('searchInput');
    searchInput.addEventListener('keyup', function() {
        filterTable();
    });

    // Initialize select all checkbox
    const selectAllCheckbox = document.getElementById('select-all');
    selectAllCheckbox.addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });

    // Initialize filter toggle
    const filterButton = document.getElementById('filter_search');
    const filterPanel = document.getElementById('filter_inputs');
    filterButton.addEventListener('click', function() {
        if (filterPanel.style.display === 'none') {
            filterPanel.style.display = 'block';
        } else {
            filterPanel.style.display = 'none';
        }
    });
});

function filterTable() {
    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
    const table = document.getElementById('locationsTable');
    const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

    for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        const cells = row.getElementsByTagName('td');
        let found = false;

        // Skip empty state row
        if (cells.length === 1) continue;

        // Search in location code, name, type, building
        const searchableText = (
            cells[1].textContent + ' ' +  // Location code
            cells[2].textContent + ' ' +  // Name
            cells[3].textContent + ' ' +  // Type
            cells[4].textContent         // Building
        ).toLowerCase();

        if (searchableText.includes(searchTerm)) {
            found = true;
        }

        row.style.display = found ? '' : 'none';
    }
}

function applyFilters() {
    const locationTypeFilter = document.getElementById('locationTypeFilter').value;
    const buildingFilter = document.getElementById('buildingFilter').value;
    const accessControlFilter = document.getElementById('accessControlFilter').value;
    const statusFilter = document.getElementById('statusFilter').value;
    const temperatureControlledFilter = document.getElementById('temperatureControlledFilter').checked;
    const secureLocationFilter = document.getElementById('secureLocationFilter').checked;

    const table = document.getElementById('locationsTable');
    const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

    for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        const cells = row.getElementsByTagName('td');
        let show = true;

        // Skip empty state row
        if (cells.length === 1) continue;

        // Apply filters
        if (locationTypeFilter && !cells[3].textContent.includes(locationTypeFilter.replace('_', ' '))) {
            show = false;
        }

        if (buildingFilter && cells[4].textContent !== buildingFilter) {
            show = false;
        }

        if (statusFilter) {
            const isActive = cells[10].textContent.includes('Active');
            if ((statusFilter === 'active' && !isActive) || (statusFilter === 'inactive' && isActive)) {
                show = false;
            }
        }

        // Apply additional filters based on badges and content
        if (temperatureControlledFilter && !cells[7].textContent.includes('Temp')) {
            show = false;
        }

        if (secureLocationFilter && cells[6].textContent.includes('Open Access')) {
            show = false;
        }

        row.style.display = show ? '' : 'none';
    }

    console.log('Filters applied');
}

function clearFilters() {
    // Reset all filter inputs
    document.getElementById('locationTypeFilter').value = '';
    document.getElementById('buildingFilter').value = '';
    document.getElementById('accessControlFilter').value = '';
    document.getElementById('statusFilter').value = '';
    document.getElementById('temperatureControlledFilter').checked = false;
    document.getElementById('secureLocationFilter').checked = false;
    document.getElementById('searchInput').value = '';

    // Show all rows
    const table = document.getElementById('locationsTable');
    const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (let i = 0; i < rows.length; i++) {
        rows[i].style.display = '';
    }

    console.log('Filters cleared');
}

function exportToPDF() {
    console.log('Exporting locations to PDF...');
    alert('PDF export functionality would be implemented here.');
}

function exportToExcel() {
    console.log('Exporting locations to Excel...');
    alert('Excel export functionality would be implemented here.');
}

function printTable() {
    console.log('Printing locations table...');
    window.print();
}
</script>
{% endblock %}