@extends('layouts.main')

@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{asset('css/create-user.css')}}"/>
    @endpush
@endonce

@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">

    <x-page-header>
       CREATE NEW USER
    </x-page-header>

    <form action="{{route('management-users.store')}}" method="POST" class="row g-4" id="create-user-form">
        @csrf
        <div class="col-6">
            <x-ui.input-field :required="true" class="greek-input" minlength="3" label="ΟΝΟΜΑ (ΕΛΛΗΝΙΚΑ)" name="firstname"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true" class="greek-input" minlength="3" label="ΕΠΙΘΕΤΟ (ΕΛΛΗΝΙΚΑ)" name="lastname"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true" class="eng-input" minlength="3" label="FIRSTNAME (ENGLISH)" name="firstname_en"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true" class="eng-input" minlength="3" label="LASTNAME (ENGLISH)" name="lastname_en"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true" class="greek-input" minlength="3" label="ΟΝΟΜΑ ΠΑΤΡΟΣ (ΕΛΛΗΝΙΚΑ)" name="father_name"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true" class="eng-input" minlength="3" label="FATHER NAME (ENGLISH)" name="father_name_en"></x-ui.input-field>
        </div>
        <div class="inner-header col-12">
            <x-page-header>
                LDAP INFO
            </x-page-header>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="false" label="LDAP uid" name="ldap_uid" class="ldap-input"></x-ui.input-field>
        </div>

        <div class="inner-header col-12">
            <x-page-header>
                PERSONAL INFO
            </x-page-header>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true" class="number-input" minlength="8" maxlength="9" label="AFM" name="afm"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true" class="number-input" minlength="10" maxlength="11" label="AMKA" name="amka"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true" type="email" class="email-input" placeholder='i.e. test@test.gr' label="EMAIL" name="email"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field label="MOBILE PHONE"  placeholder='i.e. 69********' class="number-input" minlength="10" maxlength="10" pattern='^(^69[0-9]{8}$)|(^$)' name="mobile_phone"></x-ui.input-field>
        </div>
        <div class="inner-header col-12">
            <x-page-header>
                RELATIONS
            </x-page-header>
        </div>
        <div class="col-6">
            <x-ui.select :required="true" label="WORK RELATION" name="work_relation_id" id="work_relation_id" :clearable="true" :options="$work_relations"></x-ui.select>
        </div>
        <div class="col-6">
            <x-ui.select :required="true" label="EDUCATION CATEGORY" name="education_category_id" :clearable="true" :options="$education_categories"></x-ui.select>
        </div>
        <div class="col-6 staff-categories">
            <x-ui.select :required="true" label="STAFF CATEGORY" name="staff_category_id" id="staff_category_id" :options="$staff_categories"></x-ui.select>
        </div>
        <div class="col-6">
            <x-ui.select :required="true" label="BUILDING" name="building_id" :clearable="true" :options="$buildings"></x-ui.select>
        </div>
        <div class="col-6 ranks">
            <x-ui.select label="RANK" name="rank_id" :options="$ranks"></x-ui.select>
        </div>
        <div class="col-6 units">
            <x-ui.select :required="true" optionAttr='unit_category_id' label="UNIT" name="unit_id" id="unit_id" :clearable="true" :options="$units"></x-ui.select>
        </div>
        <div class="col-6 departments">
            <x-ui.select optionAttr='unit_id' label="DEPARTMENT" name="department_id" id="department_id" :options="$departments"></x-ui.select>
        </div>
        <div class="col-6 research-groups">
            <x-ui.select optionAttr='unit_id' label="RESEARCH GROUP" name="research_group_id" id="research_group_id" :options="$research_groups"></x-ui.select>
        </div>
{{--        <div class="contract-info-section row gy-4">--}}
{{--            <div class="inner-header col-12">--}}
{{--                <x-page-header>--}}
{{--                    CONTRACT INFO--}}
{{--                </x-page-header>--}}
{{--            </div>--}}
{{--            <div class="col-6">--}}
{{--                <x-ui.input-field label="CONTRACT ID" class="number-input" minlength="1" name="contract_id"></x-ui.input-field>--}}
{{--            </div>--}}
{{--            <div class="col-6 research-groups">--}}
{{--                <x-ui.select optionAttr='contract_type' label="CONTRACT TYPE" name="contract_type" id="contract_type" :options="$contract_types"></x-ui.select>--}}
{{--            </div>--}}
{{--            <div class="col-6">--}}
{{--                <x-ui.input-field label="RESCOM USER ID" class="number-input" minlength="1" name="rescom_user_id"></x-ui.input-field>--}}
{{--            </div>--}}
{{--            <div class="col-6">--}}
{{--                <x-ui.input-field label="PROJECT CODE" class="number-input" minlength="1" name="project_code"></x-ui.input-field>--}}
{{--            </div>--}}
{{--            <div class="col-6">--}}
{{--                <x-ui.input-field label="PROJECT TITLE" class="project-title-input" name="project_title"></x-ui.input-field>--}}
{{--            </div>--}}
{{--            <div class="col-6">--}}
{{--                <x-ui.input-field placeholder='i.e. 2023-02-01' class="date-input" pattern='^[0-9]{4}-[0-9]{2}-[0-9]{2}$' label="PROJECT START" name="contract_start"></x-ui.input-field>--}}
{{--            </div>--}}
{{--            <div class="col-6">--}}
{{--                <x-ui.input-field placeholder='i.e. 2023-02-01' class="date-input" pattern='^[0-9]{4}-[0-9]{2}-[0-9]{2}$' label="PROJECT END" name="contract_end"></x-ui.input-field>--}}
{{--            </div>--}}
{{--        </div>--}}
        <div class="col-12 mt-5">
            <x-ui.input-checkbox label="IS ACTIVE DUA" name="isActiveDua"></x-ui.input-checkbox>
        </div>
        <div class="col-12 mt-5">
            <x-ui.input-checkbox label="IS ACTIVE EMPLOYEE" name="isActiveEmployee"></x-ui.input-checkbox>
        </div>
        <div class="btn-container">
            <x-ui.blue-button class="create-user-submit" form="create-user-form">CREATE USER</x-ui.blue-button>
        </div>
    </form>
    </div>
@endsection

@section('javascripts')
    <script>
        $q = jQuery.noConflict();

        $q(document).ready(function () {

            const form = $q('#create-user-form');

            $q('.contract-info-section').hide();
            $q('.ranks').hide();
            $q('.departments').hide();
            $q('.research-groups').hide();
            $q('.staff-categories').hide();

            $q('#work_relation_id').on('change', function () {
                if ($q('#work_relation_id').find(":selected").val() === '2') {
                    $q('.contract-info-section').show();
                    $q('#staff_category_id').find('option').each(function () {

                        if ($q(this).val() === '2' ||  $q(this).val() === '3') {
                            $q(this).hide()
                        } else {
                            $q(this).show()
                        }
                        $q('#staff_category_id').selectpicker('destroy');
                        $q('#staff_category_id').selectpicker('render');
                    })
                    $q('.staff-categories').show();
                    $q('.ranks').hide();
                }

               if ($q('#work_relation_id').find(":selected").val() === '1') {
                    $q('.contract-info-section').hide();
                    $q('#staff_category_id').find('option').each(function () {
                        if ($q(this).val() === '2' ||  $q(this).val() === '3') {
                            $q(this).show();
                        }
                        $q('#staff_category_id').selectpicker('destroy');
                        $q('#staff_category_id').selectpicker('render');
                    })
                    $q('.staff-categories').show();
                }

                if ($q('#work_relation_id').find(":selected").val() === '') {
                    $q('.staff-categories').hide();
                }
            });

            $q('#unit_id').on('change', function () {

                const selected_category = $q(this).find(":selected").data('unit_category_id');
                const selected_unit = $q(this).val();

            /**
             * id 1 == kentrikh dioikish => show tmhmata
             * id 2 == inst => show research groups
             * id 3 == autoteles
             */
            switch (selected_category) {
                case 1:

                    $q('.research-groups').find('select').val('')
                    $q('.research-groups').hide()
                    $q('.departments').find('option').each(function () {

                        $q(this).data('unit_id') == selected_unit ? $q(this).show() : $q(this).hide();
                        $q('#department_id').selectpicker('destroy');
                        $q('#department_id').selectpicker('render');
                    })
                    $q('.departments').show()
                    break;
                case 2:

                $q('.departments').find('select').val('')
                $q('.departments').hide()
                $q('.research-groups').find('option').each(function () {

                        $q(this).data('unit_id') == selected_unit ? $q(this).show() : $q(this).hide();
                        $q('#research_group_id').selectpicker('destroy');
                        $q('#research_group_id').selectpicker('render');

                    })
                    $q('.research-groups').show()
                    break;
                case 3:

                $q('.departments').hide()
                $q('.departments').find('select').val('')
                $q('.research-groups').hide()
                $q('.research-groups').find('select').val('')
                    break;
            }

            })

            $q('#staff_category_id').on('change', function () {
                if ($q('#staff_category_id').find(":selected").val() === '2' || $q('#staff_category_id').find(":selected").val() === '3') {
                    $q('.ranks').show();
                } else {
                    $q('.ranks').find('select').val('')
                    $q('.ranks').hide();
                }
            });

           // Input validation

            $q('input[type=text]').on('input', function () {

                const greekPattern = /^[Α-Ω-ΪΫ]$/;
                const engPattern = /^[A-Z]$/;
                const numberPattern = /^[0-9]$/;
                const projectTitlePattern = /^[Α-Ωα-ωίϊΐόάέύϋΰήώΊΪΌΆΈΎΫΉΏa-zA-Z0-9\s()\-/]+$/;
                const datePattern = /^[0-9\-]+$/;
                const ldapPattern = /^[A-Za-z0-9$%*#!=+_?.@-]$/;

                const inputField= $q(this);
                let inputValue = $q(inputField).val();
                let validInput = '';
                for (let i = 0; i < inputValue.length; i++) {
                    if(inputField.hasClass('greek-input')) {
                        if (greekPattern.test(inputValue[i])) {
                            validInput += inputValue[i];
                        }
                    } else if (inputField.hasClass('eng-input')) {
                        if (engPattern.test(inputValue[i])) {
                            validInput += inputValue[i];
                        }
                    } else if (inputField.hasClass('number-input')) {
                        if (numberPattern.test(inputValue[i])) {
                            validInput += inputValue[i];
                        }
                    } else if (inputField.hasClass('project-title-input')) {
                        if (projectTitlePattern.test(inputValue[i])) {
                            validInput += inputValue[i];
                        }
                    } else if (inputField.hasClass('date-input')) {
                        if (datePattern.test(inputValue[i])) {
                            validInput += inputValue[i];
                        }
                    } else if (inputField.hasClass('ldap-input')) {
                        console.log('MPIKE');
                        if (ldapPattern.test(inputValue[i])) {
                            validInput += inputValue[i];
                        }
                    } else {
                        continue;
                    }
                    $q(inputField).val(validInput);
                }
            });

            $q('input[type=email]').on('input', function () {
                const emailPattern = /^[A-Za-z0-9$%&*#!=+_?.@-]$/;
                const inputField= $q(this);
                let inputValue = $q(inputField).val();
                let validInput = '';

                for (let i = 0; i < inputValue.length; i++) {
                    if(inputField.hasClass('email-input')) {
                        if (emailPattern.test(inputValue[i])) {
                            validInput += inputValue[i];
                        }
                    }
                    $q(inputField).val(validInput);
                }
            });
        });
    </script>
@endsection