@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')
    <div class="content">

        {!! form_start($form) !!}

        <x-content.header title="{{__('title.setup')}} - {{ __('title.create_user')}}">
            <x-slot:headerRight>

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

                <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">

        let repeaters = [];

        function initializeRepeaterForUserForm() {

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

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

        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     : $("form.user-form").prop("action"),
                    data    : formData,
                    event   : event
                }).then((response) => {
                    window.location = "{{url('users')}}";
                });
            }
        });

        $(".btn-upload").on('click', function(event) {
            const fileInput = document.querySelector( '#photograph' );
            const formData = new FormData();
            formData.append( 'logo', fileInput.files[0] );
            PDRequest({
                type    : "POST",
                url     : "{{url('users/logo/upload')}}",
                data    : formData,
                event   : event,
                media   : true
            }).then(function(response){
                $(".btn-upload").addClass("hidden");
            });
        });

        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',
                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();

                $( ".form-check-label" ).each(function( index ) {

                    if($(this).find( "i.input-helper" ).length == 0) {
                        $(this).append('<i class="input-helper"></i>');
                    }
                })

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

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

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

            });
        }

        $(document).ready(function() {
            $('#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();
        });
    </script>
    <!-- End custom js for this page-->

@stop