@extends('layouts.main')

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

@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">
    <x-page-header>
        EDI JSON ENTRY
    </x-page-header>

    <div class="edit-entry-header">
        <div class="row">
            <div class="col-6">
                <p class="info-title">For the position name the unit acronym must be written and then the position name. Available
                    positions:</p>
                @foreach($positions as $position)
                    <div class="info-row">
                        <p>{{$position->name_el}}</p>
                        <p>{{$position->name_en}}</p>
                    </div>

                @endforeach
            </div>
            <div class="col-6">
                <p class="info-title">Available unit acronyms:</p>
                <div class="row">
                @foreach($units as $unit)
                  <div class="col-3">
                      <div class="info-row">
                          <p>{{$unit->acronym_en}}</p>
                      </div>
                  </div>

                @endforeach
                </div>
            </div>

        </div>
    </div>

    <form action="{{route('management-contacts.json.update-entry')}}" method="POST" class="row g-4"
          id="edit-contacts-json-entry-form">
        @csrf
        <input type="hidden" value="{{$entry['id']}}" name="id">
        <div class="col-6">
            <x-ui.input-field :required="true" class="greek-input" label="ΟΝΟΜΑ (ΕΛΛΗΝΙΚΑ)"
                              name="firstname_el" value="{{$entry['firstname_el']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true" class="greek-input" label="ΕΠΙΘΕΤΟ (ΕΛΛΗΝΙΚΑ)"
                              name="lastname_el" value="{{$entry['lastname_el']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true" label="FIRSTNAME (ENGLISH)"
                              name="firstname_en" value="{{$entry['firstname_en']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true" label="LASTNAME (ENGLISH)"
                              name="lastname_en" value="{{$entry['lastname_en']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="false" label="PHONE INTERNAL" name="phone"
                              value="{{$entry['phone']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="false"  label="PHONE EXTERNAL" name="phone_ext"
                              value="{{$entry['phone_ext']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true" label="EMAIL" name="email"
                              value="{{$entry['email']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="false"  label="SKYPE" name="skype"
                              value="{{$entry['skype']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="false"   label="WEBPAGE" name="webpage"
                              value="{{$entry['webpage']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="false"   label="DEPARTMENT" name="department"
                              value="{{$entry['department_name_el']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.select
                optionAttr='unit_category_id'
                :clearable='true'
                label="UNIT"
                name="unit"
                id="unit"
                :clearable='false'
                :selected="$entry['unit_acronym_en']"
                :options="$units"
                propertyAsValue="acronym_en"
            >
            </x-ui.select>
        </div>

        <div class="col-6">
            <div class="departments">
                <x-ui.select
                    optionAttr='unit_acronym'
                    id="departments"
                    :clearable='true'
                    label="DEPARTMENT"
                    name="department"
                    :clearable='false'
                    :selected="$entry['department_name_en']"
                    :options="$departments"
                    propertyAsValue="name_en"
                >
                </x-ui.select>
            </div>
        </div>

        <div class="col-6">
            <x-ui.input-field :required="false"  label="BUILDING NUMBER"
                              name="building_number" value="{{$entry['building_number']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="false"
                              placeholder="UNIT_ACRONYM_EN:POSITION_NAME"
                              label="POSITION NAME (ΕΛΛΗΝΙΚΑ) ACCEPTABLE FORMAT: UNIT_ACRONYM_EN:POSITION_NAME"
                              name="position_name_el" value="{{$entry['position_name_el']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="false"
                              placeholder="UNIT_ACRONYM_EN:POSITION_NAME"
                              label="POSITION NAME (ENGLISH) ACCEPTABLE FORMAT: UNIT_ACRONYM_EN:POSITION_NAME"
                              name="position_name_en" value="{{$entry['position_name_en']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="false"  label="RANK (ΕΛΛΗΝΙΚΑ)"
                              name="rank_name_el" value="{{$entry['rank_name_el']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="false"  label="RANK (ENGLISH)"
                              name="rank_name_en" value="{{$entry['rank_name_en']}}"></x-ui.input-field>
        </div>
        <div class="col-6">
            <x-ui.input-field :required="true"   label="HAS DUA ACCOUNT (false/true)" name="dua"
                              value="{{$entry['dua'] ?? false}}"></x-ui.input-field>
        </div>
        <div class="btn-container">
            <x-ui.blue-button class="create-user-submit" form="edit-contacts-json-entry-form">EDIT ENTRY</x-ui.blue-button>
        </div>
    </form>
    </div>
@endsection

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

        function setDepartmentsSelect() {
            const selected_category = $q('#unit').find(":selected").data('unit_category_id');
            const selected_unit = $q('#unit').val();

            /**
             * id 1 == kentrikh dioikish => show tmhmata
             * id 2 == inst => show research groups
             * id 3 == autoteles
             */
            switch (selected_category) {
                case 1:
                    $q('.departments').find('select').val('')
                    $q('.departments').find('option').each(function () {

                        $q(this).data('unit_acronym') == selected_unit ? $q(this).show() : $q(this).hide();
                        $q('#departments').selectpicker('destroy');
                        $q('#departments').selectpicker('render');
                    })
                    $q('.departments').show()
                    break;
                default:
                    $q('.departments').find('select').val('')
                    $q('.departments').hide()
            }
        }

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

            setDepartmentsSelect()

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

                setDepartmentsSelect()

            })

        });
    </script>
@endsection