@if(hasPermissionAndModuleEnabled('view book time fields while sending messages', 'time_mgt'))
    <div class="mb-3 row">
        <label class="form-label col-sm-3 col-form-label">{{ __('Time spent') }}</label>
        <div class="col-sm-9">
            <div class="col-sm-12 d-flex align-items-center gap-2">
                <input name="booking_time_hours" class="form-control time-box text-center copy" value="{{ old('booking_time_hours', 0) }}">
                <span class="fw-bold">:</span>
                <input name="booking_time_minutes" class="form-control time-box text-center copy" value="{{ old('booking_time_minutes', 0) }}">
            </div>
            <span class="messages">
                @if($errors->has('booking_time_hours'))
                <p class="text-danger error">{{ $errors->first('booking_time_hours') }}</p>
                @endif
            </span>
        </div>
    </div>

    <div class="mb-3 row">
        <label class="form-label col-sm-3 col-form-label">{{ __('Book date') }}</label>
        <div class="col-sm-9">
            <input type="date" class="form-control fill copy" name="booking_date"  value="{{ old('booking_date', deadline()) }}">
            <span class="messages">
            @if($errors->has('booking_date'))
            <p class="text-danger error">{{ $errors->first('booking_date') }}</p>
            @endif
            </span>
        </div>
    </div>

    <div class="mb-3 row">
        <label class="form-label col-sm-12 col-form-label">{{ __('Description of work booked time') }}</label>
        <div class="col-sm-12">
            <textarea class="form-control" rows="5" name="description">{{ old('description') }}</textarea>
        </div>
    </div>
    <template id="description-template">[#{{__('TaskNumber')}}/TICKET_ARTICLE_ID] {{ $task->title}}
{#TaskDescription}</template>
    @push('child-scripts')
        <script>
        $(document).on('input change', '.copy', function () {
            let $activeTab = $('.tab-pane.active');
            let activeTabId = $activeTab.attr('id');
            
            let booking_time_hours = $activeTab.find('input[name="booking_time_hours"]').val();
            let booking_time_minutes = $activeTab.find('input[name="booking_time_minutes"]').val();
            let booking_date = $activeTab.find('input[name="booking_date"]').val();
            let $description = $activeTab.find('textarea[name="description"], #description');

            if (booking_time_hours && booking_time_minutes && booking_date) {
                let template = $('#description-template').html() || '';
                let html = CKEDITOR.instances['note-' + activeTabId]?.getData() || '';
                // Preserve line breaks
                html = html.replace(/<br\s*\/?>/gi, '\n');
                html = html.replace(/<\/p>/gi, '\n');

                // Convert HTML to plain text
                let div = document.createElement('div');
                div.innerHTML = html;
                let task_desc = div.textContent || div.innerText || '';
                template = template.replace('{#TaskDescription}', task_desc);
                $description.val(template);
            }else{
                $description.val('');
            }
        });
        </script>
    @endpush
@endif