@extends('layouts.admin.app')
@section('page-title')
    {{ __('add-chatbot') }}
@endSection
@section('page-nav-title')
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{ __('add-chatbot') }}</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.chatbot.index') }}">{{ __('chatbot') }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('create') }}</a></li>
        </ul>
    </div>
@endsection
@section('content')
    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{ __('create') }}</h3>
                <div class="tile-body">
                    <form method="post" id="addForm" action="{{ route('admin.chatbot.store') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <label for="type" class="required">{{ __('Type') }}</label>
                                <select class="form-control" id="type" name="type" onchange="selectType()"
                                        style="margin-bottom: 24px">
                                    <option></option>
                                    @foreach ($types as $type)
                                        <option value="{{ $type->id }}" @if(old('type') == $type->id) selected @endif>
                                            {{ app()->getLocale() === 'ar' ? $type->type_ar : $type->type_en }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('type')
                                <div class="input-error" style="padding-top: 15px">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <label for="parent">{{ __('parent') }}</label>
                                <select class="form-control" id="parent" name="parent_id" style="margin-bottom: 24px">
                                    <option></option>
                                    @foreach ($triggers as $trigger)
                                        <option value="{{ $trigger->id }}"
                                                @if(old('parent_id') == $trigger->id) selected @endif>
                                            {{ app()->getLocale() === 'ar' ? $trigger->text_ar : $trigger->text_en }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row" style="padding-bottom: 10px; padding-top: 20px">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('en-keyword') }}</label>
                                    <input class="form-control @if ($errors->has('title_en')) is-invalid @endif"
                                           type="text" name="title_en" placeholder='{{ __('enter-en-keyword') }}'
                                           value="{{inputValue("title_en")}}">
                                </div>
                                @error('title_en')
                                <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('ar-keyword') }}</label>
                                    <input class="form-control @if ($errors->has('title_ar')) is-invalid @endif"
                                           type="text" name="title_ar" placeholder='{{ __('enter-ar-keyword') }}'
                                           value="{{inputValue("title_ar")}}">
                                </div>
                                @error('title_ar')
                                <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <input type="checkbox" id="keywords" name="keywords" onchange="showOtherKeywords()"
                               style="transform: scale(1.5)" {{ old('keywords') == 'on' ? 'checked' : '' }}>
                        <label for="keywords" style="margin-left: 10px">{{ __('add-other-keywords') }}</label><br>
                        <div class="row" id="other_keywords" style="display: none">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('en-keywords') }}</label>
                                    <input class="form-control @if ($errors->has('en_keywords')) is-invalid @endif"
                                           type="text" name="en_keywords" placeholder='{{ __('enter-en-keywords') }}'
                                           value="{{inputValue("en_keywords")}}">
                                </div>
                                @error('en_keywords')
                                <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('ar-keywords') }}</label>
                                    <input class="form-control @if ($errors->has('ar_keywords')) is-invalid @endif"
                                           type="text" name="ar_keywords" placeholder='{{ __('enter-ar-keywords') }}'
                                           value="{{inputValue("ar_keywords")}}">
                                </div>
                                @error('ar_keywords')
                                <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row" style="padding-top: 10px" id="textType">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label" id="msg_en_label">{{ __('en-msg') }}</label>
                                    <textarea class="form-control @if ($errors->has('msg_en')) is-invalid @endif" name="msg_en" placeholder='{{ __('enter-en-msg') }}'>{{inputValue("msg_en")}}</textarea>
{{--                                    <input class="form-control @if ($errors->has('msg_en')) is-invalid @endif"--}}
{{--                                           type="text" name="msg_en" placeholder='{{ __('enter-en-msg') }}'--}}
{{--                                           value="{{inputValue("msg_en")}}">--}}
                                </div>
                                @error('msg_en')
                                <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label" id="msg_ar_label">{{ __('ar-msg') }}</label>
                                    <textarea class="form-control @if ($errors->has('msg_ar')) is-invalid @endif" name="msg_ar" placeholder='{{ __('enter-ar-msg') }}'>{{inputValue("msg_ar")}}</textarea>
{{--                                    <input class="form-control @if ($errors->has('msg_ar')) is-invalid @endif"--}}
{{--                                           type="text" name="msg_ar" placeholder='{{ __('enter-ar-msg') }}'--}}
{{--                                           value="{{inputValue("msg_ar")}}">--}}
                                </div>
                                @error('msg_ar')
                                <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="container">
                        <div class="element" id='div_1' style="display: none">
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label required">{{ __('image/s') }}</label>
                                        <br>
                                        <button class="btn btn-primary form-control button-upload-file"
                                                style="width: 50%; margin-right: 30px">
                                            <input onchange="checkUpload(1)" class="input-file" type="file"
                                                   name="images[0][]" id="file1">
                                            <span class="upload-file-content">
                                        <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                        <span class="upload-file-content-text">{{ __('Upload photo') }}</span>
                                    </span>
                                        </button>
                                        <br>
                                        <div id="icon1" style="display:none;">
                                            <span id="text1" style="margin-right: 10px"></span>
                                            <i class="fa fa-check-circle fa-2x"
                                               style="color: limegreen;margin: auto;"></i>
                                        </div>
                                    </div>
                                    @error("images")
                                    <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label class="control-label">{{ __('en-description') }}</label>
                                        <input class="form-control description_en @if ($errors->has('description_en')) is-invalid @endif"
                                               type="text" name="description_en[0]"
                                               placeholder='{{ __('enter-en-description') }}'>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label class="control-label">{{ __('ar-description') }}</label>
                                        <input class="form-control description_ar @if ($errors->has('description_ar')) is-invalid @endif"
                                               type="text" name="description_ar[0]"
                                               placeholder='{{ __('enter-ar-description') }}'>
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <a><i class="fa fa-fw fa-lg fa-plus-circle add" style="font-size: 24px; color: green; cursor: pointer; padding-top: 30px"></i></a>
                                </div>
                            </div>
                        </div>
                        </div>

                        <div class="options-container">
                        <div class="options-element" id="externalLinksType_1" style="display: none">
                            <div class="row">
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label class="control-label required">{{ __('en-option') }}</label>
                                        <textarea class="form-control option_en @if ($errors->has('option_en')) is-invalid @endif" id="option_en1"  name="option_en[0]" placeholder='{{ __('enter-en-option') }}'></textarea>
                                    </div>
                                    @error('option_en.0')
                                    <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label class="control-label required">{{ __('ar-option') }}</label>
                                        <textarea class="form-control option_ar @if ($errors->has('option_ar')) is-invalid @endif" id="option_ar1"  name="option_ar[0]" placeholder='{{ __('enter-ar-option') }}'></textarea>
                                    </div>
                                    @error('option_ar.0')
                                    <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label required">{{ __('url') }}</label>
                                        <input class="form-control url @if ($errors->has('url')) is-invalid @endif"
                                               type="text" id="url1" name="url[0]" placeholder='{{ __('enter-url') }}'>
                                    </div>
                                    @error('url.0')
                                    <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-2">
                                    <a><i class="fa fa-fw fa-lg fa-plus-circle addOption" style="font-size: 24px; color: green; cursor: pointer; padding-top: 30px"></i></a>
                                </div>
                            </div>
                        </div>
                        </div>

                            <div class="ref-container">
                                <div class="ref-element" id='optionListType_1' style="display: none">

                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label required">{{ __('en-title') }}</label>
                                        <input class="form-control option_title_en @if ($errors->has('option_title_en')) is-invalid @endif"
                                               type="text" id="option_title_en1" name="option_title_en[0]" placeholder='{{ __('enter-en-title') }}'>
                                    </div>
                                    @error('option_title_en')
                                    <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label required">{{ __('ar-title') }}</label>
                                        <input class="form-control option_title_ar @if ($errors->has('option_title_ar')) is-invalid @endif"
                                               type="text" name="option_title_ar[0]" id="option_title_ar1"
                                               placeholder='{{ __('enter-ar-title') }}'>
                                    </div>
                                    @error('option_title_ar')
                                    <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row" style="padding-top: 10px">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label">{{ __('option-en-msg') }}</label>
                                        <textarea class="form-control option_msg_en @if ($errors->has('option_msg_en')) is-invalid @endif" name="option_msg_en[0]" id="option_msg_en1" placeholder='{{ __('enter-option-en-msg') }}'></textarea>
                                    </div>
                                    @error('option_msg_en')
                                    <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label">{{ __('option-ar-msg') }}</label>
                                        <textarea class="form-control option_msg_ar @if ($errors->has('option_msg_ar')) is-invalid @endif" name="option_msg_ar[0]" id="option_msg_ar1" placeholder='{{ __('enter-option-ar-msg') }}'></textarea>
                                    </div>
                                    @error('option_msg_ar')
                                    <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <label for="ref" class="required">{{ __('ref') }}</label>
                                    <select class="form-control ref" id="ref1" name="reference[0]" style="margin-bottom: 24px">
                                        <option></option>
                                        @foreach ($triggers as $trigger)
                                            <option value="{{ $trigger->id }}">
                                                {{ app()->getLocale() === 'ar' ? $trigger->text_ar : $trigger->text_en }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('reference')
                                    <div class="input-error" style="padding-top: 15px">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <a><i class="fa fa-fw fa-lg fa-plus-circle addRef" style="font-size: 24px; color: green; cursor: pointer; padding-top: 30px; float: right"></i></a>
                                </div>
                            </div>

                        </div>
                        </div>

                        <div class="tile-footer">
                            <button class="btn btn-primary" id="addBtn" type="button"><i
                                        class="fa fa-fw fa-lg fa-check-circle"></i>{{ __('create') }}
                            </button>
{{--                            <button class="btn btn-primary" type="submit"><i--}}
{{--                                        class="fa fa-fw fa-lg fa-check-circle"></i>{{ __('create') }}--}}
{{--                            </button>--}}
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('scripts')

    <script type="text/javascript">

        let noOfRows = 1;

        if ($('#keywords').is(':checked'))
            $("#other_keywords").css({"display": ""});

        if ($('#type').val() == 1) {
            $("#msg_en_label").addClass("required");
            $("#msg_ar_label").addClass("required");
        }
        if ($('#type').val() == 2) {
            $("#div_1").css({"display": ""});
        } else if ($('#type').val() == 3) {
            $("#externalLinksType_1").css({"display": ""});
        } else if ($('#type').val() == 4) {
            $("#optionListType_1").css({"display": ""});
        }

        $("#type").select2({
            placeholder: "{{ __('select-type') }}",
            width: "100%",
        });
        $("#parent").select2({
            placeholder: "{{ __('select-parent') }}",
            width: "100%",
        });
        $("#ref1").select2({
            placeholder: "{{ __('select-ref') }}",
            width: "100%",
        });

        function showOtherKeywords() {
            if ($('#keywords').is(':checked'))
                $("#other_keywords").css({"display": ""});
            else
                $("#other_keywords").css({"display": "none"});
        }

        function checkUpload(row) {
            var fileInput = document.getElementById('file'+row);
            var files = fileInput.files;
            if (files.length == 0) {
                $('#icon'+row).css('display', 'none');
            } else {
                if (files.length == 1)
                    $("#text"+row).html("1 file uploaded successfully");
                else
                    $("#text"+row).html(files.length + " files uploaded successfully");
                $('#icon'+row).css('display', 'inline');
            }
        }

        function selectType() {
            if ($('#type').val() == 1) {
                //  $("#textType").css({"display": ""});
                $("#div_1").css({"display": "none"});
                $("#externalLinksType_1").css({"display": "none"});
                $("#optionListType_1").css({"display": "none"});
                $("#msg_en_label").addClass("required");
                $("#msg_ar_label").addClass("required");
            }
            if ($('#type').val() == 2) {
                $("#div_1").css({"display": ""});
                // $("#textType").css({"display": "none"});
                $("#externalLinksType_1").css({"display": "none"});
                $("#optionListType_1").css({"display": "none"});
            } else if ($('#type').val() == 3) {
                $("#externalLinksType_1").css({"display": ""});
                //  $("#textType").css({"display": "none"});
                $("#div_1").css({"display": "none"});
                $("#optionListType_1").css({"display": "none"});
            } else if ($('#type').val() == 4) {
                $("#optionListType_1").css({"display": ""});
                //  $("#textType").css({"display": "none"});
                $("#div_1").css({"display": "none"});
                $("#externalLinksType_1").css({"display": "none"});
            }
        }

        $(".add").click(function(){
            var lastid = $(".element:last").attr("id");
            var split_id = lastid.split("_");
            var nextindex = Number(split_id[1]) + 1;
                // Adding new div container after last occurance of element class
                $(".element:last").after("<div class='element' id='div_"+ nextindex +"'></div>");

                // Adding element to <div>
                $("#div_" + nextindex).append(`
                                <div class="row">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label required">{{ __('image/s') }}</label>
                                        <br>
                                        <button class="btn btn-primary form-control button-upload-file"
                                                style="width: 50%; margin-right: 30px">
                                            <input onchange="checkUpload(` + nextindex + `)" class="input-file" type="file"
                                                   name="images[` + (nextindex-1) + `][]" id="file` + nextindex + `">
                                            <span class="upload-file-content">
                                        <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                        <span class="upload-file-content-text">{{ __('Upload photo') }}</span>
                                    </span>
                                        </button>
                                        <br>
                                        <div id="icon` + nextindex + `" style="display:none;">
                                            <span id="text` + nextindex + `" style="margin-right: 10px"></span>
                                            <i class="fa fa-check-circle fa-2x"
                                               style="color: limegreen;margin: auto;"></i>
                                        </div>
                                    </div>
                                    @error("images")
                <div class="input-error">{{ $message }}</div>
                                    @enderror
                </div>
                <div class="col-lg-3">
                    <div class="form-group">
                        <label class="control-label">{{ __('en-description') }}</label>
                                        <input class="form-control description_en @if ($errors->has('description_en')) is-invalid @endif"
                                               type="text" name="description_en[` + (nextindex-1) + `]"
                                               placeholder='{{ __('enter-en-description') }}'>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label class="control-label">{{ __('ar-description') }}</label>
                                        <input class="form-control description_ar @if ($errors->has('description_ar')) is-invalid @endif"
                                               type="text" name="description_ar[` + (nextindex-1) + `]"
                                               placeholder='{{ __('enter-ar-description') }}'>
                                    </div>
                                </div>


                                <div class="col-lg-2">
                              <i id="remove_` + nextindex + `" class="far fa-trash-alt remove" style="font-size: 24px; cursor: pointer; padding-top: 30px; color: red"></i>
                                </div>
                            </div>
                `);


        });

        $('.container').on('click','.remove',function(){
            var id = this.id;
            var split_id = id.split("_");
            var deleteindex = split_id[1];
            $("#div_" + deleteindex).remove();
           for(var i=0; i<$(".element").length; i++){
               $($(".element").find('.row .col-lg-2 i')[i]).attr("id", "remove_"+(i + 1));
               $($(".element").find('div .form-group div')[i]).attr("id", "icon"+(i + 1));
               $($(".element").find('div .form-group div span')[i]).attr("id", "text"+(i + 1));
               $($(".container").find('.element')[i]).attr("id", "div_"+(i + 1));
               $($(".element").find('div input[type=file]')[i]).attr("id", "file"+(i + 1));
               $($(".element").find('div input[type=file]')[i]).attr("name", "images["+i+"][]");
               $($(".element").find('div .description_en')[i]).attr("name", "description_en["+i+"]");
               $($(".element").find('div .description_ar')[i]).attr("name", "description_ar["+i+"]");
               $("#file" + (i + 1)).attr("onchange", "checkUpload(" + (i + 1) + ")");
            }
        });

        $(".addOption").click(function(){
            var lastid = $(".options-element:last").attr("id");
            var split_id = lastid.split("_");
            var nextindex = Number(split_id[1]) + 1;
            $(".options-element:last").after("<div class='options-element' id='externalLinksType_"+ nextindex +"'></div>");

            // Adding element to <div>
            $("#externalLinksType_" + nextindex).append(`
               <div class="row">
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label class="control-label required">{{ __('en-option') }}</label>
                                       <textarea class="form-control option_en @if ($errors->has('option_en')) is-invalid @endif" id="option_en` + nextindex + `"  name="option_en[` + (nextindex-1) + `]" placeholder='{{ __('enter-en-option') }}'></textarea>
                                    </div>
                                    @error("option_en")
            <div class="input-error">{{ $message }}</div>
                                    @enderror
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <label class="control-label required">{{ __('ar-option') }}</label>
                                               <textarea class="form-control option_ar @if ($errors->has('option_ar')) is-invalid @endif" id="option_ar` + nextindex + `"  name="option_ar[` + (nextindex-1) + `]" placeholder='{{ __('enter-ar-option') }}'></textarea>
                                    </div>
                                    @error('option_ar')
            <div class="input-error">{{ $message }}</div>
                                    @enderror
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                    <label class="control-label required">{{ __('url') }}</label>
                                        <input class="form-control url @if ($errors->has('url')) is-invalid @endif"
                                               type="text" id="url` + nextindex + `" name="url[` + (nextindex-1) + `]" placeholder='{{ __('enter-url') }}'>
                                    </div>
                                    @error('url')
            <div class="input-error">{{ $message }}</div>
                                    @enderror
            </div>
              <div class="col-lg-2">
                              <i id="removeOption_` + nextindex + `" class="far fa-trash-alt remove-option" style="font-size: 24px; cursor: pointer; padding-top: 30px; color: red"></i>
                                </div>
        </div>
`);


        });

        $(".addRef").click(function(){
            var lastid = $(".ref-element:last").attr("id");
            var split_id = lastid.split("_");
            var nextindex = Number(split_id[1]) + 1;
            $(".ref-element:last").after("<div class='ref-element' id='optionListType_"+ nextindex +"'></div>");

            // Adding element to <div>
            $("#optionListType_" + nextindex).append(`
            <hr style="margin-top:30px">
                 <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label required">{{ __('en-title') }}</label>
                                        <input class="form-control option_title_en @if ($errors->has('option_title_en')) is-invalid @endif"
                                               type="text" id="option_title_en` + (nextindex) + `" name="option_title_en[` + (nextindex-1) + `]" placeholder='{{ __('enter-en-title') }}'>
                                    </div>
                                    @error('option_title_en')
            <div class="input-error">{{ $message }}</div>
                                    @enderror
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label class="control-label required">{{ __('ar-title') }}</label>
                                        <input class="form-control option_title_ar @if ($errors->has('option_title_ar')) is-invalid @endif"
                                               type="text" id="option_title_ar` + (nextindex) + `" name="option_title_ar[` + (nextindex-1) + `]"
                                               placeholder='{{ __('enter-ar-title') }}'>
                                    </div>
                                    @error('option_title_ar')
            <div class="input-error">{{ $message }}</div>
                                    @enderror
            </div>
        </div>
        <div class="row" style="padding-top: 10px">
            <div class="col-lg-6">
                <div class="form-group">
                    <label class="control-label">{{ __('option-en-msg') }}</label>
                                               <textarea class="form-control option_msg_en @if ($errors->has('option_msg_en')) is-invalid @endif" id="option_msg_en` + (nextindex) + `" name="option_msg_en[` + (nextindex-1) + `]" placeholder='{{ __('enter-option-en-msg') }}'></textarea>
                                    </div>
                                    @error('option_msg_en')
            <div class="input-error">{{ $message }}</div>
                                    @enderror
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label class="control-label">{{ __('option-ar-msg') }}</label>
                                              <textarea class="form-control option_msg_ar @if ($errors->has('option_msg_ar')) is-invalid @endif" id="option_msg_ar` + (nextindex) + `" name="option_msg_ar[` + (nextindex-1) + `]" placeholder='{{ __('enter-option-ar-msg') }}'></textarea>
                                    </div>
                                    @error('option_msg_ar')
            <div class="input-error">{{ $message }}</div>
                                    @enderror
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <label for="ref" class="required">{{ __('ref') }}</label>
                                    <select class="form-control ref" id="ref` + nextindex + `" name="reference[` + (nextindex-1) + `]" style="margin-bottom: 24px">
                                        <option></option>
                                        @foreach ($triggers as $trigger)
            <option value="{{ $trigger->id }}">
                                                {{ app()->getLocale() === 'ar' ? $trigger->text_ar : $trigger->text_en }}
            </option>
@endforeach
            </select>
@error('reference')
            <div class="input-error" style="padding-top: 15px">{{ $message }}</div>
                                    @enderror
            </div>
         <div class="col-lg-6">
                              <i id="removeRef_` + nextindex + `" class="far fa-trash-alt remove-ref" style="font-size: 24px; cursor: pointer; padding-top: 30px; color: red; float:right"></i>
                                </div>
        </div>
`);
            $("#ref"+nextindex).select2({
                placeholder: "{{ __('select-ref') }}",
                width: "100%",
            });

        });

        $('.options-container').on('click','.remove-option',function(){
            var id = this.id;
            var split_id = id.split("_");
            var deleteindex = split_id[1];
            $("#externalLinksType_" + deleteindex).remove();
            for(var i=0; i<$(".options-element").length; i++){
                $($(".options-container").find('.options-element')[i]).attr("id", "externalLinksType_"+(i + 1));
                $($(".options-element").find('.row .col-lg-2 i')[i]).attr("id", "removeOption_"+(i + 1));
                $($(".options-element").find('div .option_en')[i]).attr("name", "option_en["+i+"]");
                $($(".options-element").find('div .option_ar')[i]).attr("name", "option_ar["+i+"]");
                $($(".options-element").find('div .url')[i]).attr("name", "url["+i+"]");
                $($(".options-element").find('div .option_en')[i]).attr("id", "option_en"+(i + 1));
                $($(".options-element").find('div .option_ar')[i]).attr("id", "option_ar"+(i + 1));
                $($(".options-element").find('div .url')[i]).attr("id", "url"+(i + 1));

            }
        });

        $('.ref-container').on('click','.remove-ref',function(){
            var id = this.id;
            var split_id = id.split("_");
            var deleteindex = split_id[1];
            $("#optionListType_" + deleteindex).remove();
            for(var i=0; i<$(".ref-element").length; i++){
                $($(".ref-container").find('.ref-element')[i]).attr("id", "optionListType_"+(i + 1));
                $($(".ref-element").find('.row .col-lg-6 i')[i]).attr("id", "removeRef_"+(i + 1));
                $($(".ref-element").find('div .option_title_en')[i]).attr("name", "option_title_en["+i+"]");
                $($(".ref-element").find('div .option_title_ar')[i]).attr("name", "option_title_ar["+i+"]");
                $($(".ref-element").find('div .option_msg_en')[i]).attr("name", "option_msg_en["+i+"]");
                $($(".ref-element").find('div .option_msg_ar')[i]).attr("name", "option_msg_ar["+i+"]");
                $($(".ref-element").find('div .option_title_en')[i]).attr("id", "option_title_en"+(i + 1));
                $($(".ref-element").find('div .option_title_ar')[i]).attr("id", "option_title_ar"+(i + 1));
                $($(".ref-element").find('div .option_msg_en')[i]).attr("id", "option_msg_en"+(i + 1));
                $($(".ref-element").find('div .option_msg_ar')[i]).attr("id", "option_msg_ar"+(i + 1));
                $($(".ref-element").find('div .ref')[i]).attr("name", "reference["+i+"]");
                $($(".ref-element").find('div .ref')[i]).attr("id", "ref"+(i + 1));

            }
        });

        $("#addBtn").on( "click", function( event ) {
            var completed = 1;
           if($("#type").val() == 2){
               for(var i=0; i<$(".element").length; i++){
                   if($("#file"+(i+1))[0].files.length == 0){
                       completed = 0;
                       swal({
                           icon: 'error',
                           title: '{{__('error')}}',
                           text: '{{__('upload-image-error')}}' + (i+1)
                       })
                       break;
                   }
               }
           }
            if($("#type").val() == 3){
                for(var i=0; i<$(".options-element").length; i++){
                    if($("#option_en"+(i+1)).val() == "" || $("#option_ar"+(i+1)).val() == "" || $("#url"+(i+1)).val() == ""){
                        completed = 0;
                        swal({
                            icon: 'error',
                            title: '{{__('error')}}',
                            text: '{{__('fill-data-error')}}' + (i+1)
                        })
                        break;
                    }
                }
            }
            if($("#type").val() == 4){
                for(var i=0; i<$(".ref-element").length; i++){
                    if($("#option_title_en"+(i+1)).val() == "" || $("#option_title_ar"+(i+1)).val() == "" || $("#ref"+(i+1)).val() == ""){
                        completed = 0;
                        swal({
                            icon: 'error',
                            title: '{{__('error')}}',
                            text: '{{__('fill-data-error')}}' + (i+1)
                        })
                        break;
                    }
                }
            }
           if(completed == 1){
               $("#addBtn").attr('type', 'submit');
           }
        });
    </script>
@endsection