@extends('super-designer.layouts.default')
@section('content')
<div class="content-box">
    <div class="element-wrapper">
        <div class="element-box">
            <h5 class="form-header">
                Affectation des projets
            </h5>
        </div>

        <div class="element-box">
            <h6 class="form-header">
                Détails du projet
            </h6>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="selected_project">Projet *</label>
                    <select class="form-control" id="selectProject" required="" name="selected_project">
                        <option value="">Sélectionnez un projet dans la liste</option>
                        {{-- <option value="0">---</option> --}}
                        @foreach ($projets as $p)
                        <option value="{{ $p->id }}">
                            {{ $p->id }} - {{ $p->nom ?? $p->espace }} -- ({{ $p->user->prenom ?? '' }}
                            {{ $p->user->nom ?? '' }})
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="statut">Statut</label>
                    <input class="w-100" type="text" disabled value="" name="statut" id="statut_project">
                </div>
                <div class="col-md-3">
                    <label for="forfait">Forfait Esquisse</label>
                    <input class="w-100" type="text" disabled value="" name="forfait" id="forfait_project">
                </div>
                <div class="col-md-3">
                    <label for="forfait_conception">Forfait Conception</label>
                    <input class="w-100" type="text" disabled value="" name="forfait_conception"
                        id="forfait_conception_project">
                </div>
                <div class="col-md-3">
                    <label for="date_debut">Date début</label>
                    <input class="w-100" type="text" disabled value="" name="date_debut" id="date_debut_project">
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-4">
                    <label for="designer_1">Designer 1</label>
                    <input class="w-100" type="text" disabled value="" name="designer_1" id="designer_1">
                </div>
                <div class="col-md-4">
                    <label for="designer_2">Designer 2</label>
                    <input class="w-100" type="text" disabled value="" name="designer_2" id="designer_2">
                </div>
                <div class="col-md-4">
                    <label for="designer_3">Designer 3</label>
                    <input class="w-100" type="text" disabled value="" name="designer_3" id="designer_3">
                </div>
            </div>
        </div>
        <div class="element-box">
            <h6 class="form-header">
                Modification d'un designer
            </h6>
            <form id="update-affectation" action="{{ route('super-designer.affectation.update') }}" method="post">
                {{ csrf_field() }}
                <input type="hidden" name="projet_id" value="" id="projet_id">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="selected_project">Designer à modifier</label>
                        <select required class="form-control" id="selectOldDesigner" required="" name="old_designer">
                            <option value="">Sélectionnez un designer</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="selected_project">Nouveau designer</label>
                        <select required class="form-control" id="selectNewDesigner" required="" name="new_designer">
                            <option value="">Sélectionnez un nouveau designer</option>
                            @foreach ($designers as $d)
                            <option value="{{ $d->id }}">
                                {{ $d->id }} - {{ $d->prenom ?? '' }} {{ $d->nom ?? '' }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <button class="btn btn-primary pull-right" type="submit">Modifier</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="element-box">
            <h6 class="form-header">
                Changement de la conception finale
            </h6>
            <form id="finale-affectation" action="{{ route('super-designer.affectation.finale') }}" method="post">
                {{ csrf_field() }}
                <input type="hidden" name="final_projet_id" value="" id="final_projet_id">
                <input type="hidden" name="final_id" value="" id="final_id">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="conceptions">Conceptions envoyées</label>
                        <input class="w-100" type="text" disabled name="conceptions" value="" id="conceptions">
                    </div>
                    <div class="col-md-6">
                        <label for="finale">Conception finale</label>
                        <input class="w-100" type="text" disabled name="finale" value="" id="finale">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <button class="btn btn-primary pull-right" type="submit" id="final_submit"
                            style="display: none">Conception finale</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="element-box">
            <h6 class="form-header">
                Ajustement des forfaits (Incontournable vers Fantastique)
            </h6>
            <form id="upgrade-affectation" action="{{ route('super-designer.affectation.upgrade') }}" method="post">
                {{ csrf_field() }}
                <input type="hidden" name="upgrade_projet_id" value="" id="upgrade_projet_id">
                <input type="hidden" name="upgrade_final_id" value="" id="upgrade_final_id">
                <div class="row">
                    <div class="col-md-12">
                        <button class="btn btn-primary pull-right" type="submit" id="upgrade_final_submit"
                            style="display: none">Upgrader en fantastique</button>
                        <label for="conceptions" id="upgrade_msg"></label>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"
    integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css"
    integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script>
    $(document).ready(function() {
            $('#selectProject').selectize({});
            $('#selectNewDesigner').selectize({});
            $('#selectProject').on('change', function() {
                if (this.value) {
                    $('#projet_id').val(this.value);
                    $('#final_projet_id').val(this.value);
                    $('#upgrade_projet_id').val(this.value);
                    $('#selectOldDesigner').find('option').remove().end()
                        .append('<option value="">Sélectionnez un designer</option>');
                    let data = {
                        id: this.value
                    };

                    $.ajax({
                        url: "/super-designer/affectations/details",
                        type: "GET",
                        data: data,
                        success: function(data) {
                            if (data.success) {
                                $('#statut_project').val(data.status);
                                $('#forfait_project').val(data.forfait);
                                $('#forfait_conception_project').val(data.forfait_conception);
                                if (data.forfait_conception == 'incontournable') {
                                    $('#upgrade_final_submit').show();
                                    $('#upgrade_msg').text('Ce projet est éligible à l\'upgrade vers le forfait fantastique');
                                } else {
                                    $('#upgrade_final_submit').hide();
                                    $('#upgrade_msg').text('Seuls les forfaits conceptions incontournables sont éligibles à l\'upgrade vers le forfait fantastique');
                                }

                                $('#date_debut_project').val(data.start_date);
                                $('#conceptions').val(data.conceptions);
                                if (data.conceptions == 0) {
                                    $('#final_submit').hide();
                                } else {
                                    $('#final_submit').show();
                                }
                                $('#final_id').val(data.final);
                                $('#upgrade_final_id').val(data.final);

                                if (data.final == -1) {
                                    $('#finale').val('Non');
                                    $('#final_submit').text('Définir conception finale');
                                } else {
                                    $('#finale').val('Oui');
                                    $('#final_submit').text('Débloquer conception finale');
                                }
                                for (i = 0; i < 3; i++) {
                                    if (data.choose_designers[i]) {
                                        $('#designer_' + (i + 1)).val(data.choose_designers[i]
                                            .id +
                                            ' - ' + data
                                            .choose_designers[i].prenom + ' ' + data
                                            .choose_designers[i].nom);
                                        if (data.choose_designers[i].id == data
                                            .designer_retenue) {
                                            $('#designer_' + (i + 1)).css('color', 'Red');
                                        } else {
                                            $('#designer_' + (i + 1)).css('color', '');
                                        }
                                    } else {
                                        $('#designer_' + (i + 1)).val("---");
                                    }
                                }

                                if (data.choose_designers) {
                                    var $mySelect = $('#selectOldDesigner');
                                    (data.choose_designers).forEach((item, index) => {
                                        var $option = $("<option/>", {
                                            value: item.id,
                                            text: item.id + " - " + item
                                                .prenom +
                                                " " + item.nom
                                        });
                                        $mySelect.append($option);
                                    });
                                }
                            }
                        },
                        error: function(error) {
                            if (error.status == 401) {
                                document.location.href = window.location.origin + "/connexion";
                            }
                        }
                    });
                }
            });
        });
</script>
@endsection