{{-- resources/views/reports/_picker.blade.php --}}
<style>
    #pickerPanel{position:absolute;top:calc(100% + 6px);left:0;z-index:50;background:#fff;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.12);display:none;min-width:560px;flex-direction:column}
    #pickerPanel.open{display:flex}
    .picker-body{display:flex;min-height:320px}
    .picker-presets{width:190px;flex-shrink:0;border-right:1px solid #F3F4F6;padding:8px 0}
    .picker-preset{display:flex;align-items:center;justify-content:space-between;padding:9px 18px;font-size:14px;color:#374151;cursor:pointer;transition:background .1s;user-select:none}
    .picker-preset:hover{background:#F9FAFB}
    .picker-preset.active{background:#EEF2FF;color:#4338CA;font-weight:600}
    .picker-preset .check{color:#4338CA;font-size:16px}
    .picker-cal{flex:1;padding:16px 20px}
    .cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
    .cal-nav-btn{width:28px;height:28px;border-radius:50%;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6B7280;transition:background .1s}
    .cal-nav-btn:hover{background:#F3F4F6;color:#111827}
    .cal-nav-btn:disabled{opacity:.3;cursor:default}
    .cal-month-label{font-size:14px;font-weight:600;color:#111827}
    .cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
    .cal-wd{text-align:center;font-size:11.5px;font-weight:700;color:#9CA3AF;padding:4px 0}
    .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px 0}
    .cal-cell{position:relative;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}
    .cal-cell.disabled{opacity:.3;pointer-events:none}
    .cal-cell.other-month{opacity:.35}
    .cal-cell::before{content:'';position:absolute;inset:4px 0;background:transparent;z-index:0}
    .cal-cell.in-range::before{background:#EEF2FF}
    .cal-cell.range-start::before{background:linear-gradient(to right,transparent 50%,#EEF2FF 50%)}
    .cal-cell.range-end::before{background:linear-gradient(to left,transparent 50%,#EEF2FF 50%)}
    .cal-cell.range-start.range-end::before{background:transparent}
    .cal-day-num{position:relative;z-index:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:13px;color:#374151;transition:background .1s,color .1s}
    .cal-cell:hover:not(.disabled) .cal-day-num{background:#EEF2FF;color:#4338CA}
    .cal-cell.range-start .cal-day-num,.cal-cell.range-end .cal-day-num{background:#4338CA;color:#fff;font-weight:600}
    .cal-cell.is-today .cal-day-num::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#4338CA}
    .cal-cell.range-start.is-today .cal-day-num::after,.cal-cell.range-end.is-today .cal-day-num::after{background:#fff}
    .picker-footer{border-top:1px solid #F3F4F6;padding:12px 16px;display:flex;align-items:center;gap:10px}
    .btn-apply{background:#4338CA;color:#fff;border:none;border-radius:8px;padding:8px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}
    .btn-apply:hover{background:#3730A3}
    .btn-cancel{background:none;border:none;font-size:14px;font-weight:500;color:#374151;cursor:pointer;padding:8px 10px}
</style>

<div class="flex items-center gap-3 flex-wrap">
    {{-- Period picker --}}
    <div class="relative" id="pickerWrap">
        <button id="pickerTrigger" class="flex items-center gap-2 bg-white border border-gray-200 rounded-lg pl-3 pr-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="text-gray-400 flex-shrink-0" viewBox="0 0 20 20">
                <path d="M8 9.997H6v2h2v-2Z"/>
                <path fill-rule="evenodd" d="M7 1.497a1 1 0 0 1 1 1v.5h4v-.5a1 1 0 1 1 2 0v.5h4v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-12h4v-.5a1 1 0 0 1 1-1Zm9 13.5v-8H4v8h12Z" clip-rule="evenodd"/>
            </svg>
            <span id="pickerLabel">Mar 1, 2026 – Mar 18, 2026</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" class="text-gray-400" viewBox="0 0 12 12">
                <path fill-rule="evenodd" d="m6 6.586 3.293-3.293 1.414 1.414L6 9.414 1.293 4.707l1.414-1.414L6 6.586Z" clip-rule="evenodd"/>
            </svg>
        </button>

        <div id="pickerPanel">
            <div class="picker-body">
                <div class="picker-presets" id="presetList">
                    <div class="picker-preset" data-preset="last_7">Last 7 days</div>
                    <div class="picker-preset" data-preset="last_30">Last 30 days</div>
                    <div class="picker-preset" data-preset="last_365">Last 365 days</div>
                    <div class="picker-preset" data-preset="this_week">This week</div>
                    <div class="picker-preset active" data-preset="this_month">This month <span class="check">✓</span></div>
                    <div class="picker-preset" data-preset="this_year">This year</div>
                    <div class="picker-preset" data-preset="custom">Custom period</div>
                </div>
                <div class="picker-cal">
                    <div class="cal-nav">
                        <button class="cal-nav-btn" id="calPrev"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></button>
                        <span class="cal-month-label" id="calMonthLabel"></span>
                        <button class="cal-nav-btn" id="calNext"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg></button>
                    </div>
                    <div class="cal-weekdays"><div class="cal-wd">Sun</div><div class="cal-wd">Mon</div><div class="cal-wd">Tue</div><div class="cal-wd">Wed</div><div class="cal-wd">Thu</div><div class="cal-wd">Fri</div><div class="cal-wd">Sat</div></div>
                    <div class="cal-grid" id="calGrid"></div>
                </div>
            </div>
            <div class="picker-footer">
                <button class="btn-apply" id="applyBtn">Apply</button>
                <button class="btn-cancel" id="cancelBtn">Cancel</button>
            </div>
        </div>
    </div>

    {{-- Comparison --}}
    <div class="flex items-center gap-2 text-sm">
        <span class="text-gray-500 font-medium">Comparison period</span>
        <select id="compareSelect" class="bg-transparent border-0 text-indigo-600 font-semibold text-sm focus:outline-none cursor-pointer">
            <option value="none">No comparison period</option>
            <option value="prev_period" id="cmpOptPrev">Previous period</option>
            <option value="prev_month"  id="cmpOptMonth">Same period previous month</option>
            <option value="prev_year"   id="cmpOptYear">Same period previous year</option>
        </select>
    </div>
</div>