@props(['tableSpan' => 'w-full'])
<div class="form_group breakdown-wrapper hidden">
    <label for="hours" class="form-label text-sm-semibold"></label>
    <div class="{{$tableSpan}}">
        <div class="accordion flex flex-col gap-4 w-full">
            <div class="tw-card bg-base-white">
                <button
                        class="text-md-regular text-custom-grey-700 w-full flex justify-between accordion-title p-2 pl-3"
                        type="button" data-toggle="collapse" data-target="#breakdownAccordion" aria-expanded="false"
                        aria-controls="breakdownAccordion">
                        {{ __('title.Break Down') }}
                        <x-svg-icon icon="icon-down"
                            class="accordion-icon float-right transform transition-transform duration-300" />
                    </button>
                    <div id="breakdownAccordion" class="collapse">
                        <table class="table table-sm table-custom-striped mt-2" id="nestedTable">
                            <thead>
                                <tr>
                                    <th>{{ __('tables.date_title') }} / {{ __('forms.Days') }}</th>
                                    <th>{{ __('forms.lbl_hours') }} / {{ __('forms.break_time') }}</th>
                                    <th>{{ __('menu.schedule_title') }}</th>
                                </tr>
                            </thead>
                            <tbody class="working-days-table">
                            </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@push('component-scripts')
    <script type="text/javascript">

        function updateWorkingDaysTable(workingDays, length) {
            const breakdownWrapper = $(".breakdown-wrapper");
            const workingDaysTable = $(".working-days-table");

            if (workingDays.length > 0 && length == "full") {
                breakdownWrapper.removeClass("hidden");
                workingDaysTable.empty(); // Clear existing rows

                // Append new rows based on the workingDays data
                workingDays.forEach(day => {
                    const row = document.createElement("tr");
                    dateFormat = '{{ getDateFormat() }}';
                    waiting_days = moment(day.waiting_days, dateFormat);
                    if (day.msg_type == "fixed") {
                        var trans_msg = "{{ __('title.fixed') }}";
                    } else if(day.msg_type == "work") {
                        var trans_msg = "{{ __('title.work') }}";
                    } else if(day.msg_type == "nowork") {
                        var trans_msg = "{{ __('title.no_fixed_no_schedule') }}";
                    }else if(day.msg_type == "holiday") {
                        var trans_msg = "{{ __('forms.holiday') }}";
                    }else if(day.msg_type == "inactive_fixed") {
                        var trans_msg = "{{ __('title.inactive_fixed') }}";
                    }

                    row.innerHTML = `
                    <td>${day.waiting_days} </br> ${new Date(waiting_days).toLocaleDateString("{{ app()->getLocale() }}", { weekday: 'short' })} </td>
                    <td>${day.hours} </br> ${day.break_time}</td>
                    <td>${trans_msg}</td>
                `;
                    workingDaysTable.append(row);
                });
            } else {
                breakdownWrapper.addClass("hidden");
            }
        }
    </script>
@endpush