@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">Enfluess Image Translation</h3>
            </div>
            {{-- /.box-header --}}
            <div class="box-body row">
                <div class="col-md-6 col-lg-6 pr-40 col-sm-6">
                    <div class="box box-solid custom_translation_box">
                        {{-- /.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}}" @if($lang->id == 2) @disabled(true) @selected(true) @endif >{{$lang->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="form-group arrow-derection">
                                <label for="title">Image Name</label>
                                <input type="text" class="form-control" id="title" placeholder="Image name" value="{{ $image_name->name }}">
                                <span class="arrow-deraction-icon">
                                    <button type="button" class="btn btn-secondary" onclick="trans_causes('title')"><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 p-sm-lr col-sm-6">
                    <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/'.$image_name->id) }}"  enctype="multipart/form-data">
                            @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 }}" {{ $admin->langid == $lang->id ? 'selected' : '' }}>{{ $lang->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="title">Image Name</label>
                                    <input type="text" class="form-control" id="t_title" name="title" placeholder="Image name" required>
                                </div>

                                <div class="form-group" id="upload_section">
                                    <label for="title">Image</label>
                                    <input type="file" class="form-control" id="image" name="image" placeholder="Image name">
                                </div>

                                <div class="form-group" id="image_show">
                                    <label for="title">Image</label>
                                    <img alt="" height="100" id="image_url" width="80" onclick="image_delete({{ $image_name->id }})">
                                </div>


                                <input type="hidden" class="form-control" id="enfid" value="{{ $image_name->id }}">
                                <div class="form-group">
                                    <a @if($next_id == null) {{"disabled href=javascript:void(0) "}} @else href="{{CRUDBooster::mainpath('translate/'.$next_id)}}" @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_id == null) {{"disabled href=javascript:void(0) "}} @else href="{{CRUDBooster::mainpath('translate/'.$previous_id)}}" @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>
        var langid = 0;
        $("#upload_section").hide();
        $("#image_show").hide();
        $(document).ready( function(){
            var select = $('#langid').find('option:selected').val();
            if(select) {
                langid = select;
                var enfid = $("#enfid").val();

                $.ajax({

                    type: "POST",
                    dataType: "json",
                    url: "{{ route('Tajax.translate_enfluess') }}",
                    data: {
                        langid : langid, enfid : enfid
                    },
                    success: function(msg) {

                        if(msg.status == true)
                        {
                            $("#t_title").val(msg.response);
                            if(msg.image != null){
                                $("#image_show").show();
                                $("#image_url").attr("src", msg.image);
                            }else{
                                $('#upload_section').show();
                            }
                        }else{
                            $("#t_title").val("");
                        }
                    }
                });
            }

            $("#langid").on('change',function(){

                var select = $(this).find('option:selected');
                langid = select.val();
                var enfid = $("#enfid").val();

                $.ajax({

                    type: "POST",
                    dataType: "json",
                    url: "{{ route('Tajax.translate_enfluess') }}",
                    data: {
                        langid : langid, enfid : enfid
                    },
                    success: function(msg) {

                        if(msg.status == true)
                        {
                            $("#t_title").val(msg.response);
                            if(msg.image != null){
                                $("#image_show").show();
                                $("#image_url").attr("src", msg.image);
                            }else{
                                $('#upload_section').show();
                            }
                        }else{
                            $("#t_title").val("");
                        }
                    }
                });
            })
        })

        function trans_causes(type)
        {
            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;
            }

            var enfid = $("#enfid").val();

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{{ route('Tajax.translate_enfluess') }}",
                data: {
                    langid : langid, enfid : enfid
                },
                success: function(msg) {
                    if(msg.response != null) {
                        if(msg.image != null){
                            $("#image_show").show();
                            $("#image_url").attr("src", msg.image);
                        }else{
                            $('#upload_section').show();
                        }
                        $("#t_title").val(msg.response);
                    } else {
                        swal({
                            title: "Warning!",
                            text: "No text found from source.",
                            type: "warning",
                            showCancelButton: false,
                            confirmButtonColor: "#ff0000",
                            confirmButtonText: "OK!",
                            cancelButtonText: "No",
                            closeOnConfirm: false
                        });
                    }
                }
            });
        }

        function  image_delete(id) {
            let langid = $('#langid').val();
            if(langid == 0 || langid == '') {
                swal({
				title: "Warning!",
				text: "Please choose a language",
				type: "warning",
				showCancelButton: false,
				confirmButtonColor: "#ff0000",
				confirmButtonText: "OK!",
				cancelButtonText: "No",
                closeOnConfirm: false });
                return 0;
            }
            swal({
            title: "Are you sure ?",
            text: "You will not be able to recover this record data!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#ff0000",
            confirmButtonText: "Yes!",
            cancelButtonText: "No",
            closeOnConfirm: false },
            function(){
                location.href="{{ CRUDBooster::mainpath('deleteimages/')}}"+id+'/'+langid
            });
        }
    </script>
@endpush