@extends('layouts.app')

@section('styles')

@php
$form_elements=$data['form_elements'];
$languages=$data['form_languages'];
$form_types=$data['form_types'];
@endphp

@endsection

@section('content')
<style>
.radio-group label:before {
    display: none;
}

/* Chrome, Safari, Edge, Opera */
.table_point_input::-webkit-outer-spin-button,
.table_point_input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.table_point_input {
    -moz-appearance: textfield;
}




/* ####################Emoji Section CSS################## */

/* Emoji rating styling START */
.emoji-result-text {
    font-size: 20px;
    margin-top: 25px;
    text-align: center;
    background: #f4d348;
    padding: 20px;
    border-radius: 8px;
    font-weight: 800;
}

.emoji-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Helvetica, sans-serif;
    margin: 0;
}

#emoji input[type="radio"] {
    -webkit-appearance: none;
    width: 60px !important;
    height: 60px;
    border: none;
    cursor: pointer;
    transition: border 0.2s ease;
    filter: grayscale(100%);
    margin: 0 5px;
    transition: all 0.2s ease;
}

#emoji input[type="radio"]:hover,
#emoji input[type="radio"]:checked {
    filter: grayscale(0);
}

#emoji input[type="radio"]:focus {
    outline: 0;
}

#emoji input[type="radio"].love {
    background: url("data:image/png;base64,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") center;
    background-size: cover;
}

#emoji input[type="radio"].happy {
    background: url("data:image/png;base64,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") center;
    background-size: cover;
}

#emoji input[type="radio"].neutral {
    background: url("data:image/png;base64,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") center;
    background-size: cover;
}

#emoji input[type="radio"].sad {
    background: url("data:image/png;base64,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") center;
    background-size: cover;
}

#emoji input[type="radio"].confused {
    background: url("data:image/png;base64,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") center;
    background-size: cover;
}

.mtt {
    position: fixed;
    bottom: 10px;
    right: 20px;
    color: #999;
    text-decoration: none;
}

.mtt span {
    color: #e74c3c;
}

.mtt span:hover {
    color: #666;
}

.mtt span span {
    color: #c0392b;
}

#emoji input[type="radio"]:checked:before {
    background: none !important;
}

/* Emoji rating styling END */
/* ###################End Of Emoji Section Css################ */
</style>
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">Create Form</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Forms</a></li>
            <li class="breadcrumb-item active" aria-current="page">Create Form</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- Row -->
<form class="form-horizontal" id="submit_form" method="post" action="form_submit">
    <input type="hidden" id="form_section_id" name="form_section_id">
    @csrf()
    <div class="row">
        <div class="col-xl-3">
            <div class="card">
                <div class="list-group list-group-transparent mb-0 mail-inbox pb-3">
                    <div class="mt-4 mb-4 mx-4 text-center">
                        <button type="button" class="btn w-100 bg-primary btn-facebook"><i
                                class="fa fa-pencil me-2"></i>Choose Form Elements</button>
                        <!-- <a href="javascript:void(0)" class="btn btn-primary btn-lg d-grid">Form Elements</a> -->
                    </div>
                    @php
                    $color_array = array("blue", "azure",
                    "indigo","purple","pink","red","orange","yellow","lime","green","teal","cyan","gray","gray-dark");
                    $l=0;
                    @endphp
                    @foreach($form_elements as $form_element)
                    @php
                    $l++;
                    $color=$color_array[$l];
                    @endphp
                    <a href="javascript:void(0)" class="list-group-item d-flex align-items-center text-{{$color}} mx-4">
                        <span class="icons"><i class="{{$form_element['element_icon']}} text-{{$color}} "></i></span>
                        {{$form_element['element_name']}}


                        <button type="button"
                            onclick="add_form_element('{{$form_element['element_id']}}','{{$form_element['element_name']}}','{{$form_element['element_type']}}')"
                            class="btn btn-sm btn-icon  btn-{{$color}} ms-auto bradius "><i
                                class="fa fa-plus"></i></button>

                    </a>
                    @endforeach

                </div>

            </div>
        </div>
        <div class="col-xl-9">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Add Section</h3>
                </div>

                <div class="card-body  ">
                    <div class="form-row">

                        <div class="col-xl-3 mb-3">
                            <label for="validationTooltip01">Choose Language *</label>
                            <select name="form_language" id="form_language" class=" form-control" required="required"
                                data-parsley-required-message="Language  Required">
                                <option value="">- Choose Language</option>
                                @php
                                $old_value="";
                                if(old('form_language')){
                                $old_value=old('form_language');
                                }
                                @endphp
                                @foreach($languages as $language)
                                @if($old_value==$language['language_id'])
                                @php
                                $selected="Selected";
                                @endphp
                                @else
                                @php
                                $selected="";
                                @endphp
                                @endif
                                <option {{$selected}} value="{{$language['language_id']}}">
                                    {{$language['language_name']}}</option>
                                @endforeach
                            </select>

                        </div>


                        <div class="col-xl-3 mb-3">
                            <label for="validationTooltip01">Choose Form Type *</label>
                            <select name="form_type_id" id="form_type_id" class=" form-control" required="required"
                                data-parsley-required-message="Form Type  Required">
                                <option value="">-- Choose Type --</option>
                                @php
                                $old_form_type_value="";
                                if(old('form_type_id')){
                                $old_form_type_value=old('form_type_id');
                                }
                                @endphp
                                @foreach($form_types as $form_type)
                                @if($old_form_type_value==$form_type['form_type_id'])
                                @php
                                $selected="Selected";
                                @endphp
                                @else
                                @php
                                $selected="";
                                @endphp
                                @endif
                                <option {{$selected}} value="{{$form_type['form_type_id']}}">
                                    {{$form_type['form_type_name']}}</option>
                                @endforeach
                            </select>

                        </div>


                        <div class="col-xl-6 mb-6">
                            <label for="validationTooltip01">Section Name *</label>
                            <input data-parsley-required-message="Section Name Required" type="text"
                                class="form-control" name="section_name" id="section_name"
                                value="{{old('section_name')}}" required="">
                        </div>



                    </div>
                    <div class="form_builder_body" id="sortable">
                        <!-- Form Field Append Section -->
                    </div>
                </div>
                <div class="card-footer text-end">

                    <a onclick="form_submit()" class="btn btn-primary mt-1 mb-1 section_save_btn"><i
                            class="fa fa-arrow-circle-up"></i>
                        Submit</a>
                    <button class=" form_submit d-none" type="submit">Submit</button>
                    <!-- <a class="btn btn-secondary mt-1 mb-1" href="javascript:void(0)"><i class="fa fa-share"></i> Forward</a> -->
                </div>
</form>

</div>


</div>
<!-- ###################################Start Of View Form Section ########################### -->
@include('admin.forms.custom_form_render')

<!-- #####################################End Of Form View Section ######################## -->

</div>
<!--End  Row -->


<!-- #############################Delete Modal################## -->
<div class="modal  fade" id="smallmodal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete</h5>
                <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Do you want to delete the Form Section ?</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button onclick="delete_item()" class="btn btn-primary">Delete</button>
            </div>
        </div>
    </div>
</div>

<!-- #################################End Of Delete Modal############## -->

@endsection

@section('scripts')

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="{{asset('assets/plugins/form-builder/form-render.min.js')}}"></script>
<script src="{{asset('assets/plugins/form-builder/form-builder.min.js')}}"></script>
<script src="{{asset('assets/plugins/date-picker/jquery-ui.js')}}"></script>
<script>
var public_url = "{{url('/')}}/{{env('ADMIN_PANEL_ROUTE')}}";
var token = $("meta[name=csrf-token]").attr("content");
var language_count = "{{count($languages)}}";
var form_types_count = "{{count($form_types)}}";
var language_array = null;
</script>

@if ($message = Session::get('success'))
<script>
var result = [];
result['status'] = 0;
result['heading'] = 'Success';
result['msg'] = '{{$message}}';
window.onload = setTimeout(function() {
    toast(result, dataTable = "table_datatable", formId = "", redirectUrl = "");
}, 500);
</script>
@endif

@error('input_type')
<script>
var result = [];
result['status'] = 1;
result['heading'] = 'Error';
result['msg'] = 'Please Choose Form Elements';
window.onload = setTimeout(function() {
    toast(result, dataTable = "table_datatable", formId = "", redirectUrl = "");
}, 500);
</script>
@enderror



<script src="{{asset('website/js/custom_form.js?v3')}}"></script>
<!--- TABS JS -->
<script src="{{asset('assets/plugins/tabs/jquery.multipurpose_tabcontent.js')}}"></script>

<!-- //For Looping For each Form -->
@foreach($languages as $language)
@if(isset($language['form_type']))
@php
$form_types=$language['form_type'];
@endphp
@foreach($form_types as $form_type)
@if(isset($form_type['form_data']))
@php
$form_datas=$form_type['form_data'];
$j=1;
@endphp
@foreach($form_datas as $form_data)
@php 
$form_id=$form_data['form_id'];
@endphp
<script>
var i = ;
var j = ;
var form_id=;
var originalFormData = ;
var fbRender = document.getElementById("fb-render_" +form_id);
var formData = JSON.stringify(originalFormData);
$(fbRender).formRender({
    formData
});
$("form#fb-render_" +form_id )
    .find(":input")
    .each(function() {
       

        var placeholder = "This Value";
        $(this).attr("disabled", "disabled");
        $(this).attr('required', false);

        if (
            $(this).attr("type") == "checkbox" &&
            $(this).attr("class") == "Rating"
        ) {
            var input_name = $(this).attr("name");
            var rating_icon_type = $(this).attr("rating_icon_type");
            var rating_icon = get_rating_icons_array(rating_icon_type);
            var required = $(this).attr("required");
            if (required == "required") {
                var required_msg =
                    'required="required" data-parsley-required-message="Rating required"';
            }
            $(this)
                .parent()
                .parent()
                .html(
                    '<input  type="radio" id="checkbox-group-1678775184519-' +
                    input_name +
                    '-4"  name="' +
                    input_name +
                    '" value="5" ' +
                    required_msg +
                    ' /><label class="rating" for="checkbox-group-1678775184519-' +
                    input_name +
                    '-4" class="star">' + rating_icon +
                    '</label><input type="radio" id="checkbox-group-1678775184519-' +
                    input_name +
                    '-3" name="' +
                    input_name +
                    '" value="4" ' +
                    required_msg +
                    '  /><label class="rating" for="checkbox-group-1678775184519-' +
                    input_name +
                    '-3" class="star">' + rating_icon +
                    '</label><input type="radio" id="checkbox-group-1678775184519-' +
                    input_name +
                    '-2" name="' +
                    input_name +
                    '" value="3" ' +
                    required_msg +
                    ' /><label class="rating" for="checkbox-group-1678775184519-' +
                    input_name +
                    '-2" class="star">' + rating_icon +
                    '</label><input type="radio" id="checkbox-group-1678775184519-' +
                    input_name +
                    '-1" name="' +
                    input_name +
                    '" value="2"  ' +
                    required_msg +
                    ' /><label class="rating" for="checkbox-group-1678775184519-' +
                    input_name +
                    '-1" class="star">' + rating_icon +
                    '</label><input type="radio" id="checkbox-group-1678775184519-' +
                    input_name +
                    '-0" name="' +
                    input_name +
                    '" value="1" ' +
                    required_msg +
                    ' /><label class="rating" for="checkbox-group-1678775184519-' +
                    input_name +
                    '-0" class="star">' + rating_icon + '</label>'
                )
                .addClass("checkbox-rating-group");
        } else if ($(this).attr("type") == "radio" && $(this).attr("radio_type") == "emoji") {
            var input_name = $(this).attr("name");
            $(this)
                .parent()
                .parent()
                .html(
                    "<div class='text-center' id='emoji'><input type='radio' name='" + input_name +
                    "' value='unimpressed by' class='sad'><input type='radio' name='" + input_name +
                    "' value='are confused about' class='confused'><input type='radio' name='" + input_name +
                    "' value='are neutral about' class='neutral' ><input type='radio' name='" + input_name +
                    "' value='had fun playing' class='happy'><input type='radio' name='" + input_name +
                    "' value='loved' class='love' checked></div>"
                );
        }

    });



function get_rating_icons_array(rating_icon_type) {
    if (rating_icon_type == "star") { //If Rating Icon Is Star
        return "&#9733";
    }
    if (rating_icon_type == "love") { //If Rating Icon Is Star
        return "&#10084";
    }
    if (rating_icon_type == "emoji") { //If Rating Icon Is Star
        return "&#9787";
    }
}
</script>
@php $j++;  @endphp
@endforeach
@endif
@endforeach
@endif
@endforeach
<!-- //End Of Forrlooping -->
@endsection