{% extends "base.html" %}

{% block head %}
<meta name="csrf-token" content="{{ csrf_token() }}">
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Mold Cost Calculator</h2>
        {% if current_user.is_authenticated and current_user.is_admin %}
        <a href="{{ url_for('admin.dashboard') }}" class="btn btn-outline-primary">
            <i class="fas fa-cog me-2"></i>Admin Portal
        </a>
        {% endif %}
    </div>
    
    <form id="calcForm" class="row g-3" method="POST" action="/calculate">
        {{ form.csrf_token }}
        
        <!-- Factory Information -->
        <div class="card mb-4">
            <div class="card-body">
                <h6 class="card-title mb-3">Factory Information</h6>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.mold_shop_name.label(class="form-label") }}
                            {{ form.mold_shop_name(class="form-control") }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.mold_shop_country.label(class="form-label") }}
                            {{ form.mold_shop_country(class="form-control") }}
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.t1_shoe_factory_name.label(class="form-label") }}
                            {{ form.t1_shoe_factory_name(class="form-control") }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.t1_shoe_factory_country.label(class="form-label") }}
                            {{ form.t1_shoe_factory_country(class="form-control") }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.t2_component_factory_name.label(class="form-label") }}
                            {{ form.t2_component_factory_name(class="form-control") }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.t2_component_factory_country.label(class="form-label") }}
                            {{ form.t2_component_factory_country(class="form-control") }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mold Information -->
        <div class="card mb-4">
            <div class="card-body">
                <h6 class="card-title mb-3">Mold Information</h6>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.model_name.label(class="form-label") }}
                            {{ form.model_name(class="form-control") }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.tooling_id.label(class="form-label") }}
                            {{ form.tooling_id(class="form-control") }}
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form.season.label(class="form-label") }}
                            {{ form.season(class="form-control", id="season") }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form.stage.label(class="form-label") }}
                            {{ form.stage(class="form-control", id="stage") }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form.type.label(class="form-label") }}
                            {{ form.type(class="form-control", id="type") }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mold Specifications -->
        <div class="card mb-4">
            <div class="card-body">
                <h6 class="card-title mb-3">Mold Specifications</h6>
                <div class="row mb-3">
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form.mold_main_type.label(class="form-label") }}
                            {{ form.mold_main_type(class="form-control", id="mold_main_type") }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form.mold_sub_type.label(class="form-label") }}
                            {{ form.mold_sub_type(class="form-control", id="mold_sub_type") }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form.mold_specific_type.label(class="form-label") }}
                            {{ form.mold_specific_type(class="form-control", id="mold_specific_type") }}
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.sliders_count.label(class="form-label") }}
                            {{ form.sliders_count(class="form-control") }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.cavity_count.label(class="form-label") }}
                            {{ form.cavity_count(class="form-control") }}
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.digital_texture_type.label(class="form-label") }}
                            {{ form.digital_texture_type(class="form-control") }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.complexity_high_sidewall.label(class="form-label") }}
                            {{ form.complexity_high_sidewall(class="form-control") }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Dates & Approvals -->
        <div class="card mb-4">
            <div class="card-body">
                <h6 class="card-title mb-3">Dates & Approvals</h6>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.issue_date.label(class="form-label") }}
                            {{ form.issue_date(class="form-control", type="date") }}
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form.approved_by_mold_shop.label(class="form-label") }}
                            {{ form.approved_by_mold_shop(class="form-control") }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form.approved_by_t1_tooling.label(class="form-label") }}
                            {{ form.approved_by_t1_tooling(class="form-control") }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form.approved_by_lo_tooling.label(class="form-label") }}
                            {{ form.approved_by_lo_tooling(class="form-control") }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="text-center">
            <button type="submit" id="calculateBtn" class="btn btn-primary btn-lg">Calculate</button>
        </div>
    </form>
    
    <!-- Results Section -->
    <div id="result" class="mt-4"></div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script id="mold-calculator-script" src="{{ url_for('static', filename='js/mold_calculator.js', v='1.4') }}"></script>
{% endblock %}