@extends('dashboard.layouts.index', ['breadcrumb' => ['main' => 'global.employee_profile','sub' => "global.employee_profile"], 'user_side' => $user])
@section('title')
@endsection

@section('content')
    <div class="page-header flex-5 d-flex col-gap-30 mb-30">
        <a href="{{'employment'}}" class="text-center">
            @lang("global.employment_details")
        </a>
        <a href="{{'finance'}}" class="text-center">
            @lang("global.finance")
        </a>
        <a href="{{'attendance'}}" class="text-center">
            @lang("global.attendance")
        </a>
        <a href="{{'documents'}}" class="text-center">
            @lang("global.documents")
        </a>
        <a href="{{'info'}}" class="text-center active-item">
            @lang("global.details")
        </a>
    </div>
    <div class="row mb-30">
        <div class="col-12 mb-30 col-md-6">
            <div class="activity-box user-info">
                <ul class="info-container d-none pb-18">
                    <li class="mb-14">
                        <span>@lang("global.basic_information")</span>

                        <div class="actions">
                            <span class="cursor-pointer btn btn-info" update-box-info data-user-id = "{{$user->id}}"  data-update = "basic-info">
                              <span class="spinner-border spinner-border-sm d-none" role="status"
                                    aria-hidden="true"></span>
                                @lang('global.save')
                            </span>
                        </div>
                    </li>

                    @component('dashboard.components.edit_text' , [
                             "name" => "first_name",
                             "type" => "text",
                             "title" => __("global.first_name"),
                             'col' => 'mb-30 col-12 required',
                             'value' => $user->first_name
                             ])
                    @endcomponent
                    @component('dashboard.components.edit_text' , [
                        "name" => "last_name",
                        "type" => "text",
                        "title" => __("global.last_name"),
                        'col' => 'mb-30 col-12 required',
                         'value' => $user->last_name
                        ])
                    @endcomponent

                    @component('dashboard.components.edit_text' , [
                        "name" => "date_of_birth",
                        "type" => "date",
                        "title" => __("global.date_of_birth"),
                        'col' => 'mb-30 col-12',
                        'value' => $user->userinformationOne->date_of_birth ? $user->userinformationOne->date_of_birth : '',
                        'title' => $user->userinformationOne->date_of_birth ? $user->userinformationOne->date_of_birth : ''
                        ])
                    @endcomponent
                    <div class="custom-dropdown mb-30 form-group col-12">
                        <i class="fa fa-chevron-down"></i>
                        <select name="gender" class="form-control text-muted" aria-label=".form-select-sm example">
                            <option {{$user->gender != 'female' ?: 'selected'}} value='female'> {{__('global.female')}} </option>
                            <option {{$user->gender != 'male' ?: 'selected'}} value='male'> {{__('global.male')}} </option>
                        </select>
                    </div>

                    <div class="custom-dropdown mb-30 form-group col-12">
                        <i class="fa fa-chevron-down"></i>
                        <select name="national" class="form-control text-muted" aria-label=".form-select-sm example">
                            <option>{{__('global.nationality')}}</option>
                            @foreach(\App\Models\User::NATIONALITIES as $key => $value)
                                <option
                                    {{$key ==  $user->national ? 'selected' : ''}} value={{ $key }}> {{$value}}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    @component('dashboard.components.edit_text' , [
                            "name" => "passport_number",
                            "type" => "text",
                            "title" => __("global.passport_number"),
                            'col' => 'mb-30 col-12',
                            'value' => $user->userinformationOne->passport_number
                         ])
                    @endcomponent

                    <div class="custom-dropdown mb-30 form-group col-12">
                        <i class="fa fa-chevron-down"></i>
                        <select name="social_status" class="form-control" aria-label=".form-select-sm example">
                            <option {{$user->userinformationOne->social_status != App\Models\User::UNMARRIED ?: 'selected'}} value="{{ App\Models\User::UNMARRIED }}">{{ ucfirst(App\Models\User::UNMARRIED) }}</option>
                            <option {{$user->userinformationOne->social_status != App\Models\User::ABSOLUTE ?: 'selected'}} value="{{ App\Models\User::ABSOLUTE }}">{{ ucfirst(App\Models\User::ABSOLUTE) }}</option>
                            <option {{$user->userinformationOne->social_status != App\Models\User::WIDOWER ?: 'selected'}} value="{{ App\Models\User::WIDOWER }}">{{ ucfirst(App\Models\User::WIDOWER) }}</option>
                            <option {{$user->userinformationOne->social_status != App\Models\User::MARRIED ?: 'selected'}} value="{{ App\Models\User::MARRIED }}">{{ ucfirst(App\Models\User::MARRIED) }}</option>
                        </select>
                    </div>
                    <div class="custom-dropdown form-group col-12">
                        <i class="fa fa-chevron-down"></i>
                        <select name="educational_level" class="form-control text-muted" aria-label=".form-select-sm example">
                            <option {{$user->userinformationOne->educational_level != 'high-school' ?: 'selected'}} value="high-school">High School</option>
                            <option {{$user->userinformationOne->educational_level != 'associate-degree' ?: 'selected'}} value="associate-degree">Associate Degree</option>
                            <option {{$user->userinformationOne->educational_level != 'bachelor-degree' ?: 'selected'}} value="bachelor-degree">Bachelor's Degree</option>
                            <option {{$user->userinformationOne->educational_level != 'master-degree' ?: 'selected'}} value="master-degree">Master's Degree</option>
                            <option {{$user->userinformationOne->educational_level != 'doctorate-degree' ?: 'selected'}} value="doctorate-degree">Doctorate (Ph.D.)</option>
                        </select>
                    </div>
                </ul>
                <ul class="info-container">
                    <li>
                        <span>@lang("global.basic_information")</span>

                        <div class="actions">
                            @include('svg-icons.edit')
                        </div>
                    </li>
                    <li>@lang("global.first_name")     <span class="change-ajax-first_name">{{$user->first_name}}</span></li>
                    <li>@lang("global.last_name")      <span class="change-ajax-last_name">{{$user->last_name}}</span></li>
                    <li>@lang("global.date_of_birth")  <span class="change-ajax-date_of_birth">{{ @$user->userinformationOne->date_of_birth ?: __("global.not_set") }}</span></li>
                    <li>@lang("global.gender")         <span class="change-ajax-gender">{{ucfirst($user->gender) ?: __("global.not_set")}}</span></li>
                    <li>@lang("global.nationality")    <span class="change-ajax-national">{{ucwords(str_replace('_',' ',$user->national)) ?: __("global.not_set")}}</span></li>
                    <li>@lang("global.passport_number")<span class="change-ajax-passport_number">{{@$user->userinformationOne->passport_number ?: __("global.not_set")}}</span></li>
                    <li>@lang("global.marital_status") <span class="change-ajax-social_status">{{@ucwords($user->userinformationOne->social_status) ?: __("global.not_set")}}</span></li>
                    <li>@lang("global.education_level")<span class="change-ajax-educational_level">{{@ucwords(str_replace('-',' ',$user->userinformationOne->educational_level)) ?: __("global.not_set")}}</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-12 col-md-6">
            <div class="activity-box user-info">
                <ul class="info-container d-none pb-18">
                    <li class="mb-14">
                        <span>@lang("global.contact")</span>

                        <div class="actions">
                            <span class="cursor-pointer btn btn-primary" update-box-info data-user-id = "{{$user->id}}"  data-update = "contact-info">
                              <span class="spinner-border spinner-border-sm d-none" role="status"
                                    aria-hidden="true"></span>
                                Save
                            </span>
                        </div>
                    </li>

                    @component('dashboard.components.edit_text' , [
                             "name" => "phone_number",
                             "type" => "text",
                             "title" => "+962",
                             'col' => 'mb-30 col-12 required',
                             'value' => $user->phone_number
                             ])
                    @endcomponent

                    @component('dashboard.components.edit_text' , [
                             "name" => "email",
                             "type" => "email",
                             "title" => __("global.email"),
                             'col' => 'mb-30 col-12 required',
                             'value' => $user->email
                             ])
                    @endcomponent
                    @component('dashboard.components.edit_text' , [
                                "name" => "address",
                                "type" => "email",
                                "title" => __("global.address"),
                                'col' => 'mb-30 col-12 required',
                                'value' => $user->address
                                ])
                    @endcomponent


                </ul>


                <ul class="info-container">
                    <li>
                        <span>@lang("global.contact")</span>

                        <div class="actions">
                            @include('svg-icons.edit')
                        </div>
                    </li>
                    <li>@lang("global.phone_number") <span class="change-ajax-phone_number">{{$user->phone_number ?: __("global.not_set")}}</span></li>
                    <li>@lang("global.email") <span class="change-ajax-email"> {{$user->email ?: __("global.not_set")}}</span></li>
                    <li>@lang("global.address") <span class="change-ajax-address">{{$user->address ?: __("global.not_set")}}</span></li>
                </ul>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $('.user-info .edit-action').on('click',function () {
            $(this).closest('.user-info').find('.info-container').toggleClass('d-none')
        })

        $('[update-box-info]').on('click',function () {
            var btn = $(this)
            var data = {
                user_id: $(this).data('user-id'),
                update:$(this).data('update')
            };
            var stop = false;

            $(this).closest('.user-info ').find('select, input').each(function() {
                var name = $(this).attr("name");
                var val = $(this).val();

                if (!val && $(this).closest('.form-group').hasClass('required')) {
                    $(this).addClass('is-invalid')
                     stop = true;
                }

                data[name] = val;
            });

            if(!stop) {
                $(this).closest('.user-info').addClass('loading-box')

                $.ajax({
                    type: 'POST',
                    url: "/dashboard/update-inputs",
                    data : data,
                    success: function (response) {
                        $.each(data, function(key, value) {
                            var text = value;
                            var element = $(`[name=${key}]`);

                            if (element.is(':input') && element.is('select')) {
                                text = value.replace(/-/g, ' ').replace(/\b\w/g, function (c) {
                                    return c.toUpperCase();
                                });
                            }

                            $(`.change-ajax-${key}`).html(text)
                        });

                        setTimeout(function () {
                            btn.closest('.user-info').find('.info-container').toggleClass('d-none')
                            btn.closest('.user-info').removeClass('loading-box')
                        }, 250)
                    },
                    error: function (response) {

                        var inputs = response.responseJSON.errors

                        $.each(inputs, function(key, value) {
                            var element = $(`[name=${key}]`);
                            setTimeout(function () {
                                btn.closest('.user-info').removeClass('loading-box')
                                element.addClass('is-invalid')

                            }, 250)
                        });
                    }
                })
            }
        })
    </script>

@endpush