@extends('layouts.app')
@section('title', trans('title.contract_type'))

@section('content')
<div class="content">
    <x-content.header title="{{ __('title.contract_type') }}" subTitle="{{ ($contractType->contracts_count > 0) ? __('messages.This contract is associated with users. You can only add new field if it was missed somehow. You can not make newly added fields required. Neither you can alter previously saved fields.') : ''}}" subTitleClasses="text-custom-red-600"/>
    <form id="form" name="form" action="{{url('contract-types/'.$contractType->id)}}" method="POST">
        @include('contract-types.form', [
            'edit' => true
        ])

        <div class="mt-4 flex">
            <button type="submit" class="btn-primary-sm mt-4 mr-2 btn-save">
                {{trans('forms.lbl_save')}}
            </button>
            <a href="{{url('contract-types')}}"  class="btn-tertiary-sm mt-4">{{trans('forms.lbl_cancel')}}</a>
        </div>
    </form>
</div>

@stop

@section('footer-script')

    <script type="text/javascript">
        let hasUserAssociation = @json($contractType->contracts_count > 0);

		$(".btn-save").on("click", function(event) {
			event.preventDefault();
            if($("#form").valid()){
                data = $('#form').serialize();

    			PDRequest({
    				type    : "PUT",
    				url     : $("#form").prop("action"),
    				data    : data,
    				event   : event
    			}).then((response) => {
                    window.location = "{{url('contract-types')}}";
                });
            }
		});

        $("body").on("change", "input[type='checkbox']", function(e) {

            let id = $(this).data('id'),
                dependents = $(`div[data-dependon='${id}']`);

            if($(this).is(":checked")) {
                $(".requiredDivCheckbox"+id).removeClass('hidden');
            } else {
                $(".requiredDivCheckbox"+id).addClass('hidden');
            }

            if ($(this).is(":checked")) {

                if (dependents.length) {
                    $.each(dependents, function(index, dependent) {
                        $.each($(dependent).find('input[type="checkbox"]'), function(key, dependentCheckbox) {
                            $(dependentCheckbox).prop('checked', true).on('click', function (e) {
                                e.preventDefault();
                            });
                        });
                        $(dependent).removeClass('hidden');
                    });
                }

            } else {
                $("input#is_required_id" + id).prop('checked', false);

                if (dependents.length) {
                    $.each(dependents, function(index, dependent) {
                        $.each($(dependent).find('input[type="checkbox"]'), function(key, dependentCheckbox) {
                            $(dependentCheckbox).prop('checked', false);
                        });
                        $(dependent).addClass('hidden');
                    });
                }
            }
        });

        $("input[type='checkbox']").trigger("change");

        $("input[type='checkbox']").each(function () {
            
            if (hasUserAssociation){
                if($(this).is(":checked") || ["is_sub_contract", "is_permanent"].includes($(this).attr("name"))) {
                    $(this).on('click', function (e) {
                        e.preventDefault();
                    });
                } else if ($(this).attr("name")?.startsWith("fields") && $(this).attr("name")?.endsWith("[required]") || $(this).data("name")== "end_date") {
                    $(this).on('click', function (e) {
                        e.preventDefault();
                    });
                    $(this).closest('.flex').find('label').css('color', '#d3d3d3')
                }
            }
        });
    </script>
@stop