{% extends "base.html" %}

{% block title %}Create New Digital Asset{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">Create New Digital Asset</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">Create New Asset</li>
    </ol>
    
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-plus-circle me-1"></i>
            Asset Details
        </div>
        <div class="card-body">
            <form id="createAssetForm" method="post" action="/assets/create">
                <!-- Basic Information -->
                <div class="mb-4">
                    <h5>Basic Information</h5>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="asset_type" class="form-label">Asset Type</label>
                            <select class="form-select" id="asset_type" name="asset_type" required>
                                {% for type_value, type_label in asset_types %}
                                <option value="{{ type_value }}">{{ type_label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="image_url" class="form-label">Image URL (optional)</label>
                            <input type="url" class="form-control" id="image_url" name="image_url">
                            <div class="form-text">URL to an image representing this asset</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="external_url" class="form-label">External URL (optional)</label>
                            <input type="url" class="form-control" id="external_url" name="external_url">
                            <div class="form-text">URL to an external resource for this asset</div>
                        </div>
                    </div>
                </div>
                
                <!-- Blockchain Information -->
                <div class="mb-4">
                    <h5>Blockchain Information (optional)</h5>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="has_blockchain_info" name="has_blockchain_info">
                        <label class="form-check-label" for="has_blockchain_info">
                            This asset has blockchain information
                        </label>
                    </div>
                    <div id="blockchainInfoSection" style="display: none;">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="blockchain" class="form-label">Blockchain</label>
                                <input type="text" class="form-control" id="blockchain" name="blockchain">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="token_id" class="form-label">Token ID</label>
                                <input type="text" class="form-control" id="token_id" name="token_id">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="contract_address" class="form-label">Contract Address</label>
                                <input type="text" class="form-control" id="contract_address" name="contract_address">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="owner_address" class="form-label">Owner Address</label>
                                <input type="text" class="form-control" id="owner_address" name="owner_address">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="transaction_hash" class="form-label">Transaction Hash (optional)</label>
                                <input type="text" class="form-control" id="transaction_hash" name="transaction_hash">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="block_number" class="form-label">Block Number (optional)</label>
                                <input type="number" class="form-control" id="block_number" name="block_number">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Initial Valuation -->
                <div class="mb-4">
                    <h5>Initial Valuation (optional)</h5>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="has_valuation" name="has_valuation">
                        <label class="form-check-label" for="has_valuation">
                            Add an initial valuation for this asset
                        </label>
                    </div>
                    <div id="valuationSection" style="display: none;">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="value" class="form-label">Value</label>
                                <input type="number" class="form-control" id="value" name="value" step="0.01">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="currency" class="form-label">Currency</label>
                                <input type="text" class="form-control" id="currency" name="currency" value="USD">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="source" class="form-label">Source</label>
                                <input type="text" class="form-control" id="source" name="source">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="valuation_notes" class="form-label">Notes</label>
                            <textarea class="form-control" id="valuation_notes" name="valuation_notes" rows="2"></textarea>
                        </div>
                    </div>
                </div>
                
                <!-- Metadata -->
                <div class="mb-4">
                    <h5>Additional Metadata (optional)</h5>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="has_metadata" name="has_metadata">
                        <label class="form-check-label" for="has_metadata">
                            Add additional metadata for this asset
                        </label>
                    </div>
                    <div id="metadataSection" style="display: none;">
                        <div class="mb-3">
                            <label for="metadata" class="form-label">Metadata (JSON format)</label>
                            <textarea class="form-control" id="metadata" name="metadata" rows="5"></textarea>
                            <div class="form-text">Enter additional metadata in JSON format</div>
                        </div>
                    </div>
                </div>
                
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <a href="/assets" class="btn btn-secondary me-md-2">Cancel</a>
                    <button type="submit" class="btn btn-primary">Create Asset</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle blockchain info section
        const hasBlockchainInfo = document.getElementById('has_blockchain_info');
        const blockchainInfoSection = document.getElementById('blockchainInfoSection');
        
        hasBlockchainInfo.addEventListener('change', function() {
            blockchainInfoSection.style.display = this.checked ? 'block' : 'none';
        });
        
        // Toggle valuation section
        const hasValuation = document.getElementById('has_valuation');
        const valuationSection = document.getElementById('valuationSection');
        
        hasValuation.addEventListener('change', function() {
            valuationSection.style.display = this.checked ? 'block' : 'none';
        });
        
        // Toggle metadata section
        const hasMetadata = document.getElementById('has_metadata');
        const metadataSection = document.getElementById('metadataSection');
        
        hasMetadata.addEventListener('change', function() {
            metadataSection.style.display = this.checked ? 'block' : 'none';
        });
        
        // Form validation
        const form = document.getElementById('createAssetForm');
        form.addEventListener('submit', function(event) {
            let isValid = true;
            
            // Validate required fields
            const name = document.getElementById('name').value.trim();
            const description = document.getElementById('description').value.trim();
            
            if (!name) {
                isValid = false;
                document.getElementById('name').classList.add('is-invalid');
            } else {
                document.getElementById('name').classList.remove('is-invalid');
            }
            
            if (!description) {
                isValid = false;
                document.getElementById('description').classList.add('is-invalid');
            } else {
                document.getElementById('description').classList.remove('is-invalid');
            }
            
            // Validate blockchain info if checked
            if (hasBlockchainInfo.checked) {
                const blockchain = document.getElementById('blockchain').value.trim();
                const tokenId = document.getElementById('token_id').value.trim();
                const contractAddress = document.getElementById('contract_address').value.trim();
                const ownerAddress = document.getElementById('owner_address').value.trim();
                
                if (!blockchain || !tokenId || !contractAddress || !ownerAddress) {
                    isValid = false;
                    if (!blockchain) document.getElementById('blockchain').classList.add('is-invalid');
                    if (!tokenId) document.getElementById('token_id').classList.add('is-invalid');
                    if (!contractAddress) document.getElementById('contract_address').classList.add('is-invalid');
                    if (!ownerAddress) document.getElementById('owner_address').classList.add('is-invalid');
                }
            }
            
            // Validate valuation if checked
            if (hasValuation.checked) {
                const value = document.getElementById('value').value.trim();
                const currency = document.getElementById('currency').value.trim();
                const source = document.getElementById('source').value.trim();
                
                if (!value || !currency || !source) {
                    isValid = false;
                    if (!value) document.getElementById('value').classList.add('is-invalid');
                    if (!currency) document.getElementById('currency').classList.add('is-invalid');
                    if (!source) document.getElementById('source').classList.add('is-invalid');
                }
            }
            
            // Validate metadata if checked
            if (hasMetadata.checked) {
                const metadata = document.getElementById('metadata').value.trim();
                
                if (metadata) {
                    try {
                        JSON.parse(metadata);
                        document.getElementById('metadata').classList.remove('is-invalid');
                    } catch (e) {
                        isValid = false;
                        document.getElementById('metadata').classList.add('is-invalid');
                    }
                }
            }
            
            if (!isValid) {
                event.preventDefault();
                alert('Please fix the errors in the form before submitting.');
            }
        });
    });
</script>

<style>
    .form-check-input:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
    
    .is-invalid {
        border-color: #dc3545;
    }
</style>
{% endblock %}