@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop
@section('container')
    <div class="page-content">

        <div class="account account-inner">
            <div class="container">
                <div class="account-menu-open">
                    <button type="button" class="open-account">
                        <span>{{ShowLabelById(216)}}</span>
                        <img src="{{asset('front-assets/img/icons/arrow-down.svg')}}" alt="">
                    </button>
                </div>
                <div class="inner">
                    @include('front.pages.cabinet.menu', ['user' => $user, 'childrenList' => $childrenList])
                    <div class="account-content account-options">
                        <div class="account-content-head h1">{{ShowLabelById(273)}}</div>
                        <div class="list">
                            <div class="item active">
                                <button type="button" class="account-options-btn h3">{{ShowLabelById(240)}}</button>
                                <div class="account-options-content" style="display: block;">
                                    <div class="account-options-info">
                                        <div class="account-personal-col account-personal-info account-info">
                                            <div class="h4">{{ShowLabelById(241)}}</div>
                                            <form id="update-profile" action="{{ route('settings.update') }}" method="POST">
                                                @csrf

                                                <div class="captcha">
                                                    <input type="hidden" name="g-recaptcha-response"
                                                           id="recaptcha-user-update">
                                                </div>

                                                <div class="form-item disabled">
                                                    <label for="form">{{ShowLabelById(186)}}</label>
                                                    <div class="account-options-info-input">
                                                        <input type="text" id="name" name="name" value="{{ $user->name }}" disabled>
                                                        <button type="button" class="account-options-info-edit">
                                                            <img src="{{asset('front-assets/img/icons/edit.svg')}}" alt="edit">
                                                        </button>
                                                    </div>
                                                </div>

                                                <div class="form-item disabled">
                                                    <label for="form">{{ShowLabelById(39)}}</label>
                                                    <div class="account-options-info-input">
                                                        <input type="text" id="email" name="email" value="{{ $user->email }}" disabled>
                                                        <button type="button" class="account-options-info-edit">
                                                            <img src="{{asset('front-assets/img/icons/edit.svg')}}" alt="edit">
                                                        </button>
                                                    </div>
                                                </div>

                                                <div class="form-item disabled">
                                                    <label for="phone">{{__('variables.phone')}}</label>
                                                    <div class="account-options-info-input">
                                                        <input type="text" id="phone" name="phone" value="{{ app('App\Http\Controllers\Front\CabinetController')->formatPhone($user->phone) }}" disabled>
                                                        <button type="button" class="account-options-info-edit">
                                                            <img src="{{asset('front-assets/img/icons/edit.svg')}}" alt="edit">
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="form-item disabled">
                                                    <label for="birth_date">{{__('variables.birthday')}}</label>
                                                    <div class="account-options-info-input">
                                                        <input type="date" id="birth_date" name="birth_date"
                                                               value="{{ $user->birth_date ? \Carbon\Carbon::parse($user->birth_date)->format('Y-m-d') : '' }}"
                                                               max="{{ \Carbon\Carbon::now()->format('Y-m-d') }}"
                                                               disabled>
                                                        <button type="button" class="account-options-info-edit">
                                                            <img src="{{asset('front-assets/img/icons/edit.svg')}}" alt="edit">
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="form-submit" >
                                                    <button type="submit" data-form-id="update-profile" onclick="saveForm(this)" class="form-submit-btn" disabled >
                                                        {{ShowLabelById(242)}}
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="account-personal-col account-personal-children">
                                            <div class="h4">{{ShowLabelById(243)}}</div>
                                            <div class="list">
                                                @foreach($childrenList as $child)
                                                    <div class="item children-gender-{{ $child->gender }}" data-id="children-edit-{{ $child->id }}">
                                                        <div class="item-head">
                                                            <div class="image">
                                                                <img src="{{ asset('front-assets/img/icons/' . app('App\Http\Controllers\Front\CabinetController')->getChildIcon($child)) }}" alt="">
                                                            </div>
                                                            <div class="info">
                                                                <div class="name">{{ $child->name }}</div>
                                                                <div class="age">{{ \Carbon\Carbon::parse($child->birth_date)->format('d.m.Y') }}
                                                                    <span>({{ \Carbon\Carbon::parse($child->birth_date)->diffForHumans(null, true) }})</span>
                                                                </div>
                                                            </div>
                                                            <div class="cta">
                                                                <button type="button" class="children-edit" data-id="children-edit-{{ $child->id }}">
                                                                    <img src="{{ asset('front-assets/img/icons/edit-white.svg') }}" alt="">
                                                                </button>
                                                                <button type="button" class="children-delete" data-id="{{ $child->id }}">
                                                                    <img src="{{ asset('front-assets/img/icons/trash-white.svg') }}" alt="">
                                                                </button>
                                                            </div>
                                                        </div>
                                                        <div class="item-content">
                                                            <form action="{{ route('save.children', ['id' => $child->id]) }}" id="save-children-form-{{ $child->id }}" method="post">
                                                                @csrf
                                                                <div class="captcha">
                                                                    <input type="hidden" name="g-recaptcha-response"
                                                                           id="recaptcha-save-children">
                                                                </div>
                                                                <div class="form-item">
                                                                    <label for="child_name_{{ $child->id }}">{{__('variables.user_full_name')}}</label>
                                                                    <input type="text" id="child_name_{{ $child->id }}" name="name" value="{{ $child->name }}">
                                                                </div>

                                                                <div class="form-radio-children h6">
                                                                    <ul>
                                                                        <li class="form-radio-male">
                                                                            <input type="radio" id="gender_male_{{ $child->id }}" name="gender" value="male" {{ $child->gender === 'male' ? 'checked' : '' }}>
                                                                            <label for="gender_male_{{ $child->id }}">
                                                                                <span>{{ShowLabelById(244)}}</span>
                                                                                <img src="{{ asset('front-assets/img/icons/gender-male.svg') }}" alt="">
                                                                            </label>
                                                                        </li>
                                                                        <li class="form-radio-female">
                                                                            <input type="radio" id="gender_female_{{ $child->id }}" name="gender" value="female" {{ $child->gender === 'female' ? 'checked' : '' }}>
                                                                            <label for="gender_female_{{ $child->id }}">
                                                                                <span>{{ShowLabelById(245)}}</span>
                                                                                <img src="{{ asset('front-assets/img/icons/gender-female.svg') }}" alt="">
                                                                            </label>
                                                                        </li>
                                                                    </ul>
                                                                </div>

                                                                <div class="form-item">
                                                                    <label for="birth_date_{{ $child->id }}">{{__('variables.birthday')}}</label>
                                                                    <input type="date" id="birth_date_{{ $child->id }}" name="birth_date" value="{{ $child->birth_date }}"
                                                                           max="{{ \Carbon\Carbon::now()->format('Y-m-d') }}">
                                                                </div>

                                                                <div class="form-submit">
                                                                    <button type="submit" data-form-id="save-children-form-{{ $child->id }}" onclick="saveForm(this)" class="common-btn">{{__('variables.save_it')}}</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>

                                            <div class="account-personal-children-add">
                                                <button type="button" class="account-personal-children-add-btn">
                                                    <img src="{{ asset('front-assets/img/icons/plus-circle.svg') }}" alt="">
                                                    <span>{{ShowLabelById(246)}}</span>
                                                </button>
                                                <div class="account-personal-children-add-content">
                                                    <form action="{{ route('save.children') }}" id="save-children-form-new" method="post">
                                                        @csrf

                                                        <input type="hidden" name="g-recaptcha-response"
                                                               id="recaptcha-save-children-new">

                                                        <div class="form-item">
                                                            <label for="child_name_new">{{__('variables.user_full_name')}}</label>
                                                            <input type="text" id="child_name_new" name="name" value="">
                                                        </div>

                                                        <div class="form-radio-children h6">
                                                            <ul>
                                                                <li class="form-radio-male">
                                                                    <input type="radio" id="gender_male_new" name="gender" value="male" checked>
                                                                    <label for="gender_male_new">
                                                                        <span>{{ShowLabelById(244)}}</span>
                                                                        <img src="{{ asset('front-assets/img/icons/gender-male.svg') }}" alt="">
                                                                    </label>
                                                                </li>
                                                                <li class="form-radio-female">
                                                                    <input type="radio" id="gender_female_new" name="gender" value="female">
                                                                    <label for="gender_female_new">
                                                                        <span>{{ShowLabelById(245)}}</span>
                                                                        <img src="{{ asset('front-assets/img/icons/gender-female.svg') }}" alt="">
                                                                    </label>
                                                                </li>
                                                            </ul>
                                                        </div>

                                                        <div class="form-item">
                                                            <label for="birth_date_new">{{__('variables.birthday')}}</label>
                                                            <input type="date" id="birth_date_new" name="birth_date" value="">
                                                        </div>

                                                        <div class="form-submit">
                                                            <button type="submit" data-form-id="save-children-form-new" onclick="saveForm(this)" class="common-btn">
                                                                {{ShowLabelById(246)}}</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <button type="button" class="account-options-btn h3">{{ShowLabelById(247)}}</button>
                                <div class="account-options-content">
                                    <div class="account-options-info">
                                        <div class="account-personal-col account-personal-info">
                                            <div class="h4">{{ShowLabelById(248)}}</div>
                                            <form id="update-password" action="{{ route('settings.update-password') }}" method="POST">
                                                @csrf
                                                <div class="captcha">
                                                    <input type="hidden" name="g-recaptcha-response"
                                                           id="recaptcha-update-password">
                                                </div>
                                                <div class="form-item">
                                                    <label for="current_password">{{ShowLabelById(203)}} *</label>
                                                    <div class="code" style="margin-top: -10px; display: block;">
                                                        <div class="text" style="color: red">{{ShowLabelById(272)}}</div>
                                                    </div>
                                                    <div class="input-password">
                                                    <input type="password" id="current_password" name="current_password" placeholder="{{ShowLabelById(203)}}">
                                                    <button type="button" class="input-password-btn">
                                                        <svg>
                                                            <use xlink:href="{{ asset('front-assets/svg/sprite.svg?v=').config('custom.front.svg_version') }}#eye"></use>
                                                            <use xlink:href="{{ asset('front-assets/svg/sprite.svg?v=').config('custom.front.svg_version') }}#eye-slash"></use>
                                                        </svg>
                                                    </button>
                                                    </div>
                                                </div>
                                                <div class="form-item disabled">
                                                    <label for="new_password">{{ShowLabelById(249)}} *</label>
                                                    <div class="input-password">
                                                    <input type="password" id="new_password" name="password" placeholder="XXX XXX" disabled>
                                                    <button type="button" class="input-password-btn">
                                                        <svg>
                                                            <use xlink:href="{{ asset('front-assets/svg/sprite.svg?v=').config('custom.front.svg_version') }}#eye"></use>
                                                            <use xlink:href="{{ asset('front-assets/svg/sprite.svg?v=').config('custom.front.svg_version') }}#eye-slash"></use>
                                                        </svg>
                                                    </button>
                                                    </div>
                                                </div>
                                                <div class="form-item disabled">
                                                    <label for="password_confirmation">{{ShowLabelById(250)}} *</label>
                                                    <div class="input-password">
                                                    <input type="password" id="password_confirmation" name="password_confirmation" placeholder="XXX XXX" disabled>
                                                    <button type="button" class="input-password-btn">
                                                        <svg>
                                                            <use xlink:href="{{ asset('front-assets/svg/sprite.svg?v=').config('custom.front.svg_version') }}#eye"></use>
                                                            <use xlink:href="{{ asset('front-assets/svg/sprite.svg?v=').config('custom.front.svg_version') }}#eye-slash"></use>
                                                        </svg>
                                                    </button>
                                                    </div>
                                                </div>
                                                <div class="form-submit">
                                                    <button type="button" data-form-id="update-password" onclick="saveForm(this)" class="form-submit-btn" disabled>
                                                        {{ShowLabelById(242)}}</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@stop

@push('other-scripts')

    <script>
        $(document).ajaxSuccess(function(event, xhr, settings) {
            let response = xhr.responseJSON;

            if (!response) return;

            if (settings.url.includes('{{ route('settings.update') }}') && response.status) {
                $('.account-info').load(location.href + ' .account-info > *');
            }

            if (settings.url.includes('{{ route('settings.update-password') }}') && response.status) {
                location.reload();
            }

            if (settings.url.includes('{{ route('save.children') }}') && response.status) {
                $('.account-personal-children').load(location.href + ' .account-personal-children > *');
                $('.children').load(location.href + ' .children > *');
            }
        });

    </script>



    <script>

     //Для обновления данных пользователя
     document.addEventListener('DOMContentLoaded', function () {
         const editButtons = document.querySelectorAll('.account-options-info-edit');

         editButtons.forEach(button => {
             button.addEventListener('click', function () {
                 const wrapper = button.closest('.account-options-info-input') || button.closest('.form-item');
                 const input = wrapper.querySelector('input');

                 if (input) {
                     input.removeAttribute('disabled');
                     input.focus();

                     if (input.type === 'date') {
                         button.style.display = 'none';
                     }
                 }

                 const form = button.closest('form');
                 const saveBtn = form.querySelector('.form-submit-btn');
                 if (saveBtn) saveBtn.removeAttribute('disabled');
             });
         });
     });

     //Для обновления пароля
     document.addEventListener('DOMContentLoaded', function () {
         const passwordForm = document.querySelector('#update-password');
         if (!passwordForm) return;

         const currentPassword = passwordForm.querySelector('#current_password');
         const newPassword = passwordForm.querySelector('#new_password');
         const confirmPassword = passwordForm.querySelector('#password_confirmation');
         const saveBtn = passwordForm.querySelector('.form-submit-btn');

         newPassword.disabled = true;
         confirmPassword.disabled = true;
         saveBtn.disabled = true;

         currentPassword.addEventListener('input', function () {
             const newWrapper = newPassword.closest('.form-item');
             const confirmWrapper = confirmPassword.closest('.form-item');

             if (currentPassword.value.trim() !== '') {
                 newPassword.disabled = false;
                 newWrapper.classList.remove('disabled');
             } else {
                 newPassword.disabled = true;
                 confirmPassword.disabled = true;
                 saveBtn.disabled = true;
                 newWrapper.classList.add('disabled');
                 confirmWrapper.classList.add('disabled');
             }
         });

         newPassword.addEventListener('input', function () {
             const confirmWrapper = confirmPassword.closest('.form-item');
             if (newPassword.value.trim() !== '') {
                 confirmPassword.disabled = false;
                 confirmWrapper.classList.remove('disabled');
             } else {
                 confirmPassword.disabled = true;
                 saveBtn.disabled = true;
                 confirmWrapper.classList.add('disabled');
             }
         });

         confirmPassword.addEventListener('input', function () {
             saveBtn.disabled = confirmPassword.value.trim() === '';
         });
     });

     //Delete Children
     $(document).on('click', '.children-delete', function() {
         let childId = $(this).data('id');

         if(!confirm('{{ShowLabelById(204)}}')) return;

         $.ajax({
             url: '{{ route("delete.child") }}',
             method: 'POST',
             data: {
                 id: childId,
                 _token: '{{ csrf_token() }}'
             },
             success: function(response){
                 if(response.status){
                     $('.account-personal-children').load(location.href + ' .account-personal-children > *');
                     $('.children').load(location.href + ' .children > *');

                     Notiflix.Notify.success(response.message, { position: 'center-top', timeout: 3000 });
                 } else {
                     Notiflix.Notify.failure(response.message, { position: 'center-top', timeout: 3000 });
                 }
             },
             error: function(){
                 Notiflix.Notify.failure('Произошла ошибка при удалении', { position: 'center-top', timeout: 3000 });
             }
         });
     });

    </script>
@endpush