@extends('layouts.admin.app')
@section('page-title')
    {{ __('edit-chatbot') }}
@endSection
@section('page-nav-title')
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{ __('edit-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="#">{{ __('edit') }}</a></li>
        </ul>
    </div>
@endsection
@section('content')
    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{ __('edit') }}</h3>
                <div class="tile-body">
                    <form method="post" id="addForm" action="{{ route('admin.chatbot.update', $trigger->id) }}" enctype="multipart/form-data">
                        @method("put")
                        @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($trigger->type_id == $type->id) selected @else disabled @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 $trig)
                                        <option value="{{ $trig->id }}"
                                                @if($trigger->parent_id == $trig->id) selected @endif>
                                            {{ app()->getLocale() === 'ar' ? $trig->text_ar : $trig->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("text_en", $trigger)}}">
                                </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("text_ar", $trigger)}}">
                                </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)" @if(count($trigger->areas) > 1) checked @endif>
                        <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="{{$enKeyWords}}">
                                </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="{{$arKeyWords}}">
                                </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_ar')) is-invalid @endif" name="msg_en" placeholder='{{ __('enter-en-msg') }}'>{{inputValue("msg_en", $trigger)}}</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", $trigger)}}">--}}
                                </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", $trigger)}}</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", $trigger)}}">--}}
                                </div>
                                @error('msg_ar')
                                <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                            <div class="element" id='div_1' style="display: none">
                                <label class="control-label">{{ __('image/s') }}</label>
                                @if(isset($images))
                                    @foreach($images as $image)
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <img src="{{$image->img_path}}" height="100" width="100">
                                                    <br>
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="form-group">
                                                    <label class="control-label">{{ __('en-description') }}</label>
                                                    <input class="form-control @if ($errors->has('description_en')) is-invalid @endif"
                                                           type="text" name="description_en" readonly value="{{$image->text_en}}"
                                                           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 @if ($errors->has('description_ar')) is-invalid @endif"
                                                           type="text" name="description_ar" readonly value="{{$image->text_ar}}"
                                                           placeholder='{{ __('enter-ar-description') }}'>
                                                </div>
                                            </div>
                                            <div class="col-lg-2">
                                                <a onclick="editModal('{{$image->id}}', '{{$image->img_path}}', '{{$image->text_en}}', '{{$image->text_ar}}')"><i class="fas fa-edit" style="font-size: 22px; color: green; cursor: pointer; padding-top: 30px"></i></a>

                                                <a onclick="deleteImg('{{$image->id}}', '{{App::getLocale()}}')"><i class="far fa-trash-alt" style="font-size: 22px; color: red; cursor: pointer; padding-top: 30px"></i></a>
                                            </div>
                                        </div>
                                    @endforeach
                                    <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#addModal"><i class="fa fa-fw fa-lg fa-plus-circle"></i> {{__("add-img")}}</button>
                                @endif
                            </div>

                            <div class="options-element" id="externalLinksType_1" style="display: none">
                                @foreach($trigger->externalLinks as $link)
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label class="control-label required">{{ __('en-option') }}</label>
{{--                                                <input class="form-control @if ($errors->has('option_en')) is-invalid @endif"--}}
{{--                                                       type="text" name="option_en" placeholder='{{ __('enter-en-option') }}' value="{{$link->option_en}}" readonly>--}}
                                                <textarea class="form-control @if ($errors->has('option_en')) is-invalid @endif"  name="option_en" placeholder='{{ __('enter-en-option') }}' readonly>{{$link->option_en}}</textarea>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label class="control-label required">{{ __('ar-option') }}</label>
{{--                                                <input class="form-control @if ($errors->has('option_ar')) is-invalid @endif"--}}
{{--                                                       type="text" name="option_ar" placeholder='{{ __('enter-ar-option') }}' value="{{$link->option_ar}}" readonly>--}}
                                                <textarea class="form-control @if ($errors->has('option_ar')) is-invalid @endif"  name="option_ar" placeholder='{{ __('enter-ar-option') }}' readonly>{{$link->option_ar}}</textarea>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label class="control-label required">{{ __('url') }}</label>
                                                <input class="form-control @if ($errors->has('url')) is-invalid @endif"
                                                       type="text" name="url" placeholder='{{ __('enter-url') }}' value="{{$link->url}}" readonly>
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <a onclick="editLinkModal('{{$link->id}}', '{{$link->option_en}}', '{{$link->option_ar}}', '{{$link->url}}')"><i class="fas fa-edit" style="font-size: 22px; color: green; cursor: pointer; padding-top: 30px"></i></a>

                                            <a onclick="deleteOption('{{$link->id}}', '{{App::getLocale()}}')"><i class="far fa-trash-alt" style="font-size: 22px; color: red; cursor: pointer; padding-top: 30px"></i></a>
                                        </div>
                                    </div>
                                @endforeach
                                <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#addOptionModal"><i class="fa fa-fw fa-lg fa-plus-circle"></i> {{__("add-option")}}</button>
                            </div>
                        <div id="optionListType" style="display: none">
                            @if(isset($trigger->options))
                                @foreach($trigger->options as $opt)
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="control-label required">{{ __('en-title') }}</label>
                                                <input class="form-control @if ($errors->has('option_title_en')) is-invalid @endif"
                                                       type="text" name="option_title_en" placeholder='{{ __('enter-en-title') }}' value="{{$opt->title_en}}" readonly>
                                            </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 @if ($errors->has('option_title_ar')) is-invalid @endif"
                                                       type="text" name="option_title_ar"
                                                       placeholder='{{ __('enter-ar-title') }}' value="{{$opt->title_ar}}" readonly>
                                            </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 @if ($errors->has('option_msg_en')) is-invalid @endif" name="option_msg_en" placeholder='{{ __('enter-option-en-msg') }}' readonly>{{$opt->msg_en}}</textarea>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="control-label">{{ __('option-ar-msg') }}</label>
                                                <textarea class="form-control @if ($errors->has('option_msg_ar')) is-invalid @endif" name="option_msg_en" placeholder='{{ __('enter-option-ar-msg') }}' readonly>{{$opt->msg_ar}}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <label for="ref" class="required">{{ __('ref') }}</label>
                                            <select class="form-control" name="reference" style="margin-bottom: 24px">
                                                @foreach ($triggers as $trigg)
                                                    <option value="{{ $trigg->id }}" @if($opt->ref_id == $trigg->id) selected @else disabled @endif>
                                                        {{ app()->getLocale() === 'ar' ? $trigg->text_ar : $trigg->text_en }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-6">
                                            <a onclick="editRefModal('{{$opt->id}}', '{{App::getLocale()}}')"><i class="fas fa-edit" style="font-size: 22px; color: green; cursor: pointer; padding-top: 30px; float:right"></i></a>

                                            <a onclick="deleteRef('{{$opt->id}}', '{{App::getLocale()}}')"><i class="far fa-trash-alt" style="font-size: 22px; color: red; cursor: pointer; padding-top: 30px;padding-right: 10px; float:right"></i></a>
                                        </div>
                                    </div>
                                    <hr>
                                @endforeach
                            @endif
                            <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#addRefModal"><i class="fa fa-fw fa-lg fa-plus-circle"></i> {{__("add-new-option")}}</button>
                        </div>
                        <div class="tile-footer">
                            <button class="btn btn-primary" type="submit"><i
                                        class="fa fa-fw fa-lg fa-check-circle"></i>{{ __('edit') }}
                            </button>
                        </div>
                    </form>
                </div>

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


    <!-- Modal -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ __('edit-image') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal('editModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" action="{{ route('admin.chatbot.edit-img') }}" enctype="multipart/form-data">
                    @csrf
                <div class="modal-body">
                    <input type="hidden" id="imgId" name="id">
                    <div class="row">
                        <div class="col-lg-8">
                            <button class="btn btn-primary form-control button-upload-file"
                                    style="width: 50%; margin-right: 30px">
                                <input class="input-file" type="file" id="uploadPhoto" name="img">
                                <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>
                        </div>
                        <div class="col-lg-4">
                            <img id="previewImg" height="100" width="100">
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('en-description') }}</label>
                                <input class="form-control @if ($errors->has('description_en')) is-invalid @endif"
                                       type="text" placeholder='{{ __('enter-en-description') }}' id="description_en" name="description_en">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('ar-description') }}</label>
                                <input class="form-control @if ($errors->has('description_ar')) is-invalid @endif" type="text" placeholder='{{ __('enter-ar-description') }}' id="description_ar" name="description_ar">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModal('editModal')">Close</button>
{{--                    <button type="button" class="btn btn-primary">Save changes</button>--}}
                    <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Save")}}</button>

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

    <div class="modal fade" id="editLinkModal" tabindex="-1" role="dialog" aria-labelledby="editLinkModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editLinkModalLabel">{{ __('edit-link') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal('editLinkModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" action="{{ route('admin.chatbot.edit-link') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="linkId" name="linkId">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('en-option') }}</label>
{{--                                    <input class="form-control @if ($errors->has('option_en')) is-invalid @endif"--}}
{{--                                           type="text" placeholder='{{ __('enter-en-option') }}' id="option_en" name="option_en" required>--}}
                                <textarea class="form-control @if ($errors->has('option_en')) is-invalid @endif" placeholder='{{ __('enter-en-option') }}' id="option_en" name="option_en" required></textarea>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('ar-option') }}</label>
{{--                                    <input class="form-control @if ($errors->has('option_ar')) is-invalid @endif" type="text" placeholder='{{ __('enter-ar-option') }}' id="option_ar" name="option_ar" required>--}}
                                    <textarea class="form-control @if ($errors->has('option_ar')) is-invalid @endif" placeholder='{{ __('enter-ar-option') }}' id="option_ar" name="option_ar" required></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('url') }}</label>
                                    <input class="form-control @if ($errors->has('url')) is-invalid @endif" type="text" placeholder='{{ __('enter-url') }}' id="url" name="url" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModal('editLinkModal')">Close</button>
                        {{--                    <button type="button" class="btn btn-primary">Save changes</button>--}}
                        <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Save")}}</button>

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

    <div class="modal fade" id="editRefModal" tabindex="-1" role="dialog" aria-labelledby="editRefModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editRefModalLabel">{{ __('edit-option') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal('editRefModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" action="{{ route('admin.chatbot.edit-ref') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="refId" name="refId">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('en-title') }}</label>
                                    <input class="form-control @if ($errors->has('option_title_en')) is-invalid @endif"
                                           type="text" placeholder='{{ __('enter-en-title') }}' id="option_title_en" name="option_title_en" required>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('ar-title') }}</label>
                                    <input class="form-control @if ($errors->has('option_title_ar')) is-invalid @endif" type="text" placeholder='{{ __('enter-ar-title') }}' id="option_title_ar" name="option_title_ar" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('option-en-msg') }}</label>
                                    <textarea class="form-control @if ($errors->has('option_msg_en')) is-invalid @endif" id="option_msg_en" name="option_msg_en" placeholder='{{ __('enter-option-en-msg') }}'></textarea>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('option-ar-msg') }}</label>
                                    <textarea class="form-control @if ($errors->has('option_msg_ar')) is-invalid @endif" id="option_msg_ar" name="option_msg_ar" placeholder='{{ __('enter-option-ar-msg') }}'></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <label for="ref" class="required">{{ __('ref') }}</label>
                                <select class="form-control ref" id="ref" name="reference" style="margin-bottom: 24px" required>
                                    <option></option>
                                    @foreach ($triggers as $trig)
                                        <option value="{{ $trig->id }}">
                                            {{ app()->getLocale() === 'ar' ? $trig->text_ar : $trig->text_en }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModal('editRefModal')">Close</button>
                        {{--                    <button type="button" class="btn btn-primary">Save changes</button>--}}
                        <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Save")}}</button>

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

    <!-- Modal -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ __('add-img') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal('addModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" action="{{ route('admin.chatbot.add-img') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="triggerId" value="{{$trigger->id}}">
                        <div class="row">
                            <div class="col-lg-8">
                                <button class="btn btn-primary form-control button-upload-file"
                                        style="width: 50%; margin-right: 30px">
                                    <input class="input-file" type="file" id="uploadNewPhoto" name="img" required>
                                    <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>
                            </div>
                            <div class="col-lg-4">
                                <img id="previewAddImg" height="100" width="100">
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('en-description') }}</label>
                                    <input class="form-control @if ($errors->has('description_en')) is-invalid @endif"
                                           type="text" placeholder='{{ __('enter-en-description') }}' id="description_en" name="description_en">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('ar-description') }}</label>
                                    <input class="form-control @if ($errors->has('description_ar')) is-invalid @endif" type="text" placeholder='{{ __('enter-ar-description') }}' id="description_ar" name="description_ar">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModal('addModal')">Close</button>
                        {{--                    <button type="button" class="btn btn-primary">Save changes</button>--}}
                        <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Save")}}</button>

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

    <div class="modal fade" id="addOptionModal" tabindex="-1" role="dialog" aria-labelledby="addOptionModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addOptionModalLabel">{{ __('add-option') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal('addOptionModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" action="{{ route('admin.chatbot.add-link') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="triggerId" value="{{$trigger->id}}">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('en-option') }}</label>
                                    <input class="form-control @if ($errors->has('option_en')) is-invalid @endif"
                                           type="text" placeholder='{{ __('enter-en-option') }}' name="option_en" required>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('ar-option') }}</label>
                                    <input class="form-control @if ($errors->has('option_ar')) is-invalid @endif" type="text" placeholder='{{ __('enter-ar-option') }}' name="option_ar" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('url') }}</label>
                                    <input class="form-control @if ($errors->has('url')) is-invalid @endif"
                                           type="text" placeholder='{{ __('enter-url') }}' name="url" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModal('addOptionModal')">Close</button>
                        {{--                    <button type="button" class="btn btn-primary">Save changes</button>--}}
                        <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Save")}}</button>

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

    <div class="modal fade" id="addRefModal" tabindex="-1" role="dialog" aria-labelledby="addRefModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addRefModalLabel">{{ __('add-new-option') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal('addRefModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" action="{{ route('admin.chatbot.add-ref') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="triggerId" value="{{$trigger->id}}">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('en-title') }}</label>
                                    <input class="form-control @if ($errors->has('option_title_en')) is-invalid @endif"
                                           type="text" placeholder='{{ __('enter-en-title') }}' id="option_title_en" name="option_title_en" required>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('ar-title') }}</label>
                                    <input class="form-control @if ($errors->has('option_title_ar')) is-invalid @endif" type="text" placeholder='{{ __('enter-ar-title') }}' id="option_title_ar" name="option_title_ar" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('option-en-msg') }}</label>
                                    <input class="form-control @if ($errors->has('option_msg_en')) is-invalid @endif"
                                           type="text" placeholder='{{ __('enter-option-en-msg') }}' id="option_msg_en" name="option_msg_en">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('option-ar-msg') }}</label>
                                    <input class="form-control @if ($errors->has('option_msg_ar')) is-invalid @endif"
                                           type="text" placeholder='{{ __('enter-option-ar-msg') }}' id="option_msg_ar" name="option_msg_ar">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <label for="ref" class="required">{{ __('ref') }}</label>
                                <select class="form-control ref" id="referenc" name="reference" style="margin-bottom: 24px" required>
                                    <option></option>
                                    @foreach ($triggers as $trig)
                                        <option value="{{ $trig->id }}">
                                            {{ app()->getLocale() === 'ar' ? $trig->text_ar : $trig->text_en }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModal('addRefModal')">Close</button>
                        {{--                    <button type="button" class="btn btn-primary">Save changes</button>--}}
                        <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Save")}}</button>

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

    <script type="text/javascript">

        var baseUrl = window.location.origin;

        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").css({"display": ""});
        }

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

        $("#uploadPhoto").change(function () {
            const file = this.files[0];
            if (file) {
                let reader = new FileReader();
                reader.onload = function (event) {
                    $("#previewImg")
                        .attr("src", event.target.result);
                };
                reader.readAsDataURL(file);
            }
        });

        $("#uploadNewPhoto").change(function () {
            const file = this.files[0];
            if (file) {
                let reader = new FileReader();
                reader.onload = function (event) {
                    $("#previewAddImg")
                        .attr("src", event.target.result);
                };
                reader.readAsDataURL(file);
            }
        });

        function editModal(id, img, enDesc, arDesc) {
            $("#previewImg").attr("src", img);
            $("#description_en").val(enDesc);
            $("#description_ar").val(arDesc);
            $("#imgId").val(id);
           $("#editModal").modal('show');
        }

        function editLinkModal(id, enOption, arOption, url) {
            $("#option_en").val(enOption);
            $("#option_ar").val(arOption);
            $("#url").val(url);
            $("#linkId").val(id);
            $("#editLinkModal").modal('show');
        }

        function editRefModal(id, lang) {
            console.log(id);
            $.ajax({
                type: "get",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + "/"+lang+"/ajax/chatbot/get-ref/"+id,
                success: function (response) {
                    //  response = JSON.parse(response);
                   if (response["status"] === 200) {
                       console.log(response["data"]['id']);
                       $("#option_title_en").val(response["data"]['title_en']);
                       $("#option_title_ar").val(response["data"]['title_ar']);
                       $("#option_msg_en").val(response["data"]['msg_en']);
                       $("#option_msg_ar").val(response["data"]['msg_ar']);
                       $("#ref").val(response["data"]['ref_id']);
                       $("#refId").val(response["data"]['id']);
                       $("#editRefModal").modal('show');
                    }
                },
                error: function (response) {

                }
            });
           /* $("#option_title_en").val(enTitle);
            $("#option_title_ar").val(arTitle);
            $("#option_msg_en").val(enMsh);
            $("#option_msg_ar").val(arMsg);
            $("#ref").val(ref);
            $("#refId").val(id);
            $("#editRefModal").modal('show');*/
        }

        function closeModal(modal) {
            $("#"+modal).modal('hide');
        }

        function deleteImg(id, lang){
            swal({
                title: '{{__("delete-image")}}',
                text: '{{__("are-you-sure-to-delete-this-image?")}}',
                icon: "warning",
                buttons: ['{{__("No")}}', '{{__("yes")}}'],
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    $.ajax({
                        type: "delete",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: baseUrl + "/"+lang+"/ajax/chatbot/delete-img/"+id,
                        success: function (response) {
                            //  response = JSON.parse(response);
                            if (response["status"] === 200) {
                                swal({
                                    title: "Deleted Successfully",
                                    text: response["message"],
                                    icon: "success",
                                })
                                setTimeout((function() {
                                   location.reload();
                                }), 2000);
                            }else if (response["status"] === 201) {
                                swal({
                                    title: '{{__("delete-failed")}}',
                                    text: response["message"],
                                    icon: "error",
                                })
                            }
                        },
                        error: function (response) {

                        }
                    });
                }
            })
        }

        function deleteOption(id, lang){
            swal({
                title: '{{__("delete-link")}}',
                text: '{{__("are-you-sure-to-delete-this-link?")}}',
                icon: "warning",
                buttons: ['{{__("No")}}', '{{__("yes")}}'],
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    $.ajax({
                        type: "delete",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: baseUrl + "/"+lang+"/ajax/chatbot/delete-option/"+id,
                        success: function (response) {
                            //  response = JSON.parse(response);
                            if (response["status"] === 200) {
                                swal({
                                    title: "Deleted Successfully",
                                    text: response["message"],
                                    icon: "success",
                                })
                                setTimeout((function() {
                                    location.reload();
                                }), 2000);
                            }else if (response["status"] === 201) {
                                swal({
                                    title: '{{__("delete-failed")}}',
                                    text: response["message"],
                                    icon: "error",
                                })
                            }
                        },
                        error: function (response) {

                        }
                    });
                }
            })
        }

        function deleteRef(id, lang){
            swal({
                title: '{{__("delete-option")}}',
                text: '{{__("are-you-sure-to-delete-this-option?")}}',
                icon: "warning",
                buttons: ['{{__("No")}}', '{{__("yes")}}'],
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    $.ajax({
                        type: "delete",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: baseUrl + "/"+lang+"/ajax/chatbot/delete-ref/"+id,
                        success: function (response) {
                            //  response = JSON.parse(response);
                            if (response["status"] === 200) {
                                swal({
                                    title: "Deleted Successfully",
                                    text: response["message"],
                                    icon: "success",
                                })
                                setTimeout((function() {
                                    location.reload();
                                }), 2000);
                            }else if (response["status"] === 201) {
                                swal({
                                    title: '{{__("delete-failed")}}',
                                    text: response["message"],
                                    icon: "error",
                                })
                            }
                        },
                        error: function (response) {

                        }
                    });
                }
            })
        }

        function showOtherKeywords() {
            if ($('#keywords').is(':checked'))
                $("#other_keywords").css({"display": ""});
            else
                $("#other_keywords").css({"display": "none"});
        }
    </script>
@endsection