@php
$style_1 = $realisation->style_1;
$style_2 = $realisation->style_2;
$count_client = count($photos_client);
$count_visuel = count($visuels);
@endphp
<script type="text/javascript">
    function resize() {
        const x = $(".mainbody").parent().width() / 1.8;
        // $("#plan_container").css('height', `${x}`);
        $('.mainbody').children().each(function(index, element) {
            $(element).css('height', `${x}`);
        });
    }


    $('.slider').each(function( index ) {
            const slider = document.querySelector("#slider_"+(index+1));
            const img1 = document.querySelector("#background_"+(index+1));
            const img2 = document.querySelector("#foreground_"+(index+1));
            const dragLine = document.querySelector("#dragLine_"+(index+1));
            slider.oninput = ()=>{
                let sliderVal = slider.value;
                let val2 = 100 -slider.value;
                dragLine.style.left = sliderVal + "%";
                img2.style.width = sliderVal + "%";
                img1.style.width = val2 + "%";
            }
    });

    $(document).ready(function(){
       var count = '';
       $('#planBtn').on('click',function(){
            $('#plan_container').removeClass('hidden');
            $('#comp').addClass('hidden');
            $('#previousContainer').addClass('hidden');
            $('#nextContainer').addClass('hidden');
       });
       
       $('#visualBtn').on('click',function(){
            $('#plan_container').addClass('hidden');
            $('#comp').removeClass('hidden');
            $('#previousContainer').removeClass('hidden');
            $('#nextContainer').removeClass('hidden');
            resize();
       });
        
       $('#nextBtn').on('click',function(){
            let selected = $('.mainbody').children('.activ');
            let target = selected.data('comparison');
            if(target == 1){
                $('#previousBtn').removeClass("disabled");
            }
            if(target == count - 1 ) {
                $('#nextBtn').addClass("disabled");
            }
            selected.siblings('.sliderContainer').each(function(index, element) {
                if ($(element).data('comparison') == target +1 ){
                    $(element).addClass('activ').removeClass('hidden');
                    selected.addClass('hidden').removeClass('activ');
                }
            });
        });
        $('#previousBtn').on('click',function(){
            let selected = $('.mainbody').children('.activ');
            let target = selected.data('comparison');
            if(target == 2){
                $('#previousBtn').addClass("disabled");
            }
            if(target == count ) {
                $('#nextBtn').removeClass("disabled");
            }
            selected.siblings('.sliderContainer').each(function(index, element) {
                if ($(element).data('comparison') == target - 1 ){
                    $(element).addClass('activ').removeClass('hidden');
                    selected.addClass('hidden').removeClass('activ');
                }
            });
        });
    });

    window.addEventListener('resize', function(event) {
        resize();
    });


</script>
<style>

.next-container {
            top: 45%; position: relative;float: right;
        }
.prev-container {
            top: 45%; position: relative;
        }

@media screen and (max-width: 550px) {
    .conception-steps{
        display: contents !important;
    }
    .conception-container{
        min-height: 45vh !important;
    }
    .visuals-container{
        position: absolute;
        top: 35%;
        padding: 0px !important;
    }

    .btn-icon-xlg .btn-icon {
            width: 2em;
            height: 2em;
        }
    .next-container {
            top: -125%; 
            position: relative;float: right;
            display: inline-block;
        }
    .prev-container {
            top: -25%;
            position: relative;
            display: inline-block;
        }
    .img_header{
            padding: 5px !important;
            margin: 0 !important;
        }
    .panel-steps {
        padding-top : 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }
}
</style>
    <div class="panel-steps mt-20 mb-20">
		<div class="row">
			<div class="col">
			</div>
			<div class="col-auto conception-steps">
					<ul class="steps row forfait1">
                        <li id="planBtn" class="col-auto active"><span class="active">{!! lang('Plan') !!}</span></li>
                        <li id="visualBtn"  class="col-auto"><span class="active">{!! lang('Visuels') !!}</span></li>
					</ul>
			</div>
			<div class="col">
                
            </div>
		</div>
	</div>
        <div class="row conception-container" >
            <div class="col col-md-1 col-md-offset-1">
                <div class="hidden prev-container" id="previousContainer" >
                <a  id="previousBtn" class="disabled suivant btn btn-naked btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid btn-icon-ripple">
                    <span class="btn-icon text-secondary font-size-22"><i class="fa fa-chevron-left"></i></span>
                </a>
                </div>
            </div>
            <div class="col col-md-8 visuals-container">
                    <div class="img_header" data-img="1">
                        <div class="text-center planContainer" id="plan_container">
                            <img id="image" class="img-fluid img_ambiance" alt="" src="{{ asset($realisation->plan_choisi) }}">
                        </div>
                        <div class="hidden" id="comp">
                            <div class="mainbody">
                                @if($count_client == 0 && $count_visuel > 0)
                                <div class="sliderContainer activ" id="comparison_1" data-comparison="1">
                                    <div class="images">
                                        <div class="img-foreground" id="foreground_1" style="width: 100%">
                                            <img alt="visuel designer" style="left:0;" src="{{ asset($visuels[0]->nom_image)  }}"></img>
                                        </div>
                                    </div>
                                </div>
                                @foreach ($visuels as $key=>$photo)
                                    @if ($key >= 1)
                                    <div class="sliderContainer hidden" id="comparison_{{ $key +1}}" data-comparison="{{ $key +1}}">
                                        <div class="images">
                                            <div class="img-foreground" id="foreground_{{ $key +1}}">
                                                <img alt="visuel designer" style="left:0;" src="{{ asset($visuels[$key]->nom_image)  }}"></img>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                @endforeach
                            @elseif ($count_client == $count_visuel)
                                <div class="sliderContainer activ" id="comparison_1" data-comparison="1">
                                    <div class="slider" name='slider' >
                                        <div class="drag-line" id="dragLine_1">
                                          <span></span>
                                        </div>
                                        <input type="range" min="0" max="100" value="50" id="slider_1">
                                      </div>
                                    <div class="images">
                                        <div class="img-foreground" id="foreground_1">
                                            <img alt="visuel designer" style="left:0;" src="{{ asset($visuels[0]->nom_image)  }}"></img>
                                        </div>
                                        <div class="img-background" id="background_1">
                                            <img  alt="image client" style="right:0;" src="{{ asset($photos_client[0]->nom_image)  }}"></img>
                                        </div>
                                    </div>
                                  </div>
                                @foreach ($photos_client as $key=>$photo)
                                    @if ($key >= 1)
                                    <div class="sliderContainer hidden" id="comparison_{{ $key +1}}" data-comparison="{{ $key +1}}">
                                        <div class="slider" name='slider' >
                                            <div class="drag-line"  id="dragLine_{{ $key +1}}">
                                              <span></span>
                                            </div>
                                            <input type="range" min="0" max="100" value="50" id="slider_{{ $key +1}}">
                                          </div>
                                        <div class="images">
                                            <div class="img-foreground" id="foreground_{{ $key +1}}">
                                                <img alt="visuel designer" style="left:0;" src="{{ asset($visuels[$key]->nom_image)  }}"></img>
                                            </div>
                                            <div class="img-background" id="background_{{ $key +1}}">
                                                <img alt="image client" style="right:0;" src="{{ asset($photo->nom_image)  }}"></img>
                                            </div>
                                        </div>
                                      </div>
                                    @endif
                                @endforeach
                            @elseif ($count_visuel > $count_client)
                                <div class="sliderContainer activ" id="comparison_1" data-comparison="1">
                                    <div class="slider" name='slider' >
                                        <div class="drag-line" id="dragLine_1">
                                          <span></span>
                                        </div>
                                        <input type="range" min="0" max="100" value="50" id="slider_1">
                                      </div>
                                    <div class="images">
                                        <div class="img-foreground" id="foreground_1">
                                            <img alt="visuel designer" style="left:0;" src="{{ asset($visuels[0]->nom_image)  }}"></img>
                                        </div>
                                        <div class="img-background" id="background_1">
                                            <img  alt="image client" style="right:0;" src="{{ asset($photos_client[0]->nom_image)  }}"></img>
                                        </div>
                                    </div>
                                </div>
                                @foreach ($visuels as $key=>$photo)
                                    @if($key >= 1)
                                        @if($key < $count_client)
                                        <div class="sliderContainer hidden" id="comparison_{{ $key +1}}" data-comparison="{{ $key +1}}">
                                            <div class="slider" name='slider' >
                                                <div class="drag-line"  id="dragLine_{{ $key +1}}">
                                                  <span></span>
                                                </div>
                                                <input type="range" min="0" max="100" value="50" id="slider_{{ $key +1}}">
                                              </div>
                                            <div class="images">
                                                <div class="img-foreground" id="foreground_{{ $key +1}}">
                                                    <img alt="visuel designer" style="left:0;" src="{{ asset($photo->nom_image)  }}"></img>
                                                </div>
                                                <div class="img-background" id="background_{{ $key +1}}">
                                                    <img alt="image client" style="right:0;" src="{{ asset($photos_client[$key]->nom_image)  }}"></img>
                                                </div>
                                            </div>
                                          </div>
                                        @else
                                        <div class="sliderContainer hidden" id="comparison_{{ $key +1}}" data-comparison="{{ $key +1}}">
                                            <div class="images">
                                                <div class="img-foreground" id="foreground_{{ $key +1}}" style="width: 100%">
                                                    <img alt="visuel designer" style="left:0;" src="{{ asset($visuels[$key]->nom_image)  }}"></img>
                                                </div>
                                            </div>
                                          </div>
                                        @endif
                                    @endif
                                @endforeach
                            @else
                                <div class="sliderContainer activ" id="comparison_1" data-comparison="1">
                                    <div class="slider" name='slider' >
                                        <div class="drag-line" id="dragLine_1">
                                          <span></span>
                                        </div>
                                        <input type="range" min="0" max="100" value="50" id="slider_1">
                                      </div>
                                    <div class="images">
                                        <div class="img-foreground" id="foreground_1">
                                            <img alt="visuel designer" style="left:0;" src="{{ asset($visuels[0]->nom_image)  }}"></img>
                                        </div>
                                        <div class="img-background" id="background_1">
                                            <img  alt="image client" style="right:0;" src="{{ asset($photos_client[0]->nom_image)  }}"></img>
                                        </div>
                                    </div>
                                  </div>
                                @foreach ($visuels as $key=>$photo)
                                    @if ($key >= 1)
                                        <div class="sliderContainer hidden" id="comparison_{{ $key +1}}" data-comparison="{{ $key +1}}">
                                            <div class="slider" name='slider' >
                                                <div class="drag-line"  id="dragLine_{{ $key +1}}">
                                                  <span></span>
                                                </div>
                                                <input type="range" min="0" max="100" value="50" id="slider_{{ $key +1}}">
                                              </div>
                                            <div class="images">
                                                <div class="img-foreground" id="foreground_{{ $key +1}}">
                                                    <img alt="visuel designer" style="left:0;" src="{{ asset($photo->nom_image)  }}"></img>
                                                </div>
                                                <div class="img-background" id="background_{{ $key +1}}">
                                                    <img alt="image client" style="right:0;" src="{{ asset($photos_client[$key]->nom_image)  }}"></img>
                                                </div>
                                            </div>
                                          </div>
                                    @endif
                                @endforeach
                            @endif
                            </div>
                        </div>
                    </div>
            </div>
            <div class="col-md-1">
                <div class="hidden next-container " id="nextContainer">
                <a  id="nextBtn" class="suivant btn btn-naked btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid btn-icon-ripple">
                    <span class="btn-icon text-secondary font-size-22"><i class="fa fa-chevron-right"></i></span>
                </a>
                </div>
            </div>
        </div>