{% extends "base.html" %}

{% block title %}Digital Assets List{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">Digital Assets</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="/assets">Digital Assets</a></li>
        <li class="breadcrumb-item active">All Assets</li>
    </ol>
    
    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-filter me-1"></i>
            Filter Assets
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label for="assetTypeFilter" class="form-label">Asset Type</label>
                    <select class="form-select" id="assetTypeFilter">
                        <option value="all">All Types</option>
                        <option value="NFT">NFT</option>
                        <option value="Token">Token</option>
                        <option value="RealEstate">Real Estate</option>
                        <option value="Commodity">Commodity</option>
                        <option value="Share">Share</option>
                        <option value="Bond">Bond</option>
                        <option value="IntellectualProperty">Intellectual Property</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="statusFilter" class="form-label">Status</label>
                    <select class="form-select" id="statusFilter">
                        <option value="all">All Statuses</option>
                        <option value="Active">Active</option>
                        <option value="Locked">Locked</option>
                        <option value="ForSale">For Sale</option>
                        <option value="Transferred">Transferred</option>
                        <option value="Archived">Archived</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="valuationFilter" class="form-label">Valuation</label>
                    <select class="form-select" id="valuationFilter">
                        <option value="all">All Valuations</option>
                        <option value="under1000">Under $1,000</option>
                        <option value="1000to10000">$1,000 - $10,000</option>
                        <option value="10000to100000">$10,000 - $100,000</option>
                        <option value="over100000">Over $100,000</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="searchInput" class="form-label">Search</label>
                    <input type="text" class="form-control" id="searchInput" placeholder="Search by name or description">
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <button id="applyFilters" class="btn btn-primary">Apply Filters</button>
                    <button id="resetFilters" class="btn btn-secondary">Reset</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Assets Table -->
    <div class="card mb-4">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-table me-1"></i>
                    All Digital Assets
                </div>
                <div>
                    <a href="/assets/create" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus"></i> Create New Asset
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover" id="assetsTable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Owner</th>
                            <th>Valuation</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for asset in assets %}
                        <tr class="asset-row" 
                            data-type="{{ asset.asset_type }}" 
                            data-status="{{ asset.status }}" 
                            data-valuation="{% if asset.current_valuation %}{{ asset.current_valuation }}{% else %}0{% endif %}">
                            <td>
                                {% if asset.image_url %}
                                <img src="{{ asset.image_url }}" alt="{{ asset.name }}" class="asset-thumbnail me-2">
                                {% endif %}
                                {{ asset.name }}
                            </td>
                            <td>{{ asset.asset_type }}</td>
                            <td>
                                {% if asset.status == "Active" %}
                                    <span class="badge bg-success">{{ asset.status }}</span>
                                {% elif asset.status == "For Sale" %}
                                    <span class="badge bg-warning">{{ asset.status }}</span>
                                {% elif asset.status == "Locked" %}
                                    <span class="badge bg-secondary">{{ asset.status }}</span>
                                {% elif asset.status == "Transferred" %}
                                    <span class="badge bg-info">{{ asset.status }}</span>
                                {% elif asset.status == "Archived" %}
                                    <span class="badge bg-danger">{{ asset.status }}</span>
                                {% else %}
                                    <span class="badge bg-primary">{{ asset.status }}</span>
                                {% endif %}
                            </td>
                            <td>{{ asset.owner_name }}</td>
                            <td>
                                {% if asset.current_valuation %}
                                    {{ asset.valuation_currency }}{{ asset.current_valuation }}
                                {% else %}
                                    N/A
                                {% endif %}
                            </td>
                            <td>{{ asset.created_at }}</td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="/assets/{{ asset.id }}" class="btn btn-sm btn-primary">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    {% if asset.status == "Active" %}
                                    <button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#statusModal" data-asset-id="{{ asset.id }}">
                                        <i class="fas fa-exchange-alt"></i>
                                    </button>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Status Change Modal -->
<div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="statusModalLabel">Change Asset Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="statusForm" method="post" action="">
                    <div class="mb-3">
                        <label for="newStatus" class="form-label">New Status</label>
                        <select class="form-select" id="newStatus" name="status">
                            <option value="Active">Active</option>
                            <option value="Locked">Locked</option>
                            <option value="ForSale">For Sale</option>
                            <option value="Transferred">Transferred</option>
                            <option value="Archived">Archived</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveStatusBtn">Save Changes</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Status modal functionality
        const statusModal = document.getElementById('statusModal');
        if (statusModal) {
            statusModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const assetId = button.getAttribute('data-asset-id');
                const form = document.getElementById('statusForm');
                form.action = `/assets/${assetId}/status/`;
            });
            
            const saveStatusBtn = document.getElementById('saveStatusBtn');
            saveStatusBtn.addEventListener('click', function() {
                const form = document.getElementById('statusForm');
                const newStatus = document.getElementById('newStatus').value;
                form.action = form.action + newStatus;
                form.submit();
            });
        }
        
        // Filtering functionality
        const applyFilters = document.getElementById('applyFilters');
        if (applyFilters) {
            applyFilters.addEventListener('click', function() {
                filterAssets();
            });
        }
        
        const resetFilters = document.getElementById('resetFilters');
        if (resetFilters) {
            resetFilters.addEventListener('click', function() {
                document.getElementById('assetTypeFilter').value = 'all';
                document.getElementById('statusFilter').value = 'all';
                document.getElementById('valuationFilter').value = 'all';
                document.getElementById('searchInput').value = '';
                filterAssets();
            });
        }
        
        const searchInput = document.getElementById('searchInput');
        if (searchInput) {
            searchInput.addEventListener('keyup', function(event) {
                if (event.key === 'Enter') {
                    filterAssets();
                }
            });
        }
        
        function filterAssets() {
            const typeFilter = document.getElementById('assetTypeFilter').value;
            const statusFilter = document.getElementById('statusFilter').value;
            const valuationFilter = document.getElementById('valuationFilter').value;
            const searchText = document.getElementById('searchInput').value.toLowerCase();
            
            const rows = document.querySelectorAll('#assetsTable tbody tr');
            
            rows.forEach(row => {
                const type = row.getAttribute('data-type');
                const status = row.getAttribute('data-status');
                const valuation = parseFloat(row.getAttribute('data-valuation'));
                const name = row.querySelector('td:first-child').textContent.toLowerCase();
                
                let typeMatch = typeFilter === 'all' || type === typeFilter;
                let statusMatch = statusFilter === 'all' || status === statusFilter;
                let searchMatch = searchText === '' || name.includes(searchText);
                
                let valuationMatch = true;
                if (valuationFilter === 'under1000') {
                    valuationMatch = valuation < 1000;
                } else if (valuationFilter === '1000to10000') {
                    valuationMatch = valuation >= 1000 && valuation < 10000;
                } else if (valuationFilter === '10000to100000') {
                    valuationMatch = valuation >= 10000 && valuation < 100000;
                } else if (valuationFilter === 'over100000') {
                    valuationMatch = valuation >= 100000;
                }
                
                if (typeMatch && statusMatch && valuationMatch && searchMatch) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }
    });
</script>

<style>
    .asset-thumbnail {
        width: 30px;
        height: 30px;
        object-fit: cover;
        border-radius: 4px;
    }
</style>
{% endblock %}