@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">
                <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">
                <form id="update-affectation-super" 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">
                <form id="finale-affectation-super" 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>
    </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);
                    $('#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);
                                $('#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);
                                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