@extends('user.app.layout')

@section('content')
    <div class="main-content">
        <div class="mainsections">
            <div class="main-section-padding">
                <h2>Welcome! {{ Auth::user()->contact_person_name }}</h2>
                <h6>Overview</h6>
                <section class="dashboardblock-sec-1">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12 col-lg-6 col-xl-4 col-md-6 col-xxl-3 column">
                                <div class="dashboard_block blue">
                                    <div class="dashboard_right">
                                        <img src="../assets/images/f1.svg" alt="dash">
                                    </div>
                                    <div class="dashboard_left">
                                        <p>Total Templates</p>
                                        <h3 id="totalTemplates">0</h3>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12 col-lg-6 col-xl-4 col-md-6 col-xxl-3 column">
                                <div class="dashboard_block blue">
                                    <div class="dashboard_right dashboard_second">
                                        <img src="../assets/images/f2.svg" alt="dash">
                                    </div>
                                    <div class="dashboard_left">
                                        <p>Campaigns</p>
                                        <h3 id="totalCampaigns">0</h3>
                                    </div>
                                    <div class="dashboard_extra">
                                        <h4 class="mb-2">Ongoing: <span id="ongoingCampaigns">0</span></h4>
                                        <h4>Completed: <span id="completedCampaigns">0</span></h4>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12 col-lg-6 col-xl-4 col-md-6 col-xxl-3 column">
                                <div class="dashboard_block blue">
                                    <div class="dashboard_right dashboard_third">
                                        <img src="../assets/images/f3.svg" alt="dash">
                                    </div>
                                    <div class="dashboard_left">
                                        <p>Audience</p>
                                        <h3 id="totalAudiences">0</h3>
                                    </div>
                                </div>
                            </div>

                            <!-- <div class="col-sm-12 col-lg-6 col-xl-4 col-md-6 col-xxl-3 column">
                                              <div class="dashboard_block blue">
                                                  <div class="dashboard_right dashboard_four">
                                                      <img src="../assets/images/f4.svg" alt="dash">
                                                  </div>
                                                  <div class="dashboard_left">
                                                    <p>Notification</p>
                                                    <h3>24</h3>
                                                </div>
                                              </div>
                                           </div> -->
                        </div>
                    </div>
            </div>
            </section>
        @endsection

        @section('js')
            <script>
                $(document).ready(function() {
                    dashboardCount();
                });

                function dashboardCount() {
                    $.ajax({
                        url: "{{ route('userGetCounts') }}",
                        type: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}"
                        },
                        dataType: "json",
                        success: function(response) {
                            if (response.status == 1) {
                                const data = response.data;

                                // Update Total Templates
                                $("#totalTemplates").text(data.totalTemplates);

                                // Update Campaigns
                                $("#totalCampaigns").text(data.totalCampaigns);
                                $("#ongoingCampaigns").text(data.ongoingCampaigns);
                                $("#completedCampaigns").text(data.completedCampaigns);

                                // Update Audiences
                                $("#totalAudiences").text(data.totalAudiences);
                            } else {
                                $.notify(response.msg, "error");
                            }
                        },
                        error: function(jqXHR) {
                            $.notify(jqXHR.responseJSON.message, "error");
                        }
                    });
                }
            </script>
        @endsection