<?php
// customer_tracking.php - Customer Order Tracking Page
require_once 'config.php';
session_start();

$tracking_code = isset($_GET['tracking']) ? trim($_GET['tracking']) : '';
$order = null;
$error = '';

if ($tracking_code) {
    // Search by tracking_id or order_number
    $stmt = $conn->prepare("SELECT * FROM orders WHERE tracking_id = ? OR order_number = ?");
    $stmt->bind_param("ss", $tracking_code, $tracking_code);
    $stmt->execute();
    $result = $stmt->get_result();
    $order = $result->fetch_assoc();
    
    if (!$order) {
        $error = "No order found with tracking number: " . htmlspecialchars($tracking_code);
    }
}

// Get brand info
$brand = getBrand();
?>
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ট্র্যাকিং - অর্ডার স্ট্যাটাস | <?php echo $brand['name']; ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
            font-family: 'Hind Siliguri', sans-serif;
        }
        .tracking-container{
            max-width: 900px;
            margin: 0 auto;
        }
        .tracking-card{
            background: #fff;
            border-radius: 25px;
            padding: 35px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            margin-top: 30px;
        }
        .tracking-header{
            background: linear-gradient(135deg, #2d6a4f, #1b4332);
            color: white;
            border-radius: 20px;
            padding: 25px;
            margin: -50px 20px 20px 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .search-box{
            background: #fff;
            border-radius: 60px;
            padding: 5px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        .search-box input{
            border: none;
            padding: 15px 25px;
            border-radius: 60px 0 0 60px;
            font-size: 16px;
        }
        .search-box input:focus{
            outline: none;
            box-shadow: none;
        }
        .search-box button{
            border-radius: 0 60px 60px 0;
            padding: 15px 30px;
            background: #2d6a4f;
            border: none;
        }
        .search-box button:hover{
            background: #1b4332;
        }
        .status-badge{
            display: inline-block;
            padding: 8px 25px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 14px;
            letter-spacing: 1px;
        }
        .timeline{
            position: relative;
            padding-left: 35px;
            margin: 30px 0;
        }
        .timeline-item{
            position: relative;
            margin-bottom: 30px;
            animation: fadeInUp 0.5s ease;
        }
        .timeline-item::before{
            content: '';
            position: absolute;
            left: -25px;
            top: 5px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #2d6a4f;
            z-index: 2;
            border: 2px solid #fff;
            box-shadow: 0 0 0 2px #2d6a4f;
        }
        .timeline-item::after{
            content: '';
            position: absolute;
            left: -18px;
            top: 19px;
            width: 2px;
            height: calc(100% + 11px);
            background: linear-gradient(to bottom, #2d6a4f, #dee2e6);
        }
        .timeline-item:last-child::after{
            display: none;
        }
        .timeline-date{
            font-size: 12px;
            color: #6c757d;
            margin-bottom: 8px;
            font-weight: 600;
        }
        .timeline-content{
            background: #f8f9fa;
            padding: 12px 18px;
            border-radius: 12px;
            transition: all 0.3s;
        }
        .timeline-content:hover{
            background: #e9ecef;
            transform: translateX(5px);
        }
        .info-card{
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 15px;
            transition: all 0.3s;
        }
        .info-card:hover{
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .track-btn{
            background: #2d6a4f;
            color: white;
            padding: 12px 35px;
            border-radius: 50px;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s;
            font-weight: 600;
        }
        .track-btn:hover{
            background: #1b4332;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        @keyframes fadeInUp{
            from{
                opacity: 0;
                transform: translateY(20px);
            }
            to{
                opacity: 1;
                transform: translateY(0);
            }
        }
        .order-details{
            animation: fadeInUp 0.5s ease;
        }
        @media (max-width: 768px){
            .tracking-card{
                padding: 20px;
            }
            .tracking-header{
                margin: -30px 10px 20px 10px;
                padding: 20px;
            }
            .timeline{
                padding-left: 25px;
            }
        }
    </style>
</head>
<body>

<div class="tracking-container">
    
    <!-- Header -->
    <div class="text-center mb-4">
        <i class="fas fa-truck" style="font-size: 50px; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);"></i>
        <h2 style="color: white; margin-top: 10px;">ট্র্যাক আপনার অর্ডার</h2>
        <p style="color: rgba(255,255,255,0.9);">ট্র্যাকিং আইডি বা অর্ডার নম্বর দিন</p>
    </div>
    
    <!-- Search Form -->
    <div class="tracking-card">
        <form method="GET" action="">
            <div class="search-box">
                <div class="input-group">
                    <input type="text" name="tracking" class="form-control" 
                           placeholder="যেমন: SFR260519ST0EF9177BD অথবা ORD20260524214" 
                           value="<?php echo htmlspecialchars($tracking_code); ?>"
                           required>
                    <button class="btn btn-success" type="submit">
                        <i class="fas fa-search"></i> ট্র্যাক করুন
                    </button>
                </div>
            </div>
        </form>
        
        <!-- Error Message -->
        <?php if($error): ?>
            <div class="alert alert-danger text-center">
                <i class="fas fa-exclamation-circle"></i> <?php echo $error; ?>
            </div>
        <?php endif; ?>
        
        <!-- Order Details -->
        <?php if($order): ?>
        <div class="order-details">
            <!-- Header with order info -->
            <div class="tracking-header">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <small><i class="fas fa-hashtag"></i> অর্ডার নম্বর</small>
                        <h4 class="mb-0"><?php echo $order['order_number']; ?></h4>
                    </div>
                    <div class="col-md-6 text-md-end mt-3 mt-md-0">
                        <small><i class="fas fa-calendar"></i> অর্ডারের তারিখ</small>
                        <h5 class="mb-0"><?php echo date('d M Y, h:i A', strtotime($order['created_at'])); ?></h5>
                    </div>
                </div>
            </div>
            
            <!-- Status Badge -->
            <div class="text-center mt-4">
                <?php
                $status_icon = [
                    'pending' => 'fa-clock',
                    'approved' => 'fa-check-circle',
                    'processing' => 'fa-cogs',
                    'shipped' => 'fa-truck',
                    'delivered' => 'fa-home',
                    'cancelled' => 'fa-times-circle'
                ];
                $status_text = [
                    'pending' => 'অপেক্ষমাণ',
                    'approved' => 'অনুমোদিত',
                    'processing' => 'প্রক্রিয়াধীন',
                    'shipped' => 'পাঠানো হয়েছে',
                    'delivered' => 'ডেলিভারি সম্পন্ন',
                    'cancelled' => 'বাতিল'
                ];
                $status_color = [
                    'pending' => 'warning',
                    'approved' => 'info',
                    'processing' => 'primary',
                    'shipped' => 'primary',
                    'delivered' => 'success',
                    'cancelled' => 'danger'
                ];
                ?>
                <span class="status-badge bg-<?php echo $status_color[$order['status']]; ?> text-white">
                    <i class="fas <?php echo $status_icon[$order['status']]; ?>"></i>
                    <?php echo $status_text[$order['status']]; ?>
                </span>
            </div>
            
            <!-- Customer & Order Info -->
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="info-card">
                        <i class="fas fa-user-circle text-success" style="font-size: 24px;"></i>
                        <h6 class="mt-2">গ্রাহকের তথ্য</h6>
                        <p class="mb-1"><strong>নাম:</strong> <?php echo htmlspecialchars($order['customer_name']); ?></p>
                        <p class="mb-1"><strong>মোবাইল:</strong> <a href="tel:<?php echo $order['customer_phone']; ?>"><?php echo $order['customer_phone']; ?></a></p>
                        <p class="mb-0"><strong>ঠিকানা:</strong> <?php echo htmlspecialchars($order['customer_address']); ?></p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-card">
                        <i class="fas fa-money-bill-wave text-success" style="font-size: 24px;"></i>
                        <h6 class="mt-2">অর্ডারের বিবরণ</h6>
                        <p class="mb-1"><strong>মোট পরিমাণ:</strong> ৳<?php echo number_format($order['total_amount']); ?></p>
                        <p class="mb-1"><strong>পেমেন্ট:</strong> <?php echo ucfirst($order['payment_method'] ?? 'N/A'); ?></p>
                        <?php if($order['tracking_id']): ?>
                        <p class="mb-0"><strong>ট্র্যাকিং আইডি:</strong> <code><?php echo $order['tracking_id']; ?></code></p>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            
            <!-- Tracking Timeline -->
            <h6 class="mt-4 mb-3">
                <i class="fas fa-history text-success"></i> 
                অর্ডারের সময়সূচি
            </h6>
            <div class="timeline">
                <?php
                // Timeline events based on order status
                $timeline_events = [];
                
                // Order placed
                $timeline_events[] = [
                    'date' => $order['created_at'],
                    'icon' => 'fa-shopping-cart',
                    'title' => 'অর্ডার করা হয়েছে',
                    'description' => 'আপনার অর্ডারটি সফলভাবে সম্পন্ন হয়েছে।'
                ];
                
                // Order confirmed (if status > pending)
                if ($order['status'] != 'pending') {
                    $timeline_events[] = [
                        'date' => $order['created_at'],
                        'icon' => 'fa-check-circle',
                        'title' => 'অর্ডার নিশ্চিত হয়েছে',
                        'description' => 'আপনার অর্ডারটি অনুমোদন করা হয়েছে।'
                    ];
                }
                
                // Order processing
                if ($order['status'] == 'processing' || $order['status'] == 'shipped' || $order['status'] == 'delivered') {
                    $timeline_events[] = [
                        'date' => $order['created_at'],
                        'icon' => 'fa-box',
                        'title' => 'প্রস্তুতকরণ',
                        'description' => 'আপনার অর্ডারটি প্রস্তুত করা হচ্ছে।'
                    ];
                }
                
                // Order shipped
                if ($order['status'] == 'shipped' || $order['status'] == 'delivered') {
                    $timeline_events[] = [
                        'date' => $order['shipped_at'] ?? $order['created_at'],
                        'icon' => 'fa-truck',
                        'title' => 'অর্ডার পাঠানো হয়েছে',
                        'description' => 'আপনার অর্ডারটি কুরিয়ারে দেওয়া হয়েছে।'
                    ];
                }
                
                // Order delivered
                if ($order['status'] == 'delivered') {
                    $timeline_events[] = [
                        'date' => $order['delivered_at'] ?? date('Y-m-d H:i:s'),
                        'icon' => 'fa-home',
                        'title' => 'ডেলিভারি সম্পন্ন',
                        'description' => 'আপনার অর্ডারটি সফলভাবে ডেলিভারি করা হয়েছে।'
                    ];
                }
                
                // Display timeline
                foreach ($timeline_events as $event):
                ?>
                <div class="timeline-item">
                    <div class="timeline-date">
                        <i class="far fa-calendar-alt"></i> 
                        <?php echo date('d M Y, h:i A', strtotime($event['date'])); ?>
                    </div>
                    <div class="timeline-content">
                        <i class="fas <?php echo $event['icon']; ?> text-success me-2"></i>
                        <strong><?php echo $event['title']; ?></strong><br>
                        <?php echo $event['description']; ?>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            
            <!-- Track on Steadfast Button -->
            <?php if($order['tracking_id'] && $order['status'] == 'shipped'): ?>
            <div class="text-center mt-4 pt-3">
                <a href="https://steadfast.com.bd/tl/<?php echo urlencode($order['tracking_id']); ?>" 
                   target="_blank" class="track-btn" rel="noopener noreferrer">
                    <i class="fas fa-external-link-alt"></i> 
                    লাইভ ট্র্যাকিং দেখুন (Steadfast)
                </a>
                <p class="text-muted small mt-3">
                    <i class="fas fa-info-circle"></i> 
                    কুরিয়ার এর রিয়েল-টাইম আপডেট দেখতে উপরের বাটনে ক্লিক করুন
                </p>
            </div>
            <?php endif; ?>
            
            <!-- WhatsApp Support -->
            <div class="text-center mt-4">
                <a href="https://wa.me/88<?php echo $brand['whatsapp'] ?? '01700000000'; ?>?text=আমার অর্ডার সম্পর্কে জানতে চাই। অর্ডার নম্বর: <?php echo urlencode($order['order_number']); ?>" 
                   target="_blank" class="btn btn-success" style="background:#25D366;border:none;border-radius:50px;padding:10px 25px;">
                    <i class="fab fa-whatsapp"></i> 
                    সাপোর্টের সাথে যোগাযোগ করুন
                </a>
            </div>
        </div>
        <?php endif; ?>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>