@extends('layouts.main')

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

@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">
    <div class="requests-resolve-dua">
        <x-page-header  back-link="{{route('management-requests')}}">
            RESOLVING REQUEST
        </x-page-header>
        <div class="warning-msg">
            <div class="warning-msg--img">
                <img src={{asset('images/danger.svg')}}/>
            </div>
            <div class="warning-msg--text">
                <p class="title">ΠΡΟΣΟΧΗ!</p>
                <p class="body">Για τη διατήρηση της ορθότητας των στοιχείων των υπαλλήλων του κέντρου για αλλαγές, θα πρέπει να επικοινωνήσετε με το
                Τμήμα Προσωπικού της Διεύθυνσης Διοικητικού τηλ. 5566</p>
            </div>
        </div>
        <div class="dua-request-container">
             <div class="request-data">
               <x-page-header>
                    ΑΙΤΗΜΑ ΑΠΟ ΧΡΗΣΤΗ {{$activation_request->firstname . ' ' . $activation_request->lastname}}:
                </x-page-header>
                <form class="request-data--inputs" id="request-data">
                    <div class="request-data-container">
                        <x-ui.input-field label="ΟΝΟΜΑ (ΕΛΛΗΝΙΚΑ)" name='request-firstname' data-target='request' value="{{$activation_request->firstname}}" class="disabled request" readonly="true"></x-ui.input-field>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.input-field label="FIRSTNAME (ENGLISH)" name='request-firstname_en' data-target='request' value="{{$activation_request->firstname_en}}" class="disabled request" readonly="true"></x-ui.input-field>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.input-field label="ΕΠΩΝΥΜΟ (ΕΛΛΗΝΙΚΑ)" name='request-lastname' data-target='request' value="{{$activation_request->lastname}}" class="disabled request" readonly="true"></x-ui.input-field>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.input-field label="LASTNAME (ENGLISH)" name='request-lastname_en' data-target='request' value="{{$activation_request->lastname_en}}" class="disabled request" readonly="true"></x-ui.input-field>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.input-field label="ΟΝΟΜΑ ΠΑΤΡΟΣ (ΕΛΛΗΝΙΚΑ)" name='request-father_name' data-target='request' value="{{$activation_request->father_name}}" class="disabled request" readonly="true"></x-ui.input-field>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.input-field label="FATHER NAME (ENGLISH)" name='request-father_name_en' data-target='request' value="{{$activation_request->father_name_en}}" class="disabled request" readonly="true"></x-ui.input-field>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="inner-header"><x-page-header>PERSONAL INFO</x-page-header></div>
                    <div class="request-data-container">
                        <x-ui.input-field label="ΑΦΜ" data-target='request' name='request-afm' value="{{$activation_request->afm}}" class="disabled request" readonly="true"></x-ui.input-field>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.input-field label="ΑΜΚΑ" name='request-amka' data-target='request' value="{{$activation_request->amka}}" class="disabled request" readonly="true"></x-ui.input-field>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.input-field label="ΚΙΝΗΤΟ ΤΗΛΕΦΩΝΟ" name='request-mobile_phone' data-target='request' value="{{$activation_request->mobile_phone}}" class="disabled request" readonly="true"></x-ui.input-field>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="inner-header"><x-page-header>WORK INFO</x-page-header></div>
                    <div class="request-data-container">
                        <x-ui.select label="ΣΧΕΣΗ ΕΡΓΑΣΙΑΣ" name='request-work_relation_id' data-target='request' selected="{{$activation_request->work_relation_id}}" class="disabled request" :clearable="true" :options="$relation_values['work_relations']"></x-ui.select>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.select label="ΒΑΘΜΙΔΑ ΕΚΠΑΙΔΕΥΣΗΣ" name='request-education_category_id' data-target='request' selected="{{$activation_request->education_category_id}}" class="disabled request" :clearable="true" :options="$relation_values['education_categories']"></x-ui.select>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.select label="ΚΤΙΡΙΟ" name="request-building_id" data-target='request' selected="{{$activation_request->building_id}}" class="disabled request" :clearable="true" :options="$relation_values['buildings']"></x-ui.select>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.select label="ΟΡΓΑΝΙΚΗ ΜΟΝΑΔΑ" name='request-unit_id' data-target='request' selected="{{$activation_request->unit_id}}" class="disabled request" :clearable="true" :options="$relation_values['units']"></x-ui.select>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.select label="ΚΑΤΗΓΟΡΙΑ ΠΡΟΣΩΠΙΚΟΥ" name='request-staff_category_id' data-target='request' selected="{{$activation_request->staff_category_id}}" class="disabled request" :clearable="true" :options="$relation_values['staff_categories']"></x-ui.select>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.select label="ΕΡΕΥΝΗΤΙΚΗ ΟΜΑΔΑ" name='request-research_group_id' data-target='request' selected="{{$activation_request->research_group_id}}" class="disabled request" :clearable="true" :options="$relation_values['research_groups']"></x-ui.select>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                            <x-ui.select label="ΤΜΗΜΑ" name='request-department_id' data-target='request' selected="{{$activation_request->department_id}}" class="disabled request" :clearable="true" :options="$relation_values['departments']"></x-ui.select>
                            <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                            <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
                    <div class="request-data-container">
                        <x-ui.select label="ΒΑΘΜΙΔΑ" name='request-rank_id' data-target='request' selected="{{$activation_request->rank_id}}" class="disabled request" :clearable="true" :options="$relation_values['ranks']"></x-ui.select>
                        <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                        <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                    </div>
{{--
                    @if ($activation_request->work_relation_id == 2 && $rescom_values)
                        <div class="inner-header"><x-page-header>CONTRACT INFO</x-page-header></div>
                        <div class="request-data-container">
                            <x-ui.input-field label="CONTRACT ID" name='request-contract_id' data-target='request' value="{{$rescom_values['contract_id']}}" readonly class="disabled request"></x-ui.input-field>
                            <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                            <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                        </div>
                        <div class="request-data-container">
                            <x-ui.input-field label="RESCOM USER ID" name='request-rescom_user_id' data-target='request' value="{{$rescom_values['rescom_user_id']}}" readonly class="disabled request"></x-ui.input-field>
                            <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                            <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                        </div>
                        <div class="request-data-container">
                            <x-ui.input-field label="PROJECT CODE" name='request-project_code' data-target='request' value="{{$rescom_values['project_code']}}" readonly class="disabled request"></x-ui.input-field>
                            <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                            <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                        </div>
                        <div class="request-data-container">
                            <x-ui.input-field label="PROJECT TITLE" name='request-project_title' data-target='request' value="{{$rescom_values['project_title']}}" readonly class="disabled request"></x-ui.input-field>
                            <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                            <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                        </div>
                        <div class="request-data-container">
                            <x-ui.input-field label="CONTRACT START" name='request-contract_start' data-target='request' value="{{$rescom_values['contract_start']}}" readonly class="disabled request"></x-ui.input-field>
                            <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                            <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                        </div>
                        <div class="request-data-container">
                            <x-ui.input-field label="CONTRACT END" name='request-contract_end' data-target='request' value="{{$rescom_values['contract_end']}}" readonly class="disabled request"></x-ui.input-field>
                            <a class="transfer-btn"><img src={{asset('images/fast-forward.svg')}}/></a>
                            <a class="cancel-btn"><img src={{asset('images/undo-circular-arrow.svg')}}/></a>
                        </div>
                    @endif
--}}
                </form>
            </div>
            <div class="database-data">
                <x-page-header>
                    ΣΤΟΙΧΕΙΑ ΧΡΗΣΤΗ ΣΤΟ EGOV-DEMOKRITOS:
                </x-page-header>
                <form action="{{route('management-requests.resolve-dua-request.update', ['user' => $activation_request->user->id])}}" method='POST' class="database-data--inputs" id="dua-request-resolve">
                    @csrf
                    <x-ui.input-field label="ΟΝΟΜΑ (ΕΛΛΗΝΙΚΑ)" pattern='^[Α-Ω]{3,}$' class="greek-input" data-target='database' name="firstname" value="{{$activation_request->user->firstname}}"></x-ui.input-field>
                    <x-ui.input-field label="FIRSTNAME (ENGLISH)" pattern='^[A-Z]{3,}$' class="eng-input" data-target='database' name="firstname_en" value="{{$activation_request->user->firstname_en}}"></x-ui.input-field>
                    <x-ui.input-field label="ΕΠΩΝΥΜΟ (ΕΛΛΗΝΙΚΑ)" pattern='^[Α-Ω]{3,}$' class="greek-input" data-target='database' name="lastname" value="{{$activation_request->user->lastname}}"></x-ui.input-field>
                    <x-ui.input-field label="LASTNAME (ENGLISH)" pattern='^[A-Z]{3,}$' class="eng-input" data-target='database' name="lastname_en" value="{{$activation_request->user->lastname_en}}"></x-ui.input-field>
                    <x-ui.input-field label="ΟΝΟΜΑ ΠΑΤΡΟΣ (ΕΛΛΗΝΙΚΑ)" pattern='^[Α-Ω]{3,}$' class="greek-input" data-target='database' name="father_name" value="{{$activation_request->user->father_name}}"></x-ui.input-field>
                    <x-ui.input-field label="FATHER NAME (ENGLISH)" pattern='^[A-Z]{3,}$' class="eng-input" data-target='database' name="father_name_en" value="{{$activation_request->user->father_name_en}}"></x-ui.input-field>
                    <div class="inner-header"><x-page-header>PERSONAL INFO</x-page-header></div>
                    <x-ui.input-field label="ΑΦΜ" name="afm" class="number-input" pattern='^\d{8,9}$' minlength="8" maxlength="9" data-target='database' value="{{$activation_request->user->afm}}"></x-ui.input-field>
                    <x-ui.input-field label="ΑΜΚΑ" name="amka" class="number-input" pattern='^\d{10,11}$' minlength="10" maxlength="11" data-target='database' value="{{$activation_request->user->amka}}"></x-ui.input-field>
                    <x-ui.input-field label="ΚΙΝΗΤΟ ΤΗΛΕΦΩΝΟ" pattern='^(^69[0-9]{8}$)|(^$)' class="number-input" placeholder='i.e. 69********' minlength="10" maxlength="10" data-target='database' name="mobile_phone" value="{{$activation_request->user->mobile_phone}}"></x-ui.input-field>
                    <div class="inner-header"><x-page-header>WORK INFO</x-page-header></div>
                    <x-ui.select label="ΣΧΕΣΗ ΕΡΓΑΣΙΑΣ" id="work-relations" name="work_relation_id" data-target='database' :clearable="true" selected="{{$activation_request->user->work_relation_id}}" :options="$relation_values['work_relations']"></x-ui.select>
                    <x-ui.select label="ΒΑΘΜΙΔΑ ΕΚΠΑΙΔΕΥΣΗΣ" name="education_category_id" data-target='database' :clearable="true" selected="{{$activation_request->user->education_category_id}}" :options="$relation_values['education_categories']"></x-ui.select>
                    <x-ui.select label="ΚΤΙΡΙΟ" name="building_id" data-target='database' :clearable="true" selected="{{$activation_request->user->building_id}}" :options="$relation_values['buildings']"></x-ui.select>
                    <x-ui.select label="ΟΡΓΑΝΙΚΗ ΜΟΝΑΔΑ" name="unit_id" optionAttr='unit_category_id' data-target='database' :clearable="true" id="units" selected="{{$activation_request->user->default_unit->id ?? ''}}" :options="$relation_values['units']"></x-ui.select>
                    <x-ui.select label="ΚΑΤΗΓΟΡΙΑ ΠΡΟΣΩΠΙΚΟΥ" id="staff-categories"  name="staff_category_id" data-target='database' :clearable="true" selected="{{$activation_request->user->staff_category_id}}" :options="$relation_values['staff_categories']"></x-ui.select>
                    <x-ui.select label="ΕΡΕΥΝΗΤΙΚΗ ΟΜΑΔΑ" optionAttr='unit_id' id='research-groups' name="research_group_id" data-target='database' :clearable="true" selected="{{$activation_request->user->research_group_id}}" :options="$relation_values['research_groups']"></x-ui.select>
                    <x-ui.select label="ΤΜΗΜΑ" optionAttr='unit_id' id="departments" name="department_id" data-target='database' :clearable="true" selected="{{$activation_request->user->department_id}}" :options="$relation_values['departments']"></x-ui.select>
                    <x-ui.select label="ΒΑΘΜΙΔΑ" id="ranks" name="rank_id" data-target='database' :clearable="true" selected="{{$activation_request->user->rank_id}}" :options="$relation_values['ranks']"></x-ui.select>
{{--                    @if ($activation_request->work_relation_id == 2)--}}
{{--                        <div class="inner-header"><x-page-header>CONTRACT INFO</x-page-header></div>--}}
{{--                        <x-ui.input-field label="CONTRACT ID" class="number-input" minlength="1" pattern='^[0-9]{1,}$' name="contract_id" data-target='database' value="{{$rescom_values['contract_id']}}"></x-ui.input-field>--}}
{{--                        <x-ui.input-field label="RESCOM USER ID" class="number-input" minlength="1" pattern='^[0-9]{1,}$' name="rescom_user_id" data-target='database' value="{{$rescom_values['rescom_user_id']}}"></x-ui.input-field>--}}
{{--                        <x-ui.input-field label="PROJECT CODE" class="number-input" name="project_code" pattern='^[0-9]+$' data-target='database' value="{{$rescom_values['project_code']}}"></x-ui.input-field>--}}
{{--                        <x-ui.input-field label="PROJECT TITLE" name="project_title" data-target='database' value="{{$rescom_values['project_title']}}"></x-ui.input-field>--}}
{{--                        <x-ui.input-field label="CONTRACT START" class="date-input" pattern='^[0-9]{4}-[0-9]{2}-[0-9]{2}$' name="contract_start" data-target='database' value="{{$rescom_values['contract_start']}}"></x-ui.input-field>--}}
{{--                        <x-ui.input-field label="CONTRACT END" class="date-input" pattern='^[0-9]{4}-[0-9]{2}-[0-9]{2}$' name="contract_end" data-target='database' value="{{$rescom_values['contract_end']}}"></x-ui.input-field>--}}
{{--                    @endif--}}
                    <div class="d-flex justify-content-end">
                        <x-ui.blue-button class="transfer-all">
                            TRANSFER ALL CHANGES
                        </x-ui.blue-button>
                    </div>

                    <x-unsaved-changes form="dua-request-resolve"/>
                </form>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('javascripts')
    <script>
        $q = jQuery.noConflict();

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

//-----------------------------------------------------------------------------------------------------------------

            $q('.cancel-all').css('display', 'none');

            // Handle select options visibility according to work relations on document load

            if ($q('#staff-categories').find(":selected").val() === '2' || $q('#staff-categories').find(":selected").val() === '3') {
                    $q('#ranks').removeClass('disabled low-opacity');
                    $q('#ranks').selectpicker('destroy');
                    $q('#ranks').selectpicker('render');
                } else {
                    $q('#ranks').selectpicker('val', '');
                    $q('#ranks').next().addClass('disabled low-opacity');
                }

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

                switch (selected_category) {
                    case 1 :
                    $q('#departments').find('option').each(function () {
                        $q(this).data('unit_id') == selected_unit ? $q(this).show() : $q(this).hide();
                        $q('#departments').selectpicker('destroy');
                        $q('#departments').selectpicker('render');
                        $q('#research-groups').selectpicker('val', '');
                        $q('#research-groups').next().addClass('disabled low-opacity');
                    })
                        break;
                    case 2  :
                        $q('#research-groups').find('option').each(function () {
                            $q(this).data('unit_id') == selected_unit ? $q(this).show() : $q(this).hide();
                            $q('#research-groups').selectpicker('destroy');
                            $q('#research-groups').selectpicker('render');
                            $q('#departments').selectpicker('val', '');
                            $q('#departments').next().addClass('disabled low-opacity');
                        })
                        break;

                    case 3 :
                    $q('#departments').selectpicker('val', '');
                    $q('#departments').next().addClass('disabled');
                    $q('#research-groups').selectpicker('val', '');
                    $q('#research-groups').next().addClass('disabled low-opacity');
                }

            // Stores the user data currently saved in the database, into an array(initialEntries)

            let initialEntries={};
            const resolveForm = $q('#dua-request-resolve');
            const{_token, ...entries}  = Object.fromEntries(new FormData(resolveForm[0]));
            initialEntries = entries;

//-----------------------------------------------------------------------------------------------------------------

            // Changes border styling if values in both forms don't match on load

            $q('[data-target=request]').each(function () {
                const inputValue = $q(this);
                const targetInput = $q(this).attr('name').split('-')[1];
                let updateInput='';
                $q('[data-target=database]').each( function () {
                    if ($q(this).attr('name') == targetInput) {
                        return updateInput = $q(this).val();
                    }
                })
                if(inputValue.val() !== updateInput) {
                    $q(inputValue).css('border', '2px solid #040059');
                    $q(inputValue).parent().find('button').attr('style', 'border: 2px solid #040059 !important');
                }
            })

//------------------------------------------------------------------------------------------------------------------

            // Transfers a value from user's request form to database form

            $q('.transfer-btn').on('click', function () {
                if($q(this).prev().hasClass('select-wrapper')) {
                    const inputValue = $q(this).prev().find('select').val();
                    const targetInput = $q(this).prev().find('select').attr('name').split('-')[1];
                    if (inputValue != $q(`[name=${targetInput}]`).val()) {
                        $q(`[name=${targetInput}]`).val(inputValue);
                        $q(`[name=${targetInput}]`).selectpicker('destroy');
                        $q(`[name=${targetInput}]`).selectpicker('render');
                        $q(`[name=${targetInput}]`).parent().find('button').attr('style', 'border: 1px solid #e3ac16');
                        let clickEvent = new Event('change');
                        document.querySelector(`[name=${targetInput}]`).dispatchEvent(clickEvent);
                        $q(this).hide();
                        $q(this).next().show();
                    } else {}
                } else {
                    const inputValue = $q(this).prev().find('input').val();
                    const targetInput = $q(this).prev().find('input').attr('name').split('-')[1];
                    if (inputValue != $q(`[name=${targetInput}]`).val()) {
                        $q(`[name=${targetInput}]`).val(inputValue);
                        $q(`[name=${targetInput}]`).css('border', '1px solid #e3ac16 ');
                        let clickEvent = new Event('input');
                        document.querySelector(`[name=${targetInput}]`).dispatchEvent(clickEvent);
                        $q(this).hide();
                        $q(this).next().show();
                    } else {}
                }
            });

//-----------------------------------------------------------------------------------------------------------------

            // Cancels a value transfer from user's request form to database form

            $q('.cancel-btn').on('click', function () {
                if ($q(this).parent().children().first().hasClass('select-wrapper')) {
                    const targetInput = $q(this).parent().find('select').attr('name').split('-')[1];
                    $q(`[name=${targetInput}]`).val(initialEntries[targetInput]);
                    $q(`[name=${targetInput}]`).selectpicker('destroy');
                    $q(`[name=${targetInput}]`).selectpicker('render');
                    $q(`[name=${targetInput}]`).trigger('change');
                    $q(`[name=${targetInput}]`).parent().find('button').attr('style', 'border: none !important');
                } else {
                    const targetInput = $q(this).parent().find('.input-field').find('input').attr('name').split('-')[1];
                    $q(`[name=${targetInput}]`).val(initialEntries[targetInput]);
                    $q(`[name=${targetInput}]`).css('border', 'none');
                }
                $q(this).hide();
                $q(this).prev().show();
            });

//--------------------------------------------------------------------------------------------------------------

            // Transfers all values from user's request form to database form

            $q('.transfer-all').on('click', function () {
                let clickEvent = new Event('change');

                $q('[data-target="request"]').each(function () {
                    if ($q(this).prop('tagName') === 'SELECT') {
                        const inputValue = $q(this).val();
                        const targetInput = $q(this).attr('name').split('-')[1];
                        $q(`[name=${targetInput}]`).val(inputValue);
                        $q(`[name=${targetInput}]`).selectpicker('destroy');
                        $q(`[name=${targetInput}]`).selectpicker('render');

                        document.querySelector(`[name=${targetInput}]`).dispatchEvent(clickEvent);

                        if ($q(`[name=${targetInput}]`).val() != initialEntries[targetInput]) {
                            $q(this).parent().parent().next().hide();
                            $q(this).parent().parent().next().next().show();
                        } else {
                            $q(`[name=${targetInput}]`).removeClass('hasChanges');
                        }

                    } else {
                        const inputValue = $q(this).val();
                        const targetInput = $q(this).attr('name').split('-')[1];
                        $q(`[name=${targetInput}]`).val(inputValue);

                        if ($q(`[name=${targetInput}]`).val() != initialEntries[targetInput]) {
                            $q(`[name=${targetInput}]`).css('border', '1px solid #e3ac16 ');
                            $q(this).parent().next().hide();
                            $q(this).parent().next().next().show();
                        }

                        document.querySelector(`[name=${targetInput}]`).dispatchEvent(clickEvent);
                    }
                })
            })

//-----------------------------------------------------------------------------------------------------------------

            // Handle select options visibility according to work relations on select option change

            $q('#work-relations').on('change', function () {

                if ($q(this).val() === '2') {

                    $q('#staff-categories').find('option').each(function () {

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

               if ($q(this).val() === '1') {
                    $q('#staff-categories').find('option').each(function () {
                        if ($q(this).val() === '2' ||  $q(this).val() === '3') {
                            $q(this).show();
                        }
                        $q('#staff-categories').selectpicker('destroy');
                        $q('#staff-categories').selectpicker('render');
                    })
                }
            });

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

                const selected_category = $q(this).find(":selected").data('unit_category_id');
                const selected_unit = $q(this).val();
                switch (selected_category) {
                    case 1 :
                    $q('#departments').find('option').each(function () {
                        $q(this).data('unit_id') == selected_unit ? $q(this).show() : $q(this).hide();
                        $q('#departments').selectpicker('destroy');
                        $q('#departments').selectpicker('render');
                        $q('#research-groups').selectpicker('val', '');
                        $q('#research-groups').next().addClass('disabled low-opacity');
                    })
                        break;
                    case 2  :
                        $q('#research-groups').find('option').each(function () {
                            $q(this).data('unit_id') == selected_unit ? $q(this).show() : $q(this).hide();
                            $q('#research-groups').selectpicker('destroy');
                            $q('#research-groups').selectpicker('render');
                            $q('#departments').selectpicker('val', '');
                            $q('#departments').next().addClass('disabled low-opacity');
                        })
                        break;

                    case 3 :
                    $q('#departments').selectpicker('val', '');
                    $q('#departments').next().addClass('disabled');
                    $q('#research-groups').selectpicker('val', '');
                    $q('#research-groups').next().addClass('disabled low-opacity');
                }

            })

            $q('#staff-categories').on('change', function () {

                if ($q('#staff-categories').find(":selected").val() === '2' || $q('#staff-categories').find(":selected").val() === '3') {
                    $q('#ranks').removeClass('disabled low-opacity');
                    $q('#ranks').selectpicker('destroy');
                    $q('#ranks').selectpicker('render');
                } else {
                    $q('#ranks').selectpicker('val', '');
                    $q('#ranks').next().addClass('disabled low-opacity');
                }
            });

             // Input validation

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

                const greekPattern = /^[Α-Ω]$/;
                const engPattern = /^[A-Z]$/;
                const emailPattern = /^[A-Za-z0-9$%&*#!=+_?.@-]$/;
                const numberPattern = /^[0-9]$/;
                const datePattern = /^[0-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('date-input')) {
                        if (datePattern.test(inputValue[i])) {
                            validInput += inputValue[i];
                        }
                    } else {
                        continue;
                    }
                    $q(inputField).val(validInput);
                }
            })

            /**
             * id 1 == kentrikh dioikish => show tmhmata
             * id 2 == inst => show research groups
             * id 3 == autoteles
             */
        });
    </script>
@endsection