@extends('layouts.app')

@section('title', 'Dashboard')
@push('css')
    <link rel="stylesheet" href="{{ asset('assets/css/custom/dashboard.css') }}">
@endpush

@section('content')
    <x-content-body>
        <div class="row property_card_container ">
            <div class="col-lg-2 col-md-12 d-lg-block gap-md-2 mt-md-4 mt-lg-0">

                <div class="card-dashboard col-lg-12 col-md-12 col-md-2 d-lg-block d-md-flex gap-md-2 mb-0 pb-0">
                    <div class="card col-lg-12 col-md-6 mb-md-1 my-3 my-md-auto p-3 shadow sub-card">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card property-card  mb-0 mb-lg-1 h-auto shadow-s p-2"
                                    style="border: 1px solid #17A2B8; position: relative;">
                                    <!-- Dropdown Menu -->

                                    <div style="position: absolute; top: 2px; right: 2px;">
                                        <!-- Hamburger Dropdown 1 -->
                                        <div class="dropdown">
                                            <button class="btn btn-sm " type="button" id="stagesHamburger1"
                                                data-bs-toggle="dropdown" aria-expanded="false"
                                                style="background: none; border: none; padding: 2px 8px; font-size: 18px;">
                                                <i class="bi bi-three-dots-vertical fs-22 text-primary"></i>
                                            </button>
                                            {{-- <ul class="dropdown-menu dropdown-menu-end" style="background:#e5e5e5"
                                                aria-labelledby="stagesHamburger1">
                                                @foreach ($stages as $stage)
                                                    <li><a class="dropdown-item px-2" href="#"
                                                            onclick="updateStages(1, '{{ $stage }}')">{{ $stage }}</a>
                                                    </li>
                                                @endforeach
                                            </ul> --}}
                                            <ul class="dropdown-menu dropdown-menu-end overflow-auto"
                                                style="background:#e5e5e5; max-height: calc(4 * 40px);"
                                                aria-labelledby="stagesHamburger1">

                                                @foreach ($stages as $stage)
                                                    <li>
                                                        <a class="dropdown-item px-2" href="#"
                                                            onclick="updateStages(1, '{{ $stage }}')">
                                                            {{ $stage }}
                                                        </a>
                                                    </li>
                                                @endforeach

                                            </ul>

                                        </div>
                                    </div>

                                    <!-- Card Content -->
                                    <h5 class="card-title text-primary mb-2">Contacts</h5>
                                    <p id="stages_title1">Loading...</p>
                                    <p class="subn-number" id="stages_count1">0</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card col-lg-12 col-md-6 mb-0 p-3 shadow sub-card">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card property-card mt-lg-1 mb-lg-1 mb-0 h-auto p-2"
                                    style="border: 1px solid #17A2B8; position: relative;">
                                    <!-- Dropdown Menu2 -->
                                    <div style="position: absolute; top: 2px; right: 2px;">
                                        <!-- Hamburger Dropdown 2 -->
                                        <div class="dropdown">
                                            <button class="btn btn-sm" type="button" id="stagesHamburger2"
                                                data-bs-toggle="dropdown" aria-expanded="false"
                                                style="background: none; border: none; padding: 2px 8px; font-size: 18px;">
                                                <i class="bi bi-three-dots-vertical fs-22 text-primary"></i>
                                            </button>
                                            {{-- <ul class="dropdown-menu dropdown-menu-end" style="background:#e5e5e5"
                                                aria-labelledby="stagesHamburger2 ">
                                                @foreach ($leadStages as $stage)
                                                    <li><a class="dropdown-item px-2" href="#"
                                                            onclick="updateStages(2, '{{ $stage }}')">{{ $stage }}</a>
                                                    </li>
                                                @endforeach
                                            </ul> --}}
                                            <ul class="dropdown-menu dropdown-menu-end overflow-auto"
                                                style="background:#e5e5e5; max-height: calc(4 * 40px);"
                                                aria-labelledby="stagesHamburger2">

                                                @foreach ($leadStages as $stage)
                                                    <li>
                                                        <a class="dropdown-item px-2" href="#"
                                                            onclick="updateStages(2, '{{ $stage }}')">
                                                            {{ $stage }}
                                                        </a>
                                                    </li>
                                                @endforeach

                                            </ul>

                                        </div>
                                    </div>

                                    <!-- Card Content -->
                                    <h5 class="card-title text-primary mb-2">Leads</h5>
                                    <p id="stages_title2">Loading...</p>
                                    <p class="subn-number" id="stages_count2">0</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Card 1 -->
            <div class="col-md-3 col-lg-2 mb-0 pb-0 mt-md-0 mt-3 swip-design">
                <div class="card dashboard-card text-center" id="card1" onclick="toggleFlip(this)">
                    <!-- Front Side -->
                    <div class="front text-center">
                        <div class="card-title text-primary mb-3 mt-3">Pre Listings</div>
                        <div class="card-text">Last Month</div>
                        <div class="progress-circle mb-0" style="max-height: 150px;">
                            <svg width="120" height="120">
                                <circle class="circle-bg" cx="60" cy="60" r="50"></circle>
                                <circle class="circle-progress" id="offersProgress1" cx="60" cy="60" r="50"
                                    stroke="#333">
                                </circle>
                            </svg>
                            <div class="progress-value" id="offersValue1">{{ count($pre_listings) }}/12</div>
                        </div>
                        <div class="card-title text-primary  fs-md-20">
                            @php $total = 0; @endphp
                            @foreach ($pre_listings as $pre)
                                @php $total += (float) $pre['listing_price']; @endphp
                            @endforeach
                            {{-- Amount <br> ${{ number_format($total, 0) }} --}}
                            <span style="color: rgb(118,126,142);">Amount <br> ${{ number_format($total, 0) }}</span>

                        </div>
                    </div>
                    <!-- Back Side -->
                    <div class="back  p-2">
                        <div>
                            <div class="card-title text-primary text-center">Details</div>
                            <div class="card-subtitle   text-start">
                                <ol>
                                    @forelse($pre_listings as $pre)
                                        <li style="list-style-type: auto !important;">
                                            @if (!empty($pre['addresses']))
                                                @foreach ($pre['addresses'] as $address)
                                                    {{ $address['street'] }},{{ $address['city'] }},{{ $address['state'] }}
                                                @endforeach
                                            @else
                                                No address available
                                            @endif
                                        </li>
                                    @empty
                                        <li> No details available </li>
                                    @endforelse
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-lg-2 mb-0 pb-0 mt-md-0 mt-3 swip-design">
                <div class="card dashboard-card text-center" id="card2" onclick="toggleFlip(this)">
                    <!-- Front Side -->
                    <div class="front">
                        <div class="card-title text-primary mb-3 mt-3">Listings</div>
                        <div class="card-text">Last month</div>
                        <div class="progress-circle mb-0" style="max-height: 150px;">
                            <svg width="120" height="120">
                                <circle class="circle-bg" cx="60" cy="60" r="50"></circle>
                                <circle class="circle-progress" id="dealsProgress" cx="60" cy="60" r="50"
                                    stroke="#ffa500">
                                </circle>
                            </svg>
                            <div class="progress-value" id="dealsValue">{{ count($listings) }}/120</div>
                        </div>
                        <div class="card-title text-primary fs-md-20">
                            @php $total = 0; @endphp
                            @foreach ($listings as $pre)
                                @php $total += (float) $pre['listing_price']; @endphp
                            @endforeach
                            {{-- Amount <br> ${{ number_format($total, 0) }} --}}
                            <span style="color: rgb(118,126,142);">Amount <br> ${{ number_format($total, 0) }}</span>
                        </div>
                    </div>
                    <!-- Back Side -->
                    <div class="back  p-2">
                        <div>
                            <div class="card-title text-primary text-center">Details</div>
                            <div class="card-subtitle text-start">
                                <ol>
                                    @forelse($listings as $pre)
                                        <li style="list-style-type: auto !important;">
                                            @if (!empty($pre['addresses']))
                                                @foreach ($pre['addresses'] as $address)
                                                    {{ $address['street'] }},{{ $address['city'] }},{{ $address['state'] }}
                                                @endforeach
                                            @else
                                        <li> No address available</li>
                                    @endif
                                    </li>
                                @empty
                                    <li>No details available</li>
                                    @endforelse
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-lg-2 mb-0 pb-0 mt-md-0 mt-3 swip-design">
                <div class="card dashboard-card text-center" id="card3" onclick="toggleFlip(this)">

                    <div class="front">
                        <div class="card-title text-primary mb-3 mt-3 text-wrap">
                            Pendings
                        </div>
                        <div class="card-text mb-3" style="color: #6c757d; font-size: 0.9rem;">Last Month</div>
                        <div class="progress-circle mb-0" style="max-height: 150px;">
                            <svg width="120" height="120">
                                <circle class="circle-bg" cx="60" cy="60" r="50" stroke="#e9ecef"
                                    stroke-width="10" fill="none"></circle>
                                <circle class="circle-progress" id="offersProgress2" cx="60" cy="60"
                                    r="50" stroke="#007bff" stroke-width="10" stroke-dasharray="314"
                                    stroke-dashoffset="157" fill="none"></circle>
                            </svg>
                            <div class="progress-value" id="offersValue2" style="font-size: 1.2rem; font-weight: bold;">
                                {{ count($pending_properties) }}/40
                            </div>
                        </div>

                        <div class="card-title text-primary fs-md-20">
                            @php $total = 0; @endphp
                            @foreach ($pending_properties as $pre)
                                @php $total += (float) $pre['listing_price']; @endphp
                            @endforeach
                            {{-- Amount <br> ${{ number_format($total, 0) }} --}}
                            <span style="color:  rgb(118,126,142); ">Amount <br> ${{ number_format($total, 0) }}</span>
                        </div>
                    </div>

                    <!-- Back Side -->
                    <div class="back text-center p-2">
                        <div>
                            <div class="card-title text-primary text-center">Details</div>
                            <div class="card-subtitle text-start">
                                <ol>
                                    @forelse($pending_properties as $pre)
                                        <li style="list-style-type: auto !important;">
                                            @if (!empty($pre['addresses']))
                                                @foreach ($pre['addresses'] as $address)
                                                    {{ $address['street'] }},{{ $address['city'] }},{{ $address['state'] }}
                                                @endforeach
                                            @else
                                        <li> No address available</li>
                                    @endif
                                    </li>
                                @empty
                                    <li> No details available</li>
                                    @endforelse
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-lg-2 mb-0 pb-0 mt-md-0 mt-3 swip-design text-center">
                <div class="card dashboard-card text-center" id="card4" onclick="toggleFlip(this)">
                    <!-- Front Side -->
                    <div class="front">
                        <div class="card-title text-primary mb-3 mt-3">Closed</div>
                        <div class="card-text">Last Month</div>
                        <div class="progress-circle mb-0" style="max-height: 150px;">
                            <svg width="120" height="120">
                                <circle class="circle-bg" cx="60" cy="60" r="50"></circle>
                                <circle class="circle-progress" id="quarterlyProgress" cx="60" cy="60"
                                    r="50" stroke="#00b4d8">
                                </circle>
                            </svg>
                            <div class="progress-value" id="quarterlyValue">{{ count($close_properties) }}/360</div>
                        </div>
                        <div class="card-title text-primary fs-md-20">
                            @php $total = 0; @endphp
                            @foreach ($close_properties as $pre)
                                @php $total += (float) $pre['property']['listing_price']; @endphp
                            @endforeach
                            {{-- Amount <br> ${{ number_format($total, 0) }} --}}
                            <span style="color:  rgb(118,126,142);"> Amount <br> ${{ number_format($total, 0) }}</span>
                        </div>
                    </div>
                    <!-- Back Side -->
                    <div class="back text-center p-2">
                        <div>
                            <div class="card-title text-primary text-center">Details</div>
                            <div class="card-subtitle text-start">
                                <ol>
                                    @forelse($close_properties as $pre)
                                        <li style="list-style-type: auto !important;">
                                            @if (!empty($pre['addresses']))
                                                @foreach ($pre['addresses'] as $address)
                                                    {{ $address['street'] }},{{ $address['city'] }},{{ $address['state'] }}
                                                @endforeach
                                            @else
                                                No address available
                                            @endif
                                        </li>
                                    @empty
                                        <li> No details available</li>
                                    @endforelse
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-lg-2 mb-0 pb-0 mt-md-0 mt-3 swip-design text-center">
                <div class="card dashboard-card text-center p-3">
                    <!-- Card Header (Title on Top) -->
                    <div class="card-title text-primary fw-bold">
                        Commission
                    </div>

                    <!-- Card Body -->

                    <div class="card-body d-flex flex-column">
                        <div class="mb-3 border-bottom pb-2">
                            <span class="fw-bold d-block">Monthly</span>
                            <span id="profitValue1" class=" fw-bold d-block">$Loading...</span>
                        </div>
                        <div class="mb-3 border-bottom pb-2">
                            <span class="fw-bold d-block">Quarterly</span>
                            <span id="profitValue2" class=" fw-bold d-block">$Loading...</span>
                        </div>
                        <div class="mb-3 border-bottom pb-2">
                            <span class="fw-bold  d-block">Year to Date</span>
                            <span id="profitValue3" class="fw-bold d-block">$Loading...</span>
                        </div>
                        <div>
                            <span class="fw-bold  d-block">Fiscal Year</span>
                            <span id="profitValue4" class="fw-bold d-block">$Loading...</span>
                        </div>
                    </div>

                </div>
            </div>



            {{-- <div class="card-dashboard col-lg-2 col-md-12 col-md-2 d-lg-block d-md-flex gap-2 mb-0 pb-0">
            <div class="card col-lg-12 col-md-6 mb-md-1 mt-0 mt-lg-0  mt-md-4 p-3 shadow sub-card">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card property-card mt-lg-1 shadow-s p-2"
                            style="border: 1px solid #17A2B8; position: relative;">
                            <!-- Dropdown Menu -->

                            <div style="position: absolute; top: 2px; right: 2px;">
                                <!-- Hamburger Dropdown 1 -->
                                <div class="dropdown">
                                    <button class="btn btn-sm " type="button" id="filterHamburger1"
                                        data-bs-toggle="dropdown" aria-expanded="false"
                                        style="background: none; border: none; padding: 2px 8px; font-size: 18px;">
                                        <i class="bi bi-three-dots-vertical fs-22 text-primary"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end" style="background:#e5e5e5"
                                        aria-labelledby="filterHamburger1">
                                        <li><a class="dropdown-item px-2" href="#"
                                                onclick="updateClosedProperties(1, 'Month')">Month</a></li>
                                        <li><a class="dropdown-item px-2" href="#"
                                                onclick="updateClosedProperties(1, 'Current Quater Comission')">Current
                                                Quater</a></li>
                                        <li><a class="dropdown-item px-2" href="#"
                                                onclick="updateClosedProperties(1, 'Year to Date Comission')">Year to Date</a>
                                        </li>
                                        <li><a class="dropdown-item px-2" href="#"
                                                onclick="updateClosedProperties(1, 'Fiscal Year Comission')">Fiscal Year</a></li>
                                    </ul>
                                </div>
                            </div>

                            <!-- Card Content -->
                            <h5 id="main-title1" class="card-title text-primary mb-3"></h5>
                            <p id="title1">Current quarter</p>
                            <p class="subn-number" id="profitValue1">$0.00</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card col-lg-12 col-md-6 mb-md-1 mt-0 mt-lg-0  mt-md-4 p-3 shadow sub-card">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card property-card mt-lg-1 p-2 mb-md-4" style="border: 1px solid #17A2B8; position: relative;">
                            <!-- Dropdown Menu2 -->
                            <div style="position: absolute; top: 2px; right: 2px;">
                                <!-- Hamburger Dropdown 2 -->
                                <div class="dropdown">
                                    <button class="btn btn-sm" type="button" id="filterHamburger2"
                                        data-bs-toggle="dropdown" aria-expanded="false"
                                        style="background: none; border: none; padding: 2px 8px; font-size: 18px;">
                                        <i class="bi bi-three-dots-vertical fs-22 text-primary"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end" style="background:#e5e5e5"
                                        aria-labelledby="filterHamburger2">
                                        <li><a class="dropdown-item px-2" href="#"
                                                onclick="updateClosedProperties(2, 'Month')">Month</a></li>
                                        <li><a class="dropdown-item px-2" href="#"
                                                onclick="updateClosedProperties(2, 'Current Quater')">Current
                                                Quater</a></li>
                                        <li><a class="dropdown-item px-2" href="#"
                                                onclick="updateClosedProperties(2, 'Year to Date')">Year to Date</a>
                                        </li>
                                        <li><a class="dropdown-item px-2" href="#"
                                                onclick="updateClosedProperties(2, 'Fiscal Year')">Fiscal Year</a></li>
                                    </ul>
                                </div>
                            </div>

                            <!-- Card Content -->
                            <h5 id ="main-title2"class="card-title text-primary mb-3">Montly Comission</h5>
                            <p id="title2">Current quarter</p>
                            <p class="subn-number" id="profitValue2">$0.00</p>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
        </div>

        <div class="row mt-md-2 total-commission">
            <div class="col-md-6">

                <div class="row d-flex commission-row">
                    <!-- Card 1 -->
                    <div class="col-md-6 d-flex ">
                        <div class="card shadow  w-100  ">
                            <div class="card-body text-center">
                                <div class="card-title text-primary mb-3">Total Comission</div>
                                <div style="position: absolute; top: 2px; right: 2px;">
                                    <!-- Hamburger Dropdown 3 -->
                                    <div class="dropdown">
                                        <button class="btn btn-sm" type="button" id="filterHamburger3"
                                            data-bs-toggle="dropdown" aria-expanded="false"
                                            style="background: none; border: none; padding: 2px 8px; font-size: 18px;">
                                            <i class="bi bi-three-dots-vertical fs-22 text-primary"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end" style="background:#e5e5e5"
                                            aria-labelledby="filterHamburger3">
                                            <li><a class="dropdown-item px-2" href="#"
                                                    onclick="updateClosedProperties(3, 'Month')">Month</a></li>
                                            <li><a class="dropdown-item px-2" href="#"
                                                    onclick="updateClosedProperties(3, 'Current Quater')">Current
                                                    Quater</a></li>
                                            <li><a class="dropdown-item px-2" href="#"
                                                    onclick="updateClosedProperties(3, 'Year to Date')">Year to Date</a>
                                            </li>
                                            <li><a class="dropdown-item px-2" href="#"
                                                    onclick="updateClosedProperties(3, 'Fiscal Year')">Fiscal Year</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card-subtitle" id="title3">Last month</div>
                                <p class="subn-number" id="profitValue3">${{ $projectCommission }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Card 2 -->
                    <div class="col-md-6 d-flex mb-md-0 mb-3">
                        <div class="card shadow w-100  ">
                            <div class="card-body text-center">
                                <div class="card-title text-primary mb-3">Project Profit</div>
                                <div style="position: absolute; top: 2px; right: 2px;">
                                    <!-- Hamburger Dropdown 4 -->
                                    <div class="dropdown">
                                        <button class="btn btn-sm" type="button" id="filterHamburger4"
                                            data-bs-toggle="dropdown" aria-expanded="false"
                                            style="background: none; border: none; padding: 2px 8px; font-size: 18px;">
                                            <i class="bi bi-three-dots-vertical fs-22 text-primary"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end" style="background:#e5e5e5"
                                            aria-labelledby="filterHamburger4">
                                            <li><a class="dropdown-item px-2" href="#"
                                                    onclick="updateClosedProperties(4, 'Month')">Month</a></li>
                                            <li><a class="dropdown-item px-2" href="#"
                                                    onclick="updateClosedProperties(4, 'Current Quater')">Current
                                                    Quater</a></li>
                                            <li><a class="dropdown-item px-2" href="#"
                                                    onclick="updateClosedProperties(4, 'Year to Date')">Year to Date</a>
                                            </li>
                                            <li><a class="dropdown-item px-2" href="#"
                                                    onclick="updateClosedProperties(4, 'Fiscal Year')">Fiscal Year</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card-subtitle" id="title4">Current quater</div>
                                <p class="subn-number" id="profitValue4">${{ $projectCommission }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-2 property_status_overview_card">
                    <div class="col-12 ">
                        <div class="card shadow p-4 text-center ">
                            <div class="card-title text-center text-primary mb-3">Property Status Overview</div>
                            <div class="d-flex justify-content-center">
                                <canvas id="myChart" style="width:100%; max-width:600px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>


                {{-- <div class="row">
                <div class="col-md-12">
                    <div class="card shadow text-center h-100">
                        <div class="card-title text-center text-primary my-lg-5 my-md-4 my-3">Transaction</div>
                        <div class="d-flex justify-content-center">
                            <!-- Use responsive classes for height control -->
                            <div id="transection"
                                class="w-100"
                                style="max-width: 700px; height: auto;">
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}
                <div class="row">
                    <div class="col-md-12">
                        <div class="card shadow text-center h-100">
                            <div class="card-title text-center text-primary my-2">Transaction</div>
                            <div class="d-flex justify-content-center align-items-center px-3">
                                <div id="transection" class="w-100" style="max-width: 600px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row my-3 top_closer_card">
                    <div class="col-12">
                        <div class="card top-closers-card p-2 rounded shadow">
                            <h5 class="mb-2 card-title text-center text-primary">Top Performers</h5>
                            <p class="text-muted text-center">Current quarter</p>

                            <!-- Scrollable Container -->
                            <div class="top-closers-scroll-horizontal">
                                <div class="d-flex">
                                    <!-- Top Closer 1 -->
                                    <div class="closer-item text-center">
                                        <div class="avatar-wrapper" style="border-color: #ffc107;">
                                            <div class="avatar">
                                                <img src="{{ asset('images/users/realtor.jpeg') }}" alt="David Howard">

                                            </div>
                                            <div class="rank" style="background-color: #ffc107;">1</div>
                                        </div>
                                        <p class="top-closer-name">David Howard</p>
                                        <p class="top-closer-value">$266,998</p>
                                    </div>

                                    <!-- Top Closer 2 -->
                                    <div class="closer-item text-center">
                                        <div class="avatar-wrapper" style="border-color: #6c757d;">
                                            <div class="avatar">
                                                <img src="{{ asset('images/users/realtor5.jpeg') }}" alt="David Howard">
                                            </div>
                                            <div class="rank" style="background-color: #6c757d;">2</div>
                                        </div>
                                        <p class="top-closer-name">Jennifer Mata</p>
                                        <p class="top-closer-value">$252,803</p>
                                    </div>


                                    <!-- Top Closer 3 -->
                                    <div class="closer-item text-center">
                                        <div class="avatar-wrapper" style="border-color: #ffa500;">
                                            <div class="avatar">
                                                <img src="{{ asset('images/users/realtor2.jpeg') }}" alt="David Howard">
                                            </div>
                                            <div class="rank" style="background-color: #ffa500;">3</div>
                                        </div>
                                        <p class="top-closer-name">Chris Morgan</p>
                                        <p class="top-closer-value">$234,500</p>
                                    </div>

                                    <!-- Top Closer 4 -->
                                    <div class="closer-item text-center">
                                        <div class="avatar-wrapper" style="border-color: #28a745;">
                                            <div class="avatar">
                                                <img src="{{ asset('images/users/realtor6.jpeg') }}" alt="David Howard">
                                            </div>
                                            <div class="rank" style="background-color: #28a745;">4</div>
                                        </div>
                                        <p class="top-closer-name">Susan Anderson</p>
                                        <p class="top-closer-value">$247,635</p>
                                    </div>




                                    <div class="closer-item text-center">
                                        <div class="avatar-wrapper" style="border-color: #17a2b8;">
                                            <div class="avatar">
                                                <img src="{{ asset('images/users/realtor.jpeg') }}" alt="David Howard">
                                            </div>
                                            <div class="rank" style="background-color: #17a2b8;">5</div>
                                        </div>
                                        <p class="top-closer-name">Olivia Smith</p>
                                        <p class="top-closer-value">$215,000</p>
                                    </div>


                                    <div class="closer-item text-center">
                                        <div class="avatar-wrapper" style="border-color: #ffc107">
                                            <div class="avatar">
                                                <img src="{{ asset('images/users/realtor2.jpeg') }}" alt="David Howard">
                                            </div>
                                            <div class="rank" style="background-color: #ffc107">6</div>
                                        </div>
                                        <p class="top-closer-name">Olivia Smith</p>
                                        <p class="top-closer-value">$215,000</p>
                                    </div>

                                    <!-- Add more "Top Closers" as needed -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row calendar-row">
                    <div class="col-12">
                        <div class="card shadow calendar">
                            @include('calender')
                        </div>
                    </div>
                </div>
                <div class="row processes-row my-3 my-md-auto  my-lg-3 px-1">
                    <div class=" card processes-table p-4 mb-lg-0">
                        <h5 class="card-title text-primary">Team Members</h5>
                        <p class="text-muted">Current month</p>
                        <div class="table-responsive table-container">
                            <table class="table table-striped align-middle mb-0">
                                <thead>
                                    <tr>
                                        <td>EMPLOYEE</td>
                                        <td>OFFERS MADE</td>
                                        <td>PROJECTED</td>
                                        <td>DEALS</td>
                                        <td>CLOSED</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset('images/users/realtor.jpeg') }}" class="img-fluid"
                                                    alt="David Howard">
                                                <span class="ms-2">Jennifer Mata</span>
                                            </div>
                                        </td>
                                        <td>17</td>
                                        <td>$58,028</td>
                                        <td>12</td>
                                        <td>$108,653</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset('images/users/realtor2.jpeg') }}" class="img-fluid"
                                                    alt="David Howard">
                                                <span class="ms-2">Olivia Smith</span>
                                            </div>
                                        </td>
                                        <td>20</td>
                                        <td>$54,501</td>
                                        <td>12</td>
                                        <td>$94,957</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset('images/users/realtor3.jpeg') }}" class="img-fluid"
                                                    alt="David Howard">
                                                <span class="ms-2">Karen Castillo <i
                                                        class="bi bi-award rank-icon"></i></span>
                                            </div>
                                        </td>
                                        <td>14</td>
                                        <td>$20,303</td>
                                        <td>7</td>
                                        <td>$91,011</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset('images/users/realtor4.jpeg') }}" class="img-fluid"
                                                    alt="David Howard">
                                                <span class="ms-2">Anna Cole</span>
                                            </div>
                                        </td>
                                        <td>15</td>
                                        <td>$26,811</td>
                                        <td>9</td>
                                        <td>$86,420</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset('images/users/realtor5.jpeg') }}" class="img-fluid"
                                                    alt="David Howard">
                                                <span class="ms-2">Anna Cole</span>
                                            </div>
                                        </td>
                                        <td>15</td>
                                        <td>$26,811</td>
                                        <td>9</td>
                                        <td>$86,420</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset('images/users/realtor6.jpeg') }}" class="img-fluid"
                                                    alt="David Howard">
                                                <span class="ms-2">Anna Cole</span>
                                            </div>
                                        </td>
                                        <td>15</td>
                                        <td>$26,811</td>
                                        <td>9</td>
                                        <td>$86,420</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset('images/users/realtor5.jpeg') }}" class="img-fluid"
                                                    alt="David Howard">
                                                <span class="ms-2">Anna Cole</span>
                                            </div>
                                        </td>
                                        <td>15</td>
                                        <td>$26,811</td>
                                        <td>9</td>
                                        <td>$86,420</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset('images/users/realtor.jpeg') }}" class="img-fluid"
                                                    alt="David Howard">
                                                <span class="ms-2">Mike Novak</span>
                                            </div>
                                        </td>
                                        <td>8</td>
                                        <td>$51,271</td>
                                        <td>6</td>
                                        <td>$84,638</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
                <div class="row pi-chart">
                    <div class="col-md-12 col-12 px-1 col-lg-6 pi-chart-container">
                        <div class="card shadow">
                            <div class="card-title text-center mt-4 text-primary">Contacts</div>
                            <div class="d-flex justify-content-center">
                                <div id="myPlot2" style=""></div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-12 col-lg-6 px-2 col-12  pi-chart-container">
                        <div class="card shadow">
                            <div class="card-title text-center mt-4 text-primary">Today Tasks</div>
                            <div class="card-body">
                                <ul class="list-group" style="max-height: 300px; overflow-y: auto;">
                                    <!-- Add scroll here -->
                                    @foreach ($todayTasks as $task)
                                        <a href="{{ route('tasks.index') }}">
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                {{ $task['task_name'] }}

                                                <!-- Conditional Color based on Task Priority -->
                                                @if ($task['priority'] == 'High')
                                                    <span
                                                        class="badge bg-danger rounded-pill">{{ $task['priority'] }}</span>
                                                @elseif($task['priority'] == 'Medium')
                                                    <span
                                                        class="badge bg-warning rounded-pill">{{ $task['priority'] }}</span>
                                                @elseif($task['priority'] == 'Low')
                                                    <span
                                                        class="badge bg-success rounded-pill">{{ $task['priority'] }}</span>
                                                @else
                                                    <span
                                                        class="badge bg-secondary rounded-pill">{{ $task['priority'] }}</span>
                                                @endif

                                                <!-- Conditional Color based on Task Status -->
                                                @if ($task['task_status'] == 'Completed')
                                                    <span
                                                        class="badge bg-success rounded-pill">{{ $task['task_status'] }}</span>
                                                @elseif($task['task_status'] == 'Pending')
                                                    <span
                                                        class="badge bg-warning rounded-pill">{{ $task['task_status'] }}</span>
                                                @elseif($task['task_status'] == 'Overdue')
                                                    <span
                                                        class="badge bg-danger rounded-pill">{{ $task['task_status'] }}</span>
                                                @else
                                                    <span
                                                        class="badge bg-secondary rounded-pill">{{ $task['task_status'] ?? 'No Status' }}</span>
                                                @endif
                                            </li>
                                        </a>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>

        @include('layouts.includes.modals.google_auth')
    </x-content-body>
@endsection


{{-- custom js --}}
@push('js')
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

    <!-- closed properties with dropdown events -->
    <script>
        // Initial call for current month
        getClosedProperties("Monthly", 1);
        getClosedProperties("Quarterly", 2);
        getClosedProperties("Yearly", 3);
        getClosedProperties("Fiscal Year", 4);

        getStages(1);
        getStages(2);

        function getStages(id) {
            const dropdown = document.getElementById('stagesHamburger' + id);
            const profitElement = document.getElementById('stages_count' + id);
            const titleElement = document.getElementById('stages_title' + id);

            // Default filter is 'Hot' if no stage is selected
            const defaultFilter = 'Hot';
            const selectedStage = dropdown.getAttribute('data-stage') || defaultFilter;

            // Updated URL with stage and id as query parameters
            const url = `/get-stages?filter=${selectedStage}&id=${id}`;

            // Fetch the data based on the selected filter and id
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    // Update card content
                    profitElement.textContent = `${data.countProperties}`;
                    titleElement.textContent = `${data.filter}`;
                })
                .catch(error => {
                    console.error('Error fetching stages:', error);
                    profitElement.textContent = 'Error';
                    titleElement.textContent = 'Error';
                });
        }

        // Function to handle dropdown selection and trigger the update
        function updateStages(id, stage) {
            const dropdown = document.getElementById('stagesHamburger' + id);
            dropdown.setAttribute('data-stage', stage); // Save the selected stage to the dropdown for reference
            getStages(id); // Call getStages to update the card with the selected stage
        }


        function getClosedProperties(defaultFilter, id) {
            const dropdown = document.getElementById('filterHamburger' + id);
            const profitElement = document.getElementById('profitValue' + id);
            // const titleElement = document.getElementById('title' + id);
            // const mainTitleElement = document.getElementById('main-title' + id);

            // Default filter is Month

            const $url = id > 2 ? `/project-commission?filter=${defaultFilter}` :
                `/close-properties?filter=${defaultFilter}`;
            // Call API with default filter
            fetch($url)
                .then(response => response.json())
                .then(data => {
                    profitElement.textContent = `$ ${data.amount.toLocaleString()}`;
                    // titleElement.textContent = `${data.filter}`;
                })
                .catch(error => {
                    console.error('Error fetching close properties:', error);
                });
        }

        function updateClosedProperties(id, filter) {
            const $url = id > 2 ? `/project-commission?filter=${filter}` : `/close-properties?filter=${filter}`;

            fetch($url)
                .then(response => response.json())
                .then(data => {
                    const profitElement = document.getElementById('profitValue' + id);
                    // const titleElement = document.getElementById('title' + id);
                    const mainTitleElement = document.getElementById('main-title' + id);

                    profitElement.textContent = `${data.amount.toLocaleString()}`;
                    // titleElement.textContent = `${data.filter}`;
                    mainTitleElement.textContent = `${data.filter}`;
                })
                .catch(error => {
                    console.error('Error fetching close properties:', error);
                });
        }

        function toggleFlip(cardElement) {
            cardElement.classList.toggle("flipped");
        }

        // Helper Function to Update Progress
        function updateProgress(circleId, valueId, data) {
            const circle = document.getElementById(circleId);
            const value = document.getElementById(valueId);
            const radius = 80;
            const circumference = 2 * Math.PI * radius;
            const progress = (1 - data.current / data.total) * circumference;
            circle.style.strokeDashoffset = progress;
            value.textContent = `${data.current}/${data.total}`;
        }

        // Data Objects
        const offers1 = {
            current: '{{ count($pre_listings) }}',
            total: 13
        };
        const offers2 = {
            current: '{{ count($pending_properties) }}',
            total: 13
        };
        const deals = {
            current: '{{ count($listings) }}',
            total: 13
        };
        const quarterly = {
            current: '{{ count($close_properties) }}',
            total: 13
        };

        // Initial Progress Update
        updateProgress("offersProgress1", "offersValue1", offers1);
        updateProgress("offersProgress2", "offersValue2", offers2);
        updateProgress("dealsProgress", "dealsValue", deals);
        updateProgress("quarterlyProgress", "quarterlyValue", quarterly);


        // Lead Source Chart

        const xValues = ["Pre Listing", "Listing", "Pending", "Closed",
            "Expire/Withdraw"
        ];

        // "  const yValues = [{{ count($pre_listings) }}, {{ count($listings) }}, {{ count($pending_properties) }}, {{ count($close_properties) }}, 50];"
        const yValues = [{{ count($pre_listings) }}, {{ count($listings) }}, {{ count($pending_properties) }},
            {{ count($close_properties) }}, 50
        ];


        const barColors = ["rgb(51,51,51)", "rgb(255,165,0)", "#ffa500", "rgb(0,180,216)", "red", ];

        new Chart("myChart", {
            type: "bar",
            data: {
                labels: xValues,

                datasets: [{
                    backgroundColor: barColors,
                    data: yValues
                }]
            },
            options: {
                legend: {
                    display: false
                },
            }
        });
        const xArray = @json($stages);
        const yArray = @json($yArray);
        const colors = ['#00b4d8', '#17a2b8', '#ff6347', '#90ee90', '#dda0dd', '#ffa500'];

        const layout = {
            showlegend: true,

            legend: {
                orientation: "h", // Makes the legend horizontal
                x: 0.5, // Centers the legend
                y: -0.3,
                xanchor: "center"
            },
            margin: {
                l: 10,
                r: 30,
                t: 60,
                b: 10
            },
            height: 280,
            width: 300
        };

        const data = [{
            labels: xArray,
            values: yArray,
            hole: 0.4,
            type: "pie",
            marker: {
                colors: colors
            }
        }];

        Plotly.newPlot("myPlot2", data, layout);


        // Data for the chart
        const xArray1 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
            "November"
        ];
        const yArray1 = [100, 150, 350, 300, 1000, 600, 200, 450, 900, 1000, 1100];

        // Define Data
        const data1 = [{
            x: xArray1,
            y: yArray1,
            mode: "lines"
        }];

        // Responsive height adjustment
        function getChartHeight() {
            const screenWidth = window.innerWidth;
            if (screenWidth >= 992) return 300; // Large screens (lg and above)
            if (screenWidth >= 768) return 400; // Medium screens (md)
            return 500; // Small screens (sm and below)
        }

        // Define Layout with dynamic height
        const layout1 = {
            height: getChartHeight(), // Set dynamic height
            yaxis: {
                title: "Price in Dollars",
                tickprefix: "$"
            },
            responsive: true // Enable responsive resizing
        };

        // Display using Plotly
        Plotly.newPlot("transection", data1, layout1);

        // Update chart height on window resize
        window.addEventListener("resize", () => {
            layout1.height = getChartHeight();
            Plotly.relayout("transection", layout1);
        });
    </script>
    <script>
        function toggleMenuClass() {
            const mainWrapper = document.getElementById('main-wrapper');
            if (window.innerWidth < 1025 || window.innerWidth < 769) {
                console.log(window.innerWidth);
                mainWrapper.classList.toggle('menu-toggle');
                // } else {
                //     mainWrapper.classList.add('menu-toggle');
                // }
            }


            // Run the function on page load and window resize
            window.addEventListener('load', toggleMenuClass);
            window.addEventListener('resize', toggleMenuClass);
        }
    </script>
@endpush