@php
    $style_1 = $realisation->style_1;
    $style_2 = $realisation->style_2;
    $count_client = count($photos_client);
    $count_visuel = count($visuels);
@endphp
@section('script')
    <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() {
            resize();
            var count = '';
            if (count == 1) {
                $('#next_btn_conception').addClass("disabled");
                $('#previous_btn_conception').addClass("disabled");
            }
            $('#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();
            });

            $('#next_btn_conception').on('click', function() {
                let selected = $('.mainbody').children('.activ');
                let target = selected.data('comparison');
                if (target == 1) {
                    $('#previous_btn_conception').removeClass("disabled");
                }
                if (target == count - 1) {
                    $('#next_btn_conception').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');
                    }
                });
            });
            $('#previous_btn_conception').on('click', function() {
                let selected = $('.mainbody').children('.activ');
                let target = selected.data('comparison');
                if (target == 2) {
                    $('#previous_btn_conception').addClass("disabled");
                }
                if (target == count) {
                    $('#next_btn_conception').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>
@endsection
<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() {
        resize();
        var count = '';
        if (count == 1) {
            $('#next_btn_conception').addClass("disabled");
            $('#previous_btn_conception').addClass("disabled");
        }
        $('#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();
        });

        $('#next_btn_conception').on('click', function() {
            let selected = $('.mainbody').children('.activ');
            let target = selected.data('comparison');
            if (target == 1) {
                $('#previous_btn_conception').removeClass("disabled");
            }
            if (target == count - 1) {
                $('#next_btn_conception').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');
                }
            });
        });
        $('#previous_btn_conception').on('click', function() {
            let selected = $('.mainbody').children('.activ');
            let target = selected.data('comparison');
            if (target == 2) {
                $('#previous_btn_conception').addClass("disabled");
            }
            if (target == count) {
                $('#next_btn_conception').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;
        float: left;
    }

    @media screen and (max-width: 1000px) {
        .conception-steps {
            display: contents !important;
        }
    }

    @media screen and (max-width: 750px) {
        .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;
            float: left;
            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 m-auto">
    <div class="row">
        <div class="col w-100">
        </div>
        <div class="col-auto text-center conception-steps m-auto">

            <ul class="steps row forfait1 step-rea" style="padding-inline-start: 0px;">
                <li id="visualBtn" class="col-auto active suivant btn-icon-solid btn-icon-ripple2"><span
                        class="btn-icon active">{!! lang('Visuels') !!}</span></li>
                <li id="planBtn" class="col-auto suivant btn-icon-circle btn-icon-solid btn-icon-ripple2"><span
                        class="btn-icon active">{!! lang('Plan') !!}</span></li>
            </ul>
        </div>
        <div class="col w-100">

        </div>
    </div>
</div>
<div class="row conception-container">
    <div class="col col-md-2">
        <div class="prev-container" id="previousContainer">
            <a id="previous_btn_conception"
                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">
            <div class="hidden text-center planContainer" id="plan_container">
                <img id="image" class="img-fluid img_ambiance" alt=""
                    src="{{ asset($realisation->plan_choisi) }}">
            </div>
            <div class="" 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 }}"
                                            style="width: 100%">
                                            <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-2">
        <div class="next-container " id="nextContainer">
            <a id="next_btn_conception"
                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>