@php
$form_element_data=$data['elements_details'];
$colapse_num=rand(1,9999);
$form_element_name=$form_element_data->element_name;
$form_element_type=$form_element_data->element_type;
$form_element_id=$form_element_data->element_id;


switch ($form_element_name) {
case "Name":
$label="Enter Your Name";
$name="Name";
break;
case "Email":
$label="Enter Your Email ";
$name="Email";
break;
case "Phone":
$label="Enter Your Phone ";
$name="Phone";
break;
case "Gender":
$label="Choose Gender";
$name="Gender";
break;

default:
$label="";
$name="";
break;
}

@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>


<div class="panel-group1 listitemClass" id="accordion_{{$colapse_num}}">
    <input type="hidden" name="input_type[]" value="{{$form_element_name}}">
    <input type="hidden" name="input_type_id[]" value="{{$form_element_id}}">
    <input type="hidden" name="colapse_number[]" value="{{$colapse_num}}">
    <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>
                        <!-- <a class="accordion-toggle collapsed 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_element_name}} </span></a> -->
                    </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_element_name}}"
                            placeholder="Enter Name" data-parsley-required-message="Name Required" value="{{$name}}"
                            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 value="Not Required"> Not Required</option>
                            <option value="Required">Required</option>
                        </select>
                    </div>
                </div>


                @if($form_element_type=="select")
                <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}}">
                                    <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="1">
                                        </td>
                                        <td><input type="text" class="form-control"
                                                name="select_options_{{$colapse_num}}[]" required="required"
                                                data-parsley-required-message="Option Value Required"></td>
                                        <td></td>
                                    </tr>
                                </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

                @if($form_element_type=="radio")
                @if($form_element_name=="Gender")
                <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>
                                    </tr>
                                </thead>
                                <tbody class="radio_option_tbody_{{$colapse_num}}">
                                    <tr class="text-center" id="radio_row_id_1_{{$colapse_num}}">
                                        <td class="text-center">
                                            <input type="radio" onchange="check_checked(this)" class="form-check-input"
                                                id="radio1" name="radio_optradio_{{$colapse_num}}" value="1">
                                        </td>
                                        <td><input type="text" class="form-control" value="Male"
                                                name="radio_options_{{$colapse_num}}[]" required="required"
                                                data-parsley-required-message="Option Value Required"></td>

                                    </tr>
                                    <tr class="text-center" id="radio_row_id_1_{{$colapse_num}}">
                                        <td class="text-center">
                                            <input type="radio" onchange="check_checked(this)" class="form-check-input"
                                                id="radio1" name="radio_optradio_{{$colapse_num}}" value="1">
                                        </td>
                                        <td><input type="text" class="form-control" value="Female"
                                                name="radio_options_{{$colapse_num}}[]" required="required"
                                                data-parsley-required-message="Option Value Required"></td>

                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @else

                <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 value="normal">Normal</option>
                            <option 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>
                                        <th class="w-15 point_table_header_{{$colapse_num}} d-none">Point</th>
                                        <th class="w-55">Value</th>
                                        <th class="w-20">action</th>
                                    </tr>
                                </thead>
                                <tbody class="radio_option_tbody_{{$colapse_num}}">
                                    <tr class="text-center" id="radio_row_id_1_{{$colapse_num}}">
                                        <td class="text-center">
                                            <input type="radio" onchange="check_checked(this)" class="form-check-input"
                                                id="radio1" name="radio_optradio_{{$colapse_num}}" value="1">
                                        </td>
                                        <td class="table_body_{{$colapse_num}} d-none">
                                            <input type="number" min="0" max="10" oninput="checkNumberRange(this)"
                                                class="form-control table_point_input table_body_point_{{$colapse_num}}"
                                                name="points_{{$colapse_num}}[]"
                                                data-parsley-required-message="Points Required">
                                        </td>
                                        <td><input type="text" class="form-control"
                                                name="radio_options_{{$colapse_num}}[]" required="required"
                                                data-parsley-required-message="Option Value Required"></td>
                                        <td></td>
                                    </tr>
                                </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}}"><i
                                class="fa fa-plus">&nbsp;Add New Row</i></a>
                    </div>
                </div>
                @endif
                @endif

                @if($form_element_type=="checkbox" && $form_element_name!="Rating")
                <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}}">
                                    <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_1_{{$colapse_num}}" value="1">
                                        </td>
                                        <td><input type="text" class="form-control"
                                                name="checkbox_options_{{$colapse_num}}[]" required="required"
                                                data-parsley-required-message="Option Value Required"></td>
                                        <td></td>
                                    </tr>
                                </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)
                            <option value="{{$rating['rating_value']}}">@php echo $rating['rating_label']; @endphp
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                @endif


            </div>
        </div>
    </div>

</div>