@php
$form_data=$data['form_data'];
$form_id=$form_data['form_id'];
$language_id=$form_data['form_language'];
$form_type_id=$form_data['form_type_id'];
$form_name=$form_data['form_name'];
$form_datas=json_decode($form_data['form_data']);
@endphp

<style>
.form_builder_Remove_btn {
    width: 85% !important;
    /* border-radius: 5px !important; */
    color: #fff !important;
    display: block;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 9px !important;
    position: relative !important;
    border-radius: 0px !important;
    /* background: var(--primary-bg-color)!important; */
}

.form_builder_custom_border {
    border-radius: 0px !important;
}
</style>
@foreach($form_datas as $form_data)
@php
$colapse_num=rand(1,9999);
$label= $form_data->label;
$name=$form_data->label;
$Required=$form_data->required;
$form_element_id=$form_data->form_element_id;
$get_form_element_details=DB::table('tbl_form_elements')->where('element_id',$form_element_id)->first();
$form_element_name=$get_form_element_details->element_name;
$form_element_type=$get_form_element_details->element_type;
@endphp

<div class="panel-group1 listitemClass" id="accordion_{{$colapse_num}}">
    <input type="hidden" name="input_type[]" value="{{$form_element_name}}">
    <input type="hidden" name="colapse_number[]" value="{{$colapse_num}}">
    <input type="hidden" name="input_type_id[]" value="{{$form_element_id}}">

    <div class="panel panel-default mb-4">
        <div class="panel-heading1 ">
            <div class="row">
                <div class="col-md-11 col-sm-11  px-0">
                    <h4 class="panel-title1">
                        <a class="accordion-toggle collapsed form_builder_custom_border form_colapse_{{$colapse_num}}"
                            data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapse{{$colapse_num}}"
                            aria-expanded="false"> <i class=" {{$form_element_name}} "></i> <span
                                class="ms-2 form_label_text_{{$colapse_num}}"> {{$form_element_name}} </span></a>
                    </h4>
                </div>
                <div class="col-md-1 col-sm-1 px-0">
                    <h4 class="panel-title1">
                        <button onclick="remove_form_element_row({{$colapse_num}})"
                            class="btn btn-danger form_builder_Remove_btn form_builder_custom_border text-center">Close
                        </button>
                    </h4>
                </div>



            </div>

        </div>
        <div id="collapse{{$colapse_num}}" class="panel-collapse collapse" role="tabpanel" aria-expanded="false">
            <div class="panel-body">




                <div class=" row mb-4">
                    <label class="col-md-3 form-label ">Label</label>
                    <div class="col-md-9" id="{{$colapse_num}}">
                        <input type="text" name="form_label[]" onkeyup="update_label_name({{$colapse_num}})"
                            data-colapse="{{$colapse_num}}"
                            class="form-control colapse_label colapse_label_text_{{$colapse_num}}" value="{{$label}}"
                            placeholder="Enter Label" data-parsley-required-message="Label Required"
                            required="required">
                    </div>
                </div>

                <div class=" row mb-4">
                    <label class="col-md-3 form-label">Name</label>
                    <div class="col-md-9" id="{{$colapse_num}}">
                        <input type="text" name="name[]" class="form-control" value="{{$form_data->name}}"
                            placeholder="Enter Name" data-parsley-required-message="Name Required" required="required">
                    </div>
                </div>

                <div class=" row mb-4">
                    <label class="col-md-3 form-label">Required</label>
                    <div class="col-md-9" id="{{$colapse_num}}">
                        <select class="form-control" name="required[]" id="required">
                            <option Selected value="Not Required"> Not Required
                            </option>
                            <option  value="Required">Required</option>
                        </select>
                    </div>
                </div>
                <!-- #########################Select Box Section ########################## -->
                @if($form_element_type=="select")
                @php $form_values=$form_data->values; @endphp
                <div class=" row mb-4">
                    <label class="col-md-3 form-label">Options</label>
                    <div class="col-md-9" id="{{$colapse_num}}">
                        <div class="table-responsive">
                            <table class="table border text-nowrap text-md-nowrap table-bordered mb-0">
                                <thead class="text-center">
                                    <tr>
                                        <th class="w-20">Default</th>
                                        <th class="w-60">Value</th>
                                        <th class="w-20">action</th>
                                    </tr>
                                </thead>
                                <tbody class="select_option_tbody_{{$colapse_num}}">
                                    @php $i=1; @endphp
                                    @foreach($form_values as $form_value)
                                    @if($form_value->label!="" && $form_value->value!="" )
                                    @php if($form_value->selected==true){ $radio_selected="selected"; }
                                    else{$radio_selected=""; } @endphp
                                    <tr class="text-center" id="select_row_id_1_{{$colapse_num}}">
                                        <td class="text-center">
                                            <input type="radio" class="form-check-input" id="radio1"
                                                name="optradio_{{$colapse_num}}" value="{{$i}}" {{$radio_selected}}>
                                        </td>
                                        <td><input type="text" class="form-control"
                                                name="select_options_{{$colapse_num}}[]" value="{{$form_value->label}}"
                                                required="required"
                                                data-parsley-required-message="Option Value Required"></td>
                                        @if($i>1)
                                        <td><i onclick="remove_select_tr({{$i}},{{$colapse_num}})"
                                                class="fa fa-close remove_select_body"></i></td>
                                        @else
                                        <td></td>
                                        @endif
                                    </tr>
                                    @endif
                                    @php $i++; @endphp
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <a onclick="add_row_select_tbody({{$colapse_num}})" href="javascript:void(0)"
                            class="btn btn-primary float-end mt-3"><i class="fa fa-plus">&nbsp;Add New Row</i></a>
                    </div>
                </div>
                @endif

                <!-- #################End Of Select Box Section ######################### -->




                <!-- #################################Radio Section ############################ -->
                @if($form_element_type=="radio")
                @php
                $radio_type="";
                if(isset($form_data->radio_type)){
                $radio_type=$form_data->radio_type;
                }
                $form_values=$form_data->values; @endphp
                @php $point_header="false"; @endphp
                @foreach($form_values as $form_value)
                @if(isset($form_value->point))
                @if($form_value->point)
                @php $point_header="true"; @endphp
                @endif

                @endif
                @endforeach
                @if($radio_type=="emoji" ) @php $display_emoji_class="d-none"; @endphp @else @php
                $display_emoji_class=""; @endphp @endif
                <div class=" row mb-4">
                    <label class="col-md-3 form-label">Point Option</label>
                    <div class="col-md-9" id="{{$colapse_num}}">
                        <select class="form-control point_option" onchange="point_option(this)" name="point_option[]"
                            data-colapse="{{$colapse_num}}" id="point_option_{{$colapse_num}}">
                            <option  value="Not Required"> Not
                                Required</option>
                            <option  value="Required">Required
                            </option>
                        </select>
                    </div>
                </div>



                <div class=" row mb-4">
                    <label class="col-md-3 form-label">Radio Type</label>
                    <div class="col-md-9" id="{{$colapse_num}}">
                        <select class="form-control radio_type" onchange="radio_type(this)"
                            name="radio_type_{{$colapse_num}}" data-colapse="{{$colapse_num}}"
                            id="radio_type_{{$colapse_num}}">
                            <option @if($radio_type=="normal" ) selected @endif value="normal">Normal</option>
                            <option @if($radio_type=="emoji" ) selected @endif value="emoji">Emoji collection</option>
                        </select>

                    </div>
                </div>

                <div class=" row mb-4">
                    <label class="col-md-3 form-label">Options</label>
                    <div class="col-md-9" id="{{$colapse_num}}">
                        <div class="table-responsive">
                            <table class="table border text-nowrap text-md-nowrap table-bordered mb-0">
                                <thead class="text-center">
                                    <tr>
                                        <th class="w-10">Default</th>
                                        @php $display_class="d-none"; $required="";@endphp
                                        @if( $point_header=="true" )
                                        @php $display_class=""; $required="required";@endphp
                                        @endif
                                        <th class="w-15   point_table_header_{{$colapse_num}} {{$display_class}}">Point
                                        </th>

                                        <th class="w-55">Value</th>
                                        <th class="w-20">action</th>
                                    </tr>
                                </thead>
                                <tbody class="radio_option_tbody_{{$colapse_num}}">
                                    @php $i=1; @endphp
                                    @foreach($form_values as $form_value)
                                    @if($form_value->label!="" && $form_value->label!="" )
                                    @php if($form_value->selected==true){ $radio_selected="checked"; }
                                    else{$radio_selected=""; }
                                    if(isset($form_value->point)){ $form_point=$form_value->point; }else{
                                    $form_point="";}
                                    @endphp
                                    <tr class="text-center" id="radio_row_id_1_{{$colapse_num}}">
                                        <td class="text-center">
                                            <input type="radio" class="form-check-input" id="radio1"
                                                name="radio_optradio_{{$colapse_num}}" value="{{$i}}"
                                                {{$radio_selected}}>
                                        </td>


                                        <td class="table_body_{{$colapse_num}} {{$display_class}}"><input type="text"
                                                min="0" max="10" oninput="checkNumberRange(this)"
                                                class="form-control table_point_input table_body_point_{{$colapse_num}}"
                                                name="points_{{$colapse_num}}[]" value="{{$form_point}}" {{$required}}
                                                data-parsley-required-message="Point Required"></td>

                                        <td><input type="text" class="form-control"
                                                name="radio_options_{{$colapse_num}}[]" value="{{$form_value->label}}"
                                                required="required"
                                                data-parsley-required-message="Option Value Required"></td>
                                        @if($i>1)
                                        <td>
                                            <i onclick="remove_select_radio_tr({{$i}},{{$colapse_num}})"
                                                class="fa fa-close remove_select_body {{$display_emoji_class}}"></i>
                                        </td>
                                        @else
                                        <td></td>
                                        @endif
                                    </tr>
                                    @endif
                                    @php $i++; @endphp
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <a onclick="add_row_radio_tbody({{$colapse_num}})" href="javascript:void(0)"
                            class="btn btn-primary float-end mt-3 add_new_row_btn_{{$colapse_num}} {{$display_emoji_class}}"><i
                                class="fa fa-plus">&nbsp;Add New Row</i></a>
                    </div>
                </div>
                @endif

                <!-- ################################### End Of Radio ############################ -->

                <!-- #################################check box Section ############################ -->
                @if($form_element_type=="checkbox" && $form_element_name!="Rating")
                @php $form_values=$form_data->values; @endphp
                <div class=" row mb-4">
                    <label class="col-md-3 form-label">Options</label>
                    <div class="col-md-9" id="{{$colapse_num}}">
                        <div class="table-responsive">
                            <table class="table border text-nowrap text-md-nowrap table-bordered mb-0">
                                <thead class="text-center">
                                    <tr>
                                        <th class="w-20">Default</th>
                                        <th class="w-60">Value</th>
                                        <th class="w-20">action</th>
                                    </tr>
                                </thead>
                                <tbody class="checkbox_option_tbody_{{$colapse_num}}">
                                    @php $i=1; @endphp
                                    @foreach($form_values as $form_value)
                                    @if($form_value->label!="" && $form_value->label!="" )
                                    @php if($form_value->selected==true){ $radio_selected="checked"; }
                                    else{$radio_selected=""; } @endphp
                                    <tr class="text-center" id="checkbox_row_id_1_{{$colapse_num}}">
                                        <td class="text-center">
                                            <input type="checkbox" class="form-check-input" id="radio1"
                                                name="checkbox_optradio_{{$i}}_{{$colapse_num}}" value="{{$i}}"
                                                {{$radio_selected}}>
                                        </td>
                                        <td><input type="text" class="form-control"
                                                name="checkbox_options_{{$colapse_num}}[]"
                                                value="{{$form_value->label}}" required="required"
                                                data-parsley-required-message="Option Value Required"></td>
                                        @if($i>1)
                                        <td><i onclick="remove_checkbox_tr({{$i}},{{$colapse_num}})"
                                                class="fa fa-close remove_select_body"></i></td>
                                        @else
                                        <td></td>
                                        @endif
                                    </tr>
                                    @endif
                                    @php $i++; @endphp
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <a onclick="add_row_checkbox_tbody({{$colapse_num}})" href="javascript:void(0)"
                            class="btn btn-primary float-end mt-3"><i class="fa fa-plus">&nbsp;Add New Row</i></a>
                    </div>
                </div>
                @elseif($form_element_type=="checkbox" && $form_element_name=="Rating")

                <div class=" row mb-4">
                    <label class="col-md-3 form-label">Rating Icon</label>
                    <div class="col-md-3" id="{{$colapse_num}}">
                        @php
                        $rating_array=array();
                        $star=['rating_value'=>'star','rating_label'=>'&#11088'];
                        $emoji=['rating_value'=>'emoji','rating_label'=>'&#128522'];
                        $love=['rating_value'=>'love','rating_label'=>'&#128155'];
                        array_push($rating_array,$star);
                        array_push($rating_array,$emoji);
                        array_push($rating_array,$love);
                        @endphp
                        <select class="form-control" name="rating_icon_{{$colapse_num}}" id="required">
                            @foreach($rating_array as $rating)
                            @if($form_data->rating_icon_type==$rating['rating_value'])
                            @php $selected="selected"; @endphp
                            @else
                            @php $selected=""; @endphp
                            @endif
                            <option {{$selected}} value="{{$rating['rating_value']}}">@php echo $rating['rating_label'];
                                @endphp</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                @endif

                <!-- ################################### End Of check box ############################ -->
            </div>
        </div>
    </div>

</div>


@endforeach


<script>
$('#form_language').val("{{$language_id}}");
$('#form_type_id').val("{{$form_type_id}}");
$('#section_name').val("{{$form_name}}");
$('#form_section_id').val('{{$form_id}}');
$('.section_save_btn').text('Update');
</script>