@section('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>
@endsection
<style>
        .next-container {
            top: 45%; position: relative;float: right;
        }
        .prev-container {
            top: 45%; position: relative;
        }
        @media screen and (max-width: 550px) {
        .btn-icon-xlg .btn-icon {
            width: 2em;
            height: 2em;
        }
        .next-container {
            top: 0%; position: relative;float: right;
            right: 60%;
            display: inline-block !important;
        }
        .prev-container {
            top: 0%; position: relative;
            left: 60%;
            display: inline-block !important;
        }
        .img-container {
            position: absolute;
            top: 60%;
            padding: 0px !important;
        }
        .planche-container{
            min-height: 45vh !important;
        }
        .img_header{
            padding: 10px;
            margin: 10px;
        }

    }
</style>
<div class="container-fluid">
    <div class="row pt-40">
        <div class="col col-md-8 col-md-offset-2">
            <div class="architectes row">
                @for( $i=0; $i<3;$i++)
                <div data-concept-target="{{  $i+1 }}" class="architecte col {{ $projet->nb_designers < $i+1 ?'disabled':''  }} {{ $i == 0 ?'active':''  }}">
                    <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>
</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-1 col-md-offset-1">
                    <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 imgs_proposition">
                    <div class="panel" 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 d-none" id="planche_2_{{  $key+1 }}" data-img="2" data-projet_designer_proposition_id="{{ $designer->proposition->id }}">
                        <div class="text-center pb-4">
                            <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-1">
                    <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