@props([
    'id' => 'cuDatePickerPopup',
    'prefix' => '',
])

@php
    $p = $prefix ? rtrim($prefix, '_') . '_' : '';
@endphp

<div class="cu-date-picker-popup" id="{{ $id }}" {{ $attributes }}>
    <div class="cu-dp-tabs">
        <div class="cu-dp-input-box" id="{{ $p }}dpInputBoxStart">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                <line x1="16" y1="2" x2="16" y2="6" />
                <line x1="8" y1="2" x2="8" y2="6" />
                <line x1="3" y1="10" x2="21" y2="10" />
            </svg>
            <input type="text" id="{{ $p }}dpStartTextInput" class="cu-dp-text-input" placeholder="Ngày bắt đầu" autocomplete="off">
            <button type="button" class="cu-dp-clear-btn" id="{{ $p }}dpClearStartBtn" title="Xóa">×</button>
        </div>
        <div class="cu-dp-input-box active" id="{{ $p }}dpInputBoxDue">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                <line x1="16" y1="2" x2="16" y2="6" />
                <line x1="8" y1="2" x2="8" y2="6" />
                <line x1="3" y1="10" x2="21" y2="10" />
            </svg>
            <input type="text" id="{{ $p }}dpDueTextInput" class="cu-dp-text-input" placeholder="Hạn hoàn thành" autocomplete="off">
            <button type="button" class="cu-dp-clear-btn" id="{{ $p }}dpClearDueBtn" title="Xóa">×</button>
        </div>
    </div>
    <div class="cu-dp-body">
        <div class="cu-dp-quick" id="{{ $p }}dpQuickList">
            <div class="cu-dp-quick-row" data-quick="today">
                <span>Hôm nay</span>
                <span class="cu-dp-quick-day" id="{{ $p }}dpLabelToday"></span>
            </div>
            <div class="cu-dp-quick-row" data-quick="tomorrow">
                <span>Ngày mai</span>
                <span class="cu-dp-quick-day" id="{{ $p }}dpLabelTomorrow"></span>
            </div>
            <div class="cu-dp-quick-row" data-quick="next-week">
                <span>Tuần tới</span>
                <span class="cu-dp-quick-day" id="{{ $p }}dpLabelNextWeek"></span>
            </div>
            <div class="cu-dp-quick-row" data-quick="2weeks">
                <span>2 tuần tới</span>
                <span class="cu-dp-quick-day" id="{{ $p }}dpLabel2Weeks"></span>
            </div>
            <div class="cu-dp-quick-row" data-quick="4weeks">
                <span>4 tuần tới</span>
                <span class="cu-dp-quick-day" id="{{ $p }}dpLabel4Weeks"></span>
            </div>
            <div class="cu-dp-divider" style="height:1px;background:#F1EFE9;margin:6px 0;"></div>
            <div class="cu-dp-quick-row cu-dp-clear-all" data-quick="clear" style="color:#E53935;font-weight:500;">
                <span>Xóa ngày</span>
            </div>
        </div>
        <div class="cu-dp-cal">
            <div class="cu-dp-cal-header">
                <span class="cu-dp-cal-month" id="{{ $p }}dpCalMonthLabel"></span>
                <div class="cu-dp-cal-nav">
                    <button type="button" class="cu-dp-today-btn" id="{{ $p }}dpBtnToday">Hôm nay</button>
                    <button type="button" class="cu-dp-nav-btn" id="{{ $p }}dpBtnPrev">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                            <polyline points="15 18 9 12 15 6" />
                        </svg>
                    </button>
                    <button type="button" class="cu-dp-nav-btn" id="{{ $p }}dpBtnNext">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                            <polyline points="9 18 15 12 9 6" />
                        </svg>
                    </button>
                </div>
            </div>
            <div class="cu-dp-weekdays">
                <div class="cu-dp-weekday">CN</div>
                <div class="cu-dp-weekday">T2</div>
                <div class="cu-dp-weekday">T3</div>
                <div class="cu-dp-weekday">T4</div>
                <div class="cu-dp-weekday">T5</div>
                <div class="cu-dp-weekday">T6</div>
                <div class="cu-dp-weekday">T7</div>
            </div>
            <div class="cu-dp-days" id="{{ $p }}dpCalDays"></div>

            {{-- Footer: Add time button --}}
            <div class="cu-dp-footer" id="{{ $p }}dpFooter">
                <button type="button" class="cu-dp-add-time-btn" id="{{ $p }}dpAddTimeBtn">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"/>
                        <polyline points="12 6 12 12 16 14"/>
                    </svg>
                    <span id="{{ $p }}dpAddTimeBtnLabel">Thêm giờ</span>
                </button>
            </div>
        </div>

        {{-- Time picker panel (slide-in từ phải) --}}
        <div class="cu-dp-time-panel" id="{{ $p }}dpTimePanel">
            <div class="cu-dp-time-header">
                <span id="{{ $p }}dpTimeHeaderTitle">Chọn giờ</span>
                <button type="button" class="cu-dp-time-close-btn" id="{{ $p }}dpTimeCloseBtn" title="Bỏ giờ">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>
            <div class="cu-dp-time-list" id="{{ $p }}dpTimeList"></div>
        </div>
    </div>
</div>