@extends('layouts.admin')

@section('title')
    Thông tin {{$userDetail->ho_ten}}
@endsection

@section('content-admin')
<div class="containerInfoUser mt-5">
    <div class="row justify-content-center">
        <!-- Cột thông tin chung -->
        <div class="col-md-4">
            <div class="card border-1 card-info-user">
                <div class="card-header text-white text-center">
                    <h3 class="card-title running-text m-0">THÔNG TIN CHUNG</h3>
                </div>
                <div class="card-body text-center">
                        @if(!empty($userDetail->anh))
                            <img src="{{asset('storage/users/img/'.$userDetail->anh)}}" alt="" class="rounded-circle img-thumbnail mb-3 border-animation" style="width: 150px; height: 150px;">
                        @else
                            <i class="fa-solid fa-xmark"></i>  
                        @endif
                    <h4 class="text-primary"><strong>{{ $userDetail->loai_tai_khoan == 0 ? 'KHÁCH HÀNG' : 'NHÂN VIÊN' }}</strong></h4>
                    <p class="text-muted">{{ $userDetail->ho_ten }}</p>
                    <div class="social-icons mt-3">
                        <a href="{{--$userDetail->facebook --}}" class="btn btn-outline-light btn-sm me-1 bg-facebook" target="_blank"><i class="fab fa-facebook-f"></i></a>
                        <a href="{{-- $userDetail->tiktok --}}" class="btn btn-outline-light btn-sm me-1 bg-tiktok" target="_blank"><i class="fab fa-tiktok"></i></a>
                        <a href="{{-- $userDetail->telegram --}}" class="btn btn-outline-light btn-sm me-1 bg-telegram" target="_blank"><i class="fab fa-telegram-plane"></i></a>
                        <a href="{{-- $userDetail->instagram --}}" class="btn btn-outline-light btn-sm me-1 bg-instagram" target="_blank"><i class="fab fa-instagram"></i></a>
                        <a href="{{-- $userDetail->youtube --}}" class="btn btn-outline-light btn-sm me-1 bg-youtube" target="_blank"><i class="fab fa-youtube"></i></a>
                        <a href="{{-- $userDetail->linkedin --}}" class="btn btn-outline-light btn-sm me-1 bg-linkedin" target="_blank"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cột thông tin chi tiết -->
        <div class="col-md-8">
            <div class="card shadow border-0 mb-3">
                <div class="card-header text-white" style="background-color: #012E40">
                    <h4 class="card-title m-0">THÔNG TIN CHI TIẾT</h4>
                </div>
                <div class="card-body">
                    <p><strong>Tài khoản: </strong>{{ $userDetail->username }}</p>
                    <p><strong>Email: </strong>{{ $userDetail->email }}</p>
                    <p><strong>Chức vụ: </strong>{{ $userDetail->ten_chuc_vu }}</p>
                    <p><strong>CCCD: </strong>{{ $userDetail->cccd ?? 'Không xác định' }}</p>
                    <p><strong>Giới tính: </strong>
                        @if($userDetail->gioi_tinh === 1)
                            Nam
                        @elseif($userDetail->gioi_tinh === 0)
                            Nữ
                        @else
                            Không xác định
                        @endif
                    </p>
                    <p><strong>Điện thoại: </strong>{{ $userDetail->so_dien_thoai ?? 'Không xác định' }}</p>
                    <p><strong>Địa chỉ: </strong>{{ $userDetail->dia_chi ?? 'Không xác định' }}</p>
                    <p><strong>Ngày tạo TK: </strong>{{ \Carbon\Carbon::parse($userDetail->created_at)->format('d-m-Y H:i:s') }}</p>
                    <p><strong>Ngày cập nhật gần nhất: </strong>{{ \Carbon\Carbon::parse($userDetail->updated_at)->format('d-m-Y H:i:s') }}</p>
                </div>
            </div>

            <!-- Nút chỉnh sửa thông tin -->
            <div class="text-center mt-3">
                <a href="{{ route('admin.users.edit', ['user' => $userDetail->username]) }}" class="btn btn-primary btn-sm">Chỉnh Sửa Thông Tin</a>
                <a href="{{ route('admin.users.index') }}" class="btn btn-danger btn-sm">Quay Lại</a>
            </div>
        </div>
        <div class="row">
            <div class="historyOrder mt-2 bordered bg-white border p-4 rounded shadow-sm">
                <h6 class="fw-bold mb-3">Lịch sử mua hàng</h6>
            
                @if($orderHistory->isEmpty())
                    <p class="text-muted">Chưa có lịch sử đơn hàng của khách hàng <strong >{{$userDetail->ho_ten}}</strong></p>
                @else
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Mã đơn hàng</th>
                                <th>Ngày mua</th>
                                <th>Tổng tiền</th>
                                <th>Trạng thái</th>
                                <th>Chi tiết</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($orderHistory as $order)
                                <tr>
                                    <td>{{ $order->id }}</td>
                                    <td>{{ $order->created_at->format('d/m/Y') }}</td>
                                    <td>{{ number_format($order->tong_tien, 0, ',', '.') }} VNĐ</td>
                                    <td>
                                        @if($order->trang_thai == 0)
                                            <span class="badge bg-warning w-100">Đang Xử Lý</span>
                                        @elseif($order->trang_thai == 1)
                                            <span class="badge bg-primary w-100">Đang Giao</span>
                                        @elseif($order->trang_thai == 2)
                                            <span class="badge bg-success w-100">Hoàn Tất</span>
                                        @elseif($order->trang_thai == 3)
                                            <span class="badge bg-danger w-100">Đã Hủy</span>
                                        @elseif($order->trang_thai == 4)
                                            <span class="badge bg-secondary w-100">Trả Hàng</span>
                                        @elseif($order->trang_thai == 5)
                                            <span class="badge bg-success ss w-100">Đặt Hàng</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ route('home.account.getDetailOrder', ['id'=>$order->id]) }}" class="btn btn-sm btn-primary">Xem chi tiết</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection
@section('stylesheet')
    <style>
        .card-info-user{
            transition: all .5s ease;
            cursor: pointer;
            
        }
        .card-info-user:hover{
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            translate: 0px -5px;
        }
    </style>
@endsection