@props([
    'active' => false,
    'name' => '',
    'id' => '',
    'day' => null,
    'disable' => false,
    'shifts' => [], // Accept the existing shifts for this day
])
<div @if ($active) class="tab-pane fade active show"
    @else class="tab-pane fade" @endif
    id="{{ $id ?? 'day-content' }}" role="tabpanel">
    <div class="row mt-4">
        <div class="col-12">
            <div id="{{ $id ?? 'day-content' }}" class="bg-primary p-1 rounded">

                <div>

                    <!-- Form Repeater -->
                    <div class="col-12">
                        <div class="card">
                            <h5 class="card-header">{{ __('Shifts Repeater') }}
                            </h5>
                            <div class="card-body">
                                <div class="{{ 'form-repeater-' . $name }}">
                                    <div class="repeater" data-repeater-list="shifts_{{ $day['id'] }}"
                                        data-day-id="{{ $day['id'] }}">
                                        @forelse ($shifts as $shift)
                                            <div data-repeater-item>
                                                <div class="row">
                                                    <div class="mb-3 col-lg-6 col-xl-5 col-12 mb-0">
                                                        <label class="form-label"
                                                            for="form-repeater-1-1">{{ __('From') }}</label>
                                                        <input @disabled($disable) name="from" type="time" id="form-repeater-1-1"
                                                            class="form-control" value="{{ $shift['from'] }}" />
                                                    </div>
                                                    <div class="mb-3 col-lg-6 col-xl-5 col-12 mb-0">
                                                        <label class="form-label"
                                                            for="form-repeater-1-2">{{ __('To') }}</label>
                                                        <input @disabled($disable) name="to" type="time" id="form-repeater-1-2"
                                                            class="form-control" value="{{ $shift['to'] }}" />
                                                    </div>
                                                    <input type="hidden" name="day_id" value="{{ $day['id'] }}">
                                                    <input type="hidden" name="shift_id" value="{{ $shift['id'] }}">
                                                    @if (! $disable)
                                                        <div
                                                            class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0">
                                                            <span class="btn btn-label-danger mt-4 repeater-delete-btn"
                                                                data-repeater-delete>
                                                                <i class="ti ti-x ti-xs me-1"></i>
                                                                <span class="align-middle">{{ __('Delete') }}</span>
                                                            </span>
                                                        </div>
                                                    @endif
                                                </div>
                                                <hr>
                                            </div>
                                        @empty
                                            <div data-repeater-item>
                                                <div class="row">
                                                    <div class="mb-3 col-lg-6 col-xl-5 col-12 mb-0">
                                                        <label class="form-label"
                                                            for="form-repeater-1-1">{{ __('From') }}</label>
                                                        <input @disabled($disable) name="from" type="time" id="form-repeater-1-1"
                                                            class="form-control" />
                                                    </div>
                                                    <div class="mb-3 col-lg-6 col-xl-5 col-12 mb-0">
                                                        <label class="form-label"
                                                            for="form-repeater-1-2">{{ __('To') }}</label>
                                                        <input @disabled($disable) name="to" type="time" id="form-repeater-1-2"
                                                            class="form-control" />
                                                    </div>
                                                    <input type="hidden" name="day_id" value="{{ $day['id'] }}">
                                                    @if (! $disable)
                                                        <div
                                                            class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0">
                                                            <span class="btn btn-label-danger mt-4 repeater-delete-btn"
                                                                data-repeater-delete>
                                                                <i class="ti ti-x ti-xs me-1"></i>
                                                                <span class="align-middle">{{ __('Delete') }}</span>
                                                            </span>
                                                        </div>
                                                    @endif

                                                </div>
                                                <hr>
                                            </div>
                                        @endforelse
                                    </div>
                                    @if (! $disable)
                                        <div class="mb-0">
                                            <button class="btn btn-primary repeater-add-btn" data-repeater-create>
                                                <i class="ti ti-plus me-1"></i>
                                                <span class="align-middle">{{ __('Add') }}</span>
                                            </button>
                                        </div>
                                    @endif

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /Form Repeater -->
                </div>
            </div>
        </div>
    </div>
</div>