@extends('admin.master')

@section('content')
<style>
    .order-details-page .page-title {
        font-size: 26px;
        font-weight: 700;
        color: #1f2937;
    }

    .order-details-page .card {
        border: 1px solid #dbe3ea;
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
        overflow: hidden;
        margin-bottom: 20px;
    }

    .order-details-page .card-header {
        background: #f8fafc;
        border-bottom: 1px solid #dbe3ea;
        font-weight: 700;
        color: #1f2937;
        padding: 14px 18px;
    }

    .order-details-page .table {
        margin-bottom: 0;
    }

    .order-details-page .table th,
    .order-details-page .table td {
        border: 1px solid #e5e7eb !important;
        vertical-align: middle;
        padding: 12px 14px;
    }

    .order-details-page .table th {
        background: #f9fafb;
        width: 220px;
        font-weight: 600;
        color: #111827;
    }

    .order-details-page .info-table td {
        color: #374151;
        font-weight: 500;
    }

    .order-details-page .table thead th {
        background: #0f5f8f;
        color: #fff;
        border-color: #dbe3ea !important;
        white-space: nowrap;
    }

    .order-details-page .summary-box {
        background: #f8fafc;
        border: 1px dashed #cfd8e3;
        border-radius: 10px;
        padding: 14px 16px;
    }

    .order-details-page .summary-box p {
        margin-bottom: 8px;
        color: #374151;
        font-size: 14px;
    }

    .order-details-page .summary-box strong {
        color: #111827;
    }

    .order-details-page .form-label {
        font-weight: 600;
        color: #374151;
    }

    .order-details-page .form-control,
    .order-details-page .form-select {
        border: 1px solid #cfd8e3;
        border-radius: 10px;
        min-height: 36px;
        padding: 3px 10px;
    }

    .order-details-page .form-control:focus,
    .order-details-page .form-select:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.12);
    }

    .order-details-page .badge-status {
        background: #fff7e6;
        color: #b26a00;
        border: 1px solid #ffe0a3;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .order-details-page .btn {
        border-radius: 10px;
        font-weight: 600;
    }

    .order-details-page .section-icon {
        color: #0d6efd;
        margin-right: 8px;
    }
</style>

<div class="container-fluid py-4 order-details-page">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-3">
        <h3 class="page-title mb-0">
            <i class="fa-solid fa-file-invoice section-icon"></i>Order Details
        </h3>

        <a href="{{ route('admin.orders.index') }}" class="btn btn-secondary">
            <i class="fa-solid fa-arrow-left me-2"></i>Back
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm">
            <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
        </div>
    @endif

    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <i class="fa-solid fa-circle-info section-icon"></i>Order Information
                </div>
                <div class="card-body p-0">
                    <table class="table info-table">
                        <tr><th><i class="fa-solid fa-hashtag me-2"></i>Order No</th><td>{{ $order->order_number }}</td></tr>
                        <tr><th><i class="fa-solid fa-user me-2"></i>Customer</th><td>{{ $order->name }}</td></tr>
                        <tr><th><i class="fa-solid fa-phone me-2"></i>Phone</th><td>{{ $order->phone }}</td></tr>
                        <tr><th><i class="fa-solid fa-location-dot me-2"></i>Address</th><td>{{ $order->full_address }}</td></tr>
                        <tr><th><i class="fa-solid fa-wallet me-2"></i>Subtotal</th><td>৳{{ number_format($order->subtotal, 2) }}</td></tr>
                        <tr><th><i class="fa-solid fa-tags me-2"></i>Discount</th><td>৳{{ number_format($order->discount, 2) }}</td></tr>
                        <tr><th><i class="fa-solid fa-truck me-2"></i>Shipping</th><td>৳{{ number_format($order->shipping_cost, 2) }}</td></tr>
                        <tr><th><i class="fa-solid fa-bangladeshi-taka-sign me-2"></i>Total</th><td><strong>৳{{ number_format($order->total, 2) }}</strong></td></tr>
                        <tr><th><i class="fa-solid fa-credit-card me-2"></i>Payment</th><td>{{ strtoupper($order->payment_method) }} / {{ ucfirst($order->payment_status) }}</td></tr>
                        <tr><th><i class="fa-solid fa-signal me-2"></i>Status</th><td><span class="badge-status">{{ ucfirst(str_replace('_', ' ', $order->status)) }}</span></td></tr>
                    </table>
                </div>
            </div>

            @foreach($order->subOrders as $subOrder)
                <div class="card">
                    <div class="card-header">
                        <i class="fa-solid fa-store section-icon"></i>
                        {{ $subOrder->sub_order_number }} - {{ $subOrder->shop?->shop_name }}
                    </div>
                    <div class="card-body">
                        <div class="summary-box mb-3">
                            <p><strong><i class="fa-solid fa-user-tie me-2"></i>Seller:</strong> {{ $subOrder->seller?->name }}</p>
                            <p><strong><i class="fa-solid fa-chart-line me-2"></i>Status:</strong> {{ ucfirst($subOrder->status) }}</p>
                            <p><strong><i class="fa-solid fa-hand-holding-dollar me-2"></i>Seller Payable:</strong> ৳{{ number_format($subOrder->seller_payable, 2) }}</p>
                            <p class="mb-0"><strong><i class="fa-solid fa-sack-dollar me-2"></i>Admin Earning:</strong> ৳{{ number_format($subOrder->admin_earning, 2) }}</p>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered align-middle">
                                <thead>
                                    <tr>
                                        <th><i class="fa-solid fa-box me-1"></i>Product</th>
                                        <th><i class="fa-solid fa-money-bill me-1"></i>Seller Price</th>
                                        <th><i class="fa-solid fa-tag me-1"></i>Sale Price</th>
                                        <th><i class="fa-solid fa-sort-numeric-up me-1"></i>Qty</th>
                                        <th><i class="fa-solid fa-percent me-1"></i>Commission</th>
                                        <th><i class="fa-solid fa-wallet me-1"></i>Seller Payable</th>
                                        <th><i class="fa-solid fa-coins me-1"></i>Admin Earning</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($subOrder->items as $item)
                                        <tr>
                                            <td>{{ $item->product?->name }}</td>
                                            <td>৳{{ number_format($item->seller_price, 2) }}</td>
                                            <td>৳{{ number_format($item->sale_price, 2) }}</td>
                                            <td>{{ $item->quantity }}</td>
                                            <td>৳{{ number_format($item->commission_amount, 2) }}</td>
                                            <td>৳{{ number_format($item->seller_payable, 2) }}</td>
                                            <td>৳{{ number_format($item->admin_earning, 2) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="col-md-4">
            <div class="card sticky-top" style="top: 20px;">
                <div class="card-header">
                    <i class="fa-solid fa-pen-to-square section-icon"></i>Update Order Status
                </div>
                <div class="card-body" style="padding:10px;">
                    <form action="{{ route('admin.orders.status', $order->id) }}" method="POST">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label">
                                <i class="fa-solid fa-list-check me-2"></i>Order Status
                            </label>
                            <select name="status" class="form-select">
                                @foreach(['pending','processing','approved','partial_delivered','delivered','partial_canceled','canceled'] as $status)
                                    <option value="{{ $status }}" {{ $order->status === $status ? 'selected' : '' }}>
                                        {{ ucfirst(str_replace('_', ' ', $status)) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">
                                <i class="fa-solid fa-credit-card me-2"></i>Payment Status
                            </label>
                            <select name="payment_status" class="form-select">
                                @foreach(['unpaid','paid','failed','refunded'] as $paymentStatus)
                                    <option value="{{ $paymentStatus }}" {{ $order->payment_status === $paymentStatus ? 'selected' : '' }}>
                                        {{ ucfirst($paymentStatus) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <button class="btn btn-primary w-100">
                            <i class="fa-solid fa-floppy-disk me-2"></i>Update Order
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection