@extends('layouts.client')

@section('title')
    {{$title}}
@endsection

@section('stylesheetAccount')
<style>

    .breadcrumb {
        color: #2563EB;
        font-size: 0.9rem;
    }

    .breadcrumb a {
        color: #2563EB;
        text-decoration: none;
        transition: color 0.3s;
    }

    .breadcrumb a:hover {
        color: #1D4ED8;
    }

    .d-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 24px;
        margin-top: 1.5rem;
    }

    .infoOrderUser, .infoOrderProduct, .infoPay {
        background-color: #FFFFFF;
        border-radius: 8px;
        padding: 1.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .infoOrderUser h3, .infoOrderProduct h3, .infoPay h3 {
        color: #111827;
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .infoOrderUser .body, .infoOrderProduct ul {
        color: #374151;
        font-size: 0.95rem;
    }

    .infoOrderProduct ul {
        list-style: none;
        padding-left: 0;
        line-height: 1.5;
    }

    .infoPay form {
        margin-top: 1rem;
    }

    .form-label {
        font-weight: 500;
        color: #4B5563;
    }

    .form-control {
        border-radius: 6px;
        border: 1px solid #D1D5DB;
        padding: 0.75rem;
    }

    .btn-primary {
        background-color: #3B82F6;
        border: none;
        border-radius: 6px;
        padding: 0.75rem 1.5rem;
        transition: background-color 0.3s;
    }

    .btn-primary:hover {
        background-color: #2563EB;
    }

    .text-danger {
        font-size: 0.85rem;
    }
    .infoOrderProduct {
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        max-width: 600px;
        margin: 0 auto;
    }

    .infoOrderProduct h3 {
        font-size: 1.6em;
        color: #333;
        border-bottom: 2px solid #007bff;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    /* Danh sách sản phẩm */
    .product-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .product-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #e0e0e0;
        transition: background-color 0.3s ease;
    }

    .product-item:last-child {
        border-bottom: none;
    }

    .product-item:hover {
        background-color: #f1f7ff;
    }

    .product-name {
        font-size: 1.1em;
        font-weight: bold;
        color: #333;
        flex: 1;
        margin-right: 20px;
    }

    /* Thông tin số lượng và giá */
    .product-quantity-price {
        text-align: right;
    }

    .product-quantity {
        display: block;
        font-size: 0.9em;
        color: #666;
    }

    .product-price {
        display: block;
        font-size: 1em;
        color: #ff4c4c;
        font-weight: bold;
        margin-top: 5px;
    }
    .highlighted-name {
        font-style: italic; /* Chữ nghiêng */
        color: #007bff; /* Màu sắc (xanh dương đậm) */
        padding: 5px 10px; /* Khoảng cách bên trong */
        border-radius: 5px; /* Góc bo tròn nhẹ */
        background-color: rgba(0, 123, 255, 0.1); /* Màu nền nhẹ */
        border: 1px solid #007bff; /* Đường viền */
        display: inline-block; /* Để áp dụng padding và border đúng */
        position: relative;
    }

    .highlighted-name::before {
        content: "✓"; /* Dấu ấn đặc biệt */
        color: #28a745; /* Màu xanh lá cho dấu ấn */
        font-weight: bold;
        margin-right: 5px;
    }

</style>
@endsection

@section('content-clients')
<div class="main-posts mt-3">
    <div class="container mt-1" style="min-height: 100vh">
        <div class="breadcrumb d-flex align-items-center mb-3">
            <a href="{{route('home.index')}}">Trang chủ</a> <span class="mx-1">/</span>
            <a href="{{route('home.account.index')}}">Tài khoản</a> <span class="mx-1">/</span>
            <a href="{{route('home.account.myOrder')}}">Đơn hàng của tôi</a> <span class="mx-1">/</span>  
            <span>Hỗ trợ đơn hàng</span>
        </div>
        <div class="d-grid">
            <div class="infoOrderUser">
                <h3>Thông tin đơn hàng</h3>
                <div class="order-body">
                    <p><strong>Mã đơn hàng:</strong> {{$order->id}}</p>
                    <p><strong>Ngày đặt hàng:</strong> {{$order->created_at}}</p>
                    <p><strong>Tổng tiền:</strong> {{number_format($order->tong_tien,0,',','.')}} VNĐ</p>
                    <p><strong>Tên người nhận:</strong> {{$order->ho_ten}}</p>
                    <p><strong>Số điện thoại:</strong> {{$order->so_dien_thoai}}</p>
                    <p><strong>Email:</strong> {{$order->email}}</p>
                    <p><strong>Địa chỉ giao hàng:</strong> {{$order->dia_chi}}, {{$order->wards->name}}, {{$order->district->name}}, {{$order->province->name}}</p>
                    <p><strong>Phương thức thanh toán:</strong> {{$order->phuongthuc}}</p>
                    <p><strong>Trạng thái đơn hàng:</strong> {{$order->trang_thai}}</p>
                </div>
            </div>
            
            <div class="infoOrderProduct">
                <h3>Sản phẩm trong đơn hàng</h3>
                <ul class="product-list">
                    @foreach($order->OrderDetail as $product)
                        <li class="product-item">
                            <div class="product-name">{{$product->Product->ten_san_pham}}</div>
                            <div class="product-quantity-price">
                                <span class="product-quantity">Số lượng: {{$product->so_luong}}</span>
                                <span class="product-price">{{number_format($product->gia, 0, ',', '.')}} VNĐ</span>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
        <div class="infoPay mt-4">
            <h3>Gửi yêu cầu hỗ trợ đơn hàng #{{$order->id}} của Khách hàng
                <span class="highlighted-name">
                    @if($order->ho_ten == null)
                        {{$order->User->ho_ten}}
                    @else
                        {{$order->ho_ten}}
                    @endif
                </span>
            </h3>
            <form action="{{--route('home.account.supportOrder.submit')--}}" method="POST">
                @csrf
                <div class="mb-3">
                    <label for="noi_dung" class="form-label">Vấn đề cần hỗ trợ</label>
                    <textarea class="form-control" id="noi_dung" name="noi_dung" rows="4" placeholder="Mô tả vấn đề của bạn, chúng tôi sẽ liên hệ cho bạn sớm nhất qua số điện thoại {{
                    $order->ho_ten == null ? $order->User->so_dien_thoai : $order->so_dien_thoai}} và email {{
                    $order->ho_ten == null ? $order->User->email : $order->email}}..."></textarea>
                    @error('noi_dung')
                        <small class="text-danger">{{$message}}</small>
                    @enderror
                </div>
                <button type="submit" class="btn btn-primary">Gửi yêu cầu</button>
            </form>
        </div>
    </div>
</div>
@endsection