@extends('sites._global_forms.form_modal_edit')

{{-- Globalne Okno Modalne - INFO about Record --}}

@php
    $modal_id = "ModalForm_edit"; //"ModalForm_proces_delete";
    $click_event_name = ".open_modal_edit"; //".open_modal_delete";
    $site_back = null;
    $rekord_id = null;
@endphp

{{-- W tej sekcji umieszczamy tylko dane ( bez formularza ) --}}

@section('form_body_edit')
    <!--/* Modal */-->


    @foreach ( $tabela['th_nazwa_kolumny'] as $key=>$kolumna)
        @if($tabela['rodzaj_pola'][$key] == 'data') {{-- Jeżeli pole to data --}}

            <div class="form-group row" style="display: flex;">
                <label for="{{$tabela['nazwa_kolumny'][$key]}}" class="col-md-4 col-form-label col-form-label-sm text-md-right table_modal_window">{{$kolumna}}:</label>

                <div class="col-md-6 row" style="margin-left: unset;">
                    <input id="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}" name="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}" type="text" class="form-control form-control-sm datepicker table_modal_window" placeholder="YYYY-MM-DD" value="" style="width: 90px; z-index: 1; " autofocus>
                    <div class="input-group-append datepicker_icon_form">
                        <span id="modal_edit_datepicker_icon_{{$tabela['nazwa_kolumny'][$key]}}" class="input-group-text end_date_calendar" aria-hidden="true"><i class="far fa-calendar-alt"></i></span>
                    </div>
                    <label id="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}_data-error" class="label_error my_FormLabelErrorData_2 error" style="display: inherit;" for="{{$tabela['nazwa_kolumny'][$key]}}" ></label>
                </div>
            </div>

        @elseif($tabela['rodzaj_pola'][$key] == 'radio') {{-- Jeżeli pole to radio --}}

            <div class="form-group row" style="display: flex;">
                <label for="{{$tabela['nazwa_kolumny'][$key]}}" class="col-md-4 col-form-label col-form-label-sm text-md-right table_modal_window">{{$kolumna}}:</label>

                <div class="col-md-6 row" style="margin-left: unset;">

                    <div id="CheckBoxGroupFrame_status" class="form-check form-check-inline my_GroupCheckBoxes2">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" value="1" name="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}">
                            <label class="form-check-label">Aktywny</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" value=null name="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}">
                            <label class="form-check-label">Nieaktywny</label>
                        </div>
                    </div>
                    <label id="CheckBoxGroupFrame_status-error" class="label_error my_CheckBoxErrorOpis error" for="CheckBoxGroupFrame_status"></label>

                </div>
            </div>


        @else
            <div class="form-group row">
                <label for="{{$tabela['nazwa_kolumny'][$key]}}" class="col-md-4 col-form-label col-form-label-sm text-md-right table_modal_window">{{$kolumna}}:</label>

                <div class="col-md-6 text-left table_modal_window">

                    @if($tabela['rodzaj_pola'][$key] == 'textarea')
                        {{-- Textarea --}}
                        <textarea id="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}" type="text" class="form-control form-control-sm " rows="3" cols="70" style="resize: none; margin-left: auto;"
                            name="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}" autocomplete="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}" autofocus
                        ></textarea>
                        <label id="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}-error" class="label_error my_FormLabelError_2 error" for="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}"></label>

                    @elseif($tabela['rodzaj_pola'][$key] != 'textarea')

                        @if($tabela['nazwa_kolumny'][$key] == 'id')
                            <input id="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}" type="input" class="form-control form-control-sm" name="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}" value="" disabled>
                        @elseif($tabela['nazwa_kolumny'][$key] == 'active')
                            <input id="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}" type="input" class="form-control form-control-sm" name="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}" value="" disabled>
                        @else
                            <input id="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}" type="input" class="form-control form-control-sm" name="modal_edit_{{$tabela['nazwa_kolumny'][$key]}}" value="">
                        @endif

                    @endif

                </div>
            </div>
        @endif

    @endforeach

    <!--/* END-Modal */-->
@endsection



@section('java_script_edit')

        var baseUrl = "{{URL::to('/')}}";
    function my_BuildDetailUrl(url, id){
        var urlString = String(url || '');
        if (/^https?:\/\//i.test(urlString) || (urlString.length && urlString.charAt(0) === '/')) {
            return urlString + '/' + id;
        }
        return baseUrl + '/' + urlString + '/' + id;
    }

        var click_event_name = null;
        var tabela_kolumny = null;
        var tabela_rodzaj_pola = null;
        console.log(tabela_rodzaj_pola);



        $(document).ready(function () {
            // Funkcja onclick dla pola typu data
            for (let i = 0; i < tabela_kolumny.length; i++) {
                var rodzaj_pola = tabela_rodzaj_pola[i];

                if(rodzaj_pola == 'data'){
                    var kolumna = tabela_kolumny[i];
                    $('#modal_edit_datepicker_icon_'+kolumna).click(function () {
                        $('#modal_edit_'+kolumna+'.datepicker').focus();
                    });
                }

            }
            // KONIEC - Funkcja onclick dla pola typu data
        });



        $(document).on('click',click_event_name,function(){
            var modal_id = null;
            var url = null;
            //console.log(rodzaje_zgloszen);

            var id = $(this).val();

            // Weryfikuje czy url jest ok - wymagane przy "form_info"
            if(typeof url_info != 'undefined'){
                var url = url_info + url;
            }

            /* Pobieram dane z DB i podstawiam do formularza */
            $.get(my_BuildDetailUrl(url, id), function (data) {

                //let rodzaj_zgloszenia = rodzaje_zgloszen.find(element => element.id == data.rodzaj_zgloszenia);
                //console.log(data);

                //console.log(tabela_kolumny.length);
                for (let i = 0; i < tabela_kolumny.length; i++) {
                    var kolumna = tabela_kolumny[i];
                    var rodzaj_pola = tabela_rodzaj_pola[i];
                    if(rodzaj_pola == 'html'){
                        //console.log(data[kolumna]);
                        $('#modal_edit_'+kolumna).html(data[kolumna]);
                    }else if(rodzaj_pola == 'radio'){
                        console.log(data[kolumna]);
                        $("input[name=modal_edit_"+kolumna+"][value="+data[kolumna]+"]").prop('checked', true);
                    }else{
                        $('#modal_edit_'+kolumna).val(data[kolumna]);
                    }
                }

                //$('#modal_edit_'+kolumna).val(data.nazwa);


                //console.log(rodzaj_zgloszenia.id, rodzaj_zgloszenia.nazwa);
                //$('#modal_edit_rodzaj_zgloszenia_nazwa').html(rodzaj_zgloszenia.nazwa);


            })


        });




        // Datepicker
        $(".datepicker").datepicker({
            language: 'pl',
            format: 'yyyy-mm-dd',
            todayBtn: true,
            todayHighlight: true,
            calendarWeeks: true,
            autoclose: true
        });

        for (let i = 0; i < tabela_rodzaj_pola.length; i++) {
            var rodzaj_pola = tabela_rodzaj_pola[i];
            var kolumna = tabela_kolumny[i];

            if(rodzaj_pola == 'data'){
                $('#modal_edit_'+kolumna).datepicker();
            }
        }

    </script>
@endsection