@extends('layouts.app')

@section('plugin-styles')
    <link rel="stylesheet" href="{{asset('vendors/ion-rangeslider/css/ion.rangeSlider.css')}}">
@stop
@php
    //$userField = ['roles', 'email', 'name', 'supervisors', 'labels', 'tags', 'departments', 'current_password', 'password', 'confirm_password'];
    $fields = $form->getFields();
@endphp
@section('content')
    @php $u = request()->user();@endphp
    <div class="content">
        {!! form_start($form) !!}

        <x-content.header title="{{__('title.setup')}} - {{__('title.edit_user') }}" subTitle="{{ $isCurrentContractTerminated ? __('validation.contract_terminated_cannot_be_updated') : ''}}" subTitleClasses="text-custom-red-600">
            <x-slot:headerRight>



                <button type="submit" class="btn-primary-base w-full lg:w-auto btn-save">
                    {{trans('forms.lbl_save')}}
                </button>

                @if($u->can('delete',  $user))
                    <a href="javascript:;" class="w-full lg:w-auto rounded-lg {{($user->status ? "btn-secondary-base" : "btn-success")}} btn-status"
                        data-uri="{{route('users.status.update', $user->id)}}"
                        data-id="{{$user->id}}"
                        data-value="{{($user->status ? 0 : 1)}}"
                        data-textchange="1"
                        data-activate="{{__('forms.lbl_activate_account')}}"
                        data-deactivate="{{__('forms.lbl_deactivate_account')}}"
                        >
                        <i class="mdi {{($user->status ? "mdi-power" : "mdi mdi-account-check")}}"></i>
                        <span>{{(($user->status) ? __('forms.lbl_deactivate_account') : __('forms.lbl_activate_account'))}}</span>
                    </a>

                    <a href="javascript:;" class="btn-tertiary-base btn-delete"
                        data-uri="{{url('users/'.$user->id)}}"
                        data-redirect="{{url('users/')}}"
                        data-id="{{$user->id}}">
                        <i class="mdi mdi-delete"></i>
                        {{__('forms.lbl_delete')}}
                    </a>
                @endif

                <a href="{{route('users.index')}}"  class="btn-tertiary-base">{{trans('forms.lbl_cancel')}}</a>
            </x-slot:headerRight>
        </x-content.header>

        <div class="w-full mt-8">
            <div class="accordion flex flex-col gap-[20px]">
                <div class="bg-base-white border border-custom-grey-200 rounded-[8px]  px-[16px] lg:px-[32px] py-[24px]">
                    <div class="accordion-title cursor-pointer flex justify-between items-center text-base-black">
                        <div>
                            {!! form_widget($form->heading_basic_information)!!}
                        </div>
                        <x-svg-icon icon="icon-down" class="accordion-icon float-right" />
                    </div>

                    <div class="accordion-content">
                        <div class="w-full flex flex-col gap-4">

                            <hr class="mt-5" />


                            {!! form_until($form, 'heading_basic_information1') !!}
                        </div>
                    </div>
                </div>

                <div class="bg-base-white border border-custom-grey-200 rounded-[8px] px-[16px] lg:px-[32px] py-[24px]">
                    <div class="accordion-title cursor-pointer flex justify-between items-center text-base-black">
                        <div>
                            {!! form_widget($form->heading_work_information)!!}
                        </div>
                        <x-svg-icon icon="icon-down" class="accordion-icon float-right" />
                    </div>

                    <div class="accordion-content hidden">
                        <div class="w-full flex flex-col gap-4">

                            <hr class="mt-5" />

                            {!! form_until($form, 'heading_work_information2') !!}
                        </div>
                    </div>
                </div>


                <div class="bg-base-white border border-custom-grey-200 rounded-[8px]  px-[16px] lg:px-[32px] py-[24px]">
                    <div class="accordion-title cursor-pointer flex justify-between items-center text-base-black">
                        <div>
                            {!! form_widget($form->heading_contract_information)!!}
                        </div>
                        <x-svg-icon icon="icon-down" class="accordion-icon float-right" />
                    </div>

                    <div class="accordion-content hidden">
                        <div class="w-full flex flex-col gap-4">

                            <hr class="mt-5" />

                            {!! form_until($form, 'heading_contract_information3') !!}
                        </div>
                    </div>
                </div>


                <div class="bg-base-white border border-custom-grey-200 rounded-[8px]  px-[16px] lg:px-[32px] py-[24px]">
                    <div class="accordion-title cursor-pointer flex justify-between items-center text-base-black">
                        <div>
                            {!! form_widget($form->heading_language___security)!!}
                        </div>
                        <x-svg-icon icon="icon-down" class="accordion-icon float-right" />
                    </div>

                    <div class="accordion-content hidden">
                        <div class="w-full flex flex-col gap-4">

                            <hr class="mt-5" />

                            {!! form_rest($form) !!}
                        </div>
                    </div>
                </div>

            </div>

        </div>
        {!! form_end($form, false) !!}
    </div>
@stop

@section('footer-script')
    <!-- Custom js for this page-->
    <script type="text/javascript">

        var today = moment().format("{{getDateFormat()}}");
        let repeaters = [];

        function initializeRepeaterForUserForm() {

            let weeks = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];

            weeks.forEach(value => {
                repeaters[value] = initilizeRepeater(value);
            });
        }

        // $("input[type='file']").on('change', function(){
        //     $(".btn-upload").removeClass("hidden");
        // });
        var validateForm = $("form.user-form").validate(validateFormObj);

        $(".btn-save").on("click", function(event) {

            event.preventDefault();

            if($("form.user-form").valid()){
                let formData =  $('form.user-form').serializeFiles();

                PDRequest({
                    type    : "POST",
                    url     : $(".user-form").prop("action"),
                    data    : formData,
                    event   : event
                }).then((response) => {
                    window.location = "{{route('users.index')}}";
                }).catch((error) => {
                    // Show accordion sections with backend validation errors
                    showAccordionWithErrors();
                });
            } else {
                // Show accordion sections with client-side validation errors
                showAccordionWithErrors();
            }
        });

        drEvent.on('dropify.beforeClear', function(event, element) {
            $el = event.target;
            if(confirm("{{trans('forms.do_you_really_want_delete')}}")) {

                return PDRequest({
                    type    : "POST",
                    url     : "{{url("users/".$form->getModel()->id."/remove/logo")}}",
                    data    : {name : $($el).attr('name')},
                }).then(function(response){
                    return $(".btn-upload").addClass("hidden");
                });;
            } else {
                return false;
            }
        });


        function fetchContractFields()
        {

            let contractSectionDivContainer = $('select[name="contract_type"]').parents('div.form_group'),
                selectedContractId = parseInt($('select[name="contract_type"]').val());

            $('[data-field-type="contract-field"]').remove();

            if (isNaN(selectedContractId)) {
                return;
            }

            PDRequest({
                type    : "GET",
                url     : '/contract-types/'+selectedContractId+'/fields?user_id={{ $user->id }}',
                data    : {},
                isFlash : false
            }).then(function(renderedHtml) {

                if($("#hr-contract_type").length) {
                    $("#hr-contract_type").after($(renderedHtml).unwrap('form').html());
                } else {
                    contractSectionDivContainer.after($(renderedHtml).unwrap('form').html());
                }

                //contractSectionDivContainer.after('<hr id="hr-contract_type">');

                initDatePicker();

                drEvent = initDropify();

                $(".pd-dropdown").not(".select2-hidden-accessible").each(function( index ) {
                    initilizeSelect2($(this));
                });

                if ($('.conditional').length) {
                    initConditionalEl();
                }

                initDateTimePicker();
                initDateTimePicker( $('.datetimepicker-2'), 17);

                initializeRepeaterForUserForm();

                var currentContractType = $('#contract_type').val();
                changeStartDateRange(currentContractType);
                endDateApplyCondtion();
                terminationDateApplyCondtion();

            });
        }

        $(document).ready(function() {
            $('[data-toggle="popover"]').popover('dispose');

            // Re-initialize all popovers
            $('[data-toggle="popover"]').popover();

            var totalPerWeekHours = {{$totalPerWeekHours}};
            var isFixedSchedule = {!! json_encode($isFixedSchedule) !!};

            $('#heading_basic_information').text("{{ trans('menu.basic_information_title') }}");
            $('#heading_work_information').text("{{ trans('menu.work_information_title') }}");
            $('#heading_contract_information').text("{{ trans('menu.contact_information') }}");
            $('#heading_language___security').text("{{ trans('menu.language_and_security_title') }}");

            initializeRepeaterForUserForm();

            // Show accordion sections with errors
            showAccordionWithErrors();

            if(isFixedSchedule){

                const popoverContent = `{!! $popoverContent !!}`;

                    const newInputHtml = `
                        <hr class="" id="hr-total_work_hour_pw" data-field-type="contract-field">
                        <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row gap-2 lg:gap-0 justify-between items-start">
                            <label for="total_work_hour_pw" class="form-label text-sm-semibold w-full lg:w-1/2">${@json(__('forms.total_work_hour_this_week'))}</label>
                            <div class="w-full lg:w-1/2 relative">
                            <input class="lg:w-2/3 w-full form-input text-md-regular text-custom-grey-500" readonly value="${totalPerWeekHours}" />
                            <i class="lg:w-1/3 mdi mdi-information-outline ml-3 pb-0"
                                data-toggle="popover"
                                data-placement="bottom"
                                data-html="true"
                                title="${@json(__('forms.all_week_info'))}"
                                data-content="${popoverContent.replace(/"/g, '&quot;')}">
                            </i>
                            </div>

                        </div>
                    `;

                    $('input[name="profile[total_work_hour_pw]"]').parent().parent().after(newInputHtml);

                    $(document).ready(function () {
                        $('[data-toggle="popover"]').popover('dispose');

                        $('[data-toggle="popover"]').popover();

                        $(document).on('click', function (e) {
                            if (!$(e.target).closest('.popover, [data-toggle="popover"]').length) {
                                $('[data-toggle="popover"]').popover('hide');
                            }
                        });
                });
            }

        });

        var currentContractType = $('#contract_type').val();
        var startDate = moment($('#start_date').val(), "{{getDateFormat()}}")
        var changeContractType = currentContractType;
        var isFirstContract = @json($user->isFirstContract());
        var previousContract = @json($user->getPreviousContract()?->getContractMutatedBySubContract());
        var currentContractStartDate = moment('{{ $user->getCurrentActiveContract()->getContractMutatedBySubContract()->start_date }}', "{{ getDateFormat() }}");

        $("body").on("change", "#contract_type", function(event) {
            var changeContractType = $(this).val();
            changeStartDateRange(changeContractType);

        })

        changeStartDateRange(changeContractType);
        endDateApplyCondtion();
        terminationDateApplyCondtion();

        function changeStartDateRange(changeContractType) {
            const observer = new MutationObserver(() => {
                let $input = $('input[name="profile[start_date]"]');
                if ($input.length && $input.data("DateTimePicker")) {
                    observer.disconnect(); // Stop observing once found

                    if (currentContractType == changeContractType && !isFirstContract) { // Allow to edit startdate in the buffer range between previous and current contract
                        var previousContractEndDate = moment(previousContract?.ended_at ?? previousContract?.end_date, "{{ getDateFormat() }}");
                        var minStartDate = previousContractEndDate.isValid() 
                            ? previousContractEndDate.add(1, 'days') 
                            : currentContractStartDate;

                        $input.data("DateTimePicker").minDate(minStartDate);
                    } else if (currentContractType != changeContractType) {
                        $input.data("DateTimePicker").minDate(currentContractStartDate);
                    }
                }
            });

            // **Start observing the DOM for changes**
            observer.observe(document.body, { childList: true, subtree: true });
        }

        function endDateApplyCondtion() {
            if ($('input[name="profile[end_date]"]').length) {
                $('input[name="profile[end_date]"]').data("DateTimePicker").minDate(currentContractStartDate);
            }
        }
        function terminationDateApplyCondtion() {
            if ($('input[name="profile[termination_date]"]').length) {
                $('input[name="profile[termination_date]"]').data("DateTimePicker").minDate(currentContractStartDate);
            }
        }
        $(document).on('dp.change','input[name="profile[start_date]"]', function() {
            let isEdit = (currentContractType == $('#contract_type').val());
            handleStartDateChangeInContract($(this).val(), {{ $user->id }}, isEdit);
        });
        $(document).on('dp.change','input[name="profile[end_date]"]', function() {
            handleEndDateChangeInContract($(this).val(), {{ $user->id }});
        });
        $(document).on('dp.change','input[name="profile[termination_date]"]', function() {
            handleTerminationDateChangeInContract($(this).val(), {{ $user->id }});
        });

        function showAccordionWithErrors() {
            // Check if there are any error fields
            const errorFields = $('.form-input-danger, .error');

            if (errorFields.length > 0) {
                // Find all accordion sections containing errors
                errorFields.each(function() {
                    const accordionContent = $(this).closest('.accordion-content');
                    if (accordionContent.length) {
                        // Show the accordion section
                        accordionContent.toggleClass('active');
                        accordionContent.siblings('.accordion-content').slideToggle();
                        accordionContent.find('.accordion-icon').toggleClass('rotate-180');
                    }
                });

                // Scroll to the first error
                $('html, body').animate({
                    scrollTop: $(errorFields[0]).offset().top - 100
                }, 500);
            }
        }

        var validateForm = $("form.user-form").validate({
            ...validateFormObj,
            invalidHandler: function(form, validator) {
                showAccordionWithErrors();
            }
        });

    </script>
    <!-- End custom js for this page-->

@stop