@extends('frontend.layouts.master')

@section('content')
    <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
        <!-- Leftbox -->
        <div class="col-span-12 2xl:col-span-9">
            @include('frontend.home.card.service')
        </div>


        <!-- RightBox -->
        <div class="col-span-12 2xl:col-span-3">
            <!-- Card -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-3 animate__animated animate__fadeInUp">
                <!-- Card Header -->
                <div class="border-b border-slate-300 dark:border-gray-600 border-dashed p-4">
                    <div class="flex items-center gap-3 font-bold">
                        <i data-lucide="user" class="w-4 h-4"></i>
                        <h4>Thông tin cá nhân</h4>
                    </div>
                </div>
                <!-- Card Body -->
                <div class="p-4">
                    <ul class="space-y-3 text-sm">
                        <li class="flex flex-wrap items-center">
                            <span class="font-medium mr-2">Họ và tên:</span>
                            {{ customer()?->firstname . ' ' . customer()?->lastname }}
                        </li>
                        <li class="flex flex-wrap items-center">
                            <span class="font-medium mr-2">Email:</span> {{ customer()?->email }}
                            @if (customer()?->email_hash)
                                <span class="text-green-500 text-xs ml-2 flex items-center">
                                    <i class="fas fa-check-circle mr-1"></i> Đã xác thực
                                </span>
                            @else
                                <span class="text-red-500 text-xs ml-2 flex items-center">
                                    <i class="fas fa-x mr-1"></i> Chưa xác thực
                                </span>
                            @endif
                        </li>
                        <li class="flex flex-wrap items-center">
                            <span class="font-medium mr-2">Điện thoại:</span>
                            <span class="phone">
                                {{ customer()?->phone }}
                            </span>
                            <span id="user-info-verify-phone">

                            </span>
                        </li>
                        <li class="flex flex-wrap items-center">
                            <span class="font-medium mr-2">Đặc quyền:</span> Cơ bản
                        </li>
                        <livewire:user-settings />
                    </ul>
                </div>

            </div>
            <!-- Card -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-3 animate__animated animate__fadeInUp">
                <!-- Card Header -->
                <div class="border-b border-slate-300 dark:border-gray-600 border-dashed p-4">
                    <div class="flex items-center gap-3 font-bold">
                        <i data-lucide="wallet-cards" class="w-4 h-4"></i>
                        <h4>Thống kế Credits và Points</h4>
                    </div>
                </div>
                <!-- Card Body -->
                <div class="p-4">
                    <div class="grid grid-cols-3 gap-4">
                        <div class="flex flex-col items-center justify-center">
                            <img src="{{ asset('images/credit-balance-icon.png') }}" alt="Credit" width="50%"
                                height="50%" />
                            <small>Số dư</small>
                            <span class="text-green-500">{{ format_price(customer()?->credit) }}</span>
                        </div>
                        <div class="flex flex-col items-center justify-center">
                            <img src="{{ asset('images/total-amount-spent.png') }}" alt="Credit" width="50%"
                                height="50%" />
                            <small>Đã chi</small>
                            <span
                                class="text-red-500">{{ format_price((int) customer()?->total - (int) customer()?->credit) }}</span>
                        </div>
                        <div class="flex flex-col items-center justify-center">
                            <img src="{{ asset('images/total-amount-deposited.png') }}" alt="Credit" width="50%"
                                height="50%" />
                            <small>Đã nạp</small>
                            <span class="text-blue-500">{{ format_price((int) customer()?->total) }}</span>
                        </div>
                        <div class="flex flex-col items-center justify-center">
                            <img src="{{ asset('images/account-points.png') }}" alt="Credit" width="50%"
                                height="50%" />
                            <small>Points</small>
                            <span class="text-gray-500">{{ format_point(0) }}</span>
                        </div>
                        <div class="flex flex-col items-center justify-center">
                            <img src="{{ asset('images/total-points.png') }}" alt="Credit" width="50%"
                                height="50%" />
                            <small>Tổng tích điểm</small>
                            <span class="text-gray-500">{{ format_point(0) }}</span>
                        </div>
                        <div class="flex flex-col items-center justify-center">
                            <img src="{{ asset('images/membership-level.png') }}" alt="Credit" width="60%"
                                height="60%" />
                            <small>Hạng</small>
                            <span class="text-green-500">Cơ bản</span>
                        </div>
                    </div>
                    <hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
                    <div class="mx-auto flex items-center justify-center gap-3 flex-row mt-3">
                        <a href="{{ route('recharge.index') }}" wire:navigate>
                            <flux:button icon="credit-card">Nạp tiền</flux:button>
                        </a>
                        <a href="{{ route('recharge.history') }}" wire:navigate>
                            <flux:button icon="inbox-stack">Tất cả giao dịch</flux:button>
                        </a>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-3 animate__animated animate__fadeInUp">
                <!-- Card Header -->
                <div class="border-b border-slate-300 dark:border-gray-600 border-dashed p-4">
                    <div class="flex items-center gap-3 font-bold">
                        <i data-lucide="bookmark" class="w-4 h-4"></i>
                        <h4>Hướng dẫn</h4>
                    </div>
                </div>
                <!-- Card Body -->
                <div class="p-4 max-h-[250px] overflow-y-auto">
                    <ul>
                        @foreach ($posts as $item)
                            <li class="border-b border-dashed border-gray-200 last:border-0 group-hover mb-3">
                                <a href="{{ $item->slug }}"
                                    class="hover:text-[var(--color-primary)] transition-all ease-in-out duration-300">
                                    {{ $item->name }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('viewScripts')
    <script>
        function updateStatus(field, checked) {
            fetch('{{ route('user.updateNotification') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        [field]: checked ? 1 : 0
                    })
                })
                .then(response => response.json())
                .then(data => {
                    // Xử lý kết quả trả về
                    if (data.success) {
                        console.log('Cập nhật thành công!');
                    } else {
                        console.log('Lỗi khi cập nhật');
                    }
                })
                .catch(error => {
                    console.error('Có lỗi xảy ra:', error);
                });
        }
    </script>
@endpush