@php
    if (isset($modelData)) {
        $user = $modelData->user;
    } else {
        $modelData = null;
    }

    $lastContract = $user->getPreviousContract();
    if ($lastContract) {
        $lastContract = $lastContract->getContractMutatedBySubContract();
        if($lastContract->start_date == null && $lastContract->end_date == null){
            $lastContract = null;
        }
    }

    $contract = $user->getCurrentActiveContract();
    if ($contract) {
        $contract = $contract->getContractMutatedBySubContract();
    }
    ['contractStatsStartDate' => $contractStatsStartDate,'contractEndDate' => $contractEndDate] = $user->profile->getUserContractStartAndEndDates($contract);

@endphp

<div class="form_group">
    <label for="type" class="form-label text-sm-semibold">{{ trans('forms.lbl_date_type') }}</label>
    <div class="{{isset($tableSpan) ? $tableSpan : 'w-full'}} flex flex-col gap-2">
        <div class="flex justify-start items-start gap-2">
            <div class="w-4 h-4">
                <input id="pastDateCheckbox" name="date_type" type="checkbox" value="past_date" @if (isset($modelData) && $modelData->request_flag == 2) checked @endif />
            </div>
            <label for="pastDateCheckbox" id="pastDateLabel" class="text-custom-grey-600 text-sm-medium !mb-0">{{ __('forms.lbl_past_date') }}</label>
        </div>

        <div class="flex justify-start items-start gap-2">
            <div class="w-4 h-4">
                <input id="futureDateCheckbox" name="date_type" type="checkbox" value="future_date" @if (isset($modelData) && $modelData->request_flag == 1) checked @endif />
            </div>
            <label for="futureDateCheckbox" class="text-custom-grey-600 text-sm-medium !mb-0">{{ __('forms.lbl_future_date') }}</label>
        </div>
    </div>
</div>

@push('component-scripts')
<script type="text/javascript">
    $(document).ready(function () {
        const TimeTrackerDatePicker = {
            init() {
                this.initializeVariables();
                this.setupEventListeners();
                this.initializeState();
            },

            initializeVariables() {
                this.dateFormat = '{{ getDateFormat() }}';
                this.profile_end_date = moment("{{ $contractEndDate }}");
                this.lastContract = @json($lastContract);
                this.initialState = {
                    type: $('input[name="date_type"]:checked').val(),
                    profile_end_date: this.profile_end_date
                };
                this.initialDate = new Date();
                this.changeMin = 0;
                this.$date = $('input[name="date"]');
            },

            setupEventListeners() {
                this.setupDateTypeChangeListener();
                this.setupModalCloseListener();
                this.setupDatePickerShowListener();
                this.disablePastDateIfNoLastContract();
            },

            initializeState() {
                this.setInitialState();
            },

            disablePastDateIfNoLastContract() {
                if (!this.lastContract) {
                    $('#pastDateCheckbox').prop('disabled', true);
                    $('#pastDateLabel').css('color', '#d3d3d3');
                }
            },

            setupDateTypeChangeListener() {
                $('input[name="date_type"]').change((e) => {
                    const $checkbox = $(e.target);
                    const type = $checkbox.val();
                    const isChecked = $checkbox.is(':checked');

                    this.handleDateTypeChange(type, isChecked);
                });
            },

            handleDateTypeChange(type, isChecked) {
                this.resetDatePicker();

                $('input[name="date_type"]').not(`[value="${type}"]`).prop('checked', false);

                if (type === 'future_date' && isChecked) {
                    $('.accepted').show();
                    this.setFutureDateLimits();
                } else if (type === 'past_date' && isChecked) {
                    $('.accepted').hide();
                    this.setPastDateLimits();
                } else {
                    $('.accepted').show();
                    this.setDefaultDateLimits();
                }
            },

            setupModalCloseListener() {
                $('body').on('hidden.bs.modal', '.modal', (e) => {
                    if ($(e.target).find('input[name="date_type"]').length > 0) {
                        this.resetToInitialState();
                    }
                });
            },

            setupDatePickerShowListener() {
                this.$date.on('dp.show', () => this.setDatePickerLimits());
            },

            setDatePickerLimits() {
                const picker = this.$date.data("DateTimePicker");
                if (this.changeMin) {
                    picker.maxDate(moment.utc(this.initialDate, this.dateFormat).endOf('day'));
                } else {
                    picker.minDate(this.initialDate);
                }
            },

            resetToInitialState() {
                this.destroyDatePicker();
                this.resetDatePicker();
                this.resetCheckboxes();
                this.reinitializeDatePicker();
                this.setInitialState();
            },

            destroyDatePicker() {
                this.$date.data("DateTimePicker")?.destroy();
            },

            reinitializeDatePicker() {
                const config = {
                    format: this.dateFormat,
                    useCurrent: false
                };
                this.$date.datetimepicker(config);
            },

            resetCheckboxes() {
                $('input[name="date_type"]').prop('checked', false);
                if (this.initialState.type) {
                    $(`input[name="date_type"][value="${this.initialState.type}"]`).prop('checked', true);
                }
            },

            resetDatePicker() {
                this.clearDatePickerLimits();
                this.clearDateValue();
            },

            clearDatePickerLimits() {
                const picker = this.$date.data("DateTimePicker");
                if (picker) {
                    picker.minDate(false);
                    picker.maxDate(false);
                }
            },

            clearDateValue() {
                this.$date.val('');
            },

            setInitialState() {
                const type = this.initialState.type;
                if (type === "future_date") {
                    this.setFutureDateLimits();
                } else if (type === "past_date") {
                    this.setPastDateLimits();
                } else {
                    this.setDefaultDateLimits();
                }
            },

            setDefaultDateLimits() {
                const startDateAll = moment().startOf('year').format(this.dateFormat); // Start of current year

                const parsedStartDateAll = moment(startDateAll, this.dateFormat);
                const parsedProfileStartDate = moment("{{ $contractStatsStartDate }}");

                const effectiveStartDate =
                    parsedProfileStartDate.isValid() && parsedProfileStartDate.isAfter(parsedStartDateAll)
                        ? parsedProfileStartDate
                        : parsedStartDateAll;

                const endDate = this.profile_end_date.isValid() ? this.profile_end_date : moment().endOf('year');

                this.setDateLimits(effectiveStartDate, endDate);
                this.initialDate = effectiveStartDate;
            },

            setFutureDateLimits() {
                const startDate = this.profile_end_date.isValid()
                    ? moment(this.profile_end_date).add(1, 'day')
                    : moment().add(1, 'year').startOf('year');

                const endDate = this.profile_end_date.isValid()
                    ? moment(this.profile_end_date).add(1, 'year').endOf('year')
                    : moment().add(1, 'year').endOf('year');

                this.setDateLimits(startDate, endDate);
                this.initialDate = startDate;
            },

            setPastDateLimits() {
                if (this.lastContract) {
                    const startDate = moment(this.lastContract.start_date, this.dateFormat);
                    const endDate = moment(this.lastContract.ended_at ?? this.lastContract.end_date, this.dateFormat);
                    this.setDateLimits(startDate, endDate);
                    this.initialDate = endDate;
                } else {
                    const startDate = moment().subtract(1, 'year').startOf('year');
                    const endDate = moment().subtract(1, 'year').endOf('year');
                    this.setDateLimits(startDate, endDate);
                    this.initialDate = endDate;
                }
            },

            setDateLimits(minDate, maxDate) {
                [this.$date, this.$date].forEach($input => {
                    const picker = $input.data("DateTimePicker");
                    picker.minDate(minDate);
                    picker.maxDate(moment(maxDate, this.dateFormat).endOf('day'));
                });
            }
        };

        TimeTrackerDatePicker.init();
    });

</script>
@endpush