{{--graphic--}}
<script src="{{asset('js/comparisonSlider.js')}}"></script>
<div class="col-sm-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>图文模块</h5>
            <div class="ibox-tools">
                <a class="" id="directionUp-{{$count}}">
                    <i class="fa " onclick="changePosition('{{$count}}', 'up', '{{$id}}', '{{route('updatePositionByUpDown')}}', '{{ csrf_token() }}')">上移</i>
                </a>
                <a class="" id="directionDown-{{$count}}">
                    <i class="fa " onclick="changePosition('{{$count}}', 'down', '{{$id}}', '{{route('updatePositionByUpDown')}}', '{{ csrf_token() }}')">下移</i>
                </a>
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <div class="row ">
                @php $graphics = $module->graphics; @endphp
                <div class="form-group ">
                    <a class="btn  btn-white" onclick="lay_show('图片上传','{{route('editModule', ['id'=>$module->id,'number'=>'3'])}}')">管理内容</a>
                    <a onclick="deleteTranslationModule('{{$module->id}}')" class="btn btn-white "><i class="fa fa-times"></i> 删除此模块</a>
                    <label class=" control-label">
                        <select class="form-control" id="hideModule3{{$module->id}}" onchange="hideTranslationModule('{{$module->id}}', 'hideModule3{{$module->id}}')">
                            <option value="1" hassubinfo="true" {{$module->status==1?'selected':null}}>显示此模块</option>
                            <option value="0" hassubinfo="true" {{$module->status==0?'selected':null}}>关闭此模块</option>
                        </select>
                    </label>
                    <label class=" control-label" >
                        <select class="form-control" onchange="togglePreviewGraphics('{{$module->translation_id}}', 'select{{$module->id}}')" id="select{{$module->id}}">
                            <option value="english" hassubinfo="true" {{$preview == 'english'?'selected':null}}>英文预览</option>
                            <option value="chinese" hassubinfo="true" {{$preview =='chinese'?'selected':null}}>中文预览</option>
                        </select>
                    </label>
                </div>
                <div class="mb-20" style="text-align: center; color: #FDA434"><h1>{{$preview =='chinese'?$module->titleChinese:$module->titleEnglish}}</h1></div>
                <div id="comparisonSlider">
                    @php $counter = 0; @endphp
                    @foreach($graphics as $graphic)
                        @if($preview == 'english')
                            @php $carouselArray = (array)json_decode($graphic->carouselEnglish, true); @endphp
                        @else
                            @php $carouselArray = (array)json_decode($graphic->carouselChinese, true); @endphp
                        @endif
                        @if($counter % 2 == 0)
                            <div class="row">
                                <div class="col-xs-6" style="text-align: center">
                                    @if($preview == 'english')
                                        <h3>{!! htmlspecialchars_decode($graphic->nameEnglish) !!}</h3>
                                        {!! htmlspecialchars_decode($graphic->introductionEnglish) !!}
                                    @else
                                        <h3>{!! htmlspecialchars_decode($graphic->nameChinese) !!}</h3>
                                        {!! htmlspecialchars_decode($graphic->introductionChinese) !!}
                                    @endif
                                </div>
                                <div class="col-xs-6">
                                    <div class="img-comp-container">
                                        @if(isset($carouselArray[0]['name']))
                                            <div class="img-comp-img">
                                                <img src="{{config('locations.translationsModuleManagement.asset').$carouselArray[0]['name']}}" width="100%" height="200">
                                            </div>
                                        @endif
                                        @if(isset($carouselArray[1]['name']))
                                            <div class="img-comp-img img-comp-overlay{{$counter}}">
                                                <img src="{{config('locations.translationsModuleManagement.asset').$carouselArray[1]['name']}}" width="100%" height="200">
                                            </div>
                                        @endif
                                    </div>
                                    <script>
                                        /*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
                                        initComparisons('img-comp-overlay{{$counter}}');
                                    </script>
                                </div>
                            </div>
                        @else
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="img-comp-container">
                                        @if(isset($carouselArray[0]['name']))
                                            <div class="img-comp-img">
                                                <img src="{{config('locations.translationsModuleManagement.asset').$carouselArray[0]['name']}}" width="100%" height="200">
                                            </div>
                                        @endif
                                        @if(isset($carouselArray[1]['name']))
                                            <div class="img-comp-img img-comp-overlay2{{$counter}}">
                                                <img src="{{config('locations.translationsModuleManagement.asset').$carouselArray[1]['name']}}" width="100%" height="200">
                                            </div>
                                        @endif
                                    </div>
                                    <script>
                                        /*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
                                        initComparisons('img-comp-overlay2{{$counter}}');
                                    </script>
                                </div>
                                <div class="col-xs-6" style="text-align: center">
                                    @if($preview == 'english')
                                        <h3>{{$graphic->nameEnglish}}</h3>
                                        {{$graphic->introductionEnglish}}
                                    @else
                                        <h3>{{$graphic->nameChinese}}</h3>
                                        {{$graphic->introductionChinese}}
                                    @endif
                                </div>
                            </div>
                        @endif
                        @php $counter++; @endphp
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function togglePreviewGraphics(translationID, selectID) {
        var preview = $('#'+selectID).find(":selected").val();
        var url = '{{route('moduleManagementIndex')}}'+'?id='+translationID+'&preview='+preview;
        document.location = url;
    }
</script>