<?php
require_once 'includes/db.php';

// Define business shift dynamically from database (Baghdad timezone)
date_default_timezone_set('Asia/Baghdad'); // Iraqi local time

$settings_res = $conn->query("SELECT workday_start_hour FROM system_settings WHERE id = 1");
$start_hour = 17; // fallback to 5:00 PM if not configured
if ($settings_res && $row = $settings_res->fetch_assoc()) {
    $start_hour = intval($row['workday_start_hour']);
}

$now = new DateTime();
$current_hour = (int)$now->format('H');

if ($current_hour >= $start_hour) {
    // Shift started today and ends tomorrow
    $start = clone $now;
    $start->setTime($start_hour, 0, 0);
    
    $end = clone $now;
    $end->modify('+1 day');
    $end->setTime($start_hour, 0, 0);
} else {
    // Shift started yesterday and ends today
    $start = clone $now;
    $start->modify('-1 day');
    $start->setTime($start_hour, 0, 0);
    
    $end = clone $now;
    $end->setTime($start_hour, 0, 0);
}

$start_str = $start->format('Y-m-d H:i:s');
$end_str = $end->format('Y-m-d H:i:s');

// Fetch active shift materials cleanly via LEFT JOIN
$stmt = $conn->prepare("
    SELECT DISTINCT m.*, COALESCE(g.name, '') AS jallab_name
    FROM materials m
    LEFT JOIN gatherers g ON m.jallab_id = g.id
    WHERE m.created_at >= ? AND m.created_at < ?
    ORDER BY m.name ASC
");
$stmt->bind_param("ss", $start_str, $end_str);
$stmt->execute();
$materials_res = $stmt->get_result();
$materials = [];
while ($row = $materials_res->fetch_assoc()) {
    $materials[] = $row;
}
$stmt->close();

$start_time = date('h:i a', strtotime($start_str));
$end_time = date('h:i a', strtotime($end_str));
$start_time = str_replace(array('am', 'pm'), array('ص', 'م'), $start_time);
$end_time = str_replace(array('am', 'pm'), array('ص', 'م'), $end_time);

$start_date = date('Y-m-d', strtotime($start_str));
$end_date = date('Y-m-d', strtotime($end_str));
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تطبيق طلب الاستمارات السريع</title>
    <!-- Google Fonts: Cairo -->
    <link rel="stylesheet" href="css/cairo.css">
    <!-- Font Awesome for premium icons -->
    <link rel="stylesheet" href="css/fontawesome/css/all.min.css">
    <!-- Custom Style for Mobile App Simulation -->
    <link rel="stylesheet" href="css/order_style.css">
</head>
<body>
    <div class="app-wrapper">
        <!-- Desktop Background/Ambient Graphic Elements -->
        <div class="bg-shape bg-shape-1"></div>
        <div class="bg-shape bg-shape-2"></div>
        
        <!-- Mobile Device Frame Container -->
        <div class="mobile-device">
            <div class="device-header-elements">
                <div class="camera-lens"></div>
                <div class="speaker-grill"></div>
            </div>
            
            <div class="device-screen">
                <!-- Mobile Status Bar -->
                <div class="status-bar">
                    <div class="status-time" id="status-time">12:00</div>
                    <div class="status-icons">
                        <i class="fa-solid fa-wifi"></i>
                        <i class="fa-solid fa-signal"></i>
                        <i class="fa-solid fa-battery-three-quarters"></i>
                    </div>
                </div>
                
                <!-- Main App Container -->
                <div class="app-container">
                    
                    <!-- App Header -->
                    <header class="app-header">
                        <div class="brand">
                            <div class="brand-logo">
                                <i class="fa-solid fa-paper-plane"></i>
                            </div>
                            <div class="brand-text">
                                <h1><?php echo htmlspecialchars(getOrgName($conn)); ?></h1>
                                <span class="subtitle">نظام تسجيل الطلبات الذكي</span>
                            </div>
                        </div>
                        <div class="header-action" style="display:flex; align-items:center; gap:8px;">
                            <button type="button" class="btn-refresh-cache" id="system-refresh-btn-order" onclick="refreshSystemAndClearCache(this)" title="تحديث بيانات السيرفر ومسح الذاكرة المؤقتة (الكاش)">
                                <i class="fa-solid fa-arrows-rotate" id="refresh-cache-icon"></i>
                                <span class="refresh-btn-text">تحديث النظام والكاش</span>
                            </button>
                            <button id="device-theme-toggle" class="header-icon-btn" title="تغيير المظهر">
                                <i class="fa-solid fa-moon"></i>
                            </button>
                        </div>
                    </header>
                    
                    <!-- App Content Sheets -->
                    <main class="app-content">
                        
                        <!-- TAB 1: NEW ORDER SHEET -->
                        <section id="sheet-new-order" class="app-sheet active">
                            <div class="sheet-title-wrapper">
                                <h2>طلب استمارة جديدة</h2>
                                <p>أدخل تفاصيل الطلب بدقة لتسجيله في سجل النظام</p>
                                <span class="active-shift-badge" style="display:inline-block; font-size:10px; color:var(--text-secondary); background:rgba(99,102,241,0.08); padding:4px 10px; border-radius:15px; margin-top:6px; font-weight:700;">
                                    <i class="fa-regular fa-clock" style="margin-left:4px;"></i>الوردية النشطة: <?php echo $start_time; ?> إلى <?php echo $end_time; ?>
                                </span>
                            </div>
                            
                            <form id="order-form" autocomplete="off" novalidate>
                                <!-- Customer Name Field -->
                                <div class="app-input-group">
                                    <label for="customer_name">اسم الزبون</label>
                                    <div class="autocomplete-wrapper">
                                        <div class="input-container">
                                            <span class="input-icon"><i class="fa-solid fa-user"></i></span>
                                            <input type="text" id="customer_name" placeholder="أدخل اسم الزبون الكامل..." required autocomplete="off">
                                        </div>
                                        <!-- Autocomplete Dropdown -->
                                        <div class="autocomplete-dropdown" id="customer-autocomplete" style="display:none;"></div>
                                    </div>
                                    <span class="validation-msg" id="customer_name_error">يرجى إدخال اسم الزبون.</span>
                                </div>
                                
                                <!-- حاوية المواد المتعددة -->
                                <div id="materials-container" class="materials-container">
                                    <!-- سيتم إضافة عناصر المواد ديناميكياً بواسطة JS -->
                                </div>

                                <button type="button" id="btn-add-material" class="btn-secondary-action">
                                    <i class="fa-solid fa-plus"></i> إضافة مادة أخرى
                                </button>
                                
                                <!-- Submit Button -->
                                <button type="submit" class="app-submit-btn" id="btn-submit-order">
                                    <span class="btn-text">إرسال الطلب الآن</span>
                                    <span class="btn-icon"><i class="fa-solid fa-arrow-left"></i></span>
                                </button>
                            </form>
                        </section>
                        
                        <!-- TAB 2: MY ORDERS SHEET -->
                        <section id="sheet-my-orders" class="app-sheet">
                            <div class="sheet-title-wrapper">
                                <h2>سجل الطلبات الحالية</h2>
                                <p>الطلبات المحفوظة محلياً في ذاكرة هذا الهاتف</p>
                            </div>
                            
                            <!-- Stats Overview Panel -->
                            <div class="stats-panel">
                                <div class="stat-card">
                                    <span class="stat-value" id="stat-total-orders">0</span>
                                    <span class="stat-label">إجمالي الطلبات</span>
                                </div>
                                <div class="stat-card">
                                    <span class="stat-value" id="stat-total-weight">0.0</span>
                                    <span class="stat-label">الوزن الكلي (كجم)</span>
                                </div>
                                <div class="stat-card">
                                    <span class="stat-value" id="stat-total-count">0</span>
                                    <span class="stat-label">القطع الإجمالية</span>
                                </div>
                            </div>
                            
                            <!-- Search & Filter Inside App -->
                            <div class="app-search-box">
                                <i class="fa-solid fa-magnifying-glass search-icon"></i>
                                <input type="text" id="order-search" placeholder="ابحث باسم الزبون أو المادة...">
                            </div>
                            
                            <!-- Orders List -->
                            <div class="orders-list-wrapper" id="orders-list">
                                <!-- Dynamic order items will be injected here by JS -->
                                <div class="empty-list-state">
                                    <i class="fa-solid fa-folder-open empty-icon"></i>
                                    <h3>لا توجد طلبات مسجلة</h3>
                                    <p>ابدأ بإضافة طلبك الأول من تبويب "طلب جديد"</p>
                                </div>
                            </div>
                        </section>
                        
                        <!-- TAB 3: APP INFO SHEET -->
                        <section id="sheet-info" class="app-sheet">
                            <div class="sheet-title-wrapper">
                                <h2>معلومات التطبيق</h2>
                                <p>تفاصيل حول نظام الاستمارات المنفصل</p>
                            </div>
                            
                            <div class="info-content-card">
                                <div class="app-info-logo">
                                    <i class="fa-solid fa-mobile-screen-button"></i>
                                </div>
                                <h3>تطبيق الاستمارات المتنقل الذكي</h3>
                                <p class="app-version" style="color:#10b981; font-weight:700;"><i class="fa-solid fa-cloud-arrow-up" style="margin-left:4px;"></i>مربوط ومزامن فورياً مع الخادم وقاعدة البيانات</p>
                                
                                <hr class="info-divider">
                                
                                <div class="info-item">
                                    <i class="fa-solid fa-shield-halved info-icon"></i>
                                    <div class="info-text">
                                        <h4>أمان ومزامنة آلية</h4>
                                        <p>يتم تسجيل كافة الاستمارات وتحديثها لحظياً في قاعدة البيانات الرئيسية (MySQL) لسهولة مراجعتها واحتساب الفواتير بدون أي تأخير.</p>
                                    </div>
                                </div>
                                
                                <div class="info-item">
                                    <i class="fa-solid fa-bolt info-icon"></i>
                                    <div class="info-text">
                                        <h4>أداء فائق للوردية الحالية</h4>
                                        <p>يعرض التطبيق المواد النشطة المتاحة في الوردية الحالية ويقوم بتحديثها تلقائياً بدون رمشة شاشة.</p>
                                    </div>
                                </div>
                                
                                <div class="info-item">
                                    <i class="fa-solid fa-code info-icon"></i>
                                    <div class="info-text">
                                        <h4>بيانات مدخلة مطابقة</h4>
                                        <p>الحقول مجهزة بذكاء لاستقبال: اسم الزبون، اسم المادة، الوزن الدقيق، والعدد الإجمالي للقطع.</p>
                                    </div>
                                </div>
                                
                                <button type="button" class="btn-clear-data" id="btn-clear-local-data">
                                    <i class="fa-solid fa-trash-can"></i>
                                    <span>مسح كافة السجلات المحلية للتطبيق</span>
                                </button>
                            </div>
                        </section>
                        
                    </main>
                    
                    <!-- App Bottom Navigation Bar -->
                    <nav class="app-nav">
                        <button class="nav-item active" data-target="sheet-new-order">
                            <i class="fa-solid fa-plus-circle nav-icon"></i>
                            <span class="nav-label">طلب جديد</span>
                        </button>
                        
                        <button class="nav-item" data-target="sheet-my-orders">
                            <i class="fa-solid fa-clipboard-list nav-icon"></i>
                            <span class="nav-label">طلباتي</span>
                        </button>
                        
                        <button class="nav-item" data-target="sheet-info">
                            <i class="fa-solid fa-info-circle nav-icon"></i>
                            <span class="nav-label">نبذة</span>
                        </button>
                    </nav>
                    
                    <!-- App Fullscreen Success Overlay -->
                    <div class="success-overlay" id="success-overlay">
                        <div class="success-card">
                            <div class="success-checkmark">
                                <div class="check-icon">
                                    <span class="icon-line line-tip"></span>
                                    <span class="icon-line line-long"></span>
                                    <div class="icon-circle"></div>
                                    <div class="icon-fix"></div>
                                </div>
                            </div>
                            <h2>تم تسجيل الطلب وحفظه في الخادم!</h2>
                            <p>تم إرسال الاستمارة وحفظها بنجاح في قاعدة البيانات للوردية الحالية.</p>
                            
                            <div class="success-details">
                                <div class="detail-row">
                                    <span class="detail-label">الزبون:</span>
                                    <span class="detail-value" id="confirm-customer">اسم الزبون</span>
                                </div>
                                <div id="confirm-items-container" style="display:flex; flex-direction:column; gap:8px; margin-top:8px; border-top:1px dashed rgba(255,255,255,0.15); padding-top:8px; width:100%;">
                                    <!-- سيتم إضافة المواد ديناميكياً هنا -->
                                </div>
                            </div>
                            
                            <button class="btn-success-close" id="btn-success-close">إغلاق وتنزيل استمارة جديدة</button>
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <!-- Mobile Home Indicator -->
            <div class="home-indicator"></div>
        </div>
    </div>
    
    <script>
        let AVAILABLE_MATERIALS = <?php echo json_encode($materials); ?>;
    </script>
    <!-- Custom JavaScript for Interactions -->
    <script src="js/order.js"></script>
</body>
</html>

