{% if not is_granted('ROLE_ADMIN') and (is_granted('ROLE_PROVIDER') or is_granted('ROLE_EMPLOYEE') or is_granted('ROLE_CLIENT_USER')) %}
    {% if app.user.typeSector == null %}
        <div class="termconditionscheck" style="z-index: 1001 !important;">
            <div class="containerTermconditionscheck">
                <div class="text-center mt-4">
                    {% if is_granted('ROLE_CLIENT') or is_granted('ROLE_PROVIDER') %}
                        <h3>{{ 'Select sector'|trans|raw }}</h3>
                    {% else %}
                        <h3>{{ 'Select sector employee'|trans|raw }}</h3>
                    {% endif %}
                </div>

                {% if is_granted('ROLE_CLIENT') or is_granted('ROLE_PROVIDER') %}
                    <div class="text-center mt-2">
                        <select class="form-control select_form" name="typeSector" id="typeSector" data-placeholder="{{'select an option' | trans}}">
                            <option value='null'>{{'select an option' | trans}}</option>
                            <option value='1'>{{'sectors_list.horeka' | trans}}</option>
                            <option value='2'>{{'sectors_list.editorial' | trans}}</option>
                        </select>
                    </div>
                    <div class="text-center mt-4 mb-2">
                        <button class="btn btn-primary btn-payment-reg" type="submit" id='submitSector' onclick='handleSubmitSector();'>
                            {% trans %}Save sector{% endtrans %}
                            <div class="spinner-border d-none" id="spinner_select_sector" role="status" >
                                <span class="sr-only">Loading...</span>
                            </div>
                        </button>
                    </div>

                {% endif %}
                <div class="text-center mb-4">
                    <p>{{ 'Select sector note'|trans|raw }}</p>
                </div>
                <div class="text-center mb-4" id='message_sector'>
                </div>
            </div>
        </div>
    {% endif %}
{% endif %}

<style>
    .text-center .select2-container--default .select2-selection--single {
        border:1px solid #e1e8ee !important;
    }
</style>

<script>
    $(document).ready(function() {
        $('.select_form').select2();
    });

    function handleSubmitSector(){
        const sector = $('#typeSector').val();
        if(sector !== "null"){
            $('#submitSector').prop('disabled', true);
            $('#spinner_select_sector').removeClass('d-none')
            console.log('handleSubmitSector ',sector);
            const body = { sector }
            const url = `/user/select/sector`;
            __ajax(`${url}`, JSON.stringify(body), 'POST')
            .done(function (obj) {
                alertView(obj.message, 'success', 'message_sector');
                if(obj.code === 200) {
                    location.reload();
                }
            }).fail(function (jqXHR, textStatus, errorThrown) {
                console.log('error',jqXHR.responseJSON);
                alertView("{{'unexpected error'|trans()}}", 'danger', 'message_sector');
            }).always(function () {
                $('#submitSector').prop('disabled', false);
                $('#spinner_select_sector').addClass('d-none');
            });
        }
    }
</script>