@extends('layouts.app')

@section('title', __('Order #:number', ['number' => $order->order_number]))

@php
    /*
     * Administrative totals follow the currency selected in Payment Settings.
     * The money() helper supplies the configured symbol and number format.
     */
    $displayCurrency = default_currency();

    /*
     * Some legacy date fields may be returned as strings instead of Carbon
     * instances. Parse the value safely before displaying it.
     */
    $formatAdminDate = static function (
        mixed $value,
        string $format = 'M d, Y H:i'
    ): string {
        if (blank($value)) {
            return __('N/A');
        }

        try {
            return \Illuminate\Support\Carbon::parse($value)
                ->format($format);
        } catch (\Throwable) {
            return __('N/A');
        }
    };
@endphp

@section('content')
<div class="container-fluid px-4">
    {{-- Breadcrumb --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.orders.index') }}">Orders</a></li>
                    <li class="breadcrumb-item active" aria-current="page">#{{ $order->order_number }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 fw-700">Order #{{ $order->order_number }}</h1>
        </div>
        <div class="d-flex gap-2">
            @if($availableActions['can_generate_invoice'] ?? false)
                <form action="{{ route('admin.orders.generate-invoice', $order) }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-sm btn-info">
                        <i class="fas fa-file-invoice me-1"></i> Generate Invoice
                    </button>
                </form>
            @endif
            @if($availableActions['has_invoice'] ?? false)
                <a href="{{ route('admin.orders.invoice', $order) }}" class="btn btn-sm btn-secondary" target="_blank">
                    <i class="fas fa-file-invoice me-1"></i> View Invoice
                </a>
            @endif
            <a href="{{ route('admin.orders.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Back
            </a>
        </div>
    </div>

    {{-- Order Status Banner --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-3 align-items-center">
                <div class="col-md-8">
                    <div class="d-flex flex-wrap gap-3 align-items-center">
                        <div>
                            <span class="text-muted small text-uppercase d-block">Order Status</span>
                            <span class="badge fs-6 px-3 py-2
                                @if($order->status == 0) bg-warning text-dark
                                @elseif($order->status == 1) bg-success
                                @elseif($order->status == 2) bg-danger
                                @else bg-secondary
                                @endif
                            ">
                                @if($order->status == 0) Active
                                @elseif($order->status == 1) Completed
                                @elseif($order->status == 2) Cancelled
                                @else Unknown
                                @endif
                            </span>
                        </div>
                        <div>
                            <span class="text-muted small text-uppercase d-block">Payment Status</span>
                            <span class="badge fs-6 px-3 py-2
                                @if($order->payment_status === 'payment_received') bg-success
                                @elseif($order->payment_status === 'pending') bg-warning text-dark
                                @elseif($order->payment_status === 'payment_failed') bg-danger
                                @elseif($order->payment_status === 'refunded') bg-info
                                @else bg-secondary
                                @endif
                            ">
                                {{ ucfirst(str_replace('_', ' ', $order->payment_status ?? 'N/A')) }}
                            </span>
                        </div>
                        <div>
                            <span class="text-muted small text-uppercase d-block">Payment Method</span>
                            <span class="fw-600">{{ $order->payment_method ?? 'N/A' }}</span>
                        </div>
                        <div>
                            <span class="text-muted small text-uppercase d-block">Total</span>
                            <span class="fw-700 fs-5">
                                {{ money($order->price_total ?? 0, $displayCurrency) }}
                            </span>
                        </div>
                        <div>
                            <span class="text-muted small text-uppercase d-block">Date</span>
                            <span>{{ $formatAdminDate($order->created_at) }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-md-end">
                    @if($availableActions['can_cancel'] ?? false)
                        <button type="button" class="btn btn-danger" onclick="confirmCancel({{ $order->id }})">
                            <i class="fas fa-times-circle me-1"></i> Cancel Order
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Stats Row --}}
    <div class="row g-3 mb-4">
        @php
            $detailStats = [
                ['label' => 'Total Items', 'value' => $stats['items_count'] ?? 0, 'icon' => 'fa-box', 'color' => 'primary'],
                ['label' => 'Total Quantity', 'value' => $stats['total_items'] ?? 0, 'icon' => 'fa-boxes', 'color' => 'info'],
                ['label' => 'Sellers', 'value' => $stats['sellers_count'] ?? 0, 'icon' => 'fa-store', 'color' => 'warning'],
                ['label' => 'Subtotal', 'value' => money($stats['subtotal'] ?? 0, $displayCurrency), 'icon' => 'fa-shopping-cart', 'color' => 'secondary'],
                ['label' => 'VAT', 'value' => money($stats['vat'] ?? 0, $displayCurrency), 'icon' => 'fa-percent', 'color' => 'info'],
                ['label' => 'Shipping', 'value' => money($stats['shipping'] ?? 0, $displayCurrency), 'icon' => 'fa-truck', 'color' => 'warning'],
                ['label' => 'Discount', 'value' => money($order->coupon_discount ?? 0, $displayCurrency), 'icon' => 'fa-tag', 'color' => 'danger'],
                ['label' => 'Total Refunded', 'value' => money($stats['total_refunded'] ?? 0, $displayCurrency), 'icon' => 'fa-undo', 'color' => 'danger'],
            ];
        @endphp

        @foreach($detailStats as $stat)
            <div class="col-xl-3 col-lg-6 col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-muted mb-1 small fw-600 text-uppercase">{{ $stat['label'] }}</p>
                                <h5 class="mb-0 fw-700">{{ $stat['value'] }}</h5>
                            </div>
                            <div class="rounded-3 p-2" style="background: rgba(var(--bs-{{ $stat['color'] }}-rgb),0.1);">
                                <i class="fas {{ $stat['icon'] }} text-{{ $stat['color'] }}"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Tabs --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <ul class="nav nav-tabs nav-tabs-custom mb-3" id="orderTabs" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" id="items-tab" data-bs-toggle="tab" data-bs-target="#items" type="button" role="tab">
                        <i class="fas fa-box me-1"></i> Order Items
                        <span class="badge bg-secondary ms-1">{{ $order->items->count() }}</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="shipping-tab" data-bs-toggle="tab" data-bs-target="#shipping" type="button" role="tab">
                        <i class="fas fa-truck me-1"></i> Shipping
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="payments-tab" data-bs-toggle="tab" data-bs-target="#payments" type="button" role="tab">
                        <i class="fas fa-credit-card me-1"></i> Payments
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="refunds-tab" data-bs-toggle="tab" data-bs-target="#refunds" type="button" role="tab">
                        <i class="fas fa-undo me-1"></i> Refunds
                        <span class="badge bg-secondary ms-1">{{ $refunds->count() }}</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="earnings-tab" data-bs-toggle="tab" data-bs-target="#earnings" type="button" role="tab">
                        <i class="fas fa-coins me-1"></i> Earnings
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="timeline-tab" data-bs-toggle="tab" data-bs-target="#timeline" type="button" role="tab">
                        <i class="fas fa-history me-1"></i> Timeline
                    </button>
                </li>
            </ul>

            <div class="tab-content">
                {{-- Items Tab --}}
                <div class="tab-pane fade show active" id="items" role="tabpanel">
                    @include('admin.orders.partials.tab-items', [
                        'order' => $order,
                        'itemStatuses' => $itemStatuses,
                    ])
                </div>

                {{-- Shipping Tab --}}
                <div class="tab-pane fade" id="shipping" role="tabpanel">
                    @include('admin.orders.partials.tab-shipping', ['shippingInfo' => $shippingInfo])
                </div>

                {{-- Payments Tab --}}
                <div class="tab-pane fade" id="payments" role="tabpanel">
                    @include('admin.orders.partials.tab-payments', ['paymentBreakdown' => $paymentBreakdown])
                </div>

                {{-- Refunds Tab --}}
                <div class="tab-pane fade" id="refunds" role="tabpanel">
                    @include('admin.orders.partials.tab-refunds', ['refunds' => $refunds])
                </div>

                {{-- Earnings Tab --}}
                <div class="tab-pane fade" id="earnings" role="tabpanel">
                    @include('admin.orders.partials.tab-earnings', [
                        'earnings' => $earnings,
                        'affiliateEarnings' => $affiliateEarnings,
                        'sellerBreakdown' => $sellerBreakdown,
                    ])
                </div>

                {{-- Timeline Tab --}}
                <div class="tab-pane fade" id="timeline" role="tabpanel">
                    @include('admin.orders.partials.tab-timeline', ['timeline' => $timeline])
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Cancel Modal --}}
<div class="modal fade" id="cancelModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="" method="POST" id="cancelForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Cancel Order #{{ $order->order_number }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-600">Reason for Cancellation <span class="text-danger">*</span></label>
                        <textarea name="reason" class="form-control" rows="4" required
                                  placeholder="Please provide a detailed reason for cancelling this order..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-danger">Cancel Order</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Tracking Modal --}}
<div class="modal fade" id="trackingModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="" method="POST" id="trackingForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add Tracking Information</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="order_item_id" id="trackingItemId">
                    <div class="mb-3">
                        <label class="form-label fw-600">Tracking Number <span class="text-danger">*</span></label>
                        <input type="text" name="shipping_tracking_number" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-600">Shipping Method</label>
                        <input type="text" name="shipping_method" class="form-control" placeholder="e.g., DHL, FedEx, UPS">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-600">Tracking URL</label>
                        <input type="url" name="shipping_tracking_url" class="form-control" placeholder="https://...">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Add Tracking</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    .nav-tabs-custom .nav-link {
        color: #6c757d;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem 0.5rem 0 0;
    }
    .nav-tabs-custom .nav-link:hover {
        color: #212529;
        background: #f8f9fa;
    }
    .nav-tabs-custom .nav-link.active {
        color: var(--bs-primary);
        background: transparent;
        border-bottom: 3px solid var(--bs-primary);
    }
    .nav-tabs-custom .nav-link i {
        font-size: 0.9rem;
    }
</style>
@endpush

@push('scripts')
<script>
function confirmCancel(orderId) {
    var form = document.getElementById('cancelForm');
    form.action = '{{ route("admin.orders.cancel", ":id") }}'.replace(':id', orderId);
    new bootstrap.Modal(document.getElementById('cancelModal')).show();
}

function showTrackingModal(itemId) {
    document.getElementById('trackingItemId').value = itemId;
    var form = document.getElementById('trackingForm');
    form.action = '{{ route("admin.orders.items.tracking", [":order", ":item"]) }}'
        .replace(':order', {{ $order->id }})
        .replace(':item', itemId);
    new bootstrap.Modal(document.getElementById('trackingModal')).show();
}

function confirmStatusChange(itemId, status) {
    var message = 'Are you sure you want to mark this item as ' + status + '?';
    if (!confirm(message)) return;

    var form = document.getElementById('statusForm_' + itemId);
    if (form) {
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'order_status';
        input.value = status;
        form.appendChild(input);
        form.submit();
    }
}
</script>
@endpush