@extends('layouts.user')

@section('title')
    AI Activity
@endsection

@section('content')

<!-- Start Hero -->
<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">
            <div class="relative md:container container-fluid">
                <div class="relative overflow-hidden md:rounded-md shadow dark:shadow-gray-700 h-52 bg-[url('../../assets/images/hero/pages.html')] bg-center bg-no-repeat bg-cover" 
                style="background-image: url('{{ asset('images/profile-1.jpg') }}');"></div>
            </div><!--end container-->

            <div class="container relative mt-16 md:mt-24">
                <div class="md:flex">
                    <div class="lg:w-1/4 md:w-1/3 md:px-3">
                        <div class="relative -mt-32 md:-mt-48">
                            <div class="p-6 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                                <div class="mb-5 text-center profile-pic">
                                    <!-- <input id="pro-img" name="profile-image" type="file" class="hidden" onchange="loadFile(event)" /> -->
                                    <div>
                                        <div class="relative mx-auto h-28 w-28">
                                            <img src="{{ asset('images/avatar-1.png') }}" class="rounded-full shadow dark:shadow-gray-800 ring-4 ring-slate-50 dark:ring-slate-800" id="profile-image" alt="">
                                            <label class="absolute inset-0 cursor-pointer" for="pro-img"></label>
                                        </div>

                                        <div class="mt-4">
                                            <h5 class="text-lg font-semibold">{{ auth()->user()->username }}</h5>
                                            <p class="text-slate-400">{{ auth()->user()->email }}</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Side Nav -->
                                <x-side-nav/>
                                
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-3 md:mt-0">

                    <x-alert/>
                    
                    <div class="bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                            <div class="items-center justify-between p-6 border-b border-gray-100 md:flex dark:border-gray-700">
                                <div class="mb-4 md:mb-0">
                                    <h5 class="text-xl font-semibold">{{ $product->name }}</h5>
                                </div>
                                <a href="{{ route('vendor-dashboard') }}" class="inline-block px-5 py-2 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 bg-orange-500 rounded-md"> &larr; Back</a>
                            </div>

                            <div class="p-6">
                                <h5 class="text-2xl font-semibold">{{ $product->initial_quantity - $product->quantity }} <span class="text-base font-medium uppercase text-bgray-500">Sold</span></h5>
                                <div class="flex items-center justify-start">
                                    <p class="mt-2 text-slate-400">&nbsp;Quantity Sold</p>
                                </div>
                            </div>

                            @php
                                $profit = 5/100 * $product->value;
                                $total = $profit + $product->value;
                            @endphp

                            <div class="p-6">
                                <h5 class="text-2xl font-semibold">${{ number_format($total * ($product->initial_quantity - $product->quantity), 2) }} <span class="text-base font-medium uppercase text-bgray-500">USDT</span></h5>
                                <div class="flex items-center justify-start">
                                    <p class="mt-2 text-slate-400">&nbsp;Amount Earned Off Sales - Paid To Main Balance</p>
                                </div>
                            </div>

                            <div class="p-6">
                                <h5 class="text-2xl font-semibold">{{ $product->quantity }} <span class="text-base font-medium uppercase text-bgray-500">Left</span></h5>
                                <div class="flex items-center justify-start">
                                    <p class="mt-2 text-slate-400">&nbsp;Available Quantity</p>
                                </div>
                            </div>
                        </div>


                        <div style="margin-bottom: 80px;" id="inventory"></div>
                       

                        {{--<h5 class="mt-6 text-lg font-semibold">Sale History</h5>
                        <small class="">Note: Only the most recent 100 records will be displayed</small>--}}
                        <div class="grid grid-cols-1 gap-6 mt-6 md:grid-cols-12">
                        </div><!--end grid-->
                    </div>
                </div><!--end grid-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- End Hero -->

@endsection