@extends('layouts.app')

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

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

        <form class="mt-4" method="POST" action="{{ route('alertes.store') }}">
            @csrf

            {{-- 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">
                                <option value="" {{ old('role') == '' ? 'selected' : '' }}>Sélectionner</option>
                                @foreach($roles as $r)
                                    <option value="{{ $r->name }}" {{ old('role') == $r->name ? 'selected' : '' }}>{{ ROLE::ROLES_FORMATTED[$r->name] }}</option>
                                @endforeach
                            </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">
                                <option value="" {{ old('user') == '' ? 'selected' : '' }}>Sélectionner</option>
                                @foreach($users as $u)
                                    <option value="{{ $u->nom_role() }}_{{ $u->id }}" {{ old('user') == $u->nom_role() . '_' . $u->id ? 'selected' : '' }}>{{ $u->prenom }} {{ $u->nom }}</option>
                                @endforeach
                            </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')) 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="" {{ old('critere') == '' ? 'selected' : '' }}>Sélectionner</option>
                                <option value="{{ TEXT::GAINS_SECURISES }}" {{ old('critere') == TEXT::GAINS_SECURISES ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::GAINS_SECURISES] }}</option>
                                <option value="{{ TEXT::MONTANT_REFERENCE }}" {{ old('critere') == TEXT::MONTANT_REFERENCE ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::MONTANT_REFERENCE] }}</option>
                                <option value="{{ TEXT::GAINS_NOTIFIES }}" {{ old('critere') == TEXT::GAINS_NOTIFIES ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::GAINS_NOTIFIES] }}</option>
                                <option value="{{ TEXT::MONTANT_NOTIFIE }}" {{ old('indicateur_critere') == TEXT::MONTANT_NOTIFIE ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::MONTANT_NOTIFIE] }}</option>
                                <option value="{{ TEXT::GAINS_CIBLE }}" {{ old('indicateur_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') == '' ? 'selected' : '' }}>Sélectionner</option>
                                <option value="<" {{ old('formule') == '<' ? 'selected' : '' }}><</option>
                                <option value=">" {{ old('formule') == '>' ? 'selected' : '' }}>></option>
                                <option value="=" {{ old('formule') == '=' ? 'selected' : '' }}>=</option>
                                <option value="<=" {{ old('formule') == '<=' ? 'selected' : '' }}><=</option>
                                <option value=">=" {{ old('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') }}" 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') == '' ? 'selected' : '' }}>Sélectionner</option>
                                <option value="{{ TEXT::GAINS_SECURISES }}" {{ old('indicateur_critere') == TEXT::GAINS_SECURISES ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::GAINS_SECURISES] }}</option>
                                <option value="{{ TEXT::MONTANT_REFERENCE }}" {{ old('indicateur_critere') == TEXT::MONTANT_REFERENCE ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::MONTANT_REFERENCE] }}</option>
                                <option value="{{ TEXT::GAINS_NOTIFIES }}" {{ old('indicateur_critere') == TEXT::GAINS_NOTIFIES ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::GAINS_NOTIFIES] }}</option>
                                <option value="{{ TEXT::MONTANT_NOTIFIE }}" {{ old('indicateur_critere') == TEXT::MONTANT_NOTIFIE ? 'selected' : '' }}>{{ TEXT::FORMATTED_TEXT[TEXT::MONTANT_NOTIFIE] }}</option>
                                <option value="{{ TEXT::GAINS_CIBLE }}" {{ old('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() {
            // Si aucun role de select, on disable le select user
            if ($('#role').val() === '')
            {
                $('#user')
                    .val($('#user option:first').val())
                    .prop('disabled', true);
            }

            // Init de l'affichage des champs indicateur
            display_form_fields();
        });

        $(document).on('change', '#role', function(){
            if (this.value === '')
            {
                // Si aucun role n'est select, on ne select aucun user et on disable le select
                $('#user')
                    .val($('#user option:first').val())
                    .prop('disabled', true);
            }
            else
            {
                // Si un rôle est select, on affiche que les users qui possède le role select
                $('#user')
                    .prop('disabled', false)
                    .children('option').hide();

                $('#user option:first').show();
                $("#user").children("option[value^=" + $('#role').val() + "]").show();
            }
        });

        // 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(){
            this.value === {!! '"' . TEXT::GAINS_CIBLE . '"' !!} 
                || this.value === {!! '"' . TEXT::GAINS_NOTIFIES . '"' !!} ? 
                $('#indicateur_icon').html('%') : 
                $('#indicateur_icon').html('€');
        });
    </script>
@endsection