@section('unique-js')
    <script src="{{ asset('js/commons/controls/directions-services.js') }}"></script>
    <script>
        function hide_select()
        {
            $('.direction').hide()
            $('.service').hide()
            $('.portefeuille_responsable').hide()
            $('.portefeuille_acheteur').hide()
        }

        function disable_service()
        {
            if ($('#direction_id').val() === '')
            {
                $('#service_id').prop('disabled', true);
            }
            else
            {
                $('#service_id').prop('disabled', false);
            }
        }

        function reset_select()
        {
            $('#direction_id').val($('#direction_id option:first').val());
            $('#service_id').val($('#service_id option:first').val());
            $('#portefeuille_acheteur').val($('#portefeuille_acheteur option:first').val());
            $('#portefeuille_responsable').val($('#portefeuille_responsable option:first').val());
        }

        function show_select(value)
        {
            switch (value)
            {
                case 'acheteur' :
                    $('.portefeuille_acheteur').show();
                    break;
                case 'responsable_achat' :
                    $('.portefeuille_responsable').show();
                    break;
                case 'equipe_projet' :
                    $('.direction').show();
                    disable_service();
                    $('.service').show();
                    $('.portefeuille_acheteur').show();
                    break;
                case 'directeur' :
                    $('.direction').show();
                    disable_service();
                    $('.service').show();
                    break;
            }
        }

        // Si aucun role de select, on cache les autres select
        $(function() {
            hide_select();
            show_select($('#role').val());
        });

        $(document).on('change', '#role', function(){
            hide_select();
            reset_select();
            show_select(this.value);
        });
    </script>
@endsection