@yield('script')
<script type="text/javascript">
    $(document).ready(function() {
        $("a[id^='previousBtn_']").on('click', function() {
            $(this).addClass('disabled');
            $("div[id^='planche_2_']").addClass('d-none');
            $("div[id^='planche_1_']").removeClass('d-none');
            $("a[id^='nextBtn_']").removeClass('disabled');
        });

        $("a[id^='nextBtn_']").on('click', function() {
            $(this).addClass('disabled');
            $("div[id^='planche_1_']").addClass('d-none');
            $("div[id^='planche_2_']").removeClass('d-none');
            $("a[id^='previousBtn_']").removeClass('disabled')
        });
    });
    $(document).on('click', '.architectes .architecte:not(.disabled)', function(event) {
        $(this).addClass('active').siblings().removeClass('active');
        let target = $(this).data('concept-target');
        $('[data-concept="' + target + '"]').removeClass('hidden').siblings('.concept').addClass('hidden');
        $("a[id^='nextBtn_']").removeClass('disabled');
        $("a[id^='previousBtn_']").addClass('disabled');
        $("div[id^='planche_1_']").removeClass('d-none');
        $("div[id^='planche_2_']").addClass('d-none');
    });
</script>
<style>
    .next-container {
        top: 45%;
        position: relative;
        float: left;
    }

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

    @media screen and (max-width: 1000px) {
        .img-container {
            top: 40%;
            position: absolute;
            padding: 0px !important;
        }

        .planche-container {
            min-height: 100vh !important;
        }

        .next-planche {
            position: absolute;
            left: 50%;
        }

        .prev-planche {
            position: absolute;
            right: 50%;
        }

        .img-container {
            max-width: 100% !important;
        }
    }

    @media screen and (max-width: 700px) {
        .img-container {
            top: 50%;
            position: absolute;
            padding: 0px !important;
        }

        .planche-container {
            min-height: 100vw !important;
        }

        .next-planche {
            position: absolute;
            left: 50%;
        }

        .prev-planche {
            position: absolute;
            right: 50%;
        }
    }

    @media screen and (max-width: 500px) {
        .btn-icon-xlg .btn-icon {
            width: 2em;
            height: 2em;
        }

        .next-planche {
            position: absolute;
            left: 50%;
        }

        .prev-planche {
            position: absolute;
            right: 50%;
        }

        .img-container {
            position: absolute;
            top: 62%;
            padding: 0px !important;
        }

        .planche-container {
            min-height: 90vw !important;
        }

        .img_header {
            padding: 10px;
            margin: 10px;
        }

    }

    @media screen and (max-width: 992px) {
        .espace_collaboration .architectes .architecte:first-child {
            margin-left: 10px;
        }
    }

</style>

<div class="row pt-40">
    <div class="col col-md-8 col-md-offset-2 m-auto">
        <div class="architectes row">
            @for ($i = 0; $i < 3; $i++)
                <div class="architecte col {{ $projet->nb_designers < $i + 1 ? 'disabled' : '' }} {{ $i == 0 ? 'active' : '' }}"
                    data-concept-target="{{ $i + 1 }}">
                    <div class="row">
                        <div class="col">
                            <div class="photo"
                                style="background-image: url('{{ $projet->designers[$i]->designer->photo ?? '' }}')">
                            </div>
                        </div>
                        <div class="col">
                            <div class="concept">{{ $i + 1 }}<sup>{{ $i == 0 ? 'er' : 'ème' }}</sup>
                                {!! lang('concept') !!}</div>
                            <div class="prenom">{{ $projet->designers[$i]->designer->prenom ?? '' }}</div>
                        </div>
                    </div>
                </div>
            @endfor
        </div>
    </div>
</div>

@foreach ($projet->designers as $key => $designer)
    <div class="concept {{ $key > 0 ? 'hidden' : '' }}" data-concept="{{ $key + 1 }}">
        <div class="row planche-container">
            <div class="col col-md-2 m-auto prev-planche">
                <div class="prev-container">
                    <a id="previousBtn_{{ $key + 1 }}"
                        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 img-container">
                <div class="panel img_header" id="planche_1_{{ $key + 1 }}" data-img="1"
                    data-projet_designer_proposition_id="{{ $designer->proposition->id }}">
                    <div class="text-center">
                        <img class="img-fluid img_ambiance disabled_taggd "
                            id="img_1_{{ $designer->proposition->id }}"
                            data-proposition="{{ $designer->proposition->id }}"
                            src="{{ asset($designer->proposition->planche_ambiance) }}" alt="">
                    </div>
                </div>
                <div class="panel img_header d-none" id="planche_2_{{ $key + 1 }}" data-img="2"
                    data-projet_designer_proposition_id="{{ $designer->proposition->id }}">
                    <div class="text-center">
                        <img class="img-fluid img_mobilier disabled_taggd"
                            id="img_2_{{ $designer->proposition->id }}"
                            data-proposition="{{ $designer->proposition->id }}"
                            src="{{ asset($designer->proposition->planche_mobilier) }}" alt="">
                    </div>
                </div>
            </div>

            <div class="col col-md-2 m-auto next-planche">
                <div class="next-container">
                    <a id="nextBtn_{{ $key + 1 }}"
                        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>
    </div>
@endforeach