@extends('user.layout.default')

@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
@endsection
@section('content')
<div class="navabar1">
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <h6 class="dashbod_title">My Team</h6>
            @include('user.inc.navbar')
        </div>
    </nav>
</div>

<!-- // Section-one-Dashboard // -->
<div class="stucture">
    <!-- // Section-two-Dashboard // -->
    <section class="Section-one-myteams">
        <div class="container-fluid">
            <div class="row stucture-1">
                <div class="col-12">
                    <p class="f-14 b-7">Today Teams Goals</p>
                </div>
                <div class="col-12">
                    <div class="d-md-flex justify-content-between mt-4 pb-4">
                        <div class="date_to_date mb-md-0 mb-4">
                            <a href="#" id="date-range" class="px-2 btn-theme border-blue bg-transparent text-blue d-inline-block">
                                <span>
                                    <img src="./assets/images/icons/blue-calander.svg" alt="date">
                                </span>
                                <input type="hidden" id="from-date">
                                <input type="hidden" id="to-date">

                                <span class="date-text ms-2">dd/mm/yyyy To dd/mm/yyyy</span>
                            </a>
                        </div>
                        <div class="textarea_box d-sm-flex justify-content-end">
                            <div class="dropdown bx_filter team-filter">
                                <a href="#" class="dropdown-toggle btn-theme mr-xl-3 mr-2 border-blue bg-transparent text-blue d-inline-block" type="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="">
                                        <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M6.49984 0.166668C3.27984 0.166668 0.666504 2.78 0.666504 6C0.666504 9.22 3.27984 11.8333 6.49984 11.8333C9.71984 11.8333 12.3332 9.22 12.3332 6C12.3332 2.78 9.71984 0.166668 6.49984 0.166668ZM8.60567 3.865C9.22984 3.865 9.7315 4.36667 9.7315 4.99083C9.7315 5.615 9.22984 6.11667 8.60567 6.11667C7.9815 6.11667 7.47984 5.615 7.47984 4.99083C7.474 4.36667 7.9815 3.865 8.60567 3.865ZM5.10567 2.94333C5.864 2.94333 6.48234 3.56167 6.48234 4.32C6.48234 5.07833 5.864 5.69667 5.10567 5.69667C4.34734 5.69667 3.729 5.07833 3.729 4.32C3.729 3.55583 4.3415 2.94333 5.10567 2.94333ZM5.10567 8.26917V10.4567C3.70567 10.0192 2.59734 8.94 2.10734 7.56333C2.71984 6.91 4.24817 6.5775 5.10567 6.5775C5.41484 6.5775 5.80567 6.62417 6.214 6.70583C5.25734 7.21333 5.10567 7.88417 5.10567 8.26917ZM6.49984 10.6667C6.34234 10.6667 6.19067 10.6608 6.039 10.6433V8.26917C6.039 7.44083 7.754 7.02667 8.60567 7.02667C9.22984 7.02667 10.309 7.25417 10.8457 7.6975C10.1632 9.43 8.47734 10.6667 6.49984 10.6667Z" fill="#6F6AF8"></path>
                                        </svg>
                                    </span>
                                    <span class="team-name" id="current-team">
                                        <!-- Default team name -->
                                    </span> </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item " href="#">
                                            <p> <img src="{{asset('assets/images/icons/add.svg')}}" alt="add" class="me-2">Create a new team</p>
                                        </a>
                                    </li>
                                    @if(isset($data) && !empty($data))
                                    <!-- <li><a class="dropdown-item team-item" href="#" data-team-id="3">
                                            <p><img src="{{asset('assets/images/icons/t-1.svg')}}" alt="add" class="me-2">Hello team</p>
                                        </a>
                                    </li> -->
                                    @foreach ($data as $index => $myTeam)
                                    <li><a class="dropdown-item team-item" href="#" data-team-id="{{ $myTeam->team_id }}">
                                            <p><img src="{{asset('assets/images/icons/t-1.svg')}}" alt="add" class="me-2">{{ $myTeam->name }}</p>
                                        </a>
                                    </li>
                                    @endforeach

                                    @else
                                    <li><a class="dropdown-item" href="#">
                                            <p>No team found</p>
                                        </a>
                                    </li>
                                    @endif

                                </ul>
                            </div>
                            <div class="text_area_btn justify-content-end mt-sm-0 mt-2">
                                <a href="#copy_modal" class="rounded-pill" data-bs-toggle="modal">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.09244 11.8416L5.84009 15.094C5.64772 15.2871 5.41912 15.4403 5.16739 15.5449C4.91566 15.6495 4.64576 15.7033 4.37318 15.7033C4.10059 15.7033 3.8307 15.6495 3.57897 15.5449C3.32723 15.4403 3.09863 15.2871 2.90627 15.094C2.71213 14.9022 2.558 14.6738 2.4528 14.4219C2.3476 14.1701 2.29343 13.9 2.29343 13.6271C2.29343 13.3542 2.3476 13.084 2.4528 12.8322C2.558 12.5804 2.71213 12.3519 2.90627 12.1601L6.15862 8.90779C6.31646 8.74995 6.40514 8.53587 6.40514 8.31265C6.40514 8.08942 6.31646 7.87534 6.15862 7.7175C6.00077 7.55966 5.78669 7.47098 5.56347 7.47098C5.34025 7.47098 5.12617 7.55966 4.96832 7.7175L1.71597 10.9782C1.06077 11.6914 0.706418 12.6301 0.726916 13.5983C0.747415 14.5666 1.14118 15.4895 1.82598 16.1743C2.51077 16.8591 3.43365 17.2528 4.40188 17.2733C5.37012 17.2938 6.30883 16.9395 7.022 16.2843L10.2827 13.0319C10.4406 12.8741 10.5293 12.66 10.5293 12.4368C10.5293 12.2135 10.4406 11.9995 10.2827 11.8416C10.1249 11.6838 9.91081 11.5951 9.68759 11.5951C9.46436 11.5951 9.25028 11.6838 9.09244 11.8416V11.8416ZM6.34303 11.6572C6.42135 11.7349 6.51424 11.7964 6.61637 11.8381C6.7185 11.8798 6.82786 11.9009 6.93818 11.9003C7.04849 11.9009 7.15785 11.8798 7.25998 11.8381C7.36211 11.7964 7.455 11.7349 7.53332 11.6572L11.6574 7.53309C11.8153 7.37524 11.904 7.16116 11.904 6.93794C11.904 6.71472 11.8153 6.50064 11.6574 6.34279C11.4996 6.18495 11.2855 6.09628 11.0623 6.09628C10.8391 6.09628 10.625 6.18495 10.4671 6.34279L6.34303 10.4669C6.26446 10.5448 6.2021 10.6375 6.15955 10.7397C6.11699 10.8418 6.09508 10.9514 6.09508 11.0621C6.09508 11.1727 6.11699 11.2823 6.15955 11.3844C6.2021 11.4866 6.26446 11.5793 6.34303 11.6572ZM16.5444 14.0294H15.7061V13.1912C15.7061 12.9689 15.6178 12.7557 15.4606 12.5985C15.3034 12.4413 15.0902 12.3529 14.8679 12.3529C14.6456 12.3529 14.4324 12.4413 14.2752 12.5985C14.118 12.7557 14.0296 12.9689 14.0296 13.1912V14.0294H13.1914C12.9691 14.0294 12.7559 14.1177 12.5987 14.2749C12.4415 14.4321 12.3532 14.6453 12.3532 14.8676C12.3532 15.09 12.4415 15.3032 12.5987 15.4604C12.7559 15.6176 12.9691 15.7059 13.1914 15.7059H14.0296V16.5441C14.0296 16.7664 14.118 16.9796 14.2752 17.1368C14.4324 17.294 14.6456 17.3824 14.8679 17.3824C15.0902 17.3824 15.3034 17.294 15.4606 17.1368C15.6178 16.9796 15.7061 16.7664 15.7061 16.5441V15.7059H16.5444C16.7667 15.7059 16.9799 15.6176 17.1371 15.4604C17.2943 15.3032 17.3826 15.09 17.3826 14.8676C17.3826 14.6453 17.2943 14.4321 17.1371 14.2749C16.9799 14.1177 16.7667 14.0294 16.5444 14.0294ZM13.0321 10.2825L16.2845 7.02176C16.9397 6.3086 17.2941 5.36988 17.2736 4.40165C17.2531 3.43342 16.8593 2.51054 16.1745 1.82574C15.4897 1.14094 14.5668 0.747178 13.5986 0.72668C12.6304 0.706182 11.6916 1.06053 10.9785 1.71573L7.71774 4.96809C7.63958 5.04624 7.57758 5.13903 7.53529 5.24114C7.49299 5.34326 7.47122 5.45271 7.47122 5.56323C7.47122 5.67376 7.49299 5.78321 7.53529 5.88533C7.57758 5.98744 7.63958 6.08023 7.71774 6.15838C7.79589 6.23654 7.88868 6.29853 7.99079 6.34083C8.09291 6.38313 8.20235 6.4049 8.31288 6.4049C8.42341 6.4049 8.53286 6.38313 8.63497 6.34083C8.73709 6.29853 8.82987 6.23654 8.90803 6.15838L12.1604 2.90603C12.3527 2.7129 12.5814 2.55966 12.8331 2.4551C13.0848 2.35054 13.3547 2.29672 13.6273 2.29672C13.8999 2.29672 14.1698 2.35054 14.4215 2.4551C14.6732 2.55966 14.9018 2.7129 15.0942 2.90603C15.2883 3.09782 15.4425 3.32624 15.5477 3.57805C15.6529 3.82986 15.707 4.10004 15.707 4.37294C15.707 4.64584 15.6529 4.91602 15.5477 5.16783C15.4425 5.41964 15.2883 5.64806 15.0942 5.83985L11.8419 9.0922C11.7633 9.17013 11.7009 9.26284 11.6584 9.36499C11.6158 9.46713 11.5939 9.57669 11.5939 9.68735C11.5939 9.79801 11.6158 9.90757 11.6584 10.0097C11.7009 10.1119 11.7633 10.2046 11.8419 10.2825C11.9198 10.3611 12.0125 10.4234 12.1146 10.466C12.2168 10.5085 12.3263 10.5304 12.437 10.5304C12.5477 10.5304 12.6572 10.5085 12.7594 10.466C12.8615 10.4234 12.9542 10.3611 13.0321 10.2825V10.2825Z" fill="black"></path>
                                    </svg>
                                </a>
                                <a href="{{route('teamListing')}}" class="rounded-pill">
                                    <div class="">
                                        <img src="./assets/images/icons/move-arrow.svg" alt="move">
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <!-- boxes-today_teams_goals -->
                    <div class="boxes-today_teams_goals">
                        <!-- box one -->
                        <div class="box">
                            <div class="new-contact">
                                <div class="img-new-contact">
                                    <img src="{{asset('assets/images/icons/Contacts-icon.svg')}}" alt="Contacts icon">
                                    <p class="f-14 b-6">New Contacts</p>
                                </div>
                                <p class="f-20 b-8">0%</p>
                            </div>

                            <div class="map">
                                <img src="{{asset('assets/images/myteams/map-new_contact.png')}}" alt="" class="map-new_contact">
                                <p class="f-10 b-5">0 new contacts</p>
                            </div>
                        </div>

                        <!-- box two -->
                        <div class="box">
                            <div class="new-contact">
                                <div class="img-new-contact">
                                    <img src="{{asset('assets/images/icons/Follow-Ups-icon.svg')}}" alt="Contacts icon">
                                    <p class="f-14 b-6">Follow Ups</p>
                                </div>
                                <p class="f-20 b-8">0%</p>
                            </div>

                            <div class="map">
                                <img src="{{asset('assets/images/myteams/map-new_contact.png')}}" alt="map new_contact" class="map-new_contact">
                                <p class="f-10 b-5">0 Follow Ups</p>
                            </div>
                        </div>

                        <!-- box three-->
                        <div class="box">
                            <div class="new-contact">
                                <div class="img-new-contact">
                                    <img src="{{asset('assets/images/icons/Scheduled-icon.svg')}}" alt="Scheduled icon">
                                    <p class="f-14 b-6">Scheduled Meetings</p>
                                </div>
                                <p class="f-20 b-8">0%</p>
                            </div>

                            <div class="map">
                                <img src="{{asset('assets/images/myteams/map-new_contact.png')}}" alt="" class="map-new_contact">
                                <p class="f-10 b-5">0 Scheduled Meetings</p>
                            </div>
                        </div>

                        <!-- box four -->
                        <div class="box">
                            <div class="new-contact">
                                <div class="img-new-contact">
                                    <img src="{{asset('assets/images/icons/Reconnects-icon.svg')}}" alt="Contacts icon">
                                    <p class="f-14 b-6">Reconnects</p>
                                </div>
                                <p class="f-20 b-8">0%</p>
                            </div>

                            <div class="map">
                                <img src="{{asset('assets/images/myteams/map-new_contact.png')}}" alt="" class="map-new_contact">
                                <p class="f-10 b-5">0 Reconnects</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="teammates">
                        <p class="f-14 b-7">Teammates</p>
                        <div class="serch-container">
                            <input class="form-control global-search" type="search" id="teammateSearch" placeholder="Search here..." aria-label="Search">
                            <img src="{{asset('assets/images/icons/search.svg')}}" alt="" class="search-icon">
                        </div>
                    </div>

                    <div class="teammates-box-container">


                    </div>

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

<div class="delete-popup">
    <div class="modal fade" id="delete-popup__teammates" tabindex="-1" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="delete-container">
                        <img src="{{asset('assets/images/icons/delete-icon.svg')}}" alt="" data-bs-toggle="modal" data-bs-target="#delete-popup__newcontact">
                        <p class="f-16 b-6">Do you want to delete the my teammates?</p>
                        <div class="btn-cancel_deleted_container">
                            <input type="text" id="teammate_team_id">
                            <input type="text" id="teammate_id">
                            <button class="btn-cancel_deleted" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
                            <button class="btn-cancel_deleted btn-delete dlt-team-mate">Delete</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- teammates-popup -->
<div class="teammates-popup">
    <div class="modal fade" id="teammates-1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="col-12">
                        <div class="teammates-container">
                            <div class="left-side">
                                <img src="./assets/images/icons/img1-teammates.svg" alt="">
                                <div class="trading-secrets">
                                    <span class="f-18 b-4 name modal-member-name">Floyd Miles</span>
                                    <div class="badge-2">
                                        <p class="modal-team-name">Trading-Secrets</p>
                                    </div>

                                    <a href="#date_modal" data-bs-toggle="modal" class="date f-12 b-4">Aug
                                        10,2023</a>
                                    <img src="./assets/images/myteams/left-1.svg" alt="">
                                    <img src="./assets/images/myteams/right-1.svg" alt="">
                                </div>
                            </div>

                            <div class="right-side">
                                <button data-bs-dismiss="modal" aria-label="Close"></button>
                                <a href="#atechfile_modal" data-bs-toggle="modal">
                                    <p>
                                        <img src="{{asset('assets/images/icons/note-icon.svg')}}" alt="" class="note-icon-1">
                                        <span class="f-10 b-4">Add Private Notes</span>
                                    </p>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <!-- boxes-dashboard start -->
                        <div class="boxes-dashboard">
                            <!-- box-1 -->
                            <div class="box-1-dashboard">
                                <div class="new-contact">
                                    <div class="contact">
                                        <img src="./assets/images/icons/Contacts-icon.svg" alt="">
                                        <span>New Contacts</span>
                                    </div>
                                    <span id="contacts-percentage">0%</span>
                                </div>

                                <div class="progress">
                                    <div class="progress-bar" id="contacts-progress" role="progressbar" style="width:0%"></div>
                                </div>

                                <div class="edit-container" data-bs-toggle="modal" data-bs-target="#edit">
                                    <span id="contacts-total">0 New Contacts</span>
                                </div>
                            </div>
                            <!-- End -->

                            <!-- box-2 -->
                            <div class="box-1-dashboard">
                                <div class="new-contact">
                                    <div class="contact">
                                        <img src="./assets/images/icons/Follow-Ups-icon.svg" alt="">
                                        <span>Follow Ups</span>
                                    </div>
                                    <span id="followups-percentage">0%</span>
                                </div>

                                <div class="progress">
                                    <div class="progress-bar" id="followups-progress" role="progressbar" style="width:0%"></div>
                                </div>

                                <div class="edit-container" data-bs-toggle="modal" data-bs-target="#edit">
                                    <span id="followups-total">0 Follow Ups</span>
                                </div>
                            </div>
                            <!-- End -->

                            <!-- box-3 -->
                            <div class="box-1-dashboard">
                                <div class="new-contact">
                                    <div class="contact">
                                        <img src="./assets/images/icons/Scheduled-icon.svg" alt="">
                                        <span>Scheduled Meeting</span>
                                    </div>
                                    <span id="meetings-percentage">0%</span>
                                </div>

                                <div class="progress">
                                    <div class="progress-bar" id="meetings-progress" role="progressbar" style="width:0%"></div>
                                </div>

                                <div class="edit-container" data-bs-toggle="modal" data-bs-target="#edit">
                                    <span id="meetings-total">0 Scheduled Meetings</span>
                                </div>
                            </div>
                            <!-- End -->

                            <!-- box-4 -->
                            <div class="box-1-dashboard">
                                <div class="new-contact">
                                    <div class="contact">
                                        <img src="./assets/images/icons/Reconnects-icon.svg" alt="">

                                        <span>Reconnects</span>
                                    </div>
                                    <span>10%</span>
                                </div>

                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:10%">
                                        <span class="sr-only">10% Complete</span>
                                    </div>
                                </div>

                                <div class="edit-container" data-bs-toggle="modal" data-bs-target="#edit">
                                    <span>10 reconnects</span>
                                </div>
                            </div>
                            <!-- End -->
                        </div>
                        <!-- boxes-dashboard End -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const dateText = document.querySelector(".date-text");

        // Set up flatpickr for the date range picker
        const dateRangePicker = flatpickr("#date-range", {
            mode: "range",
            dateFormat: "Y-m-d",
            onClose: function(selectedDates, dateStr, instance) {
                let dates = dateStr.split(" to ");
                if (dates.length === 2) {
                    document.getElementById("from-date").value = dates[0];
                    document.getElementById("to-date").value = dates[1];

                    dateText.textContent = `${dates[0]} To ${dates[1]}`;

                    let currentTeamId = $('#current-team').data('team-id');
                    if (currentTeamId) {
                        fetchTeamGoalsAndMembers(currentTeamId, dates[0], dates[1]);
                    } else {
                        console.error("No team selected");
                    }
                } else {
                    // If no valid date range, reset the displayed text
                    dateText.textContent = "No date range selected";
                }
            }
        });

        $(document).ready(function() {
            const firstTeam = $('.team-item').first();
            const firstTeamId = firstTeam.data('team-id');
            const firstTeamName = firstTeam.text();

            // Set the current team ID in the data attribute for later use
            $('#current-team').text('Team: ' + firstTeamName).data('team-id', firstTeamId);

            fetchTeamGoalsAndMembers(firstTeamId);

            $('.team-item').on('click', function(e) {
                e.preventDefault();
                const selectedTeamId = $(this).data('team-id');
                const selectedTeamName = $(this).text();

                // Update the displayed team name and set the current team ID
                $('#current-team').text('Team: ' + selectedTeamName).data('team-id', selectedTeamId);

                // Reset the date range and displayed text upon team change
                dateRangePicker.clear(); // Clear the flatpickr date range
                document.getElementById("from-date").value = ''; // Clear hidden input for from-date
                document.getElementById("to-date").value = ''; // Clear hidden input for to-date
                dateText.textContent = "dd/mm/yyyy to dd/mm/yyyy"; // Reset the displayed text

                fetchTeamGoalsAndMembers(selectedTeamId); // Fetch without date range
            });
        });
    });


    function fetchTeamGoalsAndMembers(teamId, fromDate, toDate) {
        fetchTeamGoals(teamId, fromDate, toDate);
        fetchTeamMembers(teamId);
    }

    function fetchTeamMembers(teamId) {
        $.ajax({
            url: '{{route("teamMembers")}}',
            method: 'GET',
            data: {
                team_id: teamId
            },
            success: function(response) {
                $('.teammates-box-container').empty(); // Always clear the container first
                if (response.status == "success" && response.data && response.data.length > 0) {
                    updateTeamMembers(response.data);
                } else {
                    $('.teammates-box-container').append(`<div class="box">
                        <p class="f-14 b-4">No teammates found </p>
                    </div>`);
                }
            },
            error: function(error) {
                console.error('Error fetching team members:', error);
                $('.teammates-box-container').empty(); // Clear on error too
                $('.teammates-box-container').append(`<div class="box">
                    <p class="f-14 b-4">Failed to fetch members for </p>
                </div>`);
            }
        });
    }

    function updateTeamMembers(members) {
        members.forEach(function(member) {
            // Calculate summary counts from the data
            let totalContacts = member.teammateData.contacts.reduce((sum, contact) => sum + contact.total_count, 0);
            let totalFollowUps = member.teammateData.followups.reduce((sum, followUp) => sum + followUp.total_count, 0);
            let totalMeetings = member.teammateData.meetings.reduce((sum, meeting) => sum + meeting.total_count, 0);

            $('.teammates-box-container').append(`
            <div class="box teammate-score-box" data-bs-toggle="modal" data-bs-target="#teammates-1" data-name="${member.member_name}" data-team-id="${member.team_id}" data-member-id="${member.member_id}">
                <div class="left-side">
                    <img src="./assets/images/icons/img1-teammates.svg" alt="">
                    <p class="f-14 b-4 member-name">${member.member_name}</p>
                    <div class="date">
                        <img src="./assets/images/icons/date_range.svg" alt="date range">
                        <p class="f-10 b-4 ml-0" style="margin-left:-10px;">${member.current_date}</p>
                    </div>
                </div>
                
                <div class="right-side">
                    <button>
                        <img src="{{asset('assets/images/icons/Contacts-icon.svg')}}" alt="">
                        <span class="f-12 b-4">${totalContacts}</span>
                    </button>

                    <button>
                        <img src="{{asset('assets/images/icons/Follow-Ups-icon.svg')}}" alt="">
                        <span class="f-12 b-4">${totalFollowUps}</span>
                    </button>

                    <button>
                        <img src="{{asset('assets/images/icons/sheduald-icon.svg')}}" alt="menu icon">
                        <span class="f-12 b-4">${totalMeetings}</span>
                    </button>

                    <button>
                        <img src="{{asset('assets/images/icons/Reconnects-icon.svg')}}" alt="">
                        <span class="f-12 b-4">2</span> <!-- Assuming a placeholder, update if data is available -->
                    </button>

                    <a href="" class="delete-teammate" data-bs-toggle="modal" data-bs-target="#delete-popup__teammates" data-team-id="${member.team_id}" data-member-id="${member.member_id}">
                <img src="{{asset('assets/images/icons/delete-icon.svg')}}" alt="" class="delete-teammates">
            </a>
                </div>
            </div>
        `);
        });
    }


    // FUNCTION TO FETCH THE TEAM GOALS
    function fetchTeamGoals(teamId, fromDate, toDate) {
        $.ajax({
            url: '{{route("teamGoal")}}',
            method: 'GET',
            data: {
                team_id: teamId,
                from_date: fromDate, // Send the from date
                to_date: toDate // Send the to date
            },
            success: function(response) {
                if (response.status === 'error') {
                    setDefaultValues(); // RESET THE DEFAULT VALUES
                } else if (response.status === 'success') {
                    updateUIWithTeamGoals(response.data); // UPDATE THE UI WITH TEAM GOALS
                }
            },
            error: function(error) {
                console.error('Error fetching team goals:', error);
            }
        });
    }

    // FUNCTION TO UPDATE THE UI WITH TEAM GOALS
    function updateUIWithTeamGoals(data) {
        const contactPercentage = getArrayValue(data.contact, 'percentage', '0%');
        const followupPercentage = getArrayValue(data.followup, 'percentage', '0%');
        const meetingPercentage = getArrayValue(data.meeting, 'percentage', '0%');

        const contactCount = `${getArrayValue(data.contact, 'contact', 0)} New contacts`;
        const followupCount = `${getArrayValue(data.followup, 'followup', 0)} Follow Ups`;
        const meetingCount = `${getArrayValue(data.meeting, 'meeting', 0)} Scheduled Meetings`;

        // UPDATE THE UI WITH THE EXTRACTED VALUE
        updateContactBox(contactPercentage, contactCount);
        updateFollowupBox(followupPercentage, followupCount);
        updateMeetingBox(meetingPercentage, meetingCount);
    }

    // FUNCTION TO UPDATE THE CONTACT BOX
    function updateContactBox(percentage, count) {
        $('.box:nth-child(1) .f-20').text(percentage);
        $('.box:nth-child(1) .f-10').text(count);
    }

    // FUNCTION TO UPDATE THE FOLLOW-UP BOX
    function updateFollowupBox(percentage, count) {
        $('.box:nth-child(2) .f-20').text(percentage);
        $('.box:nth-child(2) .f-10').text(count);
    }

    // FUNCTION TO UPDATE THE MEETING BOX
    function updateMeetingBox(percentage, count) {
        $('.box:nth-child(3) .f-20').text(percentage);
        $('.box:nth-child(3) .f-10').text(count);
    }

    // FUNCTION TO RESET THE VALUES 
    function setDefaultValues() {
        updateContactBox('0%', '0 New contacts');
        updateFollowupBox('0%', '0 Follow Ups');
        updateMeetingBox('0%', '0 Scheduled Meetings');
    }

    // Utility function to get a specific value from an array
    function getArrayValue(array, key, defaultValue) {
        return array.length > 0 ? array[0][key] || defaultValue : defaultValue;
    }

    document.getElementById('teammateSearch').addEventListener('input', function() {
        const searchQuery = this.value.toLowerCase();
        const boxes = document.querySelectorAll('.teammates-box-container .box');

        boxes.forEach(box => {
            const teammateName = box.getAttribute('data-name').toLowerCase();
            if (teammateName.includes(searchQuery)) {
                box.style.display = 'flex';
            } else {
                box.style.display = 'none';
            }
        });
    });


    // THIS [.dlt-followup && .delete-followup] IS USED TO DELETE THE CONTACT FROM THE CONTACT LISTING IN DASHBOARD AND CONTACT SECTION
    // $('.delete-teammate').click(function() {
    $('.teammates-box-container').on('click', '.delete-teammate', function(event) {
        event.preventDefault();
        // alert('You have successfully deleted')
        var teamId = $(this).data('team-id'); // Retrieve followUpId from data attribute of clicked element
        var teamMateId = $(this).data('member-id'); // Retrieve followUpId from data attribute of clicked element
        // alert(teamMateId);
        // alert(teamId);
        $('#teammate_team_id').val(teamId); // Set the value of the hidden input
        $('#teammate_id').val(teamMateId); // Set the value of the hidden input
    });

    $('.dlt-team-mate').click(function() {
        var teamId = $('#teammate_team_id').val(); // Retrieve followUpId from the hidden input
        var teamMateId = $('#teammate_id').val(); // Retrieve followUpId from the hidden input
        // alert(teamId);
        // alert(teamMateId);
        $.ajax({
            url: '{{route("deleteTeamMate")}}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                team_id: teamId,
                teammate_id: teamMateId
            },
            success: function(response) {
                console.log(response);
                if (response.status == "success") {
                    Toastify({
                        text: response.message,
                        duration: 3000,
                        close: true,
                        gravity: "top",
                        position: 'right',
                        backgroundColor: "rgb(33, 37, 41);",
                        className: "info",
                    }).showToast();
                    $('#delete-popup__teammates').modal('hide');
                    window.location.reload();
                } else {
                    Toastify({
                        text: response.message,
                        duration: 3000,
                        close: true,
                        gravity: "top",
                        position: 'right',
                        backgroundColor: "rgb(33, 37, 41);",
                        className: "info",
                    }).showToast();
                    $('#delete-popup__teammates').modal('hide');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error deleting contact:', error);
            }
        });
    });

    // $('.teammate-score-box').click(function() {
    $('.teammates-box-container').on('click', '.teammate-score-box', function(event) {
        event.preventDefault();

        // Get the required data from the clicked element
        const memberName = $(this).find('.member-name').text();
        const teamName = $('#current-team').text().slice(6);
        const teamId = $(this).data('team-id');
        const memberId = $(this).data('member-id');
        // const currentDate = $(this).find('.date .f-10').text();
        alert(memberName);
        alert(teamName);
        alert(teamId);
        alert(memberId);

        // Set data to the modal
        $('.modal-member-name').text(memberName);
        $('.modal-team-name').text(teamName);


        // Pass team ID and member ID to a controller via AJAX
        $.ajax({
            url: '{{route("getTeamMemberDetails")}}', // Controller endpoint
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                team_id: teamId,
                teammate_id: memberId
            },
            success: function(response) {
                console.log('Data successfully sent to the controller:', response);
                if (response.status === 'success') {
                    // Extract data from the response
                    const data = response.data;

                    const followups = data.followups[0];
                    const contacts = data.contacts[0];
                    const meetings = data.meetings[0];

                    // Update contacts section in the modal
                    $('#contacts-percentage').text(contacts.percentage);
                    $('#contacts-total').text(`${contacts.total_count} New Contacts`);
                    $('#contacts-progress').css('width', contacts.percentage);

                    // Update follow-ups section in the modal
                    $('#followups-percentage').text(followups.percentage);
                    $('#followups-total').text(`${followups.total_count} Follow Ups`);
                    $('#followups-progress').css('width', followups.percentage);

                    // Update meetings section in the modal
                    $('#meetings-percentage').text(meetings.percentage);
                    $('#meetings-total').text(`${meetings.total_count} Scheduled Meetings`);
                    $('#meetings-progress').css('width', meetings.percentage);

                    console.log('Data successfully updated in the modal');
                }
            },
            error: function(error) {
                console.error('Error sending data to the controller:', error);
            }
        });
    });
</script>
@endsection