@extends('layouts.user')

@section('title')
    Affiliate Vendor Dashboard
@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">My Vendor Dashboard</h5>
                                </div>
                            @if($vendor->status == 'approved')
                                <a href="{{ route('add-vendor-products') }}" 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 m-2">Add Products Myself</a>
                                <a href="{{ route('agent-form') }}" style="background-color: #660066;" class="inline-block px-5 py-2 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 rounded-md m-2">Add Products Via Agent</a>
                            @endif
                            </div>
                        </div>

                        @if($vendor->status == 'pending')
                        <div class="p-4 text-center">
                            <img src="{{ asset('images/pending.png') }}" class="mx-auto h-28" alt="store"/>
                            <p class="mt-6 mb-6 text-slate-400">Your application is being reviewed!</p>
                        </div>

                        @elseif($vendor->status == 'approved')

                        @php $awaitingProducts = $vendor->products?->where('status', 0); @endphp

                        <p class="mt-4 font-semibold">List of products awaiting approval</p>
                        <small class="">Once your product request has been sent, it'll move to the list of products to be sent to us, else if declined, will be removed from this list.</small>
                        @if(count($awaitingProducts) > 0)
                            @foreach($awaitingProducts as $product) 
                                <li class="flex items-center justify-between pb-6">
                                    <div class="flex items-center">
                                        <img src="{{ asset('storage/products/'.$product->image1) }}" class="w-16 rounded shadow dark:shadow-gray-800" alt="">

                                        <div class="ms-4">
                                            <a href="javascript:void(0)" class="text-xs font-semibold hover:text-orange-500" style="line-height: 0.1 !important;">{{ $product->name }}</a>
                                            <p class="mt-1 text-sm text-green-600">${{ number_format($product->value, 2) }} <br>
                                                <span class="text-dark">
                                                    {{ $product->category }} <br> 
                                                    {{--Quantity: --}}
                                                </span>
                                            </p>
                                        </div>
                                    </div>

                                    <span class="inline-flex items-center justify-center px-4 text-base tracking-wide text-center text-orange-500 align-middle rounded-lg bg-orange-500/10 duration-50">
                                        Pending...
                                    </span>
                                </li>
                            @endforeach
                        @else
                        <div class="p-6 mt-2 mb-4 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                            <p class="mb-4 text-slate-400">You don't have any product pending requests</p>
                        </div>
                        @endif

                        @php $pendingProducts = $vendor->products?->whereIn('status', [1, 2]); @endphp

                        @if(count($pendingProducts) > 0)
                        <p class="mb-4 mt-8 font-semibold">List of approved products to send to us</p> 
                        <small class="">After you've sent the products kindly click on the "Sent" button for any product you send</small> <br>
                        <small class="">Send your products to the location attached to each of them through any of the courier services recommended </small>
                        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4">
                            <a href="https://fedex.com" class="flex justify-center w-full p-3 my-2 border" style="background: purple;">
                                <img src="{{ asset('images/fedex.png') }}" style="height: 15px;" alt="fedex"/>
                            </a>
                            <a href="https://www.dhl.com/" class="flex justify-center w-full p-3 my-2 border" style="background: yellow;">
                                <img src="{{ asset('images/dhl.svg') }}" style="height: 15px;" alt="fedex"/>
                            </a>
                            <a href="https://www.zto.com/" class="flex justify-center w-full p-3 my-2 border" style="background: blue;">
                                <img src="{{ asset('images/zto.png') }}" style="height: 15px;" alt="fedex"/>
                            </a>
                            <a href="https://www.ups.com/" class="flex justify-center w-full p-3 my-2 border" style="background: bllack;">
                                <img src="{{ asset('images/ups.svg') }}" style="height: 25px;" alt="fedex"/>
                            </a>
                        </div>

                        @foreach($pendingProducts as $product) 
                            <li class="flex items-center justify-between pb-6 mt-4">
                                <div class="flex items-center">
                                    <img src="{{ asset('storage/products/'.$product->image1) }}" class="w-16 rounded shadow dark:shadow-gray-800" alt="">

                                    <div class="ms-4">
                                        <a href="javascript:void(0)" class="text-xs font-semibold hover:text-orange-500" style="line-height: 0.1 !important;">{{ $product->name }}</a>
                                        <p class="mt-1 text-sm text-green-600">${{ number_format($product->value, 2) }} <br>
                                            <span class="text-dark">
                                                {{ $product->category }} <br> 
                                                <address class="text-xs font-semibold">Drop Off Location: {{ $product?->dropoff }}</address>
                                                {{--Quantity: --}}
                                            </span>
                                        </p>
                                    </div>
                                </div>

                                @if($product->status == 1)
                                <div>
                                    <a href="{{ route('send-product-form', $product->id) }}" style="width: 70px;" class="inline-flex items-center justify-center text-base tracking-wide text-center text-white align-middle bg-red-600 rounded-lg duration-50 hover:bg-red-600 hover:text-white">Sent</a>                                   
                                </div>
                                @elseif($product->status == 2)
                                <span class="inline-flex items-center justify-center px-4 text-base tracking-wide text-center text-orange-500 align-middle rounded-lg bg-orange-500/10 duration-50">
                                    Pending...
                                </span>
                                @endif
                            </li>
                            <hr>
                        @endforeach
                        @else
                        @endif

                        @php
                            $total = 0;
                            foreach(auth()->user()->products as $o){
                                $total += $o->value * $o->quantity;
                            }
                        @endphp
                        <h5 class="mt-6 mb-2 text-lg font-semibold">My Products Up For Auction<br>(Store Value: ${{ number_format($total, 2) }}<span class="text-base font-medium uppercase text-bgray-500"></span>) </h5>
                        {{--<small class="">Note: Any earnings from sales on your product move to your Main Wallet Balance</small> <br>--}}
                        <div class="p-2 rounded-md shadow dark:shadow-gray-800">
                            <ul>
                                @forelse(auth()->user()->products as $product)
                                <li class="flex items-center justify-between pb-6">
                                    <div class="flex items-center">
                                        <img src="{{ asset('storage/products/'.$product->image1) }}" class="w-16 rounded shadow dark:shadow-gray-800" alt="">

                                        <div class="ms-4">
                                            <a href="javascript:void(0)" class="text-xs font-semibold hover:text-orange-500" style="line-height: 0.1 !important;">{{ $product?->name }}</a>
                                            <p class="mt-1 text-sm text-green-600">${{ number_format($product->value * $product->quantity, 2) }} <br>
                                                <span class="text-dark">
                                                    {{ $product?->market?->name }} <br> 
                                                    Available Quantity: {{ $product->quantity }}
                                                </span>
                                            </p>
                                        </div>
                                    </div>

                                <div>
                                    <a href="{{ route('affiliate-product-details', $product->slug) }}" style="width: 90px;" class="inline-flex items-center justify-center text-base tracking-wide text-center text-white align-middle bg-orange-600 rounded-lg duration-50 hover:bg-red-600 hover:text-white mb-2">View Info</a>  <br>
                                    @if($product->quantity - count($product->bids()->where('status', 1)->get()) < 1)
                                        <span class="inline-flex items-center justify-center px-4 text-base tracking-wide text-center text-orange-500 align-middle rounded-lg bg-orange-500/10 duration-50">
                                            Sold Out
                                        </span> 
                                    @else
                                        <span class="inline-flex items-center justify-center px-4 text-base tracking-wide text-center text-green-600 align-middle rounded-lg bg-green-600 duration-50">
                                            Active
                                        </span> 
                                    @endif                              
                                </div>

                                {{--@if($product->status == 1)
                                <div>
                                    <a href="{{ route('send-product-form', $product->id) }}" style="width: 70px;" class="inline-flex items-center justify-center text-base tracking-wide text-center text-white align-middle bg-red-600 rounded-lg duration-50 hover:bg-red-600 hover:text-white">Sent</a>                                   
                                </div>
                                @elseif($product->status == 2)
                                <span class="inline-flex items-center justify-center px-4 text-base tracking-wide text-center text-orange-500 align-middle rounded-lg bg-orange-500/10 duration-50">
                                    Pending...
                                </span>
                                @endif--}}  

                                </li>
                                @empty
                                <div class="p-4 text-center">
                                    <img src="{{ asset('images/store-1.png') }}" class="mx-auto h-28" alt="store"/>
                                    <p class="mt-6 mb-6 text-slate-400">You have no approved products in your affiliate store!</p>
                                    <a href="{{ route('bid-markets') }}" class="p-3 mx-auto text-center border rounded-lg">Add Items +</a>
                                </div>
                                @endforelse
                            </ul>
                        </div>

                        @else
                        <div class="p-4 text-center">
                            <img src="{{ asset('images/disapprove.png') }}" class="mx-auto h-28" alt="store"/>
                            <p class="mt-6 mb-6 text-slate-400">Sorry your application was declined!</p>
                            <a href="{{ route('vendor-apply') }}" class="p-3 mx-auto text-center border rounded-lg">Apply Again</a>
                        </div>
                        @endif

                    </div>
                </div><!--end grid-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- End Hero -->

@endsection