@extends('layouts.admin')

@section('content-admin')
<div class="containerDetailOrder">
    <div class="header-order row">
        <div class="col-2">
            <a href="{{route("admin.orders.index")}}" class="btn btn-warning btn-sm">Quay Lại</a>
        </div>
        
        <h3 class="text-center col-8">Chi Tiết Hóa Đơn</h3>
        {{-- nút in hóa đơn --}}
        <div class="col-2" style="text-align: end">
            <form action="{{ route('admin.orders.print', $order->id) }}" method="GET" target="_blank">
                <select name="size" class="form-select form-select-sm" style="display: inline-block; width: auto;">
                    <option value="58mm">58mm</option>
                    <option value="80mm">80mm</option>
                    <option value="A4">A4</option>
                </select>
                <button type="submit" class="btn btn-primary btn-sm">In Hóa Đơn</button>
            </form>
        </div>
    </div>
    <div class="card shadow-sm border-0">
        <div class="card-header bg-primary text-white">
            <i class="fas fa-file-invoice"></i> Thông Tin Hóa Đơn
        </div>
        <div class="card-body d-flex justify-content-between">
            <div class="cart-body-left">
                <h5 class="card-title mb-3"><strong>Mã Hóa Đơn: </strong>#{{ $order->id }}</h5>
                <p class="card-text"><strong>Ngày Đặt Hàng: </strong>{{ \Carbon\Carbon::parse($order->created_at)->format('d-m-Y H:i:s') }}</p>
                
                <p class="card-text"><strong>Tên Khách Hàng: </strong>
                    @if($order->ho_ten == null)
                        {{$order->User->ho_ten}}
                    @else
                        {{$order->ho_ten}}
                    @endif
                    <span> | 
                        <strong>Số Điện Thoại: </strong>
                        @if($order->ho_ten == null)
                            {{$order->User->so_dien_thoai}}
                        @else
                            {{$order->so_dien_thoai}}
                        @endif
                    </span>
                </p>
        
                <p class="card-text"><strong>Email: </strong>
                    @if($order->ho_ten == null)
                        {{$order->User->email}}
                    @else
                        {{$order->email}}
                    @endif
                </p>
        
                <p class="card-text"><strong>Địa Chỉ: </strong>{{ $order->dia_chi }}, {{$order->Wards->name}}, {{$order->District->name}}, {{$order->Province->name}}</p>
                
                <p class="card-text"><strong>Ghi Chú: </strong>{{ $order->ghi_chu != null ? $order->ghi_chu : 'Không có' }}</p>
                
                <p class="card-text"><strong>Khuyến Mãi Đã Áp Dụng: </strong>
                    @if($order->promotion)
                        <a href="{{route('admin.promotions.detail',['id'=>$order->promotion->id])}}" target="_blank">
                            {{ $order->promotion->ten_khuyen_mai }} - 
                            @if($order->promotion->hinh_thuc_giam_gia == 0)
                                [{{ number_format($order->promotion->gia_tri_khuyen_mai,0,',','.') }} VND]
                            @else
                                [{{ $order->promotion->gia_tri_khuyen_mai }} %]
                            @endif
                        </a>
                    @else
                        Không có
                    @endif
                </p>
                <div class="status mt-4">
                    <strong>Trạng Thái Đơn Hàng: </strong>
                    @if($order->trang_thai == 0)
                        <span class="badge bg-warning">Đang Xử Lý</span>
                    @elseif($order->trang_thai == 1)
                        <span class="badge bg-info">Đang Giao</span>
                    @elseif($order->trang_thai == 2)
                        <span class="badge bg-success">Hoàn Tất</span>
                    @elseif($order->trang_thai == 3)
                        <span class="badge bg-danger">Đã Hủy</span>
                    @elseif($order->trang_thai == 4)
                        <span class="badge bg-secondary">Trả Hàng</span>
                    @elseif($order->trang_thai == 5)
                        <span class="badge bg-success">Đặt Hàng</span>
                    @endif
                </div>
            </div>
            <div class="cart-body-right">
                <div class="order-summary">
                    <div class="order-summary__item">
                        <span class="order-summary__label">Tổng Tiền ban đầu:</span>
                        <span class="order-summary__value">{{ number_format($order->tong_tien_goc, 0, ',', '.') }} VND</span>
                    </div>
                    <div class="order-summary__item">
                        <span class="order-summary__label">Tổng Tiền khuyến mãi:</span>
                        <span class="order-summary__value discount">- {{ number_format($order->tong_tien_goc - $order->tong_tien + $order->phivanchuyen, 0, ',', '.') }} VND</span>
                    </div>
                    <div class="order-summary__item">
                        <span class="order-summary__label">Phí vận chuyển:</span>
                        <span class="order-summary__value">{{ number_format($order->phivanchuyen, 0, ',', '.') }} VND</span>
                    </div>
                    <div class="order-summary__item total">
                        <span class="order-summary__label">Tổng thanh toán:</span>
                        <span class="order-summary__value">{{ number_format($order->tong_tien, 0, ',', '.') }} VND</span>
                    </div>
                </div>
            </div>
            
            
        </div>
    </div>
    
    
    <div class="card mt-4">
        <div class="card-header">
            Chi Tiết Sản Phẩm
        </div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Tên Sản Phẩm</th>
                        <th scope="col">Số Lượng</th>
                        <th scope="col">Giá</th>
                        <th scope="col">Thành Tiền</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($order->OrderDetail as $item)
                    <tr>
                        <th scope="row">{{ $loop->iteration }}</th>
                        <td>{{ $item->Product->ten_san_pham}}</td>
                        <td>{{ $item->so_luong }}</td>
                        <td>{{ number_format($item->gia,0,',','.') }} VND</td>
                        <td>{{ number_format($item->so_luong * $item->gia,0,',','.') }} VND</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="infoOrderHistory bg-white mt-3" style="border-radius: 13px">
        <h6 class="fw-bold">Lịch sử trạng thái đơn hàng</h6>
        <ul class="timeline">
            @foreach($orderStatus as $index => $status)
            <li class="timeline-item {{ $index === count($orderStatus) - 1 ? 'latest-status' : '' }}">
                <span class="timeline-date">{{ \Carbon\Carbon::parse($status->created_at)->format('H:i:s d/m/Y') }}</span>
                <span class="timeline-status">
                    @if($status->trang_thai == 0)
                        Đang xử lý
                    @elseif($status->trang_thai == 1)
                        Đang giao
                    @elseif($status->trang_thai == 2)
                        Hoàn tất
                    @elseif($status->trang_thai == 3)
                        Đã hủy
                    @elseif($status->trang_thai == 4)
                        Trả hàng
                    @else
                        Đặt hàng
                    @endif
                </span>
            </li>
            @endforeach
        </ul>
    </div>
</div>
@endsection

@section('stylesheet')
    <style>
        .item-status{
            padding: 25px;
            background-color: red;
            color: white;
            border-radius: 20px;
        }
        .order-summary {
            max-width: 400px;
            margin: 30px auto;
            padding: 20px;
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            font-family: 'Arial', sans-serif;
        }
        /* Các mục thông tin */
        .order-summary__item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .order-summary__item:last-child {
            border-bottom: none;
        }

        /* Nhãn */
        .order-summary__label {
            font-weight: 500;
            color: #555555;
        }

        /* Giá trị */
        .order-summary__value {
            font-weight: 600;
            color: #000000;
        }

        /* Giá trị giảm giá */
        .order-summary__value.discount {
            color: #28a745; /* Màu xanh lá */
        }

        /* Tổng thanh toán */
        .order-summary__item.total {
            background-color: #f9f9f9;
            border-top: 2px solid #e0e0e0;
            padding-top: 15px;
            margin-top: 10px;
        }

        .order-summary__item.total .order-summary__value {
            color: #d9534f; /* Màu đỏ */
            font-size: 1.1em;
        }
    </style>
@endsection