@extends('layouts.user')

@section('title')
    My Marketers 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 Marketers Dashboard</h5>
                                </div>
                            </div>

                            <div class="p-6">
                                <h5 class="text-2xl font-semibold">{{ count($team) }} <span class="text-base font-medium uppercase text-bgray-500">Members</span></h5>
                                <p class="mt-2 text-slate-400">Team Total</p>
                            </div>
                            <div class="items-center justify-between p-6 border-t border-b border-gray-100 md:flex dark:border-gray-700">
                                <div class="mb-4 md:mb-0">
                                    <h5 class="text-2xl font-semibold">${{ number_format(auth()->user()->rebates, 2) }} <span class="text-base font-medium uppercase text-bgray-500">USDT</span></h5>
                                    <p class="mt-2 text-slate-400">Rebate Bonus</p>
                                </div>
                                <form action="{{ route('rebate_to_balance') }}" method="post">
                                    @csrf
                                    <input type="hidden" name="amount" value="{{ auth()->user()->rebates }}">
                                    <button type="submit" class="inline-block px-5 py-2 text-base font-semibold tracking-wide text-center text-orange-400 align-middle duration-500 rounded-md"
                                    style="background-color: #660066;">
                                        Move To Wallet</button>
                                </form>
                            </div>
                        </div>

                        <form method="get" action="{{ route('marketer') }}">
                        @csrf
                        <div class="w-full md:w-[80%] lg:w-[50%] mt-4 mx-auto">
                            <label class="block mb-2 font-medium dark:text-gray-100 ">Filter By Email Or Username :</label>
                            <div class="flex mb-3 border border-gray-100 rounded dark:border-zinc-600 dark:text-zinc-100">
                                <select name="filter" class="border-0 ltr:pl-1.5 rtl:pr-1.5 focus:border-violet-100 focus:ring focus:ring-violet-50/60 focus:z-40 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100 dark:focus:ring-gray-500/10" style="max-width: 130px;">
                                    <option value="email" selected="">Email</option>
                                    <option value="username" selected="">Store Name</option>
                                </select>
                                <input type="text" id="value" required name="value" class="p-3 border-0 w-full py-1.5 focus:border-violet-100 focus:ring focus:ring-violet-50/60 dark:bg-zinc-700 dark:placeholder:text-gray-200 dark:focus:ring-gray-500/10" placeholder="Enter Search">
                            </div>
                        </div> 
                        <div class="w-full md:w-[80%] lg:w-[50%] mx-auto">
                            <button type="submit" 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" style="background-color: #ec595a">Filter Search</button>
                        </div> 
                    </form>

                    <div class="mt-8">
                        <a href="{{ route('marketer') }}" class="text-green-500">&larr; Back To All</a>
                    </div>


                <div class="grid md:grid-cols-12 grid-cols-1 mt-6 gap-6">
                    <div class="lg:col-span-12 md:col-span-12">
                        <div class="sticky top-20">
                            <ul class="flex-column p-6 bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
                                <li role="presentation">
                                    <button class="px-4 py-2 text-start text-base font-semibold rounded-md w-full hover:text-orange-500 duration-500" id="description-tab" data-tabs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="true">Team Performance</button>
                                </li>
                                <li role="presentation">
                                    <button class="px-4 py-2 text-start text-base font-semibold rounded-md w-full mt-3 duration-500" id="addinfo-tab" data-tabs-target="#addinfo" type="button" role="tab" aria-controls="addinfo" aria-selected="false">Rebate Record</button>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="lg:col-span-12 md:col-span-12">
                        <div id="myTabContent" class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md">
                            <div class="" id="description" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="relative overflow-x-auto rounded-md shadow dark:shadow-gray-800">
                                    <table class="text-start text-slate-500 dark:text-slate-400" style="width: 150%;">
                                        <thead class="text-sm uppercase bg-slate-50 dark:bg-slate-800">
                                            <tr class="text-start">
                                                <th scope="col" class="px-2 py-3 text-start">Member</th>
                                                <th scope="col" class="px-2 py-3 text-start">Main Balance</th>
                                                <th scope="col" class="px-2 py-3 text-start">Rebate Balance</th>
                                                <th scope="col" class="px-2 py-3 text-start">Affiliate Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        @forelse($members as $member)
                                            @if(in_array($member->id, $team))
                                            <tr class="bg-slate-800 dark:bg-slate-900 text-start">
                                                <td class="px-2 py-3 text-start">
                                                    @if($member->username)
                                                    <a href="{{ route('member', $member->username) }}">
                                                        <span>{{ ucfirst($member->username) }}</span> <br>
                                                    </a>
                                                    @else
                                                    <a href="#">
                                                        <span>{{ ucfirst($member->first_name) . ' ' . ucfirst($member->last_name) . ' (NO STORE)' }}</span> <br>
                                                    </a>
                                                    @endif
                                                </td>
                                                <td class="px-2 py-3 text-start">$ {{ number_format($member->balance, 2) }}</td>
                                                <td class="px-2 py-3 text-start">$ {{ number_format($member->rebates, 2) }}</td>
                                                @if(count($member->referrals) > 0)
                                                    <td class="px-2 py-3 text-green-600 text-start">Active</td>
                                                @else
                                                    <td class="px-2 py-3 text-red-600 text-start">In-Active</td>
                                                @endif
                                            </tr>
                                            @else
                                            @endif
                                        @empty
                                        @endforelse
                                        @php
                                            $memberIds = $members->pluck('id')->toArray();
                                            if(!collect($memberIds)->intersect($team)->count()){
                                                $notFound = true;
                                            }else{
                                                $notFound = false;
                                            }
                                        @endphp
                                        @if($notFound)
                                        <span class="text-slate-400 m-6 text-center">No Records Found!</span>
                                        @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="hidden" id="addinfo" role="tabpanel" aria-labelledby="addinfo-tab">
                                <table class="text-start text-slate-500 dark:text-slate-400 w-full">
                                    <thead class="text-sm uppercase bg-slate-50 dark:bg-slate-800">
                                        <tr class="text-start">
                                            <th scope="col" class="px-2 py-3 text-start">From</th>
                                            <th scope="col" class="px-2 py-3 text-start">Amount</th>
                                            <th scope="col" class="px-2 py-3 text-start">Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @forelse($rebates as $rebate)
                                        @if(in_array($rebate->user_id, $team))
                                        <tr class="bg-white dark:bg-slate-900 text-start">
                                            <td class="px-2 py-3 text-start">
                                                <a>
                                                    <span>Rebate Bonus</span> <br>
                                                    <span class="text-xs">From: {{ ucfirst($rebate->user->username) }}</span>
                                                </a>
                                            </td>
                                            <td class="px-2 py-3 text-green-600">
                                                 + $ 
                                                @if(in_array($rebate->user_id, $first))
                                                    {{ auth()->user()->first_rebate/100 * $rebate->amount }}
                                                @elseif(in_array($rebate->user_id, $second))
                                                    {{ auth()->user()->second_rebate/100 * $rebate->amount }}
                                                @elseif(in_array($rebate->user_id, $third))
                                                    {{ auth()->user()->third_rebate/100 * $rebate->amount }}
                                                @endif
                                            </td>
                                            <td class="px-2 py-3 text-start text-xs">
                                                {{ date('M j Y', strtotime($rebate->created_at)) }}
                                            </td>
                                        </tr>
                                        @else
                                        @endif
                                    @empty
                                    @endforelse
                                    </tbody>
                                </table>
                            </div>

                            <div class="hidden" id="review" role="tabpanel" aria-labelledby="review-tab">
                            
                            </div>
                        </div>
                    </div>
                </div><!--end grid-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- End Hero -->

@endsection