@extends('layouts.app')

@section('title', 'Order Details - ' . $order->order_number)

@section('content')
<div class="hero-section">
    <div class="container">
        <h1 class="display-4 fw-bold">Order {{ $order->order_number }}</h1>
        <p class="lead">{{ $order->created_at->format('M d, Y \a\t h:i A') }}</p>
    </div>
</div>

<div class="container mb-5">
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-0 bg-light">
                <div class="card-body">
                    <h6 class="text-muted">Order Status</h6>
                    <h4>
                        <span class="badge 
                            @if($order->status == 'pending') bg-warning
                            @elseif($order->status == 'processing') bg-info
                            @elseif($order->status == 'shipped') bg-primary
                            @elseif($order->status == 'delivered') bg-success
                            @elseif($order->status == 'cancelled') bg-danger
                            @endif
                        ">
                            {{ ucfirst($order->status) }}
                        </span>
                    </h4>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 bg-light">
                <div class="card-body">
                    <h6 class="text-muted">Order Date</h6>
                    <h4>{{ $order->created_at->format('M d, Y') }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 bg-light">
                <div class="card-body">
                    <h6 class="text-muted">Total Amount</h6>
                    <h4>{{ \App\Support\Currency::symbol() }}{{ number_format($order->total, 2) }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 bg-light">
                <div class="card-body">
                    <h6 class="text-muted">Items Count</h6>
                    <h4>{{ $order->items->count() }}</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Order Items</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead class="table-light">
                                <tr>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Quantity</th>
                                    <th>Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($order->items as $item)
                                    <tr>
                                        <td>
                                            <strong>{{ $item->product_name }}</strong>
                                            <br>
                                            <small class="text-muted">SKU: {{ $item->product_sku }}</small>
                                        </td>
                                        <td>{{ \App\Support\Currency::symbol() }}{{ number_format($item->price, 2) }}</td>
                                        <td>{{ $item->quantity }}</td>
                                        <td class="fw-bold">{{ \App\Support\Currency::symbol() }}{{ number_format($item->total, 2) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">Order Tracking</h5>
                </div>
                <div class="card-body">
                    @if($order->tracking->count() > 0)
                        <div class="timeline">
                            @foreach($order->tracking()->latest()->get() as $track)
                                <div class="mb-4">
                                    <div class="d-flex">
                                        <div class="me-3">
                                            <div class="bg-primary text-white rounded-circle p-2" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                                <i class="bi bi-check-lg"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <h6 class="mb-1">{{ ucfirst(str_replace('_', ' ', $track->status)) }}</h6>
                                            <p class="text-muted mb-1">{{ $track->description }}</p>
                                            @if($track->location)
                                                <small class="text-muted"><i class="bi bi-geo-alt"></i> {{ $track->location }}</small>
                                            @endif
                                            <p class="text-muted small">{{ $track->created_at->format('M d, Y h:i A') }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-muted">No tracking information available yet</p>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-4">
            @php
                $payment = $order->transactions->sortByDesc('created_at')->first();
                $paymentMethod = $payment?->paymentMethod;
                $bankTransferDetails = data_get($payment?->response_data, 'bank_transfer', []);
                $bankName = data_get($bankTransferDetails, 'bank_name') ?: data_get($paymentMethod?->settings, 'bank_name');
                $accountName = data_get($bankTransferDetails, 'account_name') ?: data_get($paymentMethod?->settings, 'account_name');
                $accountNumber = data_get($bankTransferDetails, 'account_number') ?: data_get($paymentMethod?->settings, 'account_number');
                $transferInstructions = data_get($bankTransferDetails, 'instructions') ?: data_get($paymentMethod?->settings, 'instructions');
            @endphp

            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0">Payment Details</h5>
                </div>
                <div class="card-body">
                    @if($payment)
                        <div class="d-flex justify-content-between mb-2">
                            <span>Method:</span>
                            <strong>{{ $paymentMethod?->name ?? 'N/A' }}</strong>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>Status:</span>
                            <span class="badge
                                @if($payment->status === 'completed') bg-success
                                @elseif($payment->status === 'pending') bg-warning text-dark
                                @elseif($payment->status === 'cancelled') bg-secondary
                                @else bg-danger @endif
                            ">{{ ucfirst($payment->status) }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>Amount:</span>
                            <strong>{{ \App\Support\Currency::symbol() }}{{ number_format($payment->amount, 2) }}</strong>
                        </div>
                        <div class="mb-2">
                            <span class="text-muted">Transaction Ref:</span>
                            <div class="small fw-semibold">{{ $payment->transaction_id }}</div>
                        </div>
                        @if($payment->reference_number)
                            <div class="mb-2">
                                <span class="text-muted">Gateway Ref:</span>
                                <div class="small fw-semibold">{{ $payment->reference_number }}</div>
                            </div>
                        @endif
                        @if($payment->notes)
                            <div class="small text-muted mb-2">{{ $payment->notes }}</div>
                        @endif
                        @if($payment->processed_at)
                            <div class="small text-muted">Processed: {{ $payment->processed_at->format('M d, Y h:i A') }}</div>
                        @endif

                        @if($paymentMethod && $paymentMethod->type === 'bank_transfer')
                            <hr>
                            <h6 class="mb-2">Bank Transfer Instructions</h6>
                            @if($bankName)
                                <div class="small mb-1"><strong>Bank:</strong> {{ $bankName }}</div>
                            @endif
                            @if($accountName)
                                <div class="small mb-1"><strong>Account Name:</strong> {{ $accountName }}</div>
                            @endif
                            @if($accountNumber)
                                <div class="small mb-1"><strong>Account Number:</strong> {{ $accountNumber }}</div>
                            @endif
                            @if($transferInstructions)
                                <div class="small text-muted mt-2">{{ $transferInstructions }}</div>
                            @else
                                <div class="small text-muted mt-2">After transfer, contact support with your order number and transfer reference.</div>
                            @endif
                        @endif
                    @else
                        <p class="text-muted mb-0">No payment record available yet.</p>
                    @endif
                </div>
            </div>

            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">Order Summary</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Subtotal:</span>
                        <strong>{{ \App\Support\Currency::symbol() }}{{ number_format($order->subtotal, 2) }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Tax:</span>
                        <strong>{{ \App\Support\Currency::symbol() }}{{ number_format($order->tax, 2) }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Shipping:</span>
                        <strong>{{ \App\Support\Currency::symbol() }}{{ number_format($order->shipping, 2) }}</strong>
                    </div>
                    @if($order->discount > 0)
                        <div class="d-flex justify-content-between mb-2">
                            <span>Discount:</span>
                            <strong class="text-success">-{{ \App\Support\Currency::symbol() }}{{ number_format($order->discount, 2) }}</strong>
                        </div>
                    @endif
                    <hr>
                    <div class="d-flex justify-content-between">
                        <span class="h5">Total:</span>
                        <strong class="h5">{{ \App\Support\Currency::symbol() }}{{ number_format($order->total, 2) }}</strong>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">Shipping Address</h5>
                </div>
                <div class="card-body">
                    <p class="mb-0">{{ $order->shipping_address }}</p>
                </div>
            </div>

            <div class="d-grid gap-2">
                <a href="{{ route('user.orders.invoice', $order) }}" class="btn btn-outline-primary">
                    <i class="bi bi-file-earmark-pdf"></i> Download Invoice
                </a>
                @if($order->status == 'pending')
                    <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#cancelModal">
                        <i class="bi bi-x-circle"></i> Cancel Order
                    </button>
                @endif
                <a href="{{ route('user.orders.index') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Back to Orders
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Cancel Order Modal -->
<div class="modal fade" id="cancelModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Cancel Order</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to cancel this order? This action cannot be undone.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No, Keep It</button>
                <form action="{{ route('user.orders.cancel', $order) }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-danger">Yes, Cancel Order</button>
                </form>
            </div>
        </div>
    </div>
</div>

@if(session('success') && str_contains(strtolower(session('success')), 'order placed'))
<script>
    localStorage.removeItem('store_cart');
    if (window.cartManager) {
        window.cartManager.updateCartDropdown();
    }
</script>
@endif
@endsection