@extends('layouts.admin')

@section('title', 'Order Details')
@section('page-title', 'Order Details')

@section('content')
<section class="section">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4>Order #{{ $order->order_number }}</h4>
                    <a href="{{ route('admin.orders.index') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Orders
                    </a>
                </div>
                <div class="card-body">
                    <!-- Order Information -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h5>Order Information</h5>
                            <table class="table table-bordered">
                                <tr>
                                    <th>Order Number:</th>
                                    <td>{{ $order->order_number }}</td>
                                </tr>
                                <tr>
                                    <th>Status:</th>
                                    <td>
                                        <span class="badge bg-{{ $order->status === 'pending' ? 'warning' : ($order->status === 'confirmed' ? 'info' : ($order->status === 'accepted' ? 'primary' : ($order->status === 'dispatched' ? 'info' : ($order->status === 'delivered' ? 'success' : 'danger')))) }}">
                                            {{ ucfirst($order->status) }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Total Amount:</th>
                                    <td><strong>${{ number_format($order->total_amount, 2) }}</strong></td>
                                </tr>
                                <tr>
                                    <th>Order Date:</th>
                                    <td>{{ $order->created_at->format('M d, Y h:i A') }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h5>Customer Information</h5>
                            <table class="table table-bordered">
                                <tr>
                                    <th>Name:</th>
                                    <td>{{ $order->user->name }}</td>
                                </tr>
                                <tr>
                                    <th>Email:</th>
                                    <td>{{ $order->user->email }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- Payment Information -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card shadow-sm border-{{ $order->payment_status === 'confirmed' ? 'success' : ($order->payment_status === 'rejected' ? 'danger' : 'warning') }} border-2">
                                <div class="card-header bg-{{ $order->payment_status === 'confirmed' ? 'success' : ($order->payment_status === 'rejected' ? 'danger' : 'warning') }} text-white py-3">
                                    <h5 class="mb-0 text-white">
                                        <i class="bi bi-credit-card-2-front text-white"></i> Payment Information
                                    </h5>
                                </div>
                                <div class="card-body p-4">
                                    @if($order->payment_receipt_path)
                                        <div class="row">
                                            <div class="col-md-5">
                                                <div class="card bg-light border-0 h-100">
                                                    <div class="card-body">
                                                        <h6 class="text-muted mb-3">
                                                            <i class="bi bi-info-circle"></i> Payment Details
                                                        </h6>
                                                        <div class="mb-3">
                                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                                <span class="text-muted">Payment Amount:</span>
                                                                <strong class="fs-4 text-primary">${{ number_format($order->total_amount, 2) }}</strong>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3">
                                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                                <span class="text-muted">Payment Method:</span>
                                                                <span class="badge bg-{{ $order->payment_method === 'easypaisa' ? 'success' : ($order->payment_method === 'mcb' ? 'info' : 'primary') }} fs-6">
                                                                    <i class="bi bi-{{ $order->payment_method === 'easypaisa' ? 'wallet2' : ($order->payment_method === 'mcb' ? 'bank' : 'phone') }}"></i>
                                                                    {{ $order->payment_method === 'mcb' ? 'MCB IBAN' : ucfirst($order->payment_method) }}
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3">
                                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                                <span class="text-muted">Payment Status:</span>
                                                                @if($order->payment_status === 'pending')
                                                                    <span class="badge bg-warning fs-6">
                                                                        <i class="bi bi-clock"></i> Pending
                                                                    </span>
                                                                @elseif($order->payment_status === 'confirmed')
                                                                    <span class="badge bg-success fs-6">
                                                                        <i class="bi bi-check-circle"></i> Confirmed
                                                                    </span>
                                                                @elseif($order->payment_status === 'rejected')
                                                                    <span class="badge bg-danger fs-6">
                                                                        <i class="bi bi-x-circle"></i> Rejected
                                                                    </span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div class="mt-4">
                                                            <a href="{{ asset('storage/' . $order->payment_receipt_path) }}" target="_blank" class="btn btn-primary w-100">
                                                                <i class="bi bi-eye"></i> View Full Receipt
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-7">
                                                <div class="card border-0 bg-light h-100">
                                                    <div class="card-body text-center">
                                                        <h6 class="text-muted mb-3">
                                                            <i class="bi bi-receipt"></i> Payment Receipt
                                                        </h6>
                                                        <div class="mb-3">
                                                            <img src="{{ asset('storage/' . $order->payment_receipt_path) }}" alt="Payment Receipt" class="img-thumbnail shadow-sm" style="max-width: 100%; max-height: 400px; cursor: pointer;" onclick="window.open('{{ asset('storage/' . $order->payment_receipt_path) }}', '_blank')">
                                                        </div>
                                                        <p class="text-muted small mb-0">
                                                            Click on the image to view in full size
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        @if($order->payment_status === 'pending')
                                            <div class="row mt-4">
                                                <div class="col-12">
                                                    <div class="card bg-warning bg-opacity-10 border-warning">
                                                        <div class="card-body">
                                                            <h6 class="mb-3">
                                                                <i class="bi bi-exclamation-triangle text-warning"></i> Payment Action Required
                                                            </h6>
                                                            <p class="mb-3">Please review the payment receipt above and confirm or reject the payment.</p>
                                                            <div class="d-flex gap-2">
                                                                <form action="{{ route('admin.orders.confirm-payment', $order->id) }}" method="POST" class="d-inline">
                                                                    @csrf
                                                                    <button type="submit" class="btn btn-success btn-lg" onclick="return confirm('Are you sure you want to confirm this payment? This will update the order status to Confirmed.')">
                                                                        <i class="bi bi-check-circle"></i> Confirm Payment
                                                                    </button>
                                                                </form>
                                                                <form action="{{ route('admin.orders.reject-payment', $order->id) }}" method="POST" class="d-inline">
                                                                    @csrf
                                                                    <button type="submit" class="btn btn-danger btn-lg" onclick="return confirm('Are you sure you want to reject this payment? The order will remain pending.')">
                                                                        <i class="bi bi-x-circle"></i> Reject Payment
                                                                    </button>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @elseif($order->payment_status === 'confirmed')
                                            <div class="alert alert-success mt-3 mb-0" role="alert">
                                                <i class="bi bi-check-circle-fill me-2"></i>
                                                <strong>Payment Confirmed!</strong> This payment has been verified and the order status has been updated to Confirmed.
                                            </div>
                                        @elseif($order->payment_status === 'rejected')
                                            <div class="alert alert-danger mt-3 mb-0" role="alert">
                                                <i class="bi bi-x-circle-fill me-2"></i>
                                                <strong>Payment Rejected.</strong> This payment receipt was rejected. The order remains pending.
                                            </div>
                                        @endif
                                    @else
                                        <div class="alert alert-info d-flex align-items-center" role="alert">
                                            <i class="bi bi-info-circle fs-4 me-3"></i>
                                            <div>
                                                <strong>No Payment Receipt</strong>
                                                <p class="mb-0">No payment receipt has been uploaded for this order yet. The customer needs to upload a payment receipt before the order can be processed.</p>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Order Items -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5>Order Items</h5>
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Product</th>
                                        <th>Variant</th>
                                        <th>Quantity</th>
                                        <th>Price</th>
                                        <th>Subtotal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($order->items as $item)
                                    <tr>
                                        <td>{{ $item->product->name }}</td>
                                        <td>{{ $item->productVariant ? $item->productVariant->name : 'N/A' }}</td>
                                        <td>{{ $item->quantity }}</td>
                                        <td>${{ number_format($item->price, 2) }}</td>
                                        <td>${{ number_format($item->subtotal, 2) }}</td>
                                    </tr>
                                    @endforeach
                                    <tr>
                                        <th colspan="4" class="text-end">Total:</th>
                                        <th>${{ number_format($order->total_amount, 2) }}</th>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Addresses -->
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Shipping Address</h5>
                            <div class="card">
                                <div class="card-body">
                                    <pre class="mb-0">{{ $order->shipping_address }}</pre>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h5>Billing Address</h5>
                            <div class="card">
                                <div class="card-body">
                                    <pre class="mb-0">{{ $order->billing_address }}</pre>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if($order->notes)
                    <div class="row mt-4">
                        <div class="col-12">
                            <h5>Order Notes</h5>
                            <div class="card">
                                <div class="card-body">
                                    <p class="mb-0">{{ $order->notes }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    @if($order->tracking_number)
                    <div class="row mt-4">
                        <div class="col-12">
                            <h5>Delivery Information</h5>
                            <table class="table table-bordered">
                                <tr>
                                    <th>Delivery Company:</th>
                                    <td>{{ $order->delivery_company }}</td>
                                </tr>
                                <tr>
                                    <th>Tracking Number:</th>
                                    <td>{{ $order->tracking_number }}</td>
                                </tr>
                                @if($order->estimated_arrival_date)
                                <tr>
                                    <th>Estimated Arrival:</th>
                                    <td>{{ \Carbon\Carbon::parse($order->estimated_arrival_date)->format('M d, Y') }}</td>
                                </tr>
                                @endif
                            </table>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
@endsection