@extends('layouts.app')

@section('title', 'Order #' . $order->id . ' - ' . \App\Models\Setting::get('site_name', 'KiyoKart'))

@section('content')
<div class="container">
    <!-- Page Header -->
    <div class="order-detail-header mb-4">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
            <div>
                <h1 class="order-detail-title mb-2">Order #{{ $order->id }}</h1>
                <div class="order-date-info">
                    <i class="bi bi-calendar3"></i>
                    <span>Placed on {{ $order->placed_at ? $order->placed_at->format('M d, Y h:i A') : $order->created_at->format('M d, Y h:i A') }}</span>
                </div>
            </div>
            <div class="order-header-badges">
                <span class="status-badge status-{{ $order->status }}">
                    <i class="bi bi-circle-fill"></i>
                    {{ ucfirst($order->status_label) }}
                </span>
                <span class="payment-badge {{ $order->getPaymentStatusBadgeClass() }}">
                    @if($order->isCodOrder())
                        <i class="bi bi-cash-coin"></i>
                    @elseif($order->isAbandonedPayment())
                        <i class="bi bi-x-circle"></i>
                    @elseif($order->payment_status === 'paid')
                        <i class="bi bi-check-circle"></i>
                    @elseif($order->payment_status === 'failed')
                        <i class="bi bi-exclamation-triangle"></i>
                    @else
                        <i class="bi bi-clock"></i>
                    @endif
                    {{ $order->getPaymentStatusDisplay() }}
                </span>
            </div>
        </div>
        <div class="order-actions-header mt-3">
            <a href="{{ route('customer.orders.index') }}" class="btn btn-outline-danger btn-sm">
                <i class="bi bi-arrow-left"></i> Back to Orders
            </a>
            @if(!empty($activeTicket))
                <a href="{{ route('customer.tickets.show', $activeTicket) }}" class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-chat-dots"></i> View Ticket
                </a>
            @else
                <a href="{{ route('customer.orders.ticket.create', $order) }}" class="btn btn-primary btn-sm">
                    <i class="bi bi-life-preserver"></i> Raise Ticket
                </a>
            @endif
            @php
                $canRetryPayment = ($order->payment_status === 'failed' || $order->payment_status === 'pending')
                    && $order->payment_method === 'online' 
                    && $order->items->count() > 0;
            @endphp
            @if($canRetryPayment)
                <button type="button" class="btn btn-danger btn-sm btn-retry-payment" data-order-id="{{ $order->id }}">
                    <i class="bi bi-credit-card"></i> Retry Payment
                </button>
            @endif
            @if($order->status === 'delivered')
                <!-- <button class="btn btn-outline-primary btn-sm" onclick="reorderOrder({{ $order->id }})" type="button">
                    <i class="bi bi-arrow-repeat"></i> Reorder
                </button> -->
            @endif
        </div>
    </div>

    <!-- Order Status Timeline -->
    @if($order->status !== 'cancelled')
    <div class="order-card-modern mb-4">
        <div class="card-header-modern">
            <h5 class="mb-0"><i class="bi bi-clock-history"></i> Order Status Timeline</h5>
        </div>
        <div class="card-body-modern">
            @php
                $statuses = [
                    'placed' => ['label' => 'Order Placed', 'icon' => 'bi-cart-check'],
                    'confirmed' => ['label' => 'Confirmed', 'icon' => 'bi-check-circle'],
                    'packed' => ['label' => 'Packed', 'icon' => 'bi-box-seam'],
                    'shipped' => ['label' => 'Shipped', 'icon' => 'bi-truck'],
                    'delivered' => ['label' => 'Delivered', 'icon' => 'bi-check2-all'],
                ];
                
                $currentStatus = $order->status;
                $statusOrder = ['placed', 'confirmed', 'packed', 'shipped', 'delivered'];
                $currentIndex = array_search($currentStatus, $statusOrder);
                if ($currentIndex === false) {
                    $currentIndex = -1;
                }
            @endphp
            
            <div class="order-timeline">
                @foreach($statusOrder as $index => $status)
                    @php
                        $isActive = $index <= $currentIndex;
                        $isCurrent = $index === $currentIndex;
                        $isCompleted = $index < $currentIndex;
                    @endphp
                    <div class="timeline-item {{ $isActive ? 'active' : '' }} {{ $isCompleted ? 'completed' : '' }} {{ $isCurrent ? 'current' : '' }}">
                        <div class="timeline-marker">
                            @if($status === 'shipped' && isset($order->shipments[0]->carrier->name) && $order->shipments[0]->carrier->name == 'Delhivery')
                                <a href="https://www.delhivery.com/track-v2/package/{{ $order->delhivery_awb }}" target="_blank" class="text-white">
                                    <i class="bi {{ $statuses[$status]['icon'] }}"></i>
                                </a>
                            @elseif($status === 'shipped' && isset($order->shipments[0]->carrier->name) && $order->shipments[0]->carrier->name == 'Ekart')
                                <a href="https://ekartlogistics.com/ekartlogistics-web/shipmenttrack/{{ $order->delhivery_awb }}" target="_blank" class="text-white">
                                    <i class="bi {{ $statuses[$status]['icon'] }}"></i>
                                </a>
                            @else
                                <i class="bi {{ $statuses[$status]['icon'] }}"></i>
                            @endif                            
                        </div>
                        <div class="timeline-content">
                            <h6 class="mb-1">{{ $statuses[$status]['label'] }}</h6>
                            @if($isActive && $isCurrent)
                                <small class="text-primary">Current Status</small>
                            @elseif($isCompleted)
                                <small class="text-success">Completed</small>
                            @else
                                <small class="text-muted">Pending</small>
                            @endif
                        </div>
                        @if($index < count($statusOrder) - 1)
                            <div class="timeline-connector {{ $isCompleted ? 'completed' : '' }}"></div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

<div class="row">
    <div class="col-lg-7">
        <!-- Order Items -->
        <div class="order-card-modern mb-4">
            <div class="card-header-modern">
                <h5 class="mb-0"><i class="bi bi-box-seam"></i> Order Items</h5>
            </div>
            <div class="card-body-modern">
                @php $orderItemOnerror = "this.onerror=null;this.style.display='none'"; @endphp
                @foreach($order->items as $item)
                    <div class="order-item-row">
                        <div class="order-item-image">
                            @if($item->product && ($item->product->image_path || $item->product->image))
                                <x-product-image :product="$item->product" context="listing" class="product-thumb" alt="{{ $item->name }}" :onerror="$orderItemOnerror" />
                            @else
                                <div class="product-thumb-placeholder">
                                    <i class="bi bi-image"></i>
                                </div>
                            @endif
                        </div>
                        <div class="order-item-details">
                            <h6 class="order-item-name">{{ $item->name }}</h6>
                            @if($item->product)
                                <a href="{{ $item->product->parent_id ? route('product.show', ['slug' => $item->product->parent->slug]) . '?variant=' . $item->product->id : route('product.show', $item->product->slug) }}" class="order-item-link">
                                    <i class="bi bi-box-arrow-up-right"></i> View Product
                                </a>
                            @endif
                        </div>
                        <div class="order-item-qty">
                            <span class="qty-label">Quantity</span>
                            <span class="qty-value">{{ $item->qty }}</span>
                        </div>
                        <div class="order-item-price">
                            <span class="price-label">Price</span>
                            <span class="price-value">₹{{ number_format($item->line_total, 2) }}</span>
                        </div>
                    </div>
                    @if(!$loop->last)
                        <hr class="order-item-divider">
                    @endif
                @endforeach
            </div>
        </div>

        <!-- Shipping Address -->
        <div class="order-card-modern">
            <div class="card-header-modern">
                <h5 class="mb-0 card-title-inline"><i class="bi bi-geo-alt"></i> Shipping Address</h5>
            </div>
            <div class="card-body-modern">
                @php $addr = $order->address_snapshot; @endphp
                <div class="shipping-address-content">
                    <div class="address-name">
                        <i class="bi bi-person"></i>
                        <strong>{{ $addr['name'] }}</strong>
                    </div>
                    <div class="address-phone">
                        <i class="bi bi-telephone"></i>
                        <span>{{ $addr['mobile'] }}</span>
                    </div>
                    <div class="address-line">
                        <i class="bi bi-house-door"></i>
                        <span>{{ $addr['line1'] ?? ''}}</span>
                    </div>
                    @if(!empty($addr['line2']))
                        <div class="address-line">
                            <i class="bi bi-building"></i>
                            <span>{{ $addr['line2'] ?? '' }}</span>
                        </div>
                    @endif
                    <div class="address-city">
                        <i class="bi bi-geo-alt-fill"></i>
                        <span>{{ $addr['city'] ?? '' }}, {{ $addr['state'] ?? '' }} - {{ $addr['pin'] ?? '' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        @if($order->delhivery_awb)
            <div class="order-card-modern mb-3">
                <div class="card-header-modern">
                    <h5 class="mb-0"><i class="bi bi-truck"></i> Tracking Information</h5>
                </div>
                <div class="card-body-modern">
                    <div class="tracking-info">
                        <div class="tracking-awb">
                            <i class="bi bi-upc-scan"></i>
                            <div>
                                <span class="tracking-label">AWB Number</span>
                                <span class="tracking-value">{{ $order->delhivery_awb }}</span>
                            </div>
                        </div>
                        @if(isset($order->shipments[0]->status))
                            <div class="tracking-awb">
                                <i class="bi bi-patch-check-fill"></i>
                                <div class="tracking-label"><strong>Delivery Status</strong>
                                <span class="tracking-value">
                                    {{ ucwords($order->shipments[0]->status) }}
                                </span></div>
                            </div>
                        @endif
                        @if(isset($order->shipments[0]->carrier->name) && $order->shipments[0]->carrier->name == 'Delhivery')
                            <a href="https://www.delhivery.com/track-v2/package/{{ $order->delhivery_awb }}" target="_blank" class="btn btn-tracking">
                                <i class="bi bi-truck"></i> Track Shipping Order
                            </a>
                        @elseif(isset($order->shipments[0]->carrier->name) && $order->shipments[0]->carrier->name == 'Ekart')
                            <a href="https://ekartlogistics.com/ekartlogistics-web/shipmenttrack/{{ $order->delhivery_awb }}" target="_blank" class="btn btn-tracking">
                                <i class="bi bi-truck"></i> Track Shipping Order
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        @endif
        <!-- Order Summary -->
        <div class="order-card-modern mb-3">
            <div class="card-header-modern">
                <h5 class="mb-0 card-title-inline"><i class="bi bi-receipt"></i> Order Summary</h5>
            </div>
            <div class="card-body-modern">
                <div class="order-summary-item">
                    <span class="summary-label">Subtotal</span>
                    <span class="summary-value">₹{{ number_format($order->subtotal, 2) }}</span>
                </div>
                @if($order->discount_total > 0)
                    <div class="order-summary-item discount">
                        <span class="summary-label">
                            <i class="bi bi-tag-fill"></i> Discount
                        </span>
                        <span class="summary-value text-success">-₹{{ number_format($order->discount_total, 2) }}</span>
                    </div>
                @endif
                <div class="order-summary-item">
                    <span class="summary-label">Shipping</span>
                    <span class="summary-value">
                        @if($order->shipping_total == 0)
                            <span class="text-success">FREE</span>
                        @else
                            ₹{{ number_format($order->shipping_total, 2) }}
                        @endif
                    </span>
                </div>
                <div class="order-summary-total">
                    <span class="summary-label">Total Paid</span>
                    <span class="summary-value total">₹{{ number_format($order->total_payable, 2) }}</span>
                </div>

                @if($order->tax_total > 0)
                    <div class="order-summary-item">
                        <i class="summary-label">Tax Charged on This Order</i>
                        <i class="summary-value">₹{{ number_format($order->tax_total, 2) }}</i>
                    </div>
                @endif
                @if($order->coupon)
                    <div class="coupon-badge">
                        <i class="bi bi-tag-fill"></i>
                        <span>Coupon "{{ $order->coupon->code }}" applied</span>
                    </div>
                @endif
            </div>
        </div>

        <!-- Payment Details -->
        <div class="order-card-modern mb-3">
            <div class="card-header-modern">
                <h5 class="mb-0"><i class="bi bi-credit-card"></i> Payment Details</h5>
            </div>
            <div class="card-body-modern">
                @if($order->razorpay_order_id)
                    <div class="payment-info-item">
                        <label class="payment-label">
                            <i class="bi bi-hash"></i> Razorpay Order ID
                        </label>
                        <div class="payment-code-wrapper">
                            <code class="payment-code">{{ $order->razorpay_order_id }}</code>
                            <button type="button" class="btn-copy" onclick="copyToClipboard('{{ $order->razorpay_order_id }}', this)" title="Copy Order ID">
                                <i class="bi bi-clipboard"></i>
                            </button>
                        </div>
                    </div>
                @endif
                
                @if($order->razorpay_payment_id)
                    <div class="payment-info-item">
                        <label class="payment-label">
                            <i class="bi bi-hash"></i> Razorpay Payment ID
                        </label>
                        <div class="payment-code-wrapper">
                            <code class="payment-code">{{ $order->razorpay_payment_id }}</code>
                            <button type="button" class="btn-copy" onclick="copyToClipboard('{{ $order->razorpay_payment_id }}', this)" title="Copy Payment ID">
                                <i class="bi bi-clipboard"></i>
                            </button>
                        </div>
                    </div>
                @endif
                
                <div class="payment-info-item">
                    <label class="payment-label">Payment Method</label>
                    <span class="payment-method-text">{{ $order->getPaymentTypeLabel() }}</span>
                </div>
                
                <div class="payment-info-item">
                    <label class="payment-label">Payment Status</label>
                    <span class="payment-badge {{ $order->getPaymentStatusBadgeClass() }}">
                        @if($order->isCodOrder())
                            <i class="bi bi-cash-coin"></i>
                        @elseif($order->isAbandonedPayment())
                            <i class="bi bi-x-circle"></i>
                        @elseif($order->payment_status === 'paid')
                            <i class="bi bi-check-circle"></i>
                        @elseif($order->payment_status === 'failed')
                            <i class="bi bi-exclamation-triangle"></i>
                        @else
                            <i class="bi bi-clock"></i>
                        @endif
                        {{ $order->getPaymentStatusDisplay() }}
                    </span>
                    @if($order->isCodOrder() && $order->payment_status === 'pending')
                        <p class="payment-help-text mt-2 mb-0">
                            <i class="bi bi-info-circle"></i> Payment will be collected when your order is delivered.
                        </p>
                    @elseif($order->isAbandonedPayment())
                        <p class="payment-help-text mt-2 mb-0 text-warning">
                            <i class="bi bi-exclamation-triangle"></i> Payment was not completed. You can retry payment from checkout.
                        </p>
                    @endif
                </div>
            </div>
        </div>
    </div>
    </div>
</div>

@push('styles')
<style>
    /* Order Detail Header */
    .order-detail-header {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .order-detail-title {
        font-size: 2rem;
        font-weight: 700;
        color: var(--color-primary);
        margin: 0;
    }

    .order-date-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #6B7280;
        font-size: 0.95rem;
        margin-top: 0.5rem;
    }

    .order-header-badges {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .status-badge, .payment-badge {
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        /* display: inline-flex; */
        align-items: center;
        gap: 0.5rem;
    }

    @media (max-width: 480px) {
    .status-badge,
    .payment-badge {
        padding: 0.35rem 0.65rem;
        font-size: 0.72rem;
        border-radius: 14px;
    }
}

    .status-badge.status-awaiting_payment { background: #FEF3C7; color: #92400E; }
    .status-badge.status-placed { background: #FFF7ED; color: #C2410C; }
    .status-badge.status-confirmed { background: #EFF6FF; color: #1E40AF; }
    .status-badge.status-packed { background: #F0F9FF; color: #0369A1; }
    .status-badge.status-shipped { background: #DBEAFE; color: #1E3A8A; }
    .status-badge.status-delivered { background: #D1FAE5; color: #065F46; }
    .status-badge.status-cancelled { background: #FEE2E2; color: #991B1B; }

    .payment-badge.payment-paid { background: #D1FAE5; color: #065F46; }
    .payment-badge.payment-pending { background: #FEF3C7; color: #92400E; }
    .payment-badge.payment-failed { background: #FEE2E2; color: #991B1B; }
    .payment-badge.payment-cod { 
        background: #DBEAFE; 
        color: #1E40AF; 
        border: 1px solid #93C5FD; 
    }
    .payment-badge.payment-pending-online { 
        background: #FEF3C7; 
        color: #92400E; 
        border: 1px solid #FCD34D; 
    }
    .payment-badge.payment-cancelled { 
        background: #FEE2E2; 
        color: #991B1B; 
        border: 1px solid #FCA5A5; 
    }
    .payment-badge.payment-refunded { 
        background: #E0E7FF; 
        color: #3730A3; 
        border: 1px solid #A5B4FC; 
    }
    
    .payment-method-text {
        font-weight: 600;
        color: var(--color-primary);
    }
    
    .payment-help-text {
        font-size: 0.85rem;
        color: #6B7280;
        font-style: italic;
    }
    
    .payment-help-text.text-warning {
        color: #92400E;
    }

    .order-actions-header {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    /* Modern Card Styles */
    .order-card-modern {
        background: #FFFFFF;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        border: 1px solid #E5E7EB;
        overflow: hidden;
        transition: box-shadow 0.3s ease;
    }

    .order-card-modern:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .card-header-modern {
        background: var(--color-primary);
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid #E5E7EB;
        color: var(--color-secondary) !important;
    }

    .card-header-modern h5 {
        color: var(--color-secondary);
        font-weight: 700;
        font-size: 1.1rem;
        margin: 0;
    }

    .card-header-modern .card-title-inline {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media (max-width: 1399.98px) {
        .card-header-modern .card-title-inline {
            font-size: 1rem;
        }
    }

    .card-header-modern .bi {
        margin-right: 0.5rem;
        color: var(--color-secondary);
    }

    .card-body-modern {
        padding: 1.5rem;
    }

    /* Order Items */
    .order-item-row {
        display: grid;
        grid-template-columns: 80px 1fr auto auto;
        gap: 1.5rem;
        align-items: center;
        padding: 1rem 0;
    }

    .order-item-image {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        border-radius: 8px;
        overflow: hidden;
        background: #F9FAFB;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-thumb-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9CA3AF;
        font-size: 2rem;
    }

    .order-item-details {
        flex: 1;
    }

    .order-item-name {
        font-size: 1.05rem;
        font-weight: 600;
        color: #1F2937;
        margin-bottom: 0.5rem;
    }

    .order-item-link {
        color: var(--color-primary);
        text-decoration: none;
        font-size: 0.85rem;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        transition: color 0.3s ease;
    }

    .order-item-link:hover {
        color: var(--color-secondary);
    }

    .order-item-qty, .order-item-price {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .qty-label, .price-label {
        font-size: 0.75rem;
        color: #6B7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .qty-value, .price-value {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--color-primary);
    }

    .order-item-divider {
        margin: 0;
        border-color: #E5E7EB;
    }

    /* Shipping Address */
    .shipping-address-content {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .address-name, .address-phone, .address-line, .address-city {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        color: #374151;
    }

    .address-name i, .address-phone i, .address-line i, .address-city i {
        color: var(--color-secondary);
        font-size: 1.1rem;
        margin-top: 0.125rem;
        flex-shrink: 0;
    }

    .address-name strong {
        font-size: 1.1rem;
        color: var(--color-primary);
    }

    /* Order Summary */
    .order-summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid #F3F4F6;
    }

    .order-summary-item.discount {
        color: #059669;
    }

    .summary-label {
        color: #6B7280;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .summary-value {
        font-weight: 600;
        color: #1F2937;
    }

    .order-summary-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        margin-top: 0.5rem;
        border-bottom: 2px solid #E5E7EB;
    }

    .order-summary-total .summary-label {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1F2937;
    }

    .order-summary-total .summary-value.total {
        font-size: 1.5rem;
        color: var(--color-primary);
    }

    .coupon-badge {
        background: #D1FAE5;
        color: #065F46;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        font-weight: 500;
        margin-top: 1rem;
    }

    /* Payment Details */
    .payment-info-item {
        margin-bottom: 1.25rem;
    }

    .payment-info-item:last-child {
        margin-bottom: 0;
    }

    .payment-label {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: #6B7280;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .payment-code-wrapper {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .payment-code {
        flex: 1;
        background: #F9FAFB;
        padding: 0.5rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-family: 'Courier New', monospace;
        color: #1F2937;
        border: 1px solid #E5E7EB;
    }

    .btn-copy {
        padding: 0.5rem;
        background: #FFFFFF;
        border: 1px solid #D1D5DB;
        border-radius: 8px;
        color: #6B7280;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-copy:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #FFFFFF;
    }

    /* Tracking */
    .tracking-info {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .tracking-awb {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: #F9FAFB;
        border-radius: 12px;
        border: 1px solid #E5E7EB;
    }

    .tracking-awb i {
        font-size: 1.5rem;
        color: var(--color-secondary);
    }

    .tracking-label {
        display: block;
        font-size: 0.75rem;
        color: #6B7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.25rem;
    }

    .tracking-value {
        display: block;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--color-primary);
        font-family: 'Courier New', monospace;
    }

    .btn-tracking {
        background: var(--color-secondary);
        color: #FFFFFF;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
        
    }

    .btn-tracking:hover {
        background: var(--color-primary);
        color: #FFFFFF;
        transform: translateY(-1px);
    }

    /* Order Status Timeline Styles */
    .order-timeline {
        display: flex;
        flex-wrap: wrap;
        gap:0.5rem;
        padding: 1.5rem 0;
        position: relative;
    }

    .timeline-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        min-width: 120px;
        position: relative;
    }

    .timeline-marker {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e9ecef;
        color: #6c757d;
        font-size: 1.2rem;
        margin-bottom: 0.4rem;
        transition: all 0.3s ease;
        border: 3px solid #e9ecef;
        z-index: 2;
    }

    .timeline-item.active .timeline-marker {
        background-color: var(--color-primary, #114843);
        color: #ffffff;
        border-color: var(--color-primary, #114843);
        box-shadow: 0 0 0 4px rgba(17, 72, 67, 0.1);
    }

    .timeline-item.completed .timeline-marker {
        background-color: var(--color-primary);
        color: #ffffff;
        border-color: var(--color-primary);
    }

    .timeline-item.current .timeline-marker {
        background-color: var(--color-secondary, #114843);
        color: #ffffff;
        border-color: var(--color-secondary, #114843);
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(17, 72, 67, 0.4);
        }
        50% {
            box-shadow: 0 0 0 8px rgba(17, 72, 67, 0);
        }
    }

    .timeline-content {
        text-align: center;
    }

    .timeline-content h6 {
        font-size: 0.95rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 0.25rem;
    }

    .timeline-item.active .timeline-content h6 {
        color: var(--color-primary, #114843);
    }

    .timeline-item:not(.active) .timeline-content h6 {
        color: #6c757d;
    }

    .timeline-connector {
        position: absolute;
        top: 30px;
        left: calc(50% + 30px);
        width: calc(100% - 60px);
        height: 3px;
        background-color: #e9ecef;
        z-index: 1;
    }

    .timeline-connector.completed {
        background-color:var(--color-primary);
    }

    .timeline-item:last-child .timeline-connector {
        display: none;
    }

    /* Responsive Design */
    @media (max-width: 991.98px) {
        .order-item-row {
            grid-template-columns: 60px 1fr;
            gap: 1rem;
        }

        .order-item-qty, .order-item-price {
            grid-column: 2;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 0.5rem;
        }
    }

    @media (max-width: 768px) {
        .order-detail-title {
            font-size: 1.5rem;
        }

        .card-header-modern {
            padding: 1rem 1.1rem;
        }

        .card-header-modern h5 {
            font-size: 0.95rem;
        }

        /* .order-header-badges {
            width: 100%;
            margin-top: 1rem;
        } */

        .order-item-row {
            /* grid-template-columns: 1fr; */
            gap: 1rem;
            padding: 1.25rem 0;
        }

        .order-item-image {
            width: 50px;
            min-width: 50px;
            max-width: 50px;
            height: 50px;
        }

        .order-item-qty, .order-item-price {
            flex-direction: row;
            justify-content: space-between;
            padding: 0.75rem;
            background: #F9FAFB;
            border-radius: 8px;
        }
        .order-timeline {
            flex-direction: column;
            gap: 1rem;
        }

        .timeline-item {
            flex-direction: row;
            width: 100%;
            align-items: flex-start;
            padding-left: 1rem;
        }

        .timeline-marker {
            margin-bottom: 0;
            margin-right: 1rem;
            width: 50px;
            height: 50px;
            font-size: 1.2rem;
        }

        .timeline-content {
            text-align: left;
            flex: 1;
        }

        .timeline-connector {
            position: absolute;
            top: 50px;
            left: 35px;
            width: 3px;
            height: calc(100% + 1rem);
        }
    }
</style>
@endpush

@push('scripts')
<script>
    function copyToClipboard(text, button) {
        navigator.clipboard.writeText(text).then(function() {
            // Show success feedback
            const btn = button;
            const originalHTML = btn.innerHTML;
            btn.innerHTML = '<i class="bi bi-check"></i>';
            btn.style.background = '#10b981';
            btn.style.borderColor = '#10b981';
            btn.style.color = '#FFFFFF';
            
            setTimeout(function() {
                btn.innerHTML = originalHTML;
                btn.style.background = '#FFFFFF';
                btn.style.borderColor = '#D1D5DB';
                btn.style.color = '#6B7280';
            }, 2000);
        }).catch(function(err) {
            console.error('Failed to copy: ', err);
            alert('Failed to copy to clipboard');
        });
    }

    function reorderOrder(orderId) {
        if (confirm('Do you want to add all items from this order to your cart?')) {
            // Redirect to reorder functionality (can be implemented later)
            window.location.href = '/customer/orders/' + orderId + '/reorder';
        }
    }

    // Handle retry payment button
    document.addEventListener('DOMContentLoaded', function() {
        const retryButton = document.querySelector('.btn-retry-payment');
        if (retryButton) {
            retryButton.addEventListener('click', function() {
                const orderId = this.getAttribute('data-order-id');
                const originalText = this.innerHTML;
                
                // Disable button and show loading state
                this.disabled = true;
                this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Processing...';
                
                // Call retry payment endpoint
                fetch('/customer/orders/' + orderId + '/retry-payment', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                })
                .then(res => {
                    if (!res.ok) {
                        return res.json().then(err => {
                            throw new Error(err.error || 'Failed to initiate payment retry');
                        });
                    }
                    return res.json();
                })
                .then(data => {
                    if (data.error) {
                        alert(data.error);
                        retryButton.disabled = false;
                        retryButton.innerHTML = originalText;
                        return;
                    }

                    if (data.recovered && data.redirect) {
                        alert(data.message || 'Payment was already successful. Your order is confirmed.');
                        window.location.href = data.redirect;
                        return;
                    }
                    
                    // Load Razorpay script if not already loaded
                    if (typeof Razorpay === 'undefined') {
                        const script = document.createElement('script');
                        script.src = 'https://checkout.razorpay.com/v1/checkout.js';
                        script.onload = function() {
                            initializeRazorpayPayment(data, orderId, retryButton, originalText);
                        };
                        document.head.appendChild(script);
                    } else {
                        initializeRazorpayPayment(data, orderId, retryButton, originalText);
                    }
                })
                .catch(err => {
                    console.error('Retry payment error:', err);
                    alert(err.message || 'Failed to initiate payment retry. Please try again.');
                    retryButton.disabled = false;
                    retryButton.innerHTML = originalText;
                });
            });
        }
    });

    function initializeRazorpayPayment(data, orderId, button, originalText) {
        const options = {
            key: data.key,
            amount: data.amount,
            currency: data.currency,
            name: '{{ \App\Models\Setting::get("site_name", "KiyoKart") }}',
            description: 'Order Payment Retry',
            order_id: data.razorpay_order_id,
            handler: function(response) {
                const verifyUrl = '{{ route("checkout.razorpay.verify") }}';
                const csrfToken = '{{ csrf_token() }}';
                let attempts = 0;
                const maxAttempts = 3;
                function doVerify() {
                    attempts++;
                    const verifyPayload = {
                        razorpay_order_id: response.razorpay_order_id,
                        razorpay_payment_id: response.razorpay_payment_id,
                        razorpay_signature: response.razorpay_signature
                    };
                    return fetch(verifyUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(verifyPayload)
                    }).then(function(res) {
                        return res.json().then(function(result) {
                            if (!res.ok) return Promise.reject(new Error(result.error || 'Verification failed'));
                            return result;
                        });
                    });
                }
                function runVerify() {
                    doVerify()
                        .then(function(result) {
                            if (result.success) {
                                window.location.href = result.redirect || '/customer/orders/' + orderId;
                            } else {
                                alert(result.error || 'Payment verification failed');
                                button.disabled = false;
                                button.innerHTML = originalText;
                            }
                        })
                        .catch(function(err) {
                            if (attempts < maxAttempts) {
                                setTimeout(runVerify, 1500);
                            } else {
                                console.error('Payment verification error:', err);
                                alert('Payment verification failed. Please try again or contact support if the amount was deducted.');
                                button.disabled = false;
                                button.innerHTML = originalText;
                            }
                        });
                }
                runVerify();
            },
            prefill: {
                name: '{{ auth()->user()->name }}',
                email: '{{ auth()->user()->email }}',
                contact: '{{ auth()->user()->mobile }}'
            },
            theme: { color: '#13233c' },
            modal: {
                ondismiss: function() {
                    // Re-enable button if user closes payment modal
                    button.disabled = false;
                    button.innerHTML = originalText;
                }
            }
        };
        
        const rzp = new Razorpay(options);
        rzp.open();
    }
</script>
@endpush
@endsection