@extends('index')

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
    .configurator{
            list-style:none;
            margin:0;
            padding:0;
            margin-bottom:20px;
        }

        .configurator li{
            padding:20px 0;
            border-bottom:1px solid #ddd;
        }

        .configurator li .name input{
            margin-bottom:10px;

        }

        .configurator li .values{
            padding-top:15px;
        }

        .configurator li{
            margin-bottom:30px;
        }
        .configurator li .values .value{
            margin-bottom:5px;
        }
        .configurator li .values input{
            width:15%;
            display:inline-block;
        }
        .configurator li .value:hover{
            border-left:3px solid #418ecc;
            padding-left:5px;
            margin-left:-8px;
        }
        .configurator li .add{
            padding-top:10px;
        }

        .addsection{
            overflow:hidden;
            padding-right:20px;
        }
        body{
            padding:20px;
        }
        .move{
            padding:0 10px;
        }
        .configurator .name .form-control {
            height: auto;
            width: 95%;
            vertical-align: middle;
            display: inline-block;
        }
        .breadcrumb{
            background:none;
        }
        .breadcrumb li{
            margin-right:10px;
        }
        #ajax-content{
            background:#fff;
            padding: 0 10px 10px 10px;
        }
        .addsectionbutton {
            display: block;
            text-align: center;
            font-size: 18px;
            margin: 30px 0 20px;
        }
    </style>

<ul class="configurator" id="configurator-s">

</ul>

<ul class="configurator" id="configurator">

</ul>

<form action="/results/{{$competition->id_competitions}}/store" method="post" id="configurator">
    @csrf
    <textarea class="form-control" id="configurator-sTextarea" name="configurator-s"></textarea>
    <textarea class="form-control" id="configuratorTextarea" name="configurator"></textarea>
    <button class="btn btn-xs btn-primary saveProduct" type="submit">Zapisz</button>
    <a href="/results/{{$competition->id_competitions}}/preview" class="btn btn-xs btn-primary" type="submit">Podgląd</a>
    <a href="/results/{{$competition->id_competitions}}/pdf" class="btn btn-xs btn-primary" type="submit">Pobierz</a>

</form>
{{-- <div class="addsection">
    <a href="##" class="addsectionbutton"><i class="fa fa-plus-circle" aria-hidden="true"></i> Dodaj konkurencję</a>
</div> --}}


{{-- {{dd($competition)}} --}}
{{-- {{dd($form)}} --}}

<script>
    var priceFormulaParameters = @json($form);
    var priceFormulaParametersS = @json($formS);
</script>

<script>
    // var priceFormulaParameters = [];

        sectionTemplate = function($name, $desc, $comment){

            $desc =  $desc || '';
            $comment =  $comment || '';

            return  `
                <li>
                    <div class="name_values">
                        <div class="name">
                            <input style="font-weight:bold;" class="form-control" type="text" name="sectionName" placeholder="Nazwa konkurencji" value="${$name}"/><br/>
                        </div>
                        <div class="values">

                        </div>
                    </div>
                    <div class="add">
                        <a href="##" class="addvalues"><i class="fa fa-plus-circle" aria-hidden="true"></i> Dodaj</a>
                        <a style="margin-left:10px;" href="##" class="showhide"><i class="fa fa-eye" aria-hidden="true"></i> Ukryj/Pokaż sekcję</a>
                    </div>
                </li>`;
        }

        sectionValuesTemplate = function($Miejsce, $Nazwisko, $Imie, $Klub, $Wynik, $Uwagi, $Licencja, $UserId){
                return `
                <div class="value">
                    <a href="##" class="move"><i class="fa fa-arrows-v"></i></a>
                    <input type="hidden" name="UserId" value="${$UserId}"/>
                    <input style="width:10%;" class="form-control" type="text" name="Miejsce" placeholder="Miejsce" value="${$Miejsce}"/>
                    <input class="form-control" type="text" name="Nazwisko" placeholder="Nazwisko" value="${$Nazwisko}"/>
                    <input style="width:10%;" class="form-control" type="text" name="Imie" placeholder="Imię" value="${$Imie}"/>
                    <input style="width:10%;" class="form-control" type="text" name="Klub" placeholder="Klub" value="${$Klub}"/>
                    <input style="width:10%;" class="form-control" type="text" name="Licencja" placeholder="Licencja" value="${$Licencja}"/>
                    <input style="width:10%;" class="form-control" type="text" name="Wynik" placeholder="Wynik" value="${$Wynik}"/>
                    <input style="width:10%;" class="form-control" type="text" name="Uwagi" placeholder="Uwagi" value="${$Uwagi}"/>
                    <a style="color:#f00;margin-left:50px;" href="##" class="removeValue"><i class="fa fa-trash" aria-hidden="true"></i> usuń</a><a href="##" style="margin-left:10px;" class="cloneValue"><i class="fa fa-copy" aria-hidden="true"></i> klonuj</a>
                </div>
                `
        }

        sectionValuesTemplateS = function($function, $name, $class, $licence){
                return `
                <div class="value">
                    <a href="##" class="move"><i class="fa fa-arrows-v"></i></a>
                    <input style="width:15%;" class="form-control" type="text" name="function" placeholder="Funkcja sędziowska" value="${$function}"/>
                    <input class="form-control" type="text" name="name" placeholder="Imię i nazwisko" value="${$name}"/>
                    <input style="width:15%;" class="form-control" type="text" name="class" placeholder="Klasa sędziowska" value="${$class}"/>
                    <input style="width:15%;" class="form-control" type="text" name="licence" placeholder="Nr licencji" value="${$licence}"/>

                    <a style="color:#f00;margin-left:50px;" href="##" class="removeValue"><i class="fa fa-trash" aria-hidden="true"></i> usuń</a><a href="##" style="margin-left:10px;" class="cloneValue"><i class="fa fa-copy" aria-hidden="true"></i> klonuj</a>
                </div>
                `
        }

        getFormulaFromConfigurators = function(){
            $priceFormulaParameters = [];
            $('#configurator-s > li').each(function($j){
                $nameSection = $(this).find('[name=sectionName]').val();
                $priceFormulaParameters[$j] = {};
                $priceFormulaParameters[$j] = {
                    'name' : $nameSection,
                    'users' : [],
                };

                $(this).find('.values > .value').each(function($i){
                $priceFormulaParameters[$j].users[$i] = {};
                $priceFormulaParameters[$j].users[$i] = {
                    'function' : $(this).find("[name=function]").val(),
                    'name' : $(this).find("[name=name]").val(),
                    'class' : $(this).find("[name=class]").val(),
                    'licence' : $(this).find("[name=licence]").val(),
                }

                });
            })
            // return $priceFormulaParameters;
            return JSON.stringify($priceFormulaParameters);
        }

        getFormulaFromConfigurator = function(){
            $priceFormulaParameters = [];
            $('#configurator > li').each(function($j){
                $nameSection = $(this).find('[name=sectionName]').val();
                $priceFormulaParameters[$j] = {};
                $priceFormulaParameters[$j] = {
                    'name' : $nameSection,
                    'users' : [],
                };

                $(this).find('.values > .value').each(function($i){
                $priceFormulaParameters[$j].users[$i] = {};
                $priceFormulaParameters[$j].users[$i] = {
                    'lastname' : $(this).find("[name=Nazwisko]").val(),
                    'name' : $(this).find("[name=Imie]").val(),
                    'club' : $(this).find("[name=Klub]").val(),
                    'results' : $(this).find("[name=Wynik]").val(),
                    'comment' : $(this).find("[name=Uwagi]").val(),
                    'licence' : $(this).find("[name=Licencja]").val(),
                    'id' : $(this).find("[name=UserId]").val(),
                }

                });
            })
            // return $priceFormulaParameters;
            return JSON.stringify($priceFormulaParameters);
        }

        createConf = function(){
            for (const key in priceFormulaParameters) {
                if (priceFormulaParameters.hasOwnProperty(key)) {
                    const element = priceFormulaParameters[key];
                    $sectionTemplate = $(sectionTemplate(element.name,'', ''));

                    $wynik = 1;
                    for (const key2 in element.users) {
                        if (element.users.hasOwnProperty(key2)) {
                            const element2 = element.users[key2];
                            $sectionTemplate.find('.values').append(sectionValuesTemplate($wynik++, element2.lastname, element2.name, element2.club, element2.results, element2.comment, element2.licence, element2.id));
                        }
                    }

                    $('#configurator').append($sectionTemplate);
                }
            }

            for (const key in priceFormulaParametersS) {
                if (priceFormulaParametersS.hasOwnProperty(key)) {
                    const element = priceFormulaParametersS[key];
                    $sectionTemplate = $(sectionTemplate(element.name,'', ''));

                    for (const key2 in element.users) {
                        if (element.users.hasOwnProperty(key2)) {
                            const element2 = element.users[key2];
                            $sectionTemplate.find('.values').append(sectionValuesTemplateS(element2.function, element2.name, element2.class, element2.licence));
                        }
                    }

                    $('#configurator-s').append($sectionTemplate);
                }
            }
        }

        hideLoader = function(){
            $('#ajax_mask, #ajax_c').hide();
        }

        sortowanie = function(){
            $('#configurator li').each(function(){
            $i = 1;
            $(this).find('input[name="Miejsce"]').each(function(){
                $(this).val($i++);
            })
            });
        }
        // odpalenie konfiguratora funkcji
        createConf();

        $('#configurator').sortable({
                handle: '.move'
        });

        $('#configurator .values').sortable({
                handle: '.move',
                stop: function() {
                    sortowanie();
                }
        });

        $('#configurator-s .values').sortable({
                handle: '.move',
        });

        // zdarzenia
        $( "body" ).on( "click", ".addsectionbutton", function() {
            $('#configurator').append(sectionTemplate('Nazwa konkurencji', '',''));
            $('#configurator').sortable({
                    handle: '.move'
            });

            $('#configurator .values').sortable({
                    handle: '.move',
            });
            return false;
        });

        $( "body" ).on( "click", "#configurator .addvalues", function() {
            $(this).parents('li').find('.name_values .values').show().append(sectionValuesTemplate('', '', '', '', '', '', ''));
            sortowanie();
            return false;
        });

        $( "body" ).on( "click", "#configurator-s .addvalues", function() {
            $(this).parents('li').find('.name_values .values').show().append(sectionValuesTemplateS('', '', '', ''));
            return false;
        });

        $( "body" ).on( "click", ".showhide", function() {
            $(this).parents('li').find('.name_values .values').toggle('fast');
            return false;
        });

        $( "body" ).on( "click", ".removeSection", function() {
            var confirmText = "Czy usunąć sekcję ?";
            if(confirm(confirmText)) {
                $(this).parents('li').remove();
                sortowanie();
            }
            return false;
        });

        $( "body" ).on( "click", ".cloneSection", function() {
            $element = $(this).parents('li');
            $element.after($element.clone());
            sortowanie();
            return false;
        });

        $( "body" ).on( "click", ".removeValue", function() {
            var confirmText = "Czy usunąć wartość ?";
            if(confirm(confirmText)) {
                $(this).parent('div').remove();
                sortowanie();
            }
            return false;
        });

        $( "body" ).on( "click", ".cloneValue", function() {
            $element = $(this).parent('div.value');
            $element.after($element.clone());
            sortowanie();
            return false;
        });

        $( "body" ).on( "click", ".saveProduct", function() {
            $('#configurator-sTextarea').val(getFormulaFromConfigurators());
            $('#configuratorTextarea').val(getFormulaFromConfigurator());

            $('#configurator').submit();

            return true;
        });

        $( "body" ).on( "click", "#bc_save-template", function() {
            $('#priceFormulaFormTemplateTextarea').val(getFormulaFromConfigurator());
            // $('#priceFormulaForm').submit();
            // hideLoader();
            // return false;
        });


    </script>


{{-- {{dd($users)}} --}}
@endsection