@extends('layouts.experience_achat')
@section('meta-title', 'Sélectionnez vos designers')
@section('meta-keywords', '')
@section('meta-description', '')
@section('sub-menu')
    @include('front.experience_achat.menu_grp')
@endsection
@section('style')
    <style>
        #content {
            margin-top: 0px !important;
        }

        .select_nav li:hover {
            font-weight: 700
        }

        .select_nav li {
            cursor: pointer;
            width: 100%;
            font-size: 16px;
            text-align: center;
            transition: font-weight 0.3s;
        }

        .select_nav li.active {
            font-weight: 700;
        }
    </style>
@endsection
@section('content')
    @php
        $icons = [
            'Hall d’entrée' => 'pipcke-new-project-select-room-entrance.svg',
            'Salon' => 'pipcke-new-project-select-room-living-room.svg',
            'Séjour' => 'pipcke-new-project-select-room-guest-room.svg',
            'Salle à manger' => 'pipcke-new-project-select-room-dining-room.svg',
            'Chambre adulte' => 'pipcke-new-project-select-room-bedroom.svg',
            'Chambre enfant' => 'pipcke-new-project-select-room-kids-room.svg',
            'Chambre bébé' => 'pipcke-new-project-select-room-nursery.svg',
            'Dressing' => 'pipcke-new-project-select-room-dressing.svg',
            'Cuisine' => 'pipcke-new-project-select-kitchen.svg',
            'Salle de bains' => 'pipcke-new-project-select-bathroom.svg',
            'Bureau' => 'pipcke-new-project-select-office.svg',
            'Terrasse' => 'pipcke-new-project-select-terrace.svg',
            'Espace ouvert' => 'pipcke-new-project-open-space.svg',
            'Studio' => 'pipcke-new-project-select-studio.png',
            'Espace commercial' => 'pipcke-new-project-select-prof.png',
        ];
        $black_icons = [
            'Hall d’entrée' => 'pipcke-new-project-select-room-entrance.png',
            'Salon' => 'pipcke-new-project-select-room-living-room.png',
            'Séjour' => 'pipcke-new-project-select-room-guest-room.png',
            'Salle à manger' => 'pipcke-new-project-select-room-dining-room.png',
            'Chambre adulte' => 'pipcke-new-project-select-room-bedroom.png',
            'Chambre enfant' => 'pipcke-new-project-select-room-kids-room.png',
            'Chambre bébé' => 'pipcke-new-project-select-room-nursery.png',
            'Dressing' => 'pipcke-new-project-select-room-dressing.png',
            'Cuisine' => 'pipcke-new-project-select-kitchen.png',
            'Salle de bains' => 'pipcke-new-project-select-bathroom.png',
            'Bureau' => 'pipcke-new-project-select-office.png',
            'Terrasse' => 'pipcke-new-project-select-terrace.png',
            'Espace ouvert' => 'pipcke-new-project-open-space.png',
            'Studio' => 'pipcke-new-project-select-studio.png',
            'Espace commercial' => 'pipcke-new-project-select-prof.png',
        ];
    @endphp
    <div class="loader">
        <div></div>
    </div>
    <div class="container select_des_section">
        <div class="lqd-custom-menu">
            <div
                class="reset-ul inline-nav text-center select_nav m-auto
            @switch(count($group->projets) )
                @case(1)
                w-30
                    @break
                @case(2)
                w-50
                    @break
                @case(3)
                w-75
                    @break
                @default
                w-100 @endswitch
            ">
                @include('front.components.carrouselPiecesSelectDesigner')
                @php
                    $count = 0;
                    foreach ($choose_designers as $c) {
                        $count += count($c);
                    }
                @endphp
                @if ($count == $total)
                    @section('script2')
                        <script type="text/javascript">
                            jQuery(document).ready(function($) {
                                $('#btn_confirmer_designer_grp').show();
                            });
                        </script>
                    @endsection()
                @endif
            </div>
            @if ($group->experience_achat_step != 5)
                <div class="select_des_confirm text-center mb-30 pt-20">
                    <button id="btn_confirmer_designer_grp" class="btn btn-sm btn2 rounded font-weight-semibold disabled"
                        data-url="{{ route('experience_achat.selectionner_designers_grp.post', $group->id) }}">{!! lang('Confirmer') !!}
                        <i class="fa fa-chevron-right ml-3"></i></button>
                </div>
            @else
                <div class="select_des_confirm text-center mb-30 pt-20">
                    <button id="btn_valider_designer_grp" class="btn btn-sm btn2 rounded font-weight-semibold"
                        data-url="{{ route('experience_achat.selectionner_designers_grp.post', $group->id) }}">{!! lang('Valider') !!}
                        <i class="fa fa-chevron-right ml-3"></i></button>
                </div>
            @endif

        </div>
        <div class="panel designer_group" style="padding: 0;" data-total="{{ $total }}" data-change="0">
            @foreach ($group->projets as $key => $projet)
                @php
                    $forfait = $projet->forfait;
                    if ($projet->migrated) {
                        if ($projet->forfait == 'incontournable') {
                            $forfait = 'essentiel';
                        } elseif ($projet->forfait == 'fantastique') {
                            $forfait = 'incontournable';
                        }
                    }
                @endphp
                <div class="{{ $key != 0 ? 'hidden' : '' }} elem-{{ $projet->id }} select-des-grp"
                    data-project="{{ $projet->id }}" data-forfait="{{ $projet->forfait }}"
                    data-forfait="{{ $projet->forfait }}" data-migrated="{{ $projet->migrated }}">
                    <form method="post" class="panel">
                        {{ csrf_field() }}
                        <div class="row designers_grp {{ $forfait }}">
                            <div class="col-md-4">
                                @php
                                    $designer =
                                        $choose_designers[$key][0] ??
                                        (\App\Models\Designer::find(session('designer_selected')) ?? '');
                                @endphp
                                <div class="esquisse">{!! lang('1<sup>er</sup> concept') !!}</div>
                                <div class="designer {{ $designer ? 'affected' : '' }}"
                                    data-designer_id="{{ $designer ? $designer->id : '' }}"
                                    style="{{ $designer->photo ?? 0 ? "background: url( '$designer->photo' )" : '' }}">
                                    <div class="remove"><i class="fa fa-times"></i></div>
                                    <input type="hidden" name="designer[]" value="{{ $designer ? $designer->id : '' }}">
                                </div>

                                <div class="prenom mt-2">{{ $designer->prenom ?? '' }}</div>
                            </div>
                            <div class="col-md-4">
                                @php  $designer = $choose_designers[$key][1] ?? ''; @endphp

                                <div class="esquisse">{!! lang('2<sup>ème</sup> concept') !!}</div>
                                <div class="designer {{ $designer ? 'affected' : '' }}"
                                    data-designer_id="{{ $designer ? $designer->id : '' }}"
                                    style="{{ $designer->photo ?? 0 ? "background: url( '$designer->photo' )" : '' }}">
                                    <div class="remove"><i class="fa fa-times"></i></div>
                                    <input type="hidden" name="designer[]" value="{{ $designer ? $designer->id : '' }}">
                                </div>
                                <div class="prenom mt-2">{{ $designer->prenom ?? '' }}</div>
                            </div>
                            <div class="col-md-4">
                                @php  $designer = $choose_designers[$key][2] ?? ''; @endphp
                                <div class="esquisse">{!! lang('3<sup>ème</sup> concept') !!}</div>
                                <div class="designer {{ $designer ? 'affected' : '' }}"
                                    data-designer_id="{{ $designer ? $designer->id : '' }}"
                                    style="{{ $designer->photo ?? 0 ? "background: url( '$designer->photo' )" : '' }}">
                                    <div class="remove"><i class="fa fa-times"></i></div>
                                    <input type="hidden" name="designer[]" value="{{ $designer ? $designer->id : '' }}">
                                </div>
                                <div class="prenom mt-2">{{ $designer->prenom ?? '' }}</div>
                            </div>
                        </div>
                    </form>
                </div>
            @endforeach
        </div>
        <div class="panel">
            <form action="" class="row filters mt-4">
                <div class="col-md-4">
                    <div class="form-group form-inline">
                        <label for="">Style</label>
                        <select class="form-control" name="style">
                            <option value="">Tous les styles</option>
                            @foreach (\App\Models\StyleDeco::get() as $style)
                                <option value="{{ $style->id }}"
                                    {{ request('style') == $style->id ? 'selected' : '' }}>{{ $style->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group form-inline">
                        <label for="">Type</label>
                        <select class="form-control" name="type">
                            <option value="">Tous les types</option>
                            <option value="residentiel" {{ request('type') == 'residentiel' ? 'selected' : '' }}>
                                Résidentiel</option>
                            <option value="commercial" {{ request('type') == 'commercial' ? 'selected' : '' }}>Commercial
                            </option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group form-inline">
                        <label for="">Disponibilité</label>
                        <select class="form-control" name="disponibilite">
                            <option value="">Toutes les disponibilités</option>
                            <option value="immediate">Immédiate</option>
                            <option value="prochaine">Prochaine</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <div class="panel selectionner_designer selectionner_designer_grp">
            <div class="row designers-container">
                @foreach ($designers as $designer)
                    <div class="col-md-4 deisgner-item"
                        data-groups='{{ \App\Models\StyleDeco::whereIn('libelle', $designer->profile->styles->pluck('libelle'))->get()->pluck('id') }}'
                        data-disponibilite='{{ $designer->profile->disponible == 1 && $designer->profile->getDisponibleGroupeAttribute(count($group->projets)) == 1 ? 'immediate' : 'prochaine' }}'
                        data-type='{{ $designer->profile->types->pluck('libelle') }}'>
                        @include('front.components.designer_grp')
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            var id = {!! json_encode($group->id) !!};
            var total = {!! json_encode($total) !!};
            $("#btn_confirmer_designer_grp").on('click', function() {
                $(".loader").fadeIn();
                var values_array = [];
                $(".affected").each(function(index, elem) {
                    values_array.push($(elem).data("designer_id"));
                });
                $.ajax({
                        url: $(this).data("url"),
                        type: "POST",
                        data: {
                            values_array: values_array
                        },
                        datatype: "json",
                        cache: true,
                    })
                    .success((data) => {
                        if (data.goto) {
                            location.href = data.goto;
                        }

                    })
                    .error((error) => {
                        console.log("error :", error);
                        if (error.status == 401) {
                            document.location.href = window.location.origin + "/connexion";
                        }
                    });
            });

            $("#btn_valider_designer_grp").on('click', function() {
                $(".loader").fadeIn();
                let changed = $("div.panel[data-total]").data('change');
                if (changed == '2' || changed == 2) {
                    var values_array = [];
                    $(".affected").each(function(index, elem) {
                        values_array.push($(elem).data("designer_id"));
                    });
                    if (values_array.length == total) {
                        $.ajax({
                                url: $(this).data("url"),
                                type: "POST",
                                data: {
                                    values_array: values_array
                                },
                                datatype: "json",
                                cache: true,
                            })
                            .success((data) => {
                                if (data.goto) {
                                    location.href = data.goto;
                                }

                            })
                            .error((error) => {
                                console.log("error :", error);
                                if (error.status == 401) {
                                    document.location.href = window.location.origin + "/connexion";
                                }
                            });
                    }
                } else {
                    window.location.href =
                        "{{ route('experience_achat.lancer_projet_grp', request('id')) }}";
                }


            });
        });
    </script>
@endsection