<?php
// modules/dashboard/widgets/sales_charts.php
if (basename($_SERVER['PHP_SELF']) == 'sales_charts.php') { die('Access Denied'); }
?>

<div class="lg:col-span-7 bg-white dark:bg-slate-800 rounded-3xl shadow-sm border border-gray-100 dark:border-slate-700 p-6 md:p-8 h-full">
    <div class="flex flex-col xl:flex-row justify-between items-start xl:items-center mb-6 border-b border-gray-100 dark:border-slate-700 pb-4 gap-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white flex items-center gap-2 shrink-0">
            <span class="w-2 h-6 bg-blue-600 rounded-full"></span> روند عملکرد و فروش کل
        </h2>
        <div class="flex flex-wrap gap-2">
            <button type="button" onclick="setChartDate('3days')" class="text-[10px] bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-600 px-2.5 py-1.5 rounded-lg font-bold transition">۳ روز اخیر</button>
            <button type="button" onclick="setChartDate('week')" class="text-[10px] bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-600 px-2.5 py-1.5 rounded-lg font-bold transition">۷ روز</button>
            <button type="button" onclick="setChartDate('15days')" class="text-[10px] bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-600 px-2.5 py-1.5 rounded-lg font-bold transition">۱۵ روز</button>
            <button type="button" onclick="setChartDate('month')" class="text-[10px] bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-600 px-2.5 py-1.5 rounded-lg font-bold transition">یک ماه</button>
            <button type="button" onclick="setChartDate('3months')" class="text-[10px] bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-600 px-2.5 py-1.5 rounded-lg font-bold transition">۳ ماه</button>
        </div>
    </div>

    <form id="chartFilterForm" class="flex flex-col sm:flex-row gap-3 items-end mb-6">
        <div class="relative w-full sm:w-40">
            <label class="block text-[10px] font-bold text-gray-500 dark:text-gray-400 mb-1">از تاریخ</label>
            <input type="text" id="start_date_picker" class="w-full border-2 border-gray-200 dark:border-slate-600 rounded-xl p-2 text-xs bg-gray-50 dark:bg-slate-700 focus:border-blue-500 outline-none dark:text-white cursor-pointer" dir="ltr" readonly>
            <input type="hidden" name="start_date" id="start_date_alt" value="">
        </div>
        <div class="relative w-full sm:w-40">
            <label class="block text-[10px] font-bold text-gray-500 dark:text-gray-400 mb-1">تا تاریخ</label>
            <input type="text" id="end_date_picker" class="w-full border-2 border-gray-200 dark:border-slate-600 rounded-xl p-2 text-xs bg-gray-50 dark:bg-slate-700 focus:border-blue-500 outline-none dark:text-white cursor-pointer" dir="ltr" readonly>
            <input type="hidden" name="end_date" id="end_date_alt" value="">
        </div>
        <button type="submit" class="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-xl transition shadow-sm text-xs shrink-0">بروزرسانی نمودار</button>
    </form>

    <div id="chart_empty_msg" class="py-16 text-center text-gray-400 font-bold bg-gray-50 dark:bg-slate-700/30 rounded-2xl hidden">داده‌ای در این بازه یافت نشد.</div>
    <div id="chart_container" style="position: relative; height: 350px; width: 100%; transition: opacity 0.3s;">
        <canvas id="trendChart"></canvas>
    </div>
</div>

<?php if($isAdmin): ?>
<div class="lg:col-span-12 bg-white dark:bg-slate-800 rounded-3xl shadow-sm border border-gray-100 dark:border-slate-700 p-6 md:p-8 border-t-8 border-t-indigo-500 mt-2">
    <div class="flex flex-col xl:flex-row justify-between items-start xl:items-center mb-6 gap-4 border-b border-gray-100 dark:border-slate-700 pb-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white flex items-center gap-2">
            <span class="w-2 h-6 bg-indigo-600 rounded-full"></span> مقایسه عملکرد نمایندگان
        </h2>
        
        <div class="flex flex-wrap items-center gap-2">
            <button type="button" onclick="loadOpChart('today', this)" class="op-time-btn active text-[10px] bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300 px-3 py-1.5 rounded-lg font-bold transition">امروز</button>
            <button type="button" onclick="loadOpChart('yesterday', this)" class="op-time-btn text-[10px] bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-gray-300 hover:bg-indigo-50 hover:text-indigo-600 px-3 py-1.5 rounded-lg font-bold transition">دیروز</button>
            <button type="button" onclick="loadOpChart('week', this)" class="op-time-btn text-[10px] bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-gray-300 hover:bg-indigo-50 hover:text-indigo-600 px-3 py-1.5 rounded-lg font-bold transition">این هفته</button>
            <button type="button" onclick="loadOpChart('month', this)" class="op-time-btn text-[10px] bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-gray-300 hover:bg-indigo-50 hover:text-indigo-600 px-3 py-1.5 rounded-lg font-bold transition">این ماه</button>
        </div>
    </div>

    <form id="opChartFilterForm" class="flex flex-col md:flex-row gap-3 items-end mb-6 bg-gray-50 dark:bg-slate-700/30 p-4 rounded-2xl border border-gray-100 dark:border-slate-600">
        <input type="hidden" id="op_time_filter" value="today">
        
        <div class="w-full md:w-1/3">
            <label class="block text-[10px] font-bold text-gray-500 dark:text-gray-400 mb-1">انتخاب نماینده (چندگانه):</label>
            <select id="op_select" multiple class="w-full border-2 border-gray-200 dark:border-slate-600 rounded-xl p-2 text-xs bg-white dark:bg-slate-700 focus:border-indigo-500 outline-none dark:text-white custom-scrollbar" style="height: 58px;">
                <option value="all" selected>همه نمایندگان (پیش‌فرض)</option>
                <?php 
                $opsList = $pdo->query("SELECT id, fullname, username FROM users WHERE role='operator'")->fetchAll();
                foreach($opsList as $op): 
                    $n = !empty($op['fullname']) ? $op['fullname'] : $op['username'];
                ?>
                    <option value="<?php echo $op['id']; ?>"><?php echo htmlspecialchars($n); ?></option>
                <?php endforeach; ?>
            </select>
            <p class="text-[9px] text-gray-400 mt-1">با نگه داشتن دکمه Ctrl در ویندوز می‌توانید چند نفر را انتخاب کنید</p>
        </div>
        
        <div class="w-full md:w-1/4">
            <label class="block text-[10px] font-bold text-gray-500 dark:text-gray-400 mb-1">از تاریخ (دلخواه)</label>
            <input type="text" id="op_start_picker" class="w-full border-2 border-gray-200 dark:border-slate-600 rounded-xl p-2.5 text-xs bg-white dark:bg-slate-700 outline-none dark:text-white cursor-pointer" dir="ltr" readonly placeholder="انتخاب کنید...">
            <input type="hidden" id="op_start_alt">
        </div>
        
        <div class="w-full md:w-1/4">
            <label class="block text-[10px] font-bold text-gray-500 dark:text-gray-400 mb-1">تا تاریخ (دلخواه)</label>
            <input type="text" id="op_end_picker" class="w-full border-2 border-gray-200 dark:border-slate-600 rounded-xl p-2.5 text-xs bg-white dark:bg-slate-700 outline-none dark:text-white cursor-pointer" dir="ltr" readonly placeholder="انتخاب کنید...">
            <input type="hidden" id="op_end_alt">
        </div>
        
        <button type="submit" class="w-full md:w-auto bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2.5 px-6 rounded-xl transition shadow-sm text-xs shrink-0">اعمال فیلتر</button>
    </form>

    <div id="op_chart_empty" class="py-16 text-center text-gray-400 font-bold bg-gray-50 dark:bg-slate-700/30 rounded-2xl hidden">داده‌ای برای این نمایندگان یافت نشد.</div>
    <div id="op_chart_container" style="position: relative; height: 350px; width: 100%; transition: opacity 0.3s;">
        <canvas id="opChart"></canvas>
    </div>
</div>
<?php endif; ?>