@extends('frontend.layouts.main')
@section('title', 'Trang chủ')
@section('css')

@endsection
<link rel="stylesheet" href="{{ asset('frontend/css/order.css') }}?v={{ time() }}" type="text/css" />
@section('content')
<div class="content-wrapper">
    <div class="ctnr">
        <div class="success-container">
        @if (session("success")) 
            <div class="success-header">
				<div class="success-icon pulse">
                    <div class="success-checkmark"></div>
                </div>
                <h1>Đặt Hàng Thành Công!</h1>
                <p>Cảm ơn bạn đã mua sắm cùng chúng tôi</p>
                
            </div>
            <div class="success-body">
                <div class="order-info">
                    <h2>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4Z" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M2 10H22" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        Thông Tin Đơn Hàng
                    </h2>
                    <div class="info-item">
                        <div class="info-label">Mã Đơn Hàng: <span>{{$data->code}}</span></div>
                        <div class="info-value"></div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Ngày Đặt Hàng: <span>{{$data->created_at->format('d/m/Y , H:i')}}</span> </div>
                        <div class="info-value"></div>
                    </div>
                    <div class="info-item">
                        @php
                        $paymentMethod = \App\Models\Setting::find($data->httt)?->name ?? $data->httt;
                        @endphp
                        <div class="info-label">Phương Thức Thanh Toán: <span>{{$paymentMethod}}</span> </div>
                        
                        <div class="info-value"></div>
                    </div>

                </div>

                <div class="order-info">
                    <h2>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        Thông Tin Giao Hàng
                    </h2>
                    <div class="info-item">
                        <div class="info-label">Người Nhận: <span>{{$data->name}}</span> </div>
                        <div class="info-value"></div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Số Điện Thoại: <span>{{$data->phone}}</span> </div>
                        <div class="info-value"></div>
                    </div>
                    @if(isset($data->email) && $data->email)
                    <div class="info-item">
                        <div class="info-label">Email: <span>{{$data->email}}</span> </div>
                        <div class="info-value"></div>
                    </div>
                    @endif
                    <div class="info-item">
                        <div class="info-label">Địa Chỉ: <span>{{$data->address_detail}}</span> </div>
                        <div class="info-value"></div>
                    </div>
                </div>

                <div class="order-items">
                    <h2>Chi Tiết Đơn Hàng</h2>
                    @foreach($data->orders as $order)
                    <div class="item">
                        <div class="item-image">
                            <img src="{{asset($order['avatar_path'])}}" alt="">
                        </div>
                        <div class="item-details">
                            <div class="item-name">{{$order->name}}</div>
                            <div class="item-price">{{number_format($order->new_price,0,',','.')}}đ <span class="item-quantity">x{{$order->quantity}}</span></div>
                        </div>
                        <div class="item-total">{{number_format($order->new_price * $order->quantity,0,',','.')}}đ</div>
                    </div>
                    @endforeach

                    <div class="totals">
                        <div class="total-row grand">
                            <div>Tổng cộng:</div>
                            <div>{{number_format($data->total,0,',','.')}}đ</div>
                        </div>
                    </div>
                </div>
            </div>

            @elseif(session("error"))
            <div class="wanning_cart">
                <i class="fas fa-shopping-bag mr-3"></i> {{ session("error") }}
            </div>
            @else
            <div class="success-footer">
                Giỏ hàng của bạn đang trống!
            </div>
            @endif

            <div class="success-footer">
                <a href="{{makelink('home')}}" class="btn">Trở về trang chủ </a>
                <a href="/danh-muc-san-pham" class="btn outline">Tiếp tục mua sắm</a>
                @if(isset($hoTro))
                <div class="support-info">
                    {!! $hoTro->description ?? "" !!}
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')

@endsection