@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">Product 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">
                        {{--<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">Product Name</label>
                                <input type="text" class="form-control" id="title" placeholder="Title" value="{{ $product->product_name }}">
                                <span class="arrow-deraction-icon">
                                    <button type="button" class="btn btn-secondary" id="translation_name" onclick="trans_product()"><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/'.$product->id) }}">
                            @csrf
                                <div class="form-group">
                                    <label>Choose Translate Language</label>
                                    <select class="form-control" name="lang" id="langid">
                                        <option value="">Select Language</option>
                                        @if(!empty($langs))
                                            @foreach($langs as $lang)
                                                <option value="{{ $lang->id }}">{{ $lang->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @if ($errors->has('lang'))
                                        <span class="invalid feedback"role="alert">
                                            <strong class="text-danger">{{ $errors->first('lang') }}.</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label for="title">Product Name</label>
                                    <input type="text" class="form-control" id="proName" name="proName" placeholder="Product Name" required>
                                </div>
                                <input type="hidden" class="form-control" id="proid" value="{{ $product->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(){
                let langid = $(this).find('option:selected').val();
                console.log(langid);
                var proid = $("#proid").val();
                if(langid != ''){
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "{{ route('Tajax.products') }}",
                        data: {
                            langid : langid, proid : proid
                        },
                        success: function(msg) {
                            if(msg.status == true){
                                $("#proName").val(msg.product);
                            }else{
                                $("#proName").val("");
                            }
                        }
                    });
                }else{
                    $("#proName").val('');
                }

            })
        })

        function trans_product()
        {
        let langid = $('#langid').find('option:selected').val();
            if(langid == '') {
                return swal({
                    title: "Warning!",
                    text: "Please choose a language",
                    type: "warning",
                    showCancelButton: false,
                    confirmButtonColor: "#ff0000",
                    confirmButtonText: "OK!",
                    cancelButtonText: "No",
                    closeOnConfirm: false
                });
            }
            let proid = $("#proid").val();
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{{ route('Tajax.translate_product') }}",
                data: {
                    langid : langid, proid : proid
                },
                success: function(msg) {
                    if(msg.response != null) {
                        if($("#proName").val() == "") {
                            $("#proName").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