@extends('layouts.app')

@section('title', 'Detail Pesanan #' . $order->order_number)

@section('content')
<div class="container py-4">
    <div class="row">
        <div class="col-md-12">
            <!-- Breadcrumb -->
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Beranda</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('customer.orders.index') }}">Pesanan Saya</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Pesanan #{{ $order->order_number }}</li>
                </ol>
            </nav>

            <!-- Order Header -->
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h4 class="mb-1">Pesanan #{{ $order->order_number }}</h4>
                            <p class="text-muted mb-0">
                                Dibuat pada {{ $order->created_at->format('d M Y H:i') }}
                            </p>
                        </div>
                        <div class="col-md-6 text-md-end">
                            {!! $order->status_badge !!}
                            @if($order->order_status == 'pending')
                                <button class="btn btn-danger btn-sm ms-2" onclick="cancelOrder({{ $order->id }})">
                                    <i class="fas fa-times"></i> Batalkan Pesanan
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order Timeline -->
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-4">Status Pesanan</h5>
                    <div class="timeline">
                        @foreach($statusSteps as $status => $step)
                            <div class="timeline-item {{ $step['completed'] ? 'completed' : '' }} {{ $step['current'] ? 'current' : '' }}">
                                <div class="timeline-marker">
                                    @if($step['completed'])
                                        <i class="fas fa-check-circle"></i>
                                    @else
                                        <i class="far fa-circle"></i>
                                    @endif
                                </div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">{{ $step['label'] }}</h6>
                                    @if($status == 'pending' && $step['completed'])
                                        <small class="text-muted">{{ $order->created_at->format('d M Y H:i') }}</small>
                                    @elseif($status == 'paid' && $order->paid_at)
                                        <small class="text-muted">{{ $order->paid_at->format('d M Y H:i') }}</small>
                                    @elseif($status == 'shipped' && $order->shipped_at)
                                        <small class="text-muted">{{ $order->shipped_at->format('d M Y H:i') }}</small>
                                    @elseif($status == 'delivered' && $order->delivered_at)
                                        <small class="text-muted">{{ $order->delivered_at->format('d M Y H:i') }}</small>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Order Items -->
                <div class="col-lg-8">
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="card-title mb-3">Produk yang Dipesan</h5>
                            
                            @foreach($order->items as $item)
                                <div class="order-item mb-3 pb-3 {{ !$loop->last ? 'border-bottom' : '' }}">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <img src="{{ $item->product_image ?? asset('images/no-image.png') }}" 
                                                 alt="{{ $item->product_name }}"
                                                 class="order-item-image">
                                        </div>
                                        <div class="col">
                                            <h6 class="mb-1">{{ $item->product_name }}</h6>
                                            <small class="text-muted">SKU: {{ $item->product_sku }}</small>
                                            
                                            @if($item->variants)
                                                <div class="product-variants mt-1">
                                                    @foreach($item->variants as $key => $value)
                                                        <small class="badge bg-light text-dark me-1">
                                                            {{ $key }}: {{ $value }}
                                                        </small>
                                                    @endforeach
                                                </div>
                                            @endif
                                            
                                            <div class="mt-2">
                                                <span class="fw-bold">Rp {{ number_format($item->price, 0, ',', '.') }}</span>
                                                <span class="text-muted mx-2">x</span>
                                                <span>{{ $item->quantity }}</span>
                                                <span class="text-muted mx-2">=</span>
                                                <span class="fw-bold text-primary">Rp {{ number_format($item->total, 0, ',', '.') }}</span>
                                            </div>
                                        </div>
                                        @if($order->order_status == 'delivered' && !$item->review)
                                            <div class="col-auto">
                                                <button class="btn btn-outline-primary btn-sm" 
                                                        onclick="writeReview({{ $item->product_id }})">
                                                    <i class="fas fa-star"></i> Beri Review
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Shipping Information -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="card-title mb-3">Informasi Pengiriman</h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="shipping-info">
                                        <p class="mb-2">
                                            <i class="fas fa-user text-muted me-2"></i>
                                            <strong>Penerima:</strong> {{ Auth::user()->name }}
                                        </p>
                                        <p class="mb-2">
                                            <i class="fas fa-phone text-muted me-2"></i>
                                            <strong>Telepon:</strong> {{ $order->shipping_phone }}
                                        </p>
                                        <p class="mb-2">
                                            <i class="fas fa-map-marker-alt text-muted me-2"></i>
                                            <strong>Alamat:</strong> {{ $order->shipping_address }}
                                        </p>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    @if($order->shipping_courier)
                                        <p class="mb-2">
                                            <i class="fas fa-truck text-muted me-2"></i>
                                            <strong>Kurir:</strong> {{ strtoupper($order->shipping_courier) }}
                                        </p>
                                    @endif
                                    
                                    @if($order->tracking_number)
                                        <p class="mb-2">
                                            <i class="fas fa-barcode text-muted me-2"></i>
                                            <strong>No. Resi:</strong> 
                                            <a href="#" class="text-primary" onclick="trackOrder('{{ $order->tracking_number }}')">
                                                {{ $order->tracking_number }}
                                            </a>
                                        </p>
                                    @endif
                                    
                                    @if($order->shipped_at)
                                        <p class="mb-2">
                                            <i class="fas fa-calendar-alt text-muted me-2"></i>
                                            <strong>Tanggal Kirim:</strong> {{ $order->shipped_at->format('d M Y H:i') }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Order Summary -->
                <div class="col-lg-4">
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="card-title mb-3">Ringkasan Pesanan</h5>
                            
                            <div class="summary-item">
                                <span>Subtotal</span>
                                <span>Rp {{ number_format($order->subtotal, 0, ',', '.') }}</span>
                            </div>
                            
                            <div class="summary-item">
                                <span>Ongkos Kirim</span>
                                <span>Rp {{ number_format($order->shipping_cost, 0, ',', '.') }}</span>
                            </div>
                            
                            @if($order->discount > 0)
                                <div class="summary-item text-success">
                                    <span>Diskon</span>
                                    <span>- Rp {{ number_format($order->discount, 0, ',', '.') }}</span>
                                </div>
                            @endif
                            
                            @if($order->tax > 0)
                                <div class="summary-item">
                                    <span>Pajak</span>
                                    <span>Rp {{ number_format($order->tax, 0, ',', '.') }}</span>
                                </div>
                            @endif
                            
                            <hr>
                            
                            <div class="summary-item total">
                                <span>Total Pembayaran</span>
                                <span class="text-primary fw-bold">Rp {{ number_format($order->total, 0, ',', '.') }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Information -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="card-title mb-3">Informasi Pembayaran</h5>
                            
                            <p class="mb-2">
                                <strong>Metode Pembayaran:</strong><br>
                                {{ ucfirst(str_replace('_', ' ', $order->payment_method)) }}
                            </p>
                            
                            <p class="mb-2">
                                <strong>Status Pembayaran:</strong><br>
                                @if($order->payment_status == 'paid')
                                    <span class="badge bg-success">Lunas</span>
                                    @if($order->paid_at)
                                        <small class="d-block text-muted mt-1">
                                            Dibayar: {{ $order->paid_at->format('d M Y H:i') }}
                                        </small>
                                    @endif
                                @elseif($order->payment_status == 'pending')
                                    <span class="badge bg-warning">Menunggu Pembayaran</span>
                                @else
                                    <span class="badge bg-danger">{{ $order->payment_status }}</span>
                                @endif
                            </p>
                            
                            @if($order->order_status == 'pending')
                                <button class="btn btn-primary w-100 mt-3" onclick="payNow({{ $order->id }})">
                                    <i class="fas fa-credit-card"></i> Bayar Sekarang
                                </button>
                            @endif
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                @if($order->order_status == 'delivered')
                                    <button class="btn btn-outline-success" onclick="confirmReceived({{ $order->id }})">
                                        <i class="fas fa-check-circle"></i> Konfirmasi Pesanan Diterima
                                    </button>
                                @endif
                                
                                <button class="btn btn-outline-secondary" onclick="contactSupport()">
                                    <i class="fas fa-headset"></i> Bantuan
                                </button>
                                
                                <a href="{{ route('customer.orders.index') }}" class="btn btn-outline-primary">
                                    <i class="fas fa-arrow-left"></i> Kembali ke Pesanan Saya
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Timeline Styles */
    .timeline {
        position: relative;
        padding: 20px 0;
    }
    
    .timeline-item {
        display: flex;
        margin-bottom: 30px;
        position: relative;
    }
    
    .timeline-marker {
        width: 40px;
        height: 40px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        z-index: 1;
    }
    
    .timeline-item.completed .timeline-marker {
        color: #28a745;
    }
    
    .timeline-item.current .timeline-marker {
        color: #007bff;
    }
    
    .timeline-item:not(:last-child)::before {
        content: '';
        position: absolute;
        left: 19px;
        top: 40px;
        bottom: -30px;
        width: 2px;
        background: #dee2e6;
    }
    
    .timeline-item.completed:not(:last-child)::before {
        background: #28a745;
    }
    
    .timeline-content {
        flex: 1;
        padding-bottom: 10px;
    }
    
    /* Order Item Image */
    .order-item-image {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
    }
    
    /* Summary Styles */
    .summary-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        font-size: 14px;
    }
    
    .summary-item.total {
        font-size: 18px;
        font-weight: bold;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .timeline-item {
            margin-bottom: 20px;
        }
        
        .timeline-marker {
            width: 30px;
            height: 30px;
            font-size: 14px;
        }
        
        .timeline-item:not(:last-child)::before {
            left: 14px;
        }
        
        .order-item-image {
            width: 60px;
            height: 60px;
        }
    }
</style>

<script>
function cancelOrder(orderId) {
    if (confirm('Apakah Anda yakin ingin membatalkan pesanan ini?')) {
        // Implement cancel order logic
        fetch(`/customer/orders/${orderId}/cancel`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        }).then(response => response.json())
          .then(data => {
              if (data.success) {
                  location.reload();
              } else {
                  alert('Gagal membatalkan pesanan');
              }
          });
    }
}

function payNow(orderId) {
    // Redirect to payment page
    window.location.href = `/payment/${orderId}`;
}

function confirmReceived(orderId) {
    if (confirm('Konfirmasi bahwa pesanan telah diterima dengan baik?')) {
        // Implement confirm received logic
        fetch(`/customer/orders/${orderId}/confirm`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        }).then(response => response.json())
          .then(data => {
              if (data.success) {
                  location.reload();
              } else {
                  alert('Gagal mengkonfirmasi pesanan');
              }
          });
    }
}

function writeReview(productId) {
    // Redirect to review page
    window.location.href = `/product/${productId}/review`;
}

function trackOrder(trackingNumber) {
    // Implement tracking logic
    window.open(`/track-order/${trackingNumber}`, '_blank');
}

function contactSupport() {
    // Implement contact support logic
    window.location.href = '/contact-support';
}
</script>
@endsection