<?php
use yii\helpers\Html;
use yii\helpers\Url;

if (!$order) {
    echo '<div class="text-center py-5">Заказ не найден</div>';
    return;
}

$restaurantName = $order->restaurant ? $order->restaurant->name : 'Ресторан';
$deliveryAddress = $order->delivery_address;
?>

<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="bg-white rounded-3 p-4 mb-4 text-center">
                <h1 class="font-weight-bold mb-2" style="font-size: 24px;">
                    <b>Заказ #<?= Html::encode($order->id) ?></b>
                </h1>
                <p class="text-muted mb-3" style="font-size: 16px; color: var(--text-secondary, rgba(0, 0, 0, 0.6));">
                    <?= Html::encode($restaurantName) ?> → <?= Html::encode($deliveryAddress) ?>
                </p>
                <div>
                    <span class="d-inline-block px-4 py-2 rounded-pill" 
                          style="font-size: 14px; font-weight: 600; 
                                 background-color: <?= $orderData['status_light_bg'] ?>; 
                                 color: <?= $orderData['status_light_text'] ?>; 
                                 border: none;">
                        <i class="<?= $orderData['icon'] ?> mr-2"></i><?= $orderData['status_text'] ?>
                    </span>
                </div>
            </div>
            <div class="bg-white rounded-3 p-4 mb-3">
                <h3 class="font-weight-bold mb-3" style="font-size: 18px;">
                    <b>Статус доставки</b>
                </h3>
                
                <div class="ps-2">
                    <?php foreach ($trackingStatuses as $index => $status): ?>
                    <div class="d-flex mb-4 position-relative">
                        <div class="me-3 position-relative z-1" style="margin-top: 12px;">
                            <?php if ($status['pulse']): ?>
                            <div class="pulse-circle" 
                                 data-id="pulseCircle<?= $index ?>"
                                 style="width: 32px; height: 32px; 
                                        background-color: <?= $status['color'] ?>; 
                                        border-radius: 50%; 
                                        display: flex; 
                                        align-items: center; 
                                        justify-content: center;">
                                <i class="fas <?= $status['icon'] ?> text-white" style="font-size: 14px;"></i>
                            </div>
                            <?php else: ?>
                            <div style="width: 32px; height: 32px; 
                                        background-color: <?= $status['color'] ?>; 
                                        border-radius: 50%; 
                                        display: flex; 
                                        align-items: center; 
                                        justify-content: center;">
                                <i class="fas <?= $status['icon'] ?> text-white" style="font-size: 14px;"></i>
                            </div>
                            <?php endif; ?>
                        </div>
                        <div class="flex-grow-1" style="padding-top: 8px;">
                            <p class="font-weight-bold mb-1" style="font-size: 16px; 
                                color: <?= $status['is_active'] ? 'var(--text-primary, #000000)' : '#9e9e9e' ?>;">
                                <b><?= $status['title'] ?></b>
                            </p>
                            
                            <?php if (!empty($status['extra'])): ?>
                            <p class="mb-1" style="font-size: 14px; color: #BC6C25; font-weight: 600;">
                                <?= $status['extra'] ?>
                            </p>
                            <?php endif; ?>
                            
                            <?php if ($status['time'] && $status['description']): ?>
                            <p class="text-muted mb-0" style="font-size: 14px; 
                                color: <?= $status['is_active'] ? 'var(--text-secondary, rgba(0, 0, 0, 0.6))' : '#bdbdbd' ?>;">
                                <?= $status['time'] ?> • <?= $status['description'] ?>
                            </p>
                            <?php elseif ($status['time']): ?>
                            <p class="text-muted mb-0" style="font-size: 14px; 
                                color: <?= $status['is_active'] ? 'var(--text-secondary, rgba(0, 0, 0, 0.6))' : '#bdbdbd' ?>;">
                                <?= $status['time'] ?>
                            </p>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php if ($order->delivery_type === 'delivery' && $order->delivery && $order->delivery->courier): 
                $courier = $order->delivery->courier;
                $courierUser = $courier->user ?? null;
            ?>
            <div class="bg-white rounded-3 p-3">
                <h3 class="font-weight-bold mb-3" style="font-size: 18px;">
                    <b>Ваш курьер</b>
                </h3>
                
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <div class="me-4">
                            <div style="width: 64px; height: 64px; background: linear-gradient(135deg, #588157 0%, #BC6C25 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-user text-white" style="font-size: 24px;"></i>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-weight-bold mb-1" style="font-size: 18px; color: var(--text-primary, #000000);">
                                <b><?= Html::encode($courierUser ? ($courierUser->name . ' ' . $courierUser->last_name) : 'Курьер') ?></b>
                            </h4>
                            <p class="text-muted mb-1" style="font-size: 14px; color: var(--text-secondary, rgba(0, 0, 0, 0.6));">
                                <?= Html::encode($courier->auto ?? 'Автомобиль') ?> • <?= Html::encode($courier->auto_number ?? '') ?>
                            </p>
                            <?php if ($courier->estimation): ?>
                            <p class="mb-0" style="font-size: 13px; color: var(--text-secondary, rgba(0, 0, 0, 0.6));">
                                <i class="fas fa-star text-warning mr-1"></i> <?= number_format($courier->estimation, 1) ?> (247 доставок)
                            </p>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <?php if ($courier->phone): ?>
                    <div>
                        <?= Html::a(
                            '<i class="fas fa-phone mr-2"></i>Позвонить',
                            'tel:' . $courier->phone,
                            [
                                'class' => 'btn',
                                'style' => 'font-size: 14px; text-transform: none; background-color: #588157; color: white; border: none; border-radius: 8px; padding: 10px 20px;',
                                'onmouseover' => 'this.style.backgroundColor="rgb(53, 126, 52)"',
                                'onmouseout' => 'this.style.backgroundColor="#588157"'
                            ]
                        ) ?>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function() {
    const pulseCircles = document.querySelectorAll('.pulse-circle');
    pulseCircles.forEach(function(circle) {
        if (circle.style.backgroundColor === 'rgb(188, 108, 37)' || 
            circle.style.backgroundColor === '#BC6C25') {
            circle.style.animation = 'pulse-orange 2s infinite';
        } else {
            circle.style.animation = 'pulse 2s infinite';
        }
    });
});
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        function updateOrderStatus() {
            fetch('<?= \yii\helpers\Url::to(['order/status', 'id' => $order->id]) ?>')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById('trackingStatuses').innerHTML = data.html;
                    }
                })
                .catch(err => console.error(err));
        }

        setInterval(updateOrderStatus, 5000); // обновление каждые 5 секунд
    });
</script>