@extends('frontend.layouts.master')

@section('content')
        <div class="bg-gray-50 rounded-lg py-12">
            <div class="container mx-auto px-4 max-w-4xl">
                <!-- Card chính -->
                <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-8">
                    <!-- Header -->
                    <div class="bg-primary p-6">
                        <div class="flex justify-between items-center">
                            <h1 class="text-white text-2xl font-bold">Thanh toán đơn hàng</h1>
                            <span class="bg-white text-primary px-4 py-2 rounded-full text-sm font-medium">
                                Mã đơn: #{{ $orders->order_num }}
                            </span>
                        </div>
                    </div>

                    <!-- Thông tin đơn hàng -->
                    <div class="p-6 border-b border-gray-200">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <h2 class="text-gray-700 text-lg font-semibold mb-4">Thông tin đơn hàng</h2>
                                <div class="space-y-2">
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Ngày đặt:</span>
                                        <span class="font-medium">{{ date('d/m/Y H:i', $orders->date) }}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Trạng thái:</span>
                                        <span class="font-medium">
                                            @if ($orders->status == 0)
                                                <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs">Chờ xử
                                                    lý</span>
                                            @elseif($orders->status == 1)
                                                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Đã kích
                                                        hoạt</span>
                                                @elseif($orders->status == 2)
                                                    <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs">Đã hủy</span>
                                                @elseif($orders->status == 3)
                                                    <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">Đang xử
                                                        lý</span>
                                                @else
                                                    <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs">Khác</span>
                                                @endif
                                                </span>
                                                </div>
                                                <div class="flex justify-between">
                                                    <span class="text-gray-600">Tên miền (Domain):</span>
                                                    <span class="font-medium">{{ $orders->orderItems[0]->server_name }}</span>
                                                </div>
                                                </div>
                                                </div>
                                                <div>
                                                    <h2 class="text-gray-700 text-lg font-semibold mb-4">Thông tin khách hàng</h2>
                                                    <div class="space-y-2">
                                                        <div class="flex justify-between">
                                                            <span class="text-gray-600">Họ tên:</span>
                                                            <span class="font-medium">{{ $orders->customer->firstname . ' ' . $orders->customer->lastname }}</span>
                                                        </div>
                                                        <div class="flex justify-between">
                                                            <span class="text-gray-600">Số điện thoại:</span>
                                                            <span class="font-medium">{{ $orders->customer->phone }}</span>
                                                        </div>
                                                        <div class="flex justify-between">
                                                            <span class="text-gray-600">Email:</span>
                                                            <span class="font-medium">{{ $orders->customer->email }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                </div>
                                                </div>

                                                <!-- Chi tiết sản phẩm -->
                                                <div class="p-6">
                                                    <h2 class="text-gray-700 text-lg font-semibold mb-4">Chi tiết sản phẩm</h2>

                                                    <div class="overflow-x-auto">
                                                        <table class="w-full text-left">
                                                            <thead>
                                                                <tr class="bg-gray-50">
                                                                    <th class="px-4 py-3 text-sm font-medium text-gray-500 uppercase tracking-wider">
                                                                        Mô tả
                                                                    </th>
                                                                    <th class="px-4 py-3 text-sm font-medium text-gray-500 uppercase tracking-wider text-right">
                                                                        Số lượng
                                                                    </th>
                                                                    <th class="px-4 py-3 text-sm font-medium text-gray-500 uppercase tracking-wider text-right">
                                                                        Giá
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                            <tbody class="divide-y divide-gray-200">
                                                                @foreach ($orders->orderItems as $item)
                                                                    <tr class="bg-white">
                                                                        <td class="px-4 py-3">
                                                                            <div class="font-medium text-gray-800">Sản phẩm
                                                                                {{ $item->product->name ?? 'Không xác định' }}
                                                                            </div>
                                                                            <div class="text-sm text-gray-500">
                                                                                Loại:
                                                                                @if ($item->product_type == 1)
                                                                                    Shared Hosting
                                                                                @elseif($item->product_type == 2)
                                                                                    VPS
                                                                                @elseif($item->product_type == 3)
                                                                                    Dedicated Server
                                                                                @else
                                                                                    Khác
                                                                                @endif
                                                                            </div>
                                                                            <div class="text-sm text-gray-500 flex flex-row items-center">
                                                                                Hệ điều hành:
                                                                                <div class="ml-2 flex items-center gap-2">
                                                                                    <div class="avatar">
                                                                                        <div class="size-6 rounded-md">
                                                                                            <img src="{{ $item->os->osGroup->thumbnail }}"
                                                                                                alt="{{ $item->os->osGroup->name }}" />
                                                                                        </div>
                                                                                    </div>{{ $item->os->osGroup->name }}
                                                                                    {{ $item->os->version }}
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                        <td class="px-4 py-3 text-right">
                                                                            {{ $item->quantity }}
                                                                        </td>
                                                                        <td class="px-4 py-3 text-right">
                                                                            <p>
                                                                                {{ format_price($item->price) }}
                                                                                /{{ $item->months }}tháng
                                                                            </p>
                                                                        </td>
                                                                    </tr>

                                                                    <!-- Addon items -->
                                                                    @foreach ($item->addons as $addon)
                                                                        <tr class="bg-gray-50">
                                                                            <td class="px-4 py-2 pl-8">
                                                                                <div class="text-sm text-gray-600">
                                                                                    <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded">
                                                                                        Addon
                                                                                    </span>
                                                                                    <span class="ml-2">{{ $addon->addonItems->name }} đơn giá:
                                                                                        ({{ format_price($addon->addonItems->price) }})
                                                                                        / {{ $addon->addonItems->step . $addon->addonItems->prefix }}
                                                                                    </span>
                                                                                </div>
                                                                            </td>
                                                                            <td class="px-4 py-2 text-right text-sm text-gray-600">
                                                                                {{ $addon->qty }} / {{ $addon->addonItems->prefix }}
                                                                                ({{ $item->months }} tháng)
                                                                            </td>
                                                                            <td class="px-4 py-2 text-right text-sm text-gray-600">
                                                                                {{ number_format($addon->price * $item->months) }} VNĐ
                                                                            </td>
                                                                        </tr>
                                                                    @endforeach
                                                                @endforeach
                                                            </tbody>
                                                            <tfoot>
                                                                @php
                                                                    $addonTotal = 0;
                                                                    foreach ($orders->orderItems as $item) {
                                                                        foreach ($item->addons as $addon) {
                                                                            $addonTotal += $addon->price * $item->months;
                                                                        }
                                                                    }
                                                                    $productTotal = $orders->amount - $addonTotal;
                                                                @endphp
                                                                <tr class="border-t-2 border-gray-200">
                                                                    <td class="px-4 py-3 text-gray-500 font-medium">Giá trị sản phẩm</td>
                                                                    <td></td>
                                                                    <td class="px-4 py-3 text-right text-gray-500 font-medium">
                                                                        {{ number_format($productTotal) }} VNĐ
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="px-4 py-3 text-gray-500 font-medium">Tổng addon</td>
                                                                    <td></td>
                                                                    <td class="px-4 py-3 text-right text-gray-500 font-medium">
                                                                        {{ number_format($addonTotal) }} VNĐ
                                                                    </td>
                                                                </tr>
                                                                @if ($orders->discount_value)
                                                                    <tr>
                                                                        <td class="px-4 py-3 text-gray-500 font-medium">Giảm giá</td>
                                                                        <td></td>
                                                                        <td class="px-4 py-3 text-right text-gray-500 font-medium">
                                                                            -{{ number_format($orders->discount_value) }} VNĐ
                                                                        </td>
                                                                    </tr>
                                                                @endif
                                                                <tr>
                                                                    <td class="px-4 py-3 text-lg font-bold text-gray-800">Tổng cộng</td>
                                                                    <td></td>
                                                                    <td class="px-4 py-3 text-right text-lg font-bold text-gray-800">
                                                                        {{ number_format($orders->amount) }} VNĐ
                                                                    </td>
                                                                </tr>
                                                            </tfoot>
                                                        </table>
                                                        @if ($orders->status == 1)
                                                            <div class="flex flex-row justify-end pt-3 border-t border-gray-200">
                                                                <flux:modal.trigger name="confirm-order" class="flex-end">
                                                                    <flux:button type="button" variant="primary" color="orange" icon="credit-card">Xác nhận
                                                                        thanh toán</flux:button>
                                                                </flux:modal.trigger>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                                </div>

                                                <!-- Ghi chú -->
                                                @if ($orders->note)
                                                    <div class="bg-white rounded-lg shadow-lg p-6 mt-8">
                                                        <h2 class="text-gray-700 text-lg font-semibold mb-2">Ghi chú đơn hàng</h2>
                                                        <p class="text-gray-600">{{ $orders->note }}</p>
                                                    </div>
                                                @endif

                                                <!-- Hỗ trợ -->
                                                <div class="bg-blue-50 rounded-lg p-6 mt-8 border border-blue-100">
                                                    <div class="flex items-start">
                                                        <div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
                                                            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                                                xmlns="http://www.w3.org/2000/svg">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                            </svg>
                                                        </div>
                                                        <div class="flex-1">
                                                            <h3 class="text-lg font-medium text-blue-800">Bạn cần hỗ trợ?</h3>
                                                            <p class="text-blue-600 mt-1">Nếu bạn gặp bất kỳ vấn đề nào khi thanh toán, vui lòng liên hệ với
                                                                chúng tôi thông qua. </br> Hotline <span class="font-medium">{{ setting('setting.tel') }}</span>
                                                                hoặc
                                thông qua Email <span class="font-medium">{{ setting('setting.support') }}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @include('frontend.order.modal.destroy', [
        'order_id' => $orders->id,
        'order_num' => $orders->order_num,
    ])

        @include('frontend.order.modal.confirm', [
        'order_id' => $orders->id,
        'order_num' => $orders->order_num,
    ])
@endsection