@extends('frontend.layouts.app')

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

@section('content')
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold"><i class="bi bi-bag-check me-2"></i>Order #{{ $order->order_number }}</h2>
        <a href="{{ route('orders') }}" class="btn btn-outline-secondary btn-sm">← Back to Orders</a>
    </div>

    <div class="row g-4">
        <div class="col-lg-8">
            <!-- Items -->
            <div class="card border-0 shadow-sm p-4 mb-3" style="border-radius:14px;">
                <h5 class="fw-bold mb-3">Order Items</h5>
                @foreach($order->items ?? [] as $item)
                <div class="d-flex align-items-center gap-3 mb-3 pb-3 border-bottom">
                    <img src="{{ optional($item->product)->image ? asset('storage/'.optional($item->product)->image) : 'https://via.placeholder.com/60?text=P' }}"
                         style="width:60px;height:60px;object-fit:cover;border-radius:8px;" alt="">
                    <div class="flex-grow-1">
                        <strong>{{ optional($item->product)->name }}</strong>
                        <p class="small text-muted mb-0">Qty: {{ $item->quantity }}</p>
                    </div>
                    <strong class="text-primary">Rs. {{ number_format(($item->price ?? 0) * $item->quantity, 2) }}</strong>
                </div>
                @endforeach
            </div>

            <!-- Shipping -->
            @if($order->shipment)
            <div class="card border-0 shadow-sm p-4" style="border-radius:14px;">
                <h5 class="fw-bold mb-3">Shipping Address</h5>
                <p class="mb-1"><strong>{{ $order->shipment->recipient_name }}</strong></p>
                <p class="mb-1 text-muted">{{ $order->shipment->street }}, {{ $order->shipment->city }}</p>
                <p class="mb-0 text-muted">Phone: {{ $order->shipment->phone }}</p>
            </div>
            @endif
        </div>

        <!-- Summary -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm p-4" style="border-radius:14px;">
                <h5 class="fw-bold mb-3">Order Summary</h5>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Status</span>
                    @php
                        $statusName = strtolower($order->status ?? 'pending');
                        $badgeClass = 'bg-warning text-dark';
                        if (str_contains($statusName, 'deliver')) $badgeClass = 'bg-success';
                        if (str_contains($statusName, 'cancel')) $badgeClass = 'bg-danger';
                        if (str_contains($statusName, 'return')) $badgeClass = 'bg-dark';
                        if (str_contains($statusName, 'ship')) $badgeClass = 'bg-info';
                        if (str_contains($statusName, 'confirm')) $badgeClass = 'bg-primary';
                    @endphp
                    <span class="badge {{ $badgeClass }} text-capitalize">
                        {{ $order->status ?? 'Pending' }}
                    </span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Order Date</span>
                    <span>{{ $order->created_at->format('M d, Y') }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Subtotal</span>
                    <span>Rs. {{ number_format($order->total_amount ?? 0, 2) }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Delivery</span>
                    <span>Rs. {{ number_format($order->delivery_charge ?? 0, 2) }}</span>
                </div>
                @if($order->discount_amount)
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Discount</span>
                    <span class="text-success">- Rs. {{ number_format($order->discount_amount, 2) }}</span>
                </div>
                @endif
                <hr>
                <div class="d-flex justify-content-between">
                    <strong>Total</strong>
                    <strong class="text-primary fs-5">Rs. {{ number_format($order->grand_total ?? 0, 2) }}</strong>
                </div>
                <div class="mt-3 d-grid gap-2">
                    @php
                        $canCancel = $order->canBeCancelled();
                    @endphp

                    @if($canCancel)
                        <button type="button" class="btn btn-outline-danger btn-sm fw-bold rounded-pill py-2" data-bs-toggle="modal" data-bs-target="#cancelOrderModal">
                            <i class="bi bi-x-circle me-1"></i> Cancel Order
                        </button>
                    @endif
                    
                    <div class="mt-2 small text-muted">
                        <p class="mb-1"><strong>Payment Method:</strong> <span class="text-dark">{{ strtoupper($order->payment_mode ?? 'N/A') }}</span></p>
                        <p class="mb-0"><strong>Payment Status:</strong> 
                            <span class="{{ ($order->payment_status ?? '') == 'completed' ? 'text-success' : 'text-warning' }} fw-bold">
                                {{ ucfirst($order->payment_status ?? 'pending') }}
                            </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Cancellation Modal -->
@if($order->canBeCancelled())
<div class="modal fade" id="cancelOrderModal" tabindex="-1" aria-labelledby="cancelOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow" style="border-radius: 15px;">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold" id="cancelOrderModalLabel">Cancel Order #{{ $order->order_number }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('orders.cancel', $order->id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Reason for Cancellation <span class="text-danger">*</span></label>
                        <textarea name="reason" class="form-control" rows="4" placeholder="Please tell us why you'd like to cancel this order..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-danger rounded-pill px-4 fw-bold">Cancel My Order</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@endsection