@extends('layouts.sygnalista_start')


@section('title','Zgłoszenia Sygnalista')
@section('organizacja',' - Sygnalista - Panel zgłoszeniowy')

@section('content')

@php

        $grupa_lp = 1;
        $dziedzina_lp = 1;
        $array_dziedziny[] = "";


        $form_grupy = DB::connection('mysql-2')->table('zs101_sygnalista_grupy')
        ->get();

        $form_dziedziny = DB::connection('mysql-2')->table('zs100_sygnalista_dziedziny')
        ->get();





@endphp





<!-- Font-->
<link rel="stylesheet" type="text/css" href="{{ asset('/library/_forms_wizards/27/css/opensans-font.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('/library/_forms_wizards/27/css/montserrat-font.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('/library/_forms_wizards/27/fonts/material-design-iconic-font/css/material-design-iconic-font.min.css') }}">
<!-- Main Style Css -->
<link rel="stylesheet" href="{{ asset('/library/_forms_wizards/27/css/style_2.css') }}"/>



<div class="page-content">

    <div class="wizard-v7-content">
        <div class="wizard-form">
            <form id="form_sygnalista_add" onsubmit="return validate_FormSygnalista(this)" action="{{ route('sygnalista_add_save') }}" class="form-register" method="POST" enctype="multipart/form-data" >

                @csrf
    <!-- SECTION 1 -->
                    <h2>
                        <p class="step-icon"><span>1</span></p>
                        <div class="step-text">
                            <span class="step-inner-1">Tożsamość</span>
                            <span class="step-inner-2"></span>
                        </div>
                    </h2>
                    <section>
                        <div class="inner">
                            <div class="wizard-header">
                                <h3 class="heading">Tożsamość</h3>
                            </div>

                            <div class="my_WizardOpis">
                                <span class="checkmark">Informacja o zgłaszającym nieprawidłowość</span>
                                <hr/>
                            </div>

                            <div id="CheckBoxGroupFrame_tab_11" class="my_GroupCheckBoxes">
                                <div class="">
                                    <div class="form-group form-inline col-md-10 offset-md-1">
                                        <input class="my_CheckBox" id="tab_11" type="checkbox" name="checkbox_tozsamosc" onclick="my_ChangeValueCheckbox_1(this);" value="0">
                                        <span class="checkmark"></span>
                                        <label class="my_FormLabel_Checkbox" for="your_email">Zgłoszenia chcę dokonać anonimowo.</label>
                                    </div>
                                </div>

                                <div class="">
                                    <div class="form-group form-inline col-md-10 offset-md-1">
                                        <input class="my_CheckBox" id="tab_12" type="checkbox" name="checkbox_tozsamosc" onclick="my_ChangeValueCheckbox_1(this);" value="1">
                                        <span class="checkmark"></span>
                                        <label class="my_FormLabel_Checkbox" for="your_email">Zgłoszenia chcę dokonać podając swoje dane osobowe.</label>
                                    </div>
                                </div>




                                <div id="tab_1_sygnalista_dane" class="my_sygnalista_dane">
                                    <div class="">
                                        <div class="form-group form-inline">
                                            <label class="my_FormLabel" for="tab1_imie">Imię:</label>
                                            <input type="text" name="tab1_imie" id="tab1_imie" class="form-control my_FormInput required" placeholder="Imię">
                                        </div>
                                    </div>
                                    <div class="">
                                        <div class="form-group form-inline">
                                            <label class="my_FormLabel" for="tab1_nazwisko">Nazwisko:</label>
                                            <input type="text" name="tab1_nazwisko" id="tab1_nazwisko" class="form-control my_FormInput required" placeholder="Nazwisko" >
                                        </div>
                                    </div>
                                    <div class="">
                                        <div class="form-group form-inline">
                                            <label class="my_FormLabel" for="tab1_email">Email:</label>
                                            <input type="email" name="tab1_email" id="tab1_email" class="form-control my_FormInput required" placeholder="adres@email.com" >
                                        </div>
                                    </div>
                                    <div class="">
                                        <div class="form-group form-inline">
                                            <label class="my_FormLabel" for="tab1_telefon">Telefon:</label>
                                            <input type="number" name="tab1_telefon" id="tab1_telefon" class="form-control my_FormInput" placeholder="48885234234 (9 - 11 cyfr)" >
                                        </div>
                                    </div>
                                    <!-- /*
                                    <div class="">
                                        <div class="form-group form-inline">
                                            <label class="my_FormLabel" for="tab1_password">Hasło</label>
                                            <input type="password" name="tab1_password" id="tab1_password" class="form-control my_FormInput required" placeholder="Ustal Hasło" >
                                        </div>
                                    </div>
                                    <div class="">
                                        <div class="form-group form-inline">
                                            <label class="my_FormLabel" for="tab1_password2">Powtórz Hasło</label>
                                            <input type="password" name="tab1_password2" id="tab1_password2" class="form-control my_FormInput required" placeholder="Powtórz Hasło" >
                                        </div>
                                    </div>
                                    */ -->
                                    <hr/>
                                    <div id="CheckBoxGroupFrame_tab_13" class="my_GroupCheckBoxes">
                                        <div class="">
                                            <div class="form-group form-inline col-md-10 offset-md-1">
                                                <input class="my_CheckBox" id="tab_13" type="checkbox" name="checkbox_zgoda" onclick="my_ChangeValueCheckbox_13(this);" value="1">
                                                <span class="checkmark"></span>
                                                <label class="my_FormLabel_Checkbox" for="your_email">Wyrażam zgodę na przetwarzanie podanych przeze mnie danych w celu kontaktu i obsługi niniejszego zgłoszenia.</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </section>
    <!-- SECTION 2 -->
                    <h2>
                        <p class="step-icon"><span>2</span></p>
                        <div class="step-text">
                            <span class="step-inner-1">Przynależność</span>
                        </div>
                    </h2>
                    <section>
                        <div class="inner">
                            <div class="wizard-header">
                                <h3 class="heading">Przynależność</h3>
                            </div>

                            <div class="my_WizardOpis">
                                <span class="checkmark">Informację o nieprawidłowości uzyskałem reprezentując grupę:</span>
                                <hr/>
                            </div>

                            <div id="CheckBoxGroupFrame_tab_21" class="my_GroupCheckBoxes">
                                <input type="hidden" id="tab_2_input" value="">
                                @foreach ( $form_grupy as $item )
                                    <div class="">

                                        @if ($item->id != '9')
                                            <div class="form-group form-inline col-md-10 offset-md-1">
                                                <input class="my_CheckBox" type="checkbox" id="tab_2{{ $grupa_lp++ }}" value="{{ $item->id }}"
                                                name="checkbox_przynaleznosc[]" onclick="my_ChangeValueCheckbox_2(this); SetValueHiddenInput('tab_2_input','{{ $item->grupa_nazwa_biernik }}')">
                                                <span class="checkmark"></span>
                                                <label class="my_FormLabel_Checkbox" for="checkbox">{{ $item->grupa_nazwa_biernik }}</label>
                                            </div>
                                        @else
                                            <div class="form-group form-inline col-md-10 offset-md-1 my_FormLabel_Error">
                                                <input class="my_CheckBox" type="checkbox" id="tab_2{{ $grupa_lp++ }}" value="{{ $item->id }}"
                                                name="checkbox_przynaleznosc[]" onclick="my_ChangeValueCheckbox_2(this);">
                                                <span class="checkmark"></span>
                                                <label class="my_FormLabel_Checkbox my_FormLabel_OptionalInput" for="checkbox">{{ $item->grupa_nazwa_biernik }}</label>

                                                <div id="tab_2_sygnalista_dane">
                                                    <br/>
                                                    <input class="form-control my_FormOptionalInput" id="tab_2_opis" type="text" name="przynaleznosc_inne_opis" placeholder="Wprowadź opis grupy którą reprezentujesz" size="60" onblur="SetValueHiddenInput('tab_2_input',this.value)">
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach

                            </div>

                        </div>
                    </section>
    <!-- SECTION 3 -->
                    <h2>
                        <p class="step-icon"><span>3</span></p>
                        <div class="step-text">
                            <span class="step-inner-1">Obszar</span>
                        </div>
                    </h2>
                    <section>
                        <div class="inner">
                            <div class="wizard-header">
                                <h3 class="heading">Obszar</h3>
                            </div>

                            <div class="my_WizardOpis">
                                <span class="checkmark">Nieprawidłowości dotyczą następujących dziedzin:</span>
                                <hr/>
                            </div>

                            <div id="CheckBoxGroupFrame_tab_31" class="my_GroupCheckBoxes">
                                <input type="hidden" id="tab_3_input" value="">
                                @foreach ( $form_dziedziny as $item )
                                    <div class="">
                                        @if ($item->id != '12')
                                            <div class="form-group form-inline col-md-10 offset-md-1">
                                                <input class="my_CheckBox" type="checkbox" id="tab_3{{ $dziedzina_lp++ }}" value="{{ $item->id }}"
                                                name="checkbox_obszar[]" onclick="my_ChangeValueCheckbox_3(this); SetValueHiddenInput('tab_3_input','{{ $item->dziedzina_nazwa_biernik }}')">
                                                <span class="checkmark"></span>
                                                <label class="my_FormLabel_Checkbox" for="checkbox">{{ $item->dziedzina_nazwa_biernik }}</label>
                                            </div>
                                        @else
                                            <div class="form-group form-inline col-md-10 offset-md-1 my_FormLabel_Error">
                                                <input class="my_CheckBox" type="checkbox" id="tab_3{{ $dziedzina_lp++ }}" value="{{ $item->id }}"
                                                name="checkbox_obszar[]" onclick="my_ChangeValueCheckbox_3(this);">
                                                <span class="checkmark"></span>
                                                <label class="my_FormLabel_Checkbox my_FormLabel_OptionalInput" for="checkbox">{{ $item->dziedzina_nazwa_biernik }}</label>
                                                <div id="tab_3_sygnalista_dane">
                                                    <br/>
                                                    <input class="form-control my_FormOptionalInput" id="tab_3_opis" type="text" name="obszar_inne_opis" placeholder="Wprowadź opis obszaru którego dotyczy zgłoszenie" size="60"  onblur="SetValueHiddenInput('tab_3_input',this.value)">
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach

                                <!-- /*
                                <div class="">
                                    <div class="form-group form-inline col-md-10 offset-md-1">
                                        <input class="my_CheckBox" id="tab_31" type="checkbox" name="checkbox_obszar" onclick="my_ChangeValueCheckbox_3(this);">
                                        <span class="checkmark"></span>
                                        <label class="my_FormLabel_Checkbox" for="checkbox">Zamówienia publiczne</label>
                                    </div>
                                </div>
                                */ -->

                            </div>

                        </div>
                    </section>
    <!-- SECTION 4 -->
                    <h2>
                        <p class="step-icon"><span>4</span></p>
                        <div class="step-text">
                            <span class="step-inner-1">Osoba</span>
                            <span class="step-inner-2"></span>
                        </div>
                    </h2>
                    <section>
                        <div class="inner">
                            <div class="wizard-header">
                                <h3 class="heading">Osoba</h3>
                            </div>

                            <div class="my_WizardOpis">
                                <span class="checkmark">Wymień osobę lub osoby, które dopuściły się nieprawidłowości:</span>
                                <hr/>
                            </div>


                                <div class="">

                                    <div class="form-group form-inline my_FormLabel_Error" style="align-items: flex-start !important;">
                                        <label class="my_FormLabel" for="tab4_opis">Imię, Nazwisko, Stanowisko:</label>
                                        <textarea id="tab4_opis_id" name="tab4_opis" class="form-control my_FormInput" placeholder="Wprowadź informacje ..." rows="10" autofocus></textarea>
                                        <label id="tab4_opis_id-error" class="error" for="tab4_opis_id"></label>

                                    </div>
                                </div>



                        </div>
                    </section>
    <!-- SECTION 5 -->
                    <h2>
                        <p class="step-icon"><span>5</span></p>
                        <div class="step-text">
                            <span class="step-inner-1">Opis</span>
                            <span class="step-inner-2"></span>
                        </div>
                    </h2>
                    <section>
                        <div class="inner">
                            <div class="wizard-header">
                                <h3 class="heading">Opis</h3>
                            </div>

                            <div class="">
                                <span class="checkmark">Opisz wszystko co wiesz na temat zgłaszanej nieprawidłowości (co, gdzie, kiedy, w jaki sposób):</span>
                                <hr/>
                            </div>


                                <div class="">
                                    <div class="form-group form-inline my_FormLabel_Error" style="align-items: flex-start !important;">
                                        <label class="my_FormLabel" for="tab5_opis_id">Opis:</label>
                                        <textarea id="tab5_opis_id" name="tab_5_opis" class="form-control my_FormInput" placeholder="Opisz nieprawidłowość ..." rows="18" autofocus ></textarea>
                                        <label id="tab5_opis_id-error" class="error" for="tab5_opis_id"></label>
                                    </div>
                                </div>



                        </div>
                    </section>
<!-- SECTION 6 -->
                    <h2>
                        <p class="step-icon"><span>6</span></p>
                        <div class="step-text">
                            <span class="step-inner-1">Dokumenty</span>
                            <span class="step-inner-2"></span>
                        </div>
                    </h2>
                    <section>
                        <div class="inner">
                            <div class="wizard-header">
                                <h3 class="heading">Dokumenty</h3>
                            </div>

                            <div class="my_WizardOpis">
                                <span class="checkmark">Jeżeli posiadasz dowody na temat zgłaszanej nieprawidłowości załącz je tutaj.</span><br/>
                                <span class="checkmark">Możesz też wskazać miejsce gdzie takie dowody można znaleźć:</span>
                                <hr/>
                            </div>


                                <div class="">
                                    <div class="form-group form-inline" style="align-items: flex-start !important;">
                                        <label class="my_FormLabel" for="your_email">Miejsce gdzie znajdują się dowody:</label>
                                        <textarea id="tab6_opis_id" name="tab_6_opis" class="form-control my_FormInput" placeholder="Opisz miejsce ..." rows="5" autofocus ></textarea>
                                    </div>
                                </div>

                                <div class="">
                                    <div class="form-group form-inline">
                                        <label class="my_FormLabel" for="formFileMultiple">Dodaj pliki:</label>
                                        <input class="form-control my_FormInput my_FormFile" type="file" name="file[]" id="file" multiple placeholder="doc|docx|xls|xlsx|odf|odt|pdf|png|jpeg|jpg"/>
                                    </div>
                                </div>

                                <hr/>

                                <div class="">
                                    <p>Rodzaje plików jakie możesz dodać to: doc|docx|xls|xlsx|odt|pdf|png|jpeg|jpg</p>
                                </div>


                        </div>
                    </section>
<!-- SECTION 7 -->
                    <h2>
                        <p class="step-icon"><span>7</span></p>
                        <div class="step-text">
                            <span class="step-inner-1">Zakończenie</span>
                            <span class="step-inner-2"></span>
                        </div>
                    </h2>
                    <section id="form_sygnalista_add-p-6">
                        <div class="inner">
                            <div class="wizard-header">
                                <h3 class="heading">Zakończenie</h3>
                            </div>

                            <div class="my_WizardOpis">
                                <span class="checkmark">Zakończono wprowadzanie zgłoszenia.</span><br/>
                                <span class="checkmark">Sprawdź poprawność wprowadzonych informacji.</span><br/>
                                <span class="checkmark">Jeżeli wszystko w zgłoszeniu jest wprowadzone prawidłowo, zatwierdź zgłoszenie przyciskiem <u><b>Wyślij</b></u></span>
                                <hr/>
                            </div>



                            <div class="my_SygnalistaStatusLeft">
                                <div class="row">
                                    <div class="my_SygnalistaSubtitle col-md-12">Szczegóły Zgłoszenia</div>
                                    <div class="col-md-6" style="text-align: end;" hidden><a type="button" class="btn btn-success" href="{{ url('/SignallerNewMessage') }}" >Nowa Wiadomość</a></div>
                                </div>
                                <hr>

                                <div class="table-responsive table-wrapper-scroll-y my_SygnalistaStatusDiv" style="overflow-y: scroll; height: 360px;">
                                    <table class="table table-sm table-striped my_SygnalistaStatusTable">
                                        <tr>
                                            <th class="my_SygnalistaStatusTableNoTopBorder">Zgłoszono jako: </th>
                                            <td class="my_SygnalistaStatusTableNoTopBorder" style="text-align: left;">
                                                <p id="input_1"></p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Reprezentowana Grupa: </th>
                                            <td style="text-align: left;">
                                                <p id="input_2"></p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Obszar zgłoszenia: </th>
                                            <td style="text-align: left;">
                                                <p id="input_3"></p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Wskazana/(e) Osoba/(y): </th>
                                            <td style="text-align: left;">
                                                <p id="input_4"></p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Opis naruszenia:</th>
                                            <td style="text-align: left;">
                                                <p id="input_5"></p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Gdzie znajdują się dowody: </th>
                                            <td style="text-align: left;">
                                                <p id="input_6"></p>
                                            </td>
                                        </tr>
                                        <!-- /* Wyświetlanie plików */ -->
                                        <tr>
                                            <th>Załączone dokumenty: </th>
                                            <td style="text-align: left;">
                                                <p id="input_7"></p>
                                            </td>
                                        </tr>

                                    </table>
                                  </div>


                            </div>



                        </div>
                    </section>
<!-- SECTION 8 -->

            </form>
        </div>
    </div>
</div>
<script src="{{ asset('/library/jquery-validation/dist/jquery.validate.min.js') }}"></script>
<script src="{{ asset('/library/jquery-validation/dist/additional-methods.min.js') }}"></script>
<script src="{{ asset('/library/jquery-validation/dist/localization/messages_pl.min.js') }}"></script>

<script src="{{ asset('/library/jquery-steps/jquery.steps.js') }}"></script>
<script src="{{ asset('/js/wizard.sygnalista_add.main.validate.js') }}"></script>



<script type="text/javascript">
    $(document).ready(function() {
        $(".btn-success").click(function(){
            var lsthmtl = $(".clone").html();
            $(".increment").after(lsthmtl);
        });
        $("body").on("click",".btn-danger",function(){$(this).parents(".hdtuto control-group lst").remove();
        });
    });
</script>

<script>



    // Zapobiega cofnięciu się do poprzedniej strony
    //javascript:window.history.forward(1);
    //javascript:window.location.replace(this.href);

/*
    $("a").on('click',function(){
        var links=document.getElementsByTagName('a'), hrefs = [];
        for (var i = 0; i<links.length; i++)
        {
            hrefs.push(links[i].href);
        }

        alert(hrefs);
    });

    $("a").on('click',function(){
        // Tab 1
        var tab1_value = document.getElementById("tab1").value;
        if(tab1_value < 1) {
            $("#tab1_GroupCheckBoxes").addClass("error2");
        }else{
            $("#tab1_GroupCheckBoxes").removeClass("error2"); // Set Disable style
        }

        // Tab 2
        var tab2_value = document.getElementById("tab2").value;
        if(tab2_value < 1) {
            $("#tab2_GroupCheckBoxes").addClass("error2");
        }else{
            $("#tab2_GroupCheckBoxes").removeClass("error2"); // Set Disable style
        }

        // Tab 3
        var tab3_value = document.getElementById("tab3").value;
        if(tab3_value < 1) {
            $("#tab3_GroupCheckBoxes").addClass("error2");
        }else{
            $("#tab3_GroupCheckBoxes").removeClass("error2"); // Set Disable style
        }


    });

*/
    function isCheckedById(id){
        var el = document.getElementById(id);
        return !!(el && el.checked);
    }

    function isRelatedCheckboxChecked(inputContainerId, checkboxName){
        var inputContainer = document.getElementById(inputContainerId);
        if(!inputContainer){
            return false;
        }

        var formGroup = inputContainer.closest('.form-group');
        if(!formGroup){
            return false;
        }

        var checkbox = formGroup.querySelector('input[name="' + checkboxName + '"]');
        return !!(checkbox && checkbox.checked);
    }

    function refreshOptionalSections(){
        // Tab 1
        $('#tab_1_sygnalista_dane').prop("hidden", !isCheckedById('tab_12'));

        // Tab 2
        $('#tab_2_sygnalista_dane').prop("hidden", !isRelatedCheckboxChecked('tab_2_sygnalista_dane', 'checkbox_przynaleznosc[]'));

        // Tab 3
        $('#tab_3_sygnalista_dane').prop("hidden", !isRelatedCheckboxChecked('tab_3_sygnalista_dane', 'checkbox_obszar[]'));
    }

    $(document).ready(function(){
        refreshOptionalSections();
    });



    function my_ChangeValueCheckbox_1(o){

        var o;

        // Tab 1
        $("#tab_11").prop("checked", false);
        $("#tab_12").prop("checked", false);
        $(o).prop("checked", true);

        $("#CheckBoxGroupFrame_tab_11").removeClass("error2"); // Set Disable style

        refreshOptionalSections();
    }

    function my_ChangeValueCheckbox_13(o){

        var o;
        // Tab 1
        $("#CheckBoxGroupFrame_tab_13").removeClass("error2"); // Set Disable style
    }

    function my_ChangeValueCheckbox_2(o){

        var o;

        // Tab 2
        var tab2_checkboxes = document.getElementsByName('checkbox_przynaleznosc[]');

        for(var i=0, n=tab2_checkboxes.length;i<n;i++) {
            tab2_checkboxes[i].checked = false;
        }

        $(o).prop("checked", true);
        $("#CheckBoxGroupFrame_tab_21").removeClass("error2"); // Set Disable style

        refreshOptionalSections();

    }

    function my_ChangeValueCheckbox_3(o){

        var o;

        // Tab 3
        $("#CheckBoxGroupFrame_tab_31").removeClass("error2"); // Set Disable style

        refreshOptionalSections();
    }


    function SetValueHiddenInput(InputName,SetValue){
        var InputName;
        var SetValue;
        //alert(InputName + " | " + SetValue);
        $('#'+ InputName ).val(SetValue);
    }

    function validate_FormSygnalista(){
        return true;
    }
/*
        // Forma przetwarzania
        if(!form.op1.checked && !form.op2.checked){
            document.getElementById('error_checkbox_1').style.visibility='visible';
            return false;
        }else{
            document.getElementById('error_checkbox_1').style.visibility='hidden';
        }
    }

*/



</script>


@endsection