@extends('frontend.layouts.master')

@section('content')
    @if(!$invoice)
        <div class="bg-gray-50 rounded-lg py-12">
            <div class="container mx-auto px-4 max-w-4xl">
                <div class="bg-white rounded-lg shadow-lg p-8 text-center">
                    <div class="text-gray-500 mb-4">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">{{ __('Invoice not found') }}</h3>
                    <p class="text-gray-500">{{ __('The invoice you are looking for could not be found or you do not have permission to view it.') }}</p>
                    <div class="mt-6">
                        <a href="{{ route('home') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                            {{ __('Back to Dashboard') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @else
            <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">Thông tin đơn hàng</h1>
                            <span class="bg-white text-primary px-4 py-2 rounded-full text-sm font-medium">
                                Mã đơn: #{{ $invoice->order_num ?? 'N/A'}}
                            </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">
                                            @if ($invoice->date)
                                                {{ date('d/m/Y H:i', strtotime($invoice->date)) }}
                                            @else
                                                N/A
                                            @endif
                                        </span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Trạng thái:</span>
                                        <span class="font-medium">
                                            @if ($invoice->status == 1)
                                                <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">Chờ
                                                    thanh toán</span>
                                            @elseif($invoice->status == 2)
                                                <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Đã
                                                    thanh toán</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">{{ $invoice->invoiceItem->first()->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">{{ $invoice->customer->firstname . ' ' . $invoice->customer->lastname }}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Số điện thoại:</span>
                                        <span class="font-medium">{{ $invoice->customer->phone }}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Email:</span>
                                        <span class="font-medium">{{ $invoice->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 ($invoice->invoiceItem 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 == 4)
                                                        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 ($invoice->invoiceItem as $item) {
            foreach ($item->addons as $addon) {
                $addonTotal += $addon->price * $item->months;
            }
        }
        $productTotal = $invoice->total - $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 ($invoice->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($invoice->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($invoice->total) }} VNĐ
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Ghi chú -->
                @if ($invoice->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">{{ $invoice->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>
    @endif
@endsection