@extends('template.basic.layouts.user_base')
@php
$price = 1;
$priceHistorical = [];

@endphp

@push('css')
<link href="https://cdn.jsdelivr.net/npm/icomoon@1.0.0/style.min.css" rel="stylesheet">
@endpush

@section('content_detail')
   
   <div class="flex h-full w-full" id="desktop-view-wallet">
 

    {{-- Main Content --}}
    <div class="flex-1 max-w-5xl text-gray-200 p-6 overflow-auto">
        {{-- Coin Header --}}
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
            <div class="flex items-center space-x-4 mb-4 md:mb-0">
                <img src="{{ asset('assets/coin/'.strtolower($coin->symbol).".png") }}" alt="{{ $coin->name }}" class="w-9 h-9">
                <h1 class="text-3xl font-semibold">{{ $coin->name }}</h1>
            
            </div>

            <div class="flex space-x-3">
                <a href="{{ secure_url('wallet/receive/' . $coin->symbol) }}" class="px-4 py-2 border border-border-primary text-sm rounded-md hover:bg-gray-800">Receive</a>
                <a href="{{ secure_url('wallet/send/' . $coin->symbol) }}" class="px-4 py-2 border border-border-primary  text-sm rounded-md hover:bg-gray-800">Send</a>
                <a href="{{ secure_url('wallet/swap/' . $coin->symbol) }}" class="px-4 py-2 border border-beige text-sm font-400 rounded-md hover:bg-beige hover:text-black text-primary-gradient">Swap</a>
            </div>
        </div>

        {{-- Coin Description --}}
        <p class="text-gray-400 mb-6">{{ $coin->description }}</p>

        {{-- Balance Card --}}
        <div class="flex flex-col md:flex-row gap-6 mb-6">
            <div class="border border-border-primary rounded-lg p-4 h-32 flex flex-1 flex-col gap-2">
                <div class="text-gray-400 text-sm font-bold">{{ $coin->symbol }} Balance</div>
                <div class="text-lg font-semibold">{{ coin_format($wallet->balance, $coin->digits) }} {{ $coin->symbol }}</div>
                <div class="text-biege text-xs">~ {{ fiat_format($wallet->balance * $price) }} {{ $user->userCurrency }}</div>
            </div>

            {{-- Price Card --}}
            <div class="border border-border-primary rounded-lg p-4  h-32 flex-1">
                <div>
                   <div class="text-gray-400 mb-1">{{ $coin->symbol }} Price</div>
                <div class="text-xl font-semibold">{{ fiat_format($price) }} {{ $user->userCurrency }}</div> 
                </div>
                <div class="h-32 w-full">
                    <svg class="w-full h-full">
                        <polyline :points="chartPoints" fill="none" stroke="#FF9B22" stroke-width="2"/>
                        <polyline :points="chartFill" fill="url(#gradient)" stroke="none"/>
                        <defs>
                            <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0%" stop-color="#FF9B22" stop-opacity="0.5"/>
                                <stop offset="100%" stop-color="#2b3139" stop-opacity="0"/>
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
            </div>

            
        </div>

        {{-- Recent Transactions --}}
        <div class="mb-6">
            <h2 class="text-gray-400 mb-4 text-sm font-medium ">Recent Transactions</h2>
            <div class="space-y-3">
                @forelse($user->transaction->where('coin_id', $coin->id)->sortByDesc('created_at')->take(10) as $transaction)
                <div class=" border-b border-border-primary p-4 flex flex-row md:flex-row justify-between items-start md:items-center">
                    <div>
                         <div class="mb-2 md:mb-0">
                        <div class="font-semibold text-sm lg:text-base">{{ ucfirst($transaction->type) }} {{ $coin->symbol }}</div>
                        <div class="text-white text-xs">{{ date('M d, Y \o\n h:i A', strtotime($transaction->created_at)) }}</div>
                    </div>
                    
                    </div>
                   
                    <div class="mt-2 md:mt-0 text-sm text-right">
                        <div class="font-semibold">{{ coin_format($transaction->amount, $coin->digits) }} {{ $coin->symbol }}</div>
                        <div class="text-white">{{ fiat_format($transaction->amount * $price) }} {{ $user->userCurrency }}</div>
                    </div>
                </div>
                @empty
                <div class="text-gray-500">No transactions found.</div>
                @endforelse
            </div>
            <div class="mt-4 text-right">
                <a href="{{ route('user.wallet.history', $coin->symbol) }}" class="text-primary-gradient underline">View More Transactions</a>
            </div>
        </div>
    </div>


@endsection

@push('script')
<script>
function priceChart(prices) {
    return {
        prices,
        chartPoints: '',
        chartFill: '',
        init() {
            const maxPrice = Math.max(...this.prices);
            const minPrice = Math.min(...this.prices);
            const w = 300; // width
            const h = 120; // height
            const stepX = w / (this.prices.length - 1);

            this.chartPoints = this.prices.map((p, i) => {
                const y = h - ((p - minPrice) / (maxPrice - minPrice) * h);
                return `${i*stepX},${y}`;
            }).join(' ');

            this.chartFill = this.prices.map((p, i) => {
                const y = h - ((p - minPrice) / (maxPrice - minPrice) * h);
                return `${i*stepX},${y}`;
            }).concat(`${w},${h} 0,${h}`).join(' ');
        }
    }
}
</script>
@endpush