{% extends "::layout.html.twig" %}

{% block content %}
    <style>
        .file-media {
            width: 100%;
        }

        .delete-btn {
            float: right;
            width: 6%;
            position: absolute;
            right: 0;
        }

        hr {
            margin-top: 60px !important;
            margin-bottom: 20px;
            border: 0;
            border-top: 1px solid #eee;
        }
    </style>
    <!-- start: WIZARD DEMO -->
    <div class="container-fluid container-fullw bg-white">
        <div class="row">
            <div class="col-md-12">
                {#<h5 class="over-title margin-bottom-15">Wizard <span class="text-bold">demo</span></h5>
                <p>
                    Some textboxes in this example is required.
                </p>#}
                <!-- start: WIZARD FORM -->
                {{ form_start(form,{'attr': {'class': 'smart-wizard', 'id':'form'}}, {'method': 'post'}) }}
                {% include '@Demande/Demandeur/Request/form.html.twig' %}
                {{ form_end(form) }}
                <!-- end: WIZARD FORM -->
            </div>
        </div>
    </div>
    <!-- start: WIZARD DEMO -->
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% include 'DemandeBundle:Demandeur/Request:validationDemande.html.twig' %}
    <!-- Debut Recup Form -->
    <script type="text/javascript">
        var dateToday = new Date();
        $('form').on('change', function () {
            $('.deviation').html($('#create_request_typeD').val());
            $('.ramses').html($('#create_request_ramses').val());
            $('.dateE').html($('#create_request_dateE').val() + ' mois');
            $('.DesR').html($('#create_request_descriptionG').val());
            $('.Q1').html($('#create_request_what').val());
            $('.Q2').html($('#create_request_why').val());
            $('.Q3').html($('#create_request_who').val());
            $('.Q4').html($('#create_request_when').val());
            $('.DesA').html($('#create_request_description').val());
            $('.DesM').html($('#create_request_risqueD').val());
            var el1 = '<tr id="actionTR0"></tr>';
            var addTRLink1 = $('.Actions').append(el1);
            if ($('#create_request_actions_0_nom').val() !== '' && $('#create_request_actions_0_qui').val() !== '' && $('#create_request_actions_0_quand').val() !== '' && $('#create_request_actions_0_fait').val() !== '') {
                $("td.actionTR0").remove();
                var el2 = '<td class="actionTR0">' + $('#create_request_actions_0_nom').val() + '</td><td class="actionTR0 center">' + $('#create_request_actions_0_qui').val() + '</td><td class="actionTR0 center">' + $('#create_request_actions_0_quand').val() + '</td><td class="actionTR0 center">' + $('#create_request_actions_0_fait').val() + '</td>';
                addTRLink1.append(el2);
            }
            var count = $('.actionAddCount').attr('data-action');
            for (var i = 0; i < count; i++) {
                var el3 = '<tr id="actionTR' + i + '"></tr>';
                var addTRLink2 = $('.Actions').append(el3);
                if ($('#create_request_actions_' + i + '_nom').val() !== '' && $('#create_request_actions_' + i + '_qui').val() !== '' && $('#create_request_actions_' + i + '_quand').val() !== '' && $('#create_request_actions_' + i + '_fait').val() !== '') {
                    $("td.actionTR" + i).remove();
                    var el4 = '<td class="actionTR' + i + '">' + $('#create_request_actions_' + i + '_nom').val() + '</td><td class="actionTR' + i + ' center">' + $('#create_request_actions_' + i + '_qui').val() + '</td><td class="actionTR' + i + ' center">' + $('#create_request_actions_' + i + '_quand').val() + '</td><td class="actionTR' + i + ' center">' + $('#create_request_actions_' + i + '_fait').val() + '</td>';
                    addTRLink2.append(el4);
                }
            }
        });
    </script>
    <!-- Fin Recup Form -->
    <!-- Debut Prototype Medias -->
    <script type="text/javascript">
        var collectionHolder;
        var addMediasLink = $('<button class="btn btn-dark-azure btn-wide add_medias_link"> <i class="fa fa-plus"></i> {{ 'pages.form.b4Button'|trans }} </button>');
        var newLinkLi = $("div.medias").append(addMediasLink);
        jQuery(document).ready(function () {
            collectionHolder = $('div.medias');
            collectionHolder.append(newLinkLi);
            collectionHolder.data('index', collectionHolder.find('.medias').length);
            addMediasLink.on('click', function (e) {
                e.preventDefault();
                addMediaForm(collectionHolder, newLinkLi);
            });
        });

        function addMediaForm(collectionHolder, newLinkLi) {
            var index = collectionHolder.data('index');
            var prototype = collectionHolder.data('prototype1');
            var newForm = prototype.replace(/__name__/g, index);
            var newFormLi = $('<div class="medias' + index + '" style="width:90%;float:left"></div>').append(newForm);
            var count = parseInt(index) + 1;
            newLinkLi.before(newFormLi);
            addMediaFormDeleteLink(newFormLi, index);
            collectionHolder.data('index', index + 1);
            $('.mediasAddCount').attr('data-medias', count);
            for (var i = 0; i < count; i++) {
                $('#create_request_medias_' + i + " div").css({
                    "width": "40%",
                    "display": "inline-block",
                    "margin": "0 0 3% 3%"
                });
            }
        }

        function addMediaFormDeleteLink(tagFormLi, ind) {
            var removeFormA = $('<input type="button" class="btn btn-danger delete-btn" style="float: right;width: 10%" value="-"/>');
            tagFormLi.prepend(removeFormA);
            removeFormA.on('click', function (e) {
                tagFormLi.remove();
                var count = parseInt($('.mediasAddCount').attr('data-medias')) - 1;
                $('.mediasAddCount').attr('data-medias', count);
            });
        }
    </script>
    <!-- Fin Prototype Medias -->
    <!-- Debut Prototype Action -->
    <script type="text/javascript">
        jQuery(document).ready(function () {
            $('input[type="file"]').imageuploadify();
            var collectionHolder;
            var addActionLink = $('<button class="btn btn-dark-azure btn-wide add_action_link"> <i class="fa fa-plus"></i> {{ 'pages.form.b5Button'|trans }} </button>');
            var newLinkLi = $("div.actions").append(addActionLink);
            collectionHolder = $('div.actions');
            collectionHolder.append(newLinkLi);
            collectionHolder.data('index', collectionHolder.find('.action').length);
            addPremierActionForm(collectionHolder, newLinkLi);
            addActionLink.on('click', function (e) {
                addActionForm(collectionHolder, newLinkLi);
            });

        });

        function addPremierActionForm(collectionHolder, newLinkLi) {
            var prototype = collectionHolder.data('prototype');
            var index = collectionHolder.data('index');
            var newForm = prototype.replace(/__name__/g, index);
            var newFormLi = $('<fieldset class="designA action' + index + '"> <legend>Action N°1:</legend></fieldset>').append(newForm);
            newLinkLi.before(newFormLi);
            collectionHolder.data('index', index + 1);
        }

        function addActionForm(collectionHolder, newLinkLi) {
            var index = collectionHolder.data('index');
            var prototype = collectionHolder.data('prototype');
            var newForm = prototype.replace(/__name__/g, index);
            var count = parseInt(index) + 1;
            var newFormLi = $('<fieldset class="designA action' + index + '" style="margin-top:60px;"> <legend>Action N°' + count + ':</legend></fieldset>').append(newForm);
            newLinkLi.before(newFormLi);
            addActionFormDeleteLink(newFormLi, index);
            collectionHolder.data('index', index + 1);
            $('.actionAddCount').attr('data-action', count);
        }

        function addActionFormDeleteLink(tagFormLi, ind) {
            var removeFormA = $('<input type="button" class="btn btn-danger" style ="float: right;top:10px;" value="{{ 'pages.form.del'|trans }}"/>');
            tagFormLi.append(removeFormA);
            removeFormA.on('click', function (e) {
                tagFormLi.remove();
                $("hr#" + ind).remove();
                $("tr#actionTR" + ind).remove();
                $("td.actionTR" + ind).remove();
                var count = parseInt($('.actionAddCount').attr('data-action')) - 1;
                $('.actionAddCount').attr('data-action', count);
            });
        }
    </script>
    <!-- Fin Prototype Action -->

{% endblock %}