{% extends 'base.html.twig' %}

{% block title %}IntraCrane - Projektkalkulation{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/admin.css') }}">
{% endblock %}
{% block logout %}
    {% if app.user %}
        <div class="userPP">
            <span>{{ app.user.username }}</span>
            <a href="{{ path('app_logout') }}">Logout</a>
        </div>
    {% endif %}
{% endblock %}
{% block body %}
    <div class="submenu fp-navPer">
        <ul class="links_section">
            <li><a href="{{ path('user_edit', {username: app.user.username}) }}" class="pdtmenu">Benutzerverwaltung</a></li><!--
            --><li class="select"><a href="{{ path('projektkalkulation') }}" class="pdtmenu">Projektkalkulation</a></li>{% if app.user.Groupw == 'Ott' %}<!--
            --><li><a href="{{ path('projektadministrierung') }}" class="pdtmenu" >Projektadministrierung</a></li>{% endif %}
        </ul>
    </div>
    <div class="containerHome submain fpContainer">
        <div id="kalkulation">
            <ul class="links_section">
                <li class="select" id="cal_section0"><a href="#" data-scroll="section0" class="pdtmenu select">Allgemeine Angaben</a><span class="arrow"></span></li><!--
                --><li id="cal_section1"><a href="#" id="was_is" data-scroll="section1" class="pdtmenu">Modulauswahi</a><span class="arrow"></span></li><!--
                --><li id="cal_section2"><a href="#" data-scroll="section2" class="pdtmenu" >Projektleistungen</a><span class="arrow"></span></li><!--
                --><li id="cal_section3"><a href="#" data-scroll="section3" class="pdtmenu" >Hardware</a><span class="arrow"></span></li><!--
                --><li id="cal_section4"><a id="cal" href="#" data-scroll="section4" class="pdtmenu" >Kalkulation</a><span class="arrow"></span></li>
            </ul>
        </div>
        <div id="items" style="position:relative;">
            <span class="before"></span>
            <div id="section0" class="section visible" data-pos="0">
                <div class="left calculation">
                    <label><span>Interessent:</span><input type="hidden" name="groupWID" id="groupWID" data-field="groupWID" value="{{ groupWID }}"><input type="text" name="interesting" id="interesting"></label>
                    <label class="required"><span>Land:</span><input type="text" name="country" required id="country"></label>
                    <label class="required"><span>Stadt:</span><input type="text" name="city" required id="city"></label>
                    <label class="required"><span>Bearbeiter:</span><input type="text" name="processor" required id="processor"></label>
                </div><!--
                --><div class="right calculation">
                    <label class="required"><span>Entfernung:</span><input type="number" name="distance" required id="distance"> Km</label>
                </div>
            </div>
            <div id="section1" class="section softwarepreise hidden" data-pos="1">
                <div class="left">
                    <div class="row"><div class="module">Module</div><div class="price">Preis</div><div class="number">Anzahl</div></div>
                    {{ include('items/_listItems.html.twig', {'items': itemsSoftware}) }}
                </div><!--
                --><div class="right calculation">
                    <label class="extra"><span>Extra Budget für Anpassungen:</span><input class="extraField" value="0" type="number" name="budgetSoft" id="budgetSoft"> €</label>
                    <label class="extra"><span>Beschreibung der Anpassungen:</span><textarea class="extraField" name="descriptionSoft" id="descriptionSoft"></textarea>
                </div>
            </div>
            <div id="section2" class="section projektleistungen hidden" data-pos="2">
                <div class="left">
                    <div class="row"><div class="module">Module</div><div class="price">Preis</div><div class="number">Anzahl</div></div>
                    {{ include('items/_listItems.html.twig', {'items': itemsProject}) }}
                </div><!--
                --><div class="right calculation">
                    <label class="extra"><span>Extra Budget für Anpassungen:</span><input class="extraField" value="0" type="number" name="budgetProj" id="budgetProj"> €</label>
                    <label class="extra"><span>Beschreibung der Anpassungen:</span><textarea class="extraField" name="descriptionProj" id="descriptionProj"></textarea>
                </div>
            </div>
            <div id="section3" class="section hardwarepreise hidden" data-pos="3">
                <div class="left">
                    <div class="row"><div class="module">Module</div><div class="price">Preis</div><div class="number">Anzahl</div></div>
                    {{ include('items/_listItems.html.twig', {'items': itemsHardware}) }}
                </div><!--
                --><div class="right calculation">
                    <label class="extra"><span>Extra Budget für Anpassungen:</span><input class="extraField" value="0" type="number" name="budgetHard" id="budgetHard"> €</label>
                    <label class="extra"><span>Beschreibung der Anpassungen:</span><textarea class="extraField" name="descriptionHard" id="descriptionHard"></textarea>
                </div>
            </div>
            <div id="section4" class="section hidden" data-pos="4">
                <div class="loading" style="display: none;"><img src="{{ asset('img/loader.gif') }}"></div>
                <div class="left calculation">
                    <label><span>Software:</span><span id="softFinal"></span></label>
                    <label><span>Hardware:</span><span id="hardFinal"></span></label>
                    <label><span>Projektleistungen:</span><span id="proFinal"></span></label>
                    <label><span>Intallation (inkl Reisekosten):</span><span id="insFinal"></span></label>
                    <button type="button" class="inp_button calFile">Herunterladen</button>
                </div>
            </div>
            <span class="after"></span>
        </div><!---->
    </div>

    <div class="modalcontainer infoS">
        <div class="flex">
            <div class="modalA infoS">
                <div class="close"><span>&#43;</span></div>
                <div class="content">
                    <h2 class="titleM">Information</h2>
                    <textarea maxlength="160" class="contentM" readonly></textarea>
                </div>
            </div>
        </div>
    </div>
{% endblock %}