@extends('layout._default')

@section('body-con')

@section('styles')
<style> 
h1{
    color:white
}
h3{
    color:white;
}
h2{
    color:white;
}
h4{
    color:white;
}
.members-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
    width: 100%;
    color: #333; 
}

.inner-div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 250px; 
    width: 70%; 
  

}

.inner-div2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 250px; 
    width: 100%; 
  

}

.depth-div, .depth-div2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    background-color: #fff; 
 
}
.depth-div3, .depth-div4{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    background-color: #fff; 
 
}

.depth-div > div, .depth-div2 > div {
    height: 119px; 
    width: 33%; 
    border: 2px solid #DBDFE9; 
    background-color: #e7e7e7; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px; 
}
.depth-div3 > a , .depth-div4 > a {
    height: 119px; 
    width: 33%; 
    border: 2px solid #DBDFE9; 
    background-color: #e7e7e7; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px; 
}




.depth-div2{
    justify-content: space-between;
}

.depth-div4{
    justify-content: space-between;
}
.bigger-card {
    height: 240px;
    width:25%; 
    border: 2px solid #DDD; 
    background-color: #e9ecef; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px; 
}
.f24 {
    font-size:24px
}
.f20 {
    font-size:20px
}
.f24 {
    font-size:18px
}

.f32 {
    font-size:32px;
    color:white;
    text-align:center;
    
}
.f40 {
    font-size:40px;
    color:white;
    text-align:center;
    
}
.center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align:center;
}


</style>
@endsection
@section('title')
    Dashboard
@endsection 
<div class="members-container">
  <div class="bigger-card" style="background: linear-gradient(to right, #cc2b5e, #753a88);">
<h1 >Total Users</h1>
<h1 class="f40">{{ $user->whereIn('type', ['brand', 'influencer', 'collaboration_concierge', 'house'])->whereNotNull('email_verified_at')->count() }}</h1>


  </div>
    <div class="inner-div">
        <div class="depth-div">
         <div class="center"style=" background: linear-gradient(to right, #2193b0, #6dd5ed); width:100%"><h3>Active Logged in Users</h3>
          <h1 class="f32">{{ $activeUsers }}</h1></div>
        </div>

       <div class="depth-div2"> 
       <div class="center" style="  background: linear-gradient(to right, #2b5876, #4e4376);"><h3>Total Influencers</h3>
          <h1 class="f32">{{ $user->where('type', 'influencer')->whereNotNull('email_verified_at')->count() }} </h1></div>
            <div class="center" style="   background: linear-gradient(to right, #ec008c, #fc6767); "><h3>Total Houses</h3>
          <h1 class="f32">{{ $user->where('type', 'house')->whereNotNull('email_verified_at')->count() }} </h1></div>
          <div class="center" style="  background: linear-gradient(to right, #232526, #414345);"><h3>Total Brands</h3>
          <h1 class="f32">{{ $user->where('type', 'brand')->whereNotNull('email_verified_at')->count() }} </h1></div>
           <div class="center" style=" background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"><h3>Total Collaboration Concierges</h3>
          <h1 class="f32">{{ $user->where('type', 'collaboration_concierge')->whereNotNull('email_verified_at')->count() }}</h1></div>


        </div>
     </div>

     <div style="width:100%; border-top:1px solid #CDCDCD;"></div>




     {{-- <div class="bigger-card" style="background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);">
        <h1 style="text-align:center;">Total Active Collaboration</h1>
        <h1 class="f40">{{ $collaborations->where('status', 'ongoing')->count() }}</h1>


    </div> --}}
    <div class="inner-div2">
        <div class="depth-div3" style="justify-content:space-between;">
            <a  href="{{ route('leave-collaboration-request.list') }}" style="background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%); width:45%;" >
                <div class="center " ><h3>Leave Collaboration Requests</h3>
                    <h1 class="f32">{{ $leaveCollaborationRequestCount }}</h1></div>
            </a>
       
            <a href="{{ route('ghost-house-requests.influencers') }}" style="background-image: linear-gradient(to top, #7028e4 0%, #e5b2ca 100%); width:45%;">
                <div class="center" ><h3>Influencer House Requests</h3>
                    <h1 class="f32">{{ $houseJoiningRequests }}</h1></div>
            </a>
        </div>

       <div class="depth-div4 " style="justify-content:space-between;"> 
            <a href="{{ route('concierge-request.list') }}" style="background-image: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%) ; width:45%;">
                <div class="center" ><h3>Concierge Requests</h3>
                <h1 class="f32">{{ $conciergeRequests }}</h1></div>
            </a>
            <a href="{{ route('concierge-profile-verification.list') }}" style="background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%); width:45%;">
                <div class="center" ><h3>Concierge Profile Verification Requests</h3>
                <h1 class="f32" style="">{{ $profileVerifications }}</h1></div>
            </a>
        </div>
     </div>





     <div style="width:100%; border-top:1px solid #CDCDCD;"></div>




     <div class="bigger-card" style="background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);">
        <h1 style="text-align:center;">Total Active Collaboration</h1>
        <h1 class="f40">{{ $collaborations->where('status', 'ongoing')->count() }}</h1>


    </div>
    <div class="inner-div">
        <div class="depth-div" style="justify-content:space-around;">
         <div class="center " style="background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%); width:45%;" ><h3>Subscriptions/Commission Revenue</h3>
          <h1 class="f32">${{ $subscriptionRevenue }}</h1></div>
        
            <div class="center" style="background-image: linear-gradient(to top, #7028e4 0%, #e5b2ca 100%); width:45%;"><h3>Total Revenue</h3>
          <h1 class="f32">${{ $subscriptionRevenue + $payouts->whereIn('transferred_to', ['buyer_agent_company', 'seller_agent_company'])->where('status', 'paid')->sum('payout_amount')}}</h1></div>
        </div>

       <div class="depth-div2 " style="justify-content:space-around;"> 
          <div class="center" style="background-image: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%) ; width:45%;"><h3>Collaboration Concierge<br> Commission Revenue</h3>
          <h1 class="f32">${{ $payouts->whereIn('transferred_to', ['buyer_agent_company', 'seller_agent_company'])->where('status', 'paid')->sum('payout_amount') }}</h1></div>
           <div class="center" style="background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%); width:45%;"><h3>Influencers/Brands/Houses Collaborations</h3>
          <h1 class="f32" style="">${{ $payouts->where('status', 'paid')->where('transferred_to', 'company')->sum('payout_amount') }}</h1></div>
        </div>
     </div>


     
</div>


@endsection