{% extends "base.html" %}

{% block title %}Materials - 1D Poisson Simulator{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2><i class="bi bi-table"></i> Materials Database</h2>
        <p class="text-muted">Browse semiconductor material properties and calculate alloy compositions</p>
        <hr>
    </div>
</div>

<div class="row">
    <!-- Left Panel - Material List -->
    <div class="col-lg-3">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-list-ul"></i> Materials</h5>
            </div>
            <div class="card-body p-0">
                <!-- Search -->
                <div class="p-3 border-bottom">
                    <input type="text" class="form-control form-control-sm" id="materialSearch" 
                           placeholder="Search materials...">
                </div>
                
                <!-- Material List -->
                <div id="materialList" class="list-group list-group-flush">
                    <!-- Materials will be loaded here -->
                </div>
            </div>
        </div>
        
        <!-- Quick Actions -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-lightning-charge"></i> Quick Actions</h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button class="btn btn-outline-primary" id="calculateAlloyBtn">
                        <i class="bi bi-calculator"></i> Alloy Calculator
                    </button>
                    <button class="btn btn-outline-secondary" id="compareBtn">
                        <i class="bi bi-arrows-angle-contract"></i> Compare Materials
                    </button>
                    <button class="btn btn-outline-info" id="addCustomBtn">
                        <i class="bi bi-plus-circle"></i> Add Custom Material
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Right Panel - Material Details -->
    <div class="col-lg-9">
        <!-- Material Properties Card -->
        <div class="card" id="materialDetailsCard">
            <div class="card-header">
                <h5 class="mb-0" id="materialName">
                    <i class="bi bi-info-circle"></i> Select a material
                </h5>
            </div>
            <div class="card-body" id="materialDetails">
                <div class="alert alert-secondary">
                    <i class="bi bi-arrow-left"></i> Select a material from the list to view its properties
                </div>
            </div>
        </div>
        
        <!-- Alloy Calculator -->
        <div class="card mt-3" id="alloyCalculatorCard" style="display: none;">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-calculator"></i> Alloy Property Calculator</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <label for="alloySub" class="form-label">Substitutional Element</label>
                        <select class="form-select" id="alloySub">
                            <option value="">Select...</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="alloyBase" class="form-label">Base Material</label>
                        <select class="form-select" id="alloyBase">
                            <option value="">Select...</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="alloyComposition" class="form-label">Composition (x)</label>
                        <input type="number" class="form-control" id="alloyComposition" 
                               min="0" max="1" step="0.01" value="0.3">
                    </div>
                </div>
                
                <div class="mt-3">
                    <button class="btn btn-primary" id="calculateAlloyPropsBtn">
                        <i class="bi bi-calculator"></i> Calculate Properties
                    </button>
                </div>
                
                <div id="alloyResults" class="mt-3" style="display: none;">
                    <!-- Results will appear here -->
                </div>
            </div>
        </div>
        
        <!-- Temperature Calculator -->
        <div class="card mt-3" id="tempCalculatorCard" style="display: none;">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-thermometer-half"></i> Temperature Dependence</h5>
            </div>
            <div class="card-body">
                <div class="row align-items-end">
                    <div class="col-md-6">
                        <label for="tempValue" class="form-label">Temperature (K)</label>
                        <input type="number" class="form-control" id="tempValue" 
                               min="0" max="500" step="1" value="300">
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-primary" id="calcTempBtn">
                            <i class="bi bi-calculator"></i> Calculate Eg(T)
                        </button>
                    </div>
                </div>
                
                <div id="tempResults" class="mt-3">
                    <!-- Temperature results -->
                </div>
                
                <!-- Temperature sweep plot -->
                <div class="mt-3">
                    <canvas id="tempPlot" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
        
        <!-- Material Comparison -->
        <div class="card mt-3" id="comparisonCard" style="display: none;">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-arrows-angle-contract"></i> Material Comparison</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <label class="form-label">Material 1</label>
                        <select class="form-select" id="compareMat1">
                            <option value="">Select...</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Material 2</label>
                        <select class="form-select" id="compareMat2">
                            <option value="">Select...</option>
                        </select>
                    </div>
                </div>
                
                <div class="mt-3">
                    <button class="btn btn-primary" id="comparePropsBtn">
                        <i class="bi bi-arrows-angle-contract"></i> Compare
                    </button>
                </div>
                
                <div id="comparisonResults" class="mt-3 table-responsive" style="display: none;">
                    <!-- Comparison table -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modals -->

<!-- Custom Material Modal -->
<div class="modal fade" id="customMaterialModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Custom Material</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="customMaterialForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="customName" class="form-label">Material Name *</label>
                                <input type="text" class="form-control" id="customName" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="customEg" class="form-label">Band Gap E<sub>g</sub> (eV) *</label>
                                <input type="number" class="form-control" id="customEg" step="0.001" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="customMeGamma" class="form-label">m<sub>e</sub>* (m<sub>0</sub>)</label>
                                <input type="number" class="form-control" id="customMeGamma" step="0.001">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="customMhh" class="form-label">m<sub>hh</sub>* (m<sub>0</sub>)</label>
                                <input type="number" class="form-control" id="customMhh" step="0.001">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="customMlh" class="form-label">m<sub>lh</sub>* (m<sub>0</sub>)</label>
                                <input type="number" class="form-control" id="customMlh" step="0.001">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="customEpsilonStatic" class="form-label">ε<sub>static</sub></label>
                                <input type="number" class="form-control" id="customEpsilonStatic" step="0.1">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="customLattice" class="form-label">Lattice Constant (Å)</label>
                                <input type="number" class="form-control" id="customLattice" step="0.001">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="customNotes" class="form-label">Notes</label>
                        <textarea class="form-control" id="customNotes" rows="2"></textarea>
                    </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="saveCustomMaterialBtn">
                    <i class="bi bi-save"></i> Save Material
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_css %}
<style>
    .material-item {
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .material-item:hover {
        background-color: #f8f9fa;
    }
    
    .material-item.active {
        background-color: #e7f3ff;
        border-left: 3px solid #0d6efd;
    }
    
    .property-row {
        padding: 0.5rem 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .property-label {
        font-weight: 600;
        color: #495057;
    }
    
    .property-value {
        color: #212529;
        font-family: 'Courier New', monospace;
    }
    
    .property-unit {
        color: #6c757d;
        font-size: 0.9em;
    }
</style>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="{{ url_for('static', filename='js/materials.js') }}"></script>
{% endblock %}