@push('stylesheets')
    <link rel="stylesheet" href="{{asset('css/secondary-top-personal.css')}}"/>
@endpush

<div blade="{{ $viewName ?? 'unknown' }}">
    <form action="{{route('management-users.update.personal',['user' => $user])}}" data-tab="personal"
          class="personal-info-form" method="POST" id="update-personal-form">
        @csrf
        <div class="mb-5 secondary-top-personal">
            <div class="secondary-info">
                <div class="email-verificarion-info">
                    <span>D.U.A. Code:</span>
                    <span class="verification-time">{{$user->dua_code}}</span>
                </div>
                <div class="email-verificarion-info">
                    <span>User ID:</span>
                    <span class="verification-time">{{$user->id}}</span>
                </div>
                <div class="active-info">
                    <span class="dot {{$user->isActiveDua == 1 ? 'bg-green' : 'bg-red'}}"></span>
                    <span>{{$user->isActiveDua == 1  ? 'ACTIVE' : 'INACTIVE'}}</span>
                </div>
                <div class="email-verificarion-info">
                    <span>EMAIL VERIFIED AT : </span>
                    <span
                        class="verification-date">{{$user->email_verified_at != null ? \Carbon\Carbon::parse($user->email_verified_at)->format('d/m/Y') : '---'}}</span>
                    <span
                        class="verification-time">{{$user->email_verified_at != null ? \Carbon\Carbon::parse($user->email_verified_at)->format('H:i:s') : '---'}}</span>
                </div>
            </div>
            <div class="status-info ms-auto me-4 {{$user->isActiveEmployee == 0 ? 'd-flex justify-content-between align-items-center' : ''}}">
                <div class="status-container">
                    <span>ACTIVE EMPLOYEE</span>

                    <label for="inactive-employee">
                        <input type="radio" id="inactive-employee" name="isActiveEmployee" value="0"
                               @if($user->isActiveEmployee == 0) checked @endif/>
                        <div class="status-img"><img src="{{asset('images/clear.svg')}}"/></div>
                    </label>
                    <label for="active-employee">
                        <input type="radio" id="active-employee" name="isActiveEmployee" value="1"
                               @if($user->isActiveEmployee == 1) checked @endif />
                        <div class="status-img"><img src="{{asset('images/check.svg')}}"/></div>
                    </label>
                </div>
            </div>
            <div
                class="status-info {{$user->isActiveDua == 0 ? 'd-flex justify-content-between align-items-center  ' : ''}}">
                <div class="status-container">
                    <span>ACTIVE DUA</span>

                    <label for="inactive">
                        <input type="radio" id="inactive" name="isActiveDua" value="0"
                               @if($user->isActiveDua == 0) checked @endif/>
                        <div class="status-img"><img src="{{asset('images/clear.svg')}}"/></div>
                    </label>
                    <label for="active">
                        <input type="radio" id="active" name="isActiveDua" value="1"
                               @if($user->isActiveDua == 1) checked @endif />
                        <div class="status-img"><img src="{{asset('images/check.svg')}}"/></div>

                    </label>

                    @if(!$user->isActiveDua)

                        @if($user->link  && !$user->invitationLinkIsValid())
                            <x-ui.blue-button class="send-invitation {{$user->isActiveDua == 1 ? 'not-visible' : ''}}"
                                              form="inviteSingle">
                                RE - INVITE
                            </x-ui.blue-button>

                        @elseif($user->link && $user->link->invitation_status && $user->link->invitation_status->current_step != 'not_sent')

                            <b class="copy-url" data-value="{{$user->link->url}}" role="button">
                                                COPY LINK
                             </b>

                        @else
                            <x-ui.blue-button class="send-invitation {{$user->isActiveDua == 1 ? 'not-visible' : ''}}"
                                              form="inviteSingle">
                                SEND INVITATION
                            </x-ui.blue-button>
                        @endif
                    @endif


                </div>

            </div>
        </div>

        <div class="mb-5">
            <x-page-header>
                PASSWORDS
            </x-page-header>
            <div class="row g-4">

                <div class="col-6">
                    <x-ui.input-field
                        label="MAIN PASSWORD"
                        name="password"
                        readonly
                        value="{{$user->password}}"
                    >
                    </x-ui.input-field>
                </div>


                <div class="col-6">
                    <x-ui.input-field
                        label="SECONDARY PASSWORD"
                        class="secondary"
                        name="password2"
                        value="{{$user->password2}}"
                    >
                    </x-ui.input-field>
                </div>


            </div>
        </div>

        <div class="mb-5">
            <x-page-header>
                LDAP INFO
            </x-page-header>
            <div class="row g-4 align-items-center">
                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="LDAP uid"
                                      name="ldap_uid"
                                      class="ldap-input"
                                      :required="true"
                                      value="{{$user->ldap_uid}}"
                    >
                    </x-ui.input-field>
                </div>
                @if($user->ldap_uid == '')
                    <div class="col-6 d-flex align-items-center retrieve-btn-container">
                        <x-ui.blue-button type="submit" form="ldap-form">
                            Retrieve/Generate LDAP uid
                        </x-ui.blue-button>
                    </div>
                @endif

            </div>
        </div>


        <div class="mb-5">
            <x-page-header>
                USER DATA
            </x-page-header>
            <div class="row g-4">

                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="ΟΝΟΜΑ ΕΛΛΗΝΙΚΑ"
                                      name="firstname"
                                      class="greek-input"
                                      pattern='^[Α-Ω-ΪΫ\s]{3,}$'
                                      value="{{$user->firstname}}"
                    >
                    </x-ui.input-field>
                </div>

                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="FIRSTNAME ENGLISH"
                                      name="firstname_en"
                                      class="eng-input"
                                      pattern='^[A-Z- ]{3,}$'
                                      value="{{$user->firstname_en}}"
                    >
                    </x-ui.input-field>
                </div>

                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="ΕΠΙΘΕΤΟ ΕΛΛΗΝΙΚΑ"
                                      name="lastname"
                                      class="greek-input"
                                      pattern='^[Α-Ω-ΪΫ\s]{3,}$'
                                      value="{{$user->lastname}}"
                    >
                    </x-ui.input-field>
                </div>

                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="LASTNAME ENGLISH"
                                      name="lastname_en"
                                      class="eng-input"
                                      pattern='^[A-Z- ]{3,}$'
                                      value="{{$user->lastname_en}}"
                    >
                    </x-ui.input-field>
                </div>

                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="ΟΝΟΜΑ ΠΑΤΕΡΑ"
                                      name="father_name"
                                      class="greek-input"
                                      pattern='^[Α-Ω-ΪΫ\s]{3,}$'
                                      value="{{$user->father_name}}"
                    >
                    </x-ui.input-field>
                </div>

                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="FATHER'S NAME ENGLISH"
                                      name="father_name_en"
                                      class="eng-input"
                                      pattern='^[A-Z- ]{3,}$'
                                      value="{{$user->father_name_en}}"
                    >
                    </x-ui.input-field>
                </div>

                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="ΟΝΟΜΑ ΜΗΤΕΡΑΣ"
                                      name="mother_name"
                                      class="mother-greek"
                                      pattern='^[Α-Ω-ΪΫ\s]{3,}$'
                                      value="{{$user->mother_name}}"
                    >
                    </x-ui.input-field>
                </div>

                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="MOTHER'S NAME"
                                      name="mother_name_en"
                                      class="eng-input"
                                      pattern='^[A-Z-]{3,}$'
                                      value="{{$user->mother_name_en}}"
                    >
                    </x-ui.input-field>
                </div>

            </div>
        </div>

        <div class="mb-5">
            <x-page-header>
                PERSONAL INFO
            </x-page-header>
            <div class="row g-4">

                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="ΑΦΜ"
                                      name="afm"
                                      class="number-input"
                                      pattern='^\d{8,9}$'
                                      minlength="8"
                                      maxlength="9"
                                      value="{{$user->afm}}"
                    >
                    </x-ui.input-field>
                </div>


                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="ΑΜΚΑ"
                                      name="amka"
                                      class="number-input"
                                      pattern='^\d{10,11}$'
                                      minlength="10"
                                      maxlength="11"
                                      value="{{$user->amka}}"
                    >
                    </x-ui.input-field>
                </div>


                <div class="col-6">

                    @php
                        $genders = [
                            ['id'=>'male',
                            'view_name'=>'MALE'],
                             ['id'=>'female',
                            'view_name'=>'FEMALE']

                        ]
                    @endphp


                    <x-ui.select
                        label="ΦΥΛΟ"
                        name="gender"
                        :selected="$user->gender"
                        :options="$genders"
                    >
                    </x-ui.select>
                </div>

            </div>

        </div>

        <div class="mb-5">
            <x-page-header>
                CONTACT DETAILS
            </x-page-header>
            <div class="row g-4">

                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="EMAIL"
                                      name="email"
                                      value="{{$user->email}}"
                                      class="email-input"
                    >
                    </x-ui.input-field>
                </div>


                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="PERSONAL EMAIL"
                                      name="personal_email"
                                      type="email"
                                      class="email-input"
                                      value="{{$user->personal_email}}"
                    >
                    </x-ui.input-field>
                </div>
                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="PHONE"
                                      name="phone"
                                      class="number-input"
                                      {{-- maxlength="4" --}}
                                      {{-- pattern='^(?:\d{4})?$' --}}
                                      pattern='^[0-9,\/\(\)\s]*$'
                                      value="{{$user->phone}}"

                    >
                    </x-ui.input-field>
                </div>


                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="MOBILE PHONE"
                                      name="mobile_phone"
                                      class="number-input"
                                      pattern='^(^69[0-9]{8}$)|(^$)'
                                      minlength="10"
                                      maxlength="10"
                                      value="{{$user->mobile_phone}}"
                    >
                    </x-ui.input-field>
                </div>

                <div class="col-6">
                    <x-ui.input-field user="$user"
                                      label="OFFICE NUMBER"
                                      name="office_number"
                                      class="office-input"
                                      value="{{$user->office_number}}"
                    >
                    </x-ui.input-field>
                </div>
            </div>

        </div>

        <x-unsaved-changes form="update-personal-form"/>
    </form>

    <form
        style="cursor:pointer;"
        action="{{route('management-users.invite.single',['user' => $user])}}"
          id="inviteSingle" method="POST">
        @csrf
    </form>
    <form action="{{route('management-users.ldap.uid.retrieve-generate',['user_id'=>$user->id])}}" id="ldap-form" method="GET">
        {{-- @csrf --}}
    </form>
</div>

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

        const copyUrlImages = document.querySelectorAll('.copy-url');
        const ldapForm = $q('#ldap-form');
        const form = $q('.update-form');
        ldapForm.on('submit', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    $q.ajax({
                        method: "GET",
                        url: ldapForm.attr('action'),
                    }).done(function (response) {
                        $q('.ldap-input').attr('value', response);
                        $q('.ldap-input').addClass( "hasChanges" );
                        $q('.save-changes-container ').css('display', 'flex');

                    }).fail(function (error) {
                       console.log(error.responseJSON.message);
                       window.location.replace("/error/page");
                    }).always(function () {
                        console.log('DONE');
                    });
                });

        copyUrlImages.forEach(url => {

            url.addEventListener('click', () => {

                const valueToCopy = url.getAttribute('data-value');
                const tempInput = document.createElement('input');
                tempInput.value = valueToCopy;
                document.body.appendChild(tempInput);

                tempInput.select();
                document.execCommand('copy');

                document.body.removeChild(tempInput);

                alert(`Copied: ${valueToCopy}`);
            });
        });

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

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

            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')) {
                    if (ldapPattern.test(inputValue[i])) {
                        validInput += inputValue[i];
                    }
                } else if (inputField.hasClass('office-input')) {
                   return;
                }  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