@extends('layouts.app')

@section('content')
    <div class="container">
        <div>
            <h2 class="pb-2">Editer l'alerte</h2>
        </div>

        @include('layouts.commons.errors')
        @include('layouts.commons.success')

        <form class="mt-4" method="POST" action="{{ route('alertes.update', $alerte->id) }}">
            @csrf
            {{ method_field('PUT') }}

            {{-- Première ligne --}}
            <div class="row">
                <div class="col-sm-4">
                    <!-- Rôle -->
                    <div class="form-group row">
                        <label for="role" class="col-md-4 col-form-label text-md-right">Rôle<span class="text-danger">*</span></label>
                        <div class="col-md-6">
                            <select class="form-control" id="role" name="role" disabled>
                                <option value="" selected>{{ $alerte->user->nom_role(true) }}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <!-- Utilisateur -->
                    <div class="form-group row">
                        <label for="user" class="col-md-4 col-form-label text-md-right">Utilisateur<span class="text-danger">*</span></label>
                        <div class="col-md-6">
                            <select class="form-control" id="user" name="user" disabled>
                                <option value="" selected>{{ $alerte->user->nom_complet() }}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <!-- Est valeur -->
                    <div class="form-group row">
                        <div class="custom-control custom-switch col-md-6">
                            <input type="checkbox" class="custom-control-input" id="est_valeur" name="est_valeur" @if(!old('est_valeur', $alerte->est_valeur)) checked @endif>
                            <label class="custom-control-label" for="est_valeur">Comparer avec un autre critère ?</label>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Deuxième ligne --}}
            <div class="row">
                <div class="col-sm-4">
                    <!-- Critère -->
                    <div class="form-group row">
                        <label for="critere" class="col-md-4 col-form-label text-md-right">Critères<span class="text-danger">*</span></label>
                        <div class="col-md-6">
                            <select class="form-control" id="critere" name="critere">
                                <option value="{{ TEXT::GAINS_SECURISES }}" {{ old('critere', $alerte->critere) == TEXT::GAINS_SECURISES ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::GAINS_SECURISES] }}</option>
                                <option value="{{ TEXT::MONTANT_REFERENCE }}" {{ old('critere', $alerte->critere) == TEXT::MONTANT_REFERENCE ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::MONTANT_REFERENCE] }}</option>
                                <option value="{{ TEXT::GAINS_NOTIFIES }}" {{ old('critere', $alerte->critere) == TEXT::GAINS_NOTIFIES ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::GAINS_NOTIFIES] }}</option>
                                <option value="{{ TEXT::MONTANT_NOTIFIE }}" {{ old('indicateur_critere', $alerte->critere) == TEXT::MONTANT_NOTIFIE ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::MONTANT_NOTIFIE] }}</option>
                                <option value="{{ TEXT::GAINS_CIBLE }}" {{ old('indicateur_critere', $alerte->critere) == TEXT::GAINS_CIBLE ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::GAINS_CIBLE] }}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <!-- Formule -->
                    <div class="form-group row">
                        <label for="formule" class="col-md-4 col-form-label text-md-right">Formule<span class="text-danger">*</span></label>
                        <div class="col-md-6">
                            <select class="form-control" id="formule" name="formule">
                                <option value="<" {{ old('formule', $alerte->formule) == '<' ? 'selected' : '' }}><</option>
                                <option value=">" {{ old('formule', $alerte->formule) == '>' ? 'selected' : '' }}>></option>
                                <option value="=" {{ old('formule', $alerte->formule) == '=' ? 'selected' : '' }}>=</option>
                                <option value="<=" {{ old('formule', $alerte->formule) == '<=' ? 'selected' : '' }}><=</option>
                                <option value=">=" {{ old('formule', $alerte->formule) == '>=' ? 'selected' : '' }}>>=</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <!-- Indicateur -->
                    <div class="form-group row row_indicateur">
                        <label for="indicateur" class="col-md-4 col-form-label">Indicateur<span class="text-danger">*</span></label>
                        <div class="input-group col-md-6">
                            <input id="indicateur" type="number" class="form-control" name="indicateur" value="{{ old('indicateur', $alerte->indicateur) }}" min="0" required autofocus aria-describedby="indicateur_icon">
                            <div class="input-group-append">
                                <span class="input-group-text indicateur_icon" id="indicateur_icon">%</span>
                            </div>
                        </div>
                    </div>

                    <!-- Indicateur critère -->
                    <div class="form-group row row_indicateur_critere">
                        <label for="indicateur_critere" class="col-md-6 col-form-label">Critère à comparer<span class="text-danger">*</span></label>
                        <div class="col-md-6">
                            <select class="form-control" id="indicateur_critere" name="indicateur_critere">
                                <option value="" {{ old('indicateur_critere', $alerte->indicateur_critere) == '' ? 'selected' : '' }}>Sélectionner</option>
                                <option value="{{ TEXT::GAINS_SECURISES }}" {{ old('indicateur_critere', $alerte->indicateur_critere) == TEXT::GAINS_SECURISES ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::GAINS_SECURISES] }}</option>
                                <option value="{{ TEXT::MONTANT_REFERENCE }}" {{ old('indicateur_critere', $alerte->indicateur_critere) == TEXT::MONTANT_REFERENCE ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::MONTANT_REFERENCE] }}</option>
                                <option value="{{ TEXT::GAINS_NOTIFIES }}" {{ old('indicateur_critere', $alerte->indicateur_critere) == TEXT::GAINS_NOTIFIES ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::GAINS_NOTIFIES] }}</option>
                                <option value="{{ TEXT::MONTANT_NOTIFIE }}" {{ old('indicateur_critere', $alerte->indicateur_critere) == TEXT::MONTANT_NOTIFIE ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::MONTANT_NOTIFIE] }}</option>
                                <option value="{{ TEXT::GAINS_CIBLE }}" {{ old('indicateur_critere', $alerte->indicateur_critere) == TEXT::GAINS_CIBLE ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::GAINS_CIBLE] }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mt-4">
                <div class="form-group row text-right">
                    <div class="col-sm-12">
                        <button type="submit" class="btn btn-outline-success">
                            Sauvegarder
                        </button>
                        <a href="{{ route('alertes.index') }}" class="btn btn-outline-warning">Annuler</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('unique-js')
    <script>
        function display_form_fields() {
            if($('#est_valeur').is(":checked")) {
                // On affiche le champ indicateur_critère et on masque le champ indicateur
                $('.row_indicateur_critere').show();
                $('#indicateur').prop('required', false).prop('autofocus', false);
                $('.row_indicateur').hide();
            } else {
                $('.row_indicateur_critere').hide();
                $('#indicateur').prop('required', true).prop('autofocus', true);
                $('.row_indicateur').show();
            }
        }

        function change_symbole_indicateur(indicateur) {
            indicateur === {!! '"' . TEXT::GAINS_CIBLE . '"' !!}
                || indicateur === {!! '"' . TEXT::GAINS_NOTIFIES . '"' !!} ? 
                $('#indicateur_icon').html('%') : 
                $('#indicateur_icon').html('€');
        }

        $(function() {
            // Init de l'affichage des champs indicateur
            display_form_fields();
            // Init de l'affichage du symbole indicateur
            change_symbole_indicateur($('#critere').val());
        });

        // Permet de gérer le changement de critère de comparaison pour une alerte
        $('#est_valeur').change(function () { 
            display_form_fields();
        }); 

        // Si on sélectionne gains cible, on affiche l'icon %
        $(document).on('change', '#critere', function(){
            change_symbole_indicateur(this.value);
        });
    </script>
@endsection