@extends('layouts.dashboard-app')
@section('main-content')
    <div class="content-body">
        <div class="container">
            <div class="row page-titles">
                <div class="col p-0">
                    <h4>Hello, <span>Welcome {{ auth()->user()->name }}</span></h4>

                </div>
                <div class="col p-0">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a>
                        </li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div>

            <div class="row">
                <div class="col-3">
                    <label for="Agents">Agents</label>
                    <select name="agent" id="agent" class="form-control">
                        <option value="">Select Agents</option>
                        @foreach ($myteam as $item)
                            <option value="{{ $item->id }}">
                                {{ $item->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-3">
                    <br>
                    <button id="submitBtn" class="btn btn-primary mt-2">Submit</button>
                </div>

            </div>

            <br>
            @role('Team-Leader')
                @inject('provider', 'App\Http\Controllers\ReportController')
                <h5 class="text-center">Leads Dashboard</h5>
                <div class="row">
                    <div class="col-lg-3">
                        <div class="card" style="background:#5858ea" id="active_div">
                            <div class="card-body text-center" onclick="#">
                                <h4 class="white" style="color:#fff;">Total Leads Generated</h4>
                                <h6 class="display-5 mt-4 white" style="color:#fff;" id="AllLeadsMonthlyAgent">
                                    0
                                </h6>
                                <h6 class="d-none display-5 mt-4 white" style="color:#fff;" id="totalLeadsMonthlyAgent1_01">
                                </h6>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="card" id="verified_div" id="pending_div">
                            <div class="card-body text-center" onclick="#">
                                <h4 class="white" style="color:#fff;">Total Leads Assigned</h4>
                                <h6 class="display-5 mt-4 white" style="color:#fff;" id="AllLeadsMonthlyAgent09">
                                    0
                                </h6>
                                <h6 class="d-none display-5 mt-4 white" style="color:#fff;" id="totalLeadsMonthlyAgent1_09">
                                </h6>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="card" id="rejected_div" id="rejected_div">
                            <div class="card-body text-center" onclick="#">
                                <h4 class="white" style="color:#fff;">Total Leads Processed</h4>
                                <h6 class="display-5 mt-4 white" style="color:#fff;" id="AllLeadsMonthlyAgent21">
                                    0
                                </h6>
                                <h6 class="d-none display-5 mt-4 white" style="color:#fff;" id="totalLeadsMonthlyAgent1_21">
                                </h6>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="card" id="follow_up_div" id="follow_up_div">
                            <div class="card-body text-center" onclick="#">
                                <h4 class="white" style="color:#fff;">Total Leads Rejected </h4>
                                <h6 class="display-5 mt-4 white" style="color:#fff;" id="AllLeadsMonthlyAgent04">
                                    0
                                </h6>
                                <h6 class="d-none display-5 mt-4 white" style="color:#fff;" id="totalLeadsMonthlyAgent1_04">
                                </h6>

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

                <h5 class="text-center">Sale Dashboard</h5>
                <div class="row">
                    <div class="col-lg-4">
                        <div class="card" style="background:#5858ea" id="active_div">
                            <div class="card-body text-center" onclick="#">
                                <h4 class="white" style="color:#fff;">Total Sales Inprocessed</h4>
                                <h6 class="display-5 mt-4 white" style="color:#fff;" id="AllLeadsSrGenerated">
                                    0
                                </h6>
                                <h6 class="d-none display-5 mt-4 white" style="color:#fff;" id="totalLeadsSrGenerated">
                                </h6>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card" id="verified_div" id="pending_div">
                            <div class="card-body text-center" onclick="#">
                                <h4 class="white" style="color:#fff;">Total Sales Closed</h4>
                                <h6 class="display-5 mt-4 white" style="color:#fff;" id="AllLeadsSaleClosed24">
                                    0
                                </h6>
                                <h6 class="d-none display-5 mt-4 white" style="color:#fff;" id="totalLeadsSaleClosed1_24">
                                </h6>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card" id="rejected_div" id="rejected_div">
                            <div class="card-body text-center" onclick="#">
                                <h4 class="white" style="color:#fff;">Total Sales Cancelled</h4>
                                <h6 class="display-5 mt-4 white" style="color:#fff;" id="AllLeadsSrInProcessed08">
                                    0
                                </h6>
                                <h6 class="d-none display-5 mt-4 white" style="color:#fff;" id="totalLeadsSrInProcessed1_08">
                                </h6>

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

                <h5 class="text-center">Data Dashboard</h5>
                <div class="row">
                    <div class="col-lg-3">
                        <div class="card" style="background:#5858ea" id="active_div">
                            <div class="card-body text-center" onclick="#">
                                <h4 class="white" style="color:#fff;">Total Numbers Assigned</h4>
                                <h6 class="display-5 mt-4 white" style="color:#fff;" id="AllTotalAssignNum">
                                    0
                                </h6>
                                <h6 class="d-none display-5 mt-4 white" style="color:#fff;" id="AssignNumGetUp">
                                </h6>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="card" id="verified_div" id="pending_div">
                            <div class="card-body text-center" onclick="#">
                                <h4 class="white" style="color:#fff;">Total Numbers Assigned By Staff</h4>
                                <h6 class="display-5 mt-4 white" style="color:#fff;" id="AllTotalCallsMade">
                                    0
                                </h6>
                                <h6 class="d-none display-5 mt-4 white" style="color:#fff;" id="CallsMadeGetUp">
                                </h6>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="card" id="rejected_div" id="rejected_div">
                            <div class="card-body text-center" onclick="#">
                                <h4 class="white" style="color:#fff;">Total Data Attended</h4>
                                <h6 class="display-5 mt-4 white" style="color:#fff;" id="AllTotalLeadsGenerated">
                                    0
                                </h6>
                                <h6 class="d-none display-5 mt-4 white" style="color:#fff;" id="LeadsGeneratedGetUp">
                                </h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="card" id="follow_up_div" id="follow_up_div">
                            <div class="card-body text-center" onclick="#">
                                <h4 class="white" style="color:#fff;">Total Follow Up Generated </h4>
                                <h6 class="display-5 mt-4 white" style="color:#fff;" id="AllTotalFollowUpMade">
                                    0
                                </h6>
                                <h6 class="d-none display-5 mt-4 white" style="color:#fff;" id="FollowUpMadeGetUp">
                                </h6>

                            </div>
                        </div>
                    </div>
                </div>
            @endrole
        </div>
    </div>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    $(document).ready(function() {
        $("#submitBtn").click(function() {
            var agent = $("#agent").val();
            $.ajax({
                type: "POST",
                url: "{{ route('user.user_dashboard') }}",
                data: {
                    agent: agent,
                },
                success: function(response) {
                    // console.log(response);
                    $('#AllLeadsMonthlyAgent').addClass('d-none');
                    $('#totalLeadsMonthlyAgent1_01').removeClass('d-none');

                    $('#AllLeadsMonthlyAgent09').addClass('d-none');
                    $('#totalLeadsMonthlyAgent1_09').removeClass('d-none');

                    $('#AllLeadsMonthlyAgent21').addClass('d-none');
                    $('#totalLeadsMonthlyAgent1_21').removeClass('d-none');

                    $('#AllLeadsMonthlyAgent04').addClass('d-none');
                    $('#totalLeadsMonthlyAgent1_04').removeClass('d-none');

                    $('#AllLeadsSrGenerated').addClass('d-none');
                    $('#totalLeadsSrGenerated').removeClass('d-none');

                    $('#AllLeadsSaleClosed24').addClass('d-none');
                    $('#totalLeadsSaleClosed1_24').removeClass('d-none');


                    $('#AllLeadsSrInProcessed08').addClass('d-none');
                    $('#totalLeadsSrInProcessed1_08').removeClass('d-none');


                    // $('#AllLeadsSrRejected04').addClass('d-none');
                    // $('#totalLeadsSrRejected1_04').removeClass('d-none');


                    $('#AllTotalAssignNum').addClass('d-none');
                    $('#AssignNumGetUp').removeClass('d-none');


                    $('#AllTotalCallsMade').addClass('d-none');
                    $('#CallsMadeGetUp').removeClass('d-none');


                    $('#AllTotalLeadsGenerated').addClass('d-none');
                    $('#LeadsGeneratedGetUp').removeClass('d-none');


                    $('#AllTotalFollowUpMade').addClass('d-none');
                    $('#FollowUpMadeGetUp').removeClass('d-none');

                    // Update your HTML with the filtered data
                    $('#totalLeadsMonthlyAgent1_01').text(response
                        .allLeadsCountPendingOnUser);
                    $('#totalLeadsMonthlyAgent1_09').text(response
                        .allLeadsCountProcessedOnUser);
                    $('#totalLeadsMonthlyAgent1_21').text(response
                        .allLeadsCountFollowUpOnUser);
                    $('#totalLeadsMonthlyAgent1_04').text(response
                        .allLeadsCountRejectedOnUser);
                    $('#totalLeadsSrGenerated').text(response.allLeadsSrGeneratedMonthlyOnUser);
                    $('#totalLeadsSaleClosed1_24').text(response.allLeadsSaleClosedStatusOnUser);
                    $('#totalLeadsSrInProcessed1_08').text(response
                        .allLeadsSrInProcessedStatusOnUser);
                    // $('#totalLeadsSrRejected1_04').text(response.allLeadsSrRejectedStatusOnUser);
                    $('#AssignNumGetUp').text(response.totalAssignNumStatusOnUser);
                    $('#CallsMadeGetUp').text(response.totalCallsMadeStatusOnUser);
                    $('#LeadsGeneratedGetUp').text(response.totalLeadsGeneratedStatusOnUser);
                    $('#FollowUpMadeGetUp').text(response.totalFollowUpMadeStatusOnUser);
                }
            });
        });
    });
</script>