@extends('crudbooster::admin_template')
@push("head")
    <style>
        .custom_translation_box {
            border: none;
            box-shadow: none;
        }
        .py-40{
            padding: 0 40px;
        }
        .arrow-derection {
            position: relative;
        }
        .arrow-deraction-icon {
            position: absolute;
            font-size: 27px;
            top: 32%;
            right: -67px;
            height: 100%;
            content: '';
            z-index: 1;
        }
        .arrow-deraction-icon button:active,
        .arrow-deraction-icon button:focus {
            outline: 0 !important;
        }
        .pl-0{
            padding-left: 0 !important;
        }
        .pr-0{
            padding-right: 0 !important;
        }
        .pl-40{
            padding-left: 40px !important;
        }
        .ml-40{
            margin-left: 5px !important;
        }
        .mr-40{
            margin-right: 5px !important;
        }
        .pr-40{
            padding-right: 40px !important;
        }
        #app{
            overflow: hidden;
        }
        .box-title{
            font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
            font-weight: 600;
        }

        @media screen and (max-width: 767px) {
            .arrow-deraction-icon {
                top: 32%;
                right: -40px;
            }
            .p-sm-lr{
                padding-left: 15px !important;
                padding-right: 40px;
            }
        }
    </style>
@endpush

@section('content')
<div class="row">
    <div class="col-md-12">
        {{-- general form elements --}}
        <div class="box box-warning">
            <div class="box-header with-border">
                <h3 class="box-title">Submenu Translation</h3>
            </div>
            {{-- /.box-header --}}
            <div class="box-body row">
                <div class="col-md-6 col-lg-6 pr-40">
                    <div class="box box-solid custom_translation_box">
                        {{--<div class="box-header with-border">
                            <h3 class="box-title">Current language</h3>
                        </div>--}}
                        {{-- /.box-header --}}
                        <div class="box-body ">
                            <div class="form-group">
                                <label>Current Language</label>
                                <select class="form-control" name="lang" disabled>
                                    @if(!empty($curlang))
                                        @foreach($curlang as $lang)
                                            <option value="{{$lang->id}}" selected>{{$lang->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="form-group arrow-derection">
                                <label for="title">Submenu Name</label>
                                <input type="text" class="form-control" id="title" placeholder="Title" value="{{ $submenu->menu_name }}">
                                <span class="arrow-deraction-icon">
                                    <button type="button" class="btn btn-secondary" id="translation_name" onclick="trans_submenu()"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
                                </span>
                            </div>
                            <div class="form-group arrow-derection">
                                <label for="title">Description</label>

                                <textarea class="form-control" rows="5" placeholder="Submenu description">{{ $submenu->description}}</textarea>
                                {{-- <span class="arrow-deraction-icon">
                                    <button type="button" class="btn btn-secondary" onclick="trans_analyses('body')"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
                                </span> --}}
                                <span class="arrow-deraction-icon">
                                    <button type="button" class="btn btn-secondary" id="translation_description" onclick="trans_submenu('description')"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
                                </span>
                            </div>
                        </div>
                        {{-- /.box-body --}}
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 pl-40">
                    <div class="box box-solid custom_translation_box">
                        {{--<div class="box-header with-border">
                            <h3 class="box-title">Choose Translate Langugae</h3>
                        </div>--}}
                        {{-- /.box-header --}}
                        <div class="box-body">
                            <form method='post' action="{{ CRUDBooster::mainpath('translate/'.$submenu->id) }}">
                            @csrf
                                <div class="form-group">
                                    <label>Choose Translate Language</label>
                                    <select class="form-control" name="lang" id="langid" required>
                                        <option value="">Select Language</option>
                                        @if(!empty($langs))
                                            @foreach($langs as $lang)
                                                <option value="{{ $lang->id }}" data-code="{{$lang->short_code}}">{{ $lang->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="title">Submenu Name<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="submenu_name" name="submenu_name" placeholder="Submenu Name" required>
                                </div>
                                <div class="form-group">
                                    <label for="title">Description</label>
                                    <textarea class="form-control" name="description" id="description" rows="5" placeholder="Submenu description"></textarea>
                                </div>

                                <input type="hidden" class="form-control" id="subid" value="{{ $submenu->id }}">
                                <div class="form-group">
                                    <a @if($next == null) {{"disabled href=javascript:void(0) "}} @else href='{{ CRUDBooster::mainpath('translate/'.$next )}}'  @endif class="btn btn-warning pull-right">
                                        Next<i class="fa fa-angle-double-right ml-40" aria-hidden="true"></i>
                                    </a>
                                    <button type="submit" class="btn btn-primary pull-right ml-40 mr-40">
                                        <i class="fa fa-save" aria-hidden="true">&nbsp;</i>Translate
                                    </button>
                                    <a @if($previous == null) {{"disabled href=javascript:void(0) "}} @else href="{{ CRUDBooster::mainpath('translate/'.$previous )}}" @endif  class="btn btn-warning pull-right">
                                        <i class="fa fa-angle-double-left" aria-hidden="true"></i>
                                        Previous
                                    </a>
                                </div>
                            </form>
                        </div>
                        {{-- /.box-body --}}
                    </div>
                </div>
            </div>
            {{-- /.box-body --}}
        </div>
        {{-- /.box --}}
    </div>
</div>
@endsection


@push("bottom")
    <script>
        $(document).ready( function(){
            $("#langid").on('change',function(){
                var langid = $(this).find('option:selected').val();
                var subid = $("#subid").val();
                let short_code = $(this).find('option:selected').data('code')
                if(langid > 0){
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "{{ route('Tajax.submenus') }}",
                        data: {
                            langid : langid, subid : subid
                        },beforeSend: function(){
                            swal({
                                title: `{{__('action.processing')}}`,
                                imageUrl: "{!! asset('/') !!}"+"ezgif.com-gif-maker.webp",
                                showConfirmButton: false,
                                allowOutsideClick: false,
                                confirm: true,
                                showLoaderOnConfirm: true,
                                width: '300px',
                                height: '180px'
                            })
                        },
                        success: function(msg) {
                            swal.close();
                            if(msg.status == true) {
                                let name = short_code+'_menu_name';
                                let description = short_code+'_description';
                                $("#submenu_name").val(msg.submenu[name]);
                                $("#description").val(msg.submenu[description]);
                            } else {
                                $("#submenu_name").val("");
                            }
                        }
                    });
                }else{
                    $("#submenu_name").val("");
                    $("#description").val("");
                }
            })
        })

        function trans_submenu(column = null)
        {
            var langid = $('#langid').find('option:selected').val();
            console.log(column);
            if(langid == 0) {
                swal({
				title: "Warning!",
				text: "Please choose a language",
				type: "warning",
				showCancelButton: false,
				confirmButtonColor: "#ff0000",
				confirmButtonText: "OK!",
				cancelButtonText: "No",
                closeOnConfirm: false });
                return 0;
            }
            let subid = $("#subid").val();

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{{ route('Tajax.translate_submenu') }}",
                data: {
                    langid : langid, subid : subid,column : column
                },
                beforeSend: function(){
                    swal({
                        title: `{{__('action.processing')}}`,
                        imageUrl: "{!! asset('/') !!}"+"ezgif.com-gif-maker.webp",
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        confirm: true,
                        showLoaderOnConfirm: true,
                        width: '300px',
                        height: '180px'
                    })
                },
                success: function(msg) {
                    swal.close();
                    if(msg.response != null) {
                        if($("#submenu_name").val() == "" || $("#description").val() == "") {
                            if(column == null)$("#submenu_name").val(msg.response);
                            else if(column != null) $('#description').val(msg.response);
                        }else {
                            swal({ title: "Warning!", text: "Alreday Translated.", type: "warning", confirmButtonColor: "#f39c12", confirmButtonText: "OK"});
                        }
                    } else {
                        swal({
                            title: "Warning!",
                            text: "No text found from source.",
                            type: "warning",
                            showCancelButton: false,
                            confirmButtonColor: "#ff0000",
                            confirmButtonText: "OK!",
                            cancelButtonText: "No",
                            closeOnConfirm: false
                        });
                    }
                }
            });
        }
    </script>
@endpush