@extends('layouts.admin')

@section('content')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">Dashboard</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Luqia</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
    
    <style>
        .custom_row{
            display: flex;
            gap: 10px;
            justify-content: center;
            height: 100%;
            flex-wrap: wrap;
        }
        .custom-row-box{
            width: calc(20% - 10px);
            margin-bottom: 10px;
        }

        @media(max-width: 1200px){
            .custom-row-box{
                width: calc(33.33% - 10px);
                margin-bottom: 20px;
            }
        }  
        
         @media(max-width: 992px){
            .custom-row-box{
                width: calc(50% - 10px);
                margin-bottom: 20px;
            }
        }  
        
         @media(max-width: 567px){
            .custom-row-box{
                width: 100%;
                margin-bottom: 20px;
            }
        }  
        
        .custom-row-box .card{
            margin-bottom: 0;
            height: 100%;
        }
        
        .svg-icon{
            position: absolute;
            right: 15px;
            bottom: 15px;
        }
    </style>

    <!-- Match Request Notification Strip -->
    <div id="match-notification-strip-container"></div>

    <div class="stastics-wrapper">
        <!-- start row for stats -->
        <div class="custom_row mb-3">
            <div class="custom-row-box" style="cursor: pointer;">
                <div class="card card-animate" style="border: 1.5px solid #f7bfb4;     background-position: bottom right;">
                    
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-dark text-truncate mb-0">Total Users</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-22 fw-semibold ff-secondary mb-4 text-black">
                                    <span class="counter-value" data-target="{{$totalCount}}">{{$totalCount}}</span>
                                </h4>
                                <!-- <a href="{{ route('admin.users.male')}}" class=" btn btn-secondary" style="background: linear-gradient(144deg, #19297C 0%, #19297C 100%);">View all</a> -->
                            </div>
                            <div class="avatar-sm flex-shrink-0 svg-icon">
                                <span class="avatar-title bg-transparent rounded display-4">
                                    <img src="https://cdn-icons-png.flaticon.com/128/476/476700.png" width="45">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="custom-row-box" onclick="window.location.href='{{ route('admin.users.male')}}';" style="cursor: pointer;">
                <div class="card card-animate" style="border: 1.5px solid #f7bfb4;     background-position: bottom right;">
                    
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-dark text-truncate mb-0">Total Male</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-22 fw-semibold ff-secondary mb-4 text-black">
                                    <span class="counter-value" data-target="{{ $totalMalecustomer }}">{{ $totalMalecustomer }}</span>
                                </h4>
                                <a href="{{ route('admin.users.male')}}" class=" btn btn-secondary" style="background: linear-gradient(144deg, #19297C 0%, #19297C 100%);">View all</a>
                            </div>
                            <div class="avatar-sm flex-shrink-0 svg-icon">
                                <span class="avatar-title bg-transparent rounded display-4">
                                    <img src="https://cdn-icons-png.flaticon.com/128/2319/2319383.png" width="45">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="custom-row-box" onclick="window.location.href='{{ route('admin.users.female')}}';" style="cursor: pointer;">
                <div class="card card-animate" style="border: 1.5px solid #f7bfb4;     background-position: bottom right;">
                    
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-dark text-truncate mb-0">Total Female</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-22 fw-semibold ff-secondary mb-4 text-black">
                                    <span class="counter-value" data-target="{{ $totalFemalecustomer }}">{{ $totalFemalecustomer }}</span>
                                </h4>
                                <a href="{{ route('admin.users.female')}}" class=" btn btn-secondary" style="background: linear-gradient(144deg, #19297C 0%, #19297C 100%);">View all</a>
                            </div>
                            <div class="avatar-sm flex-shrink-0 svg-icon">
                                <span class="avatar-title bg-transparent rounded display-4">
                                    <img src="https://cdn-icons-png.flaticon.com/128/16896/16896529.png" width="45">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="custom-row-box" style="cursor: pointer;">
                <div class="card card-animate" style="border: 1.5px solid #f7bfb4;     background-position: bottom right;">
                    
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-dark text-truncate mb-0">Pending For Approval</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-22 fw-semibold ff-secondary mb-4 text-black">
                                    <span class="counter-value" data-target="">300</span>
                                </h4>
                                <!--<a href="{{ route('admin.users.female')}}" class=" btn btn-secondary" style="background: linear-gradient(144deg, #19297C 0%, #19297C 100%);">View all</a>-->
                            </div>
                            <div class="avatar-sm flex-shrink-0 svg-icon">
                                <span class="avatar-title bg-transparent rounded display-4">
                                    <img src="https://cdn-icons-png.flaticon.com/128/2516/2516759.png" width="45">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="custom-row-box" style="cursor: pointer;">
                <div class="card card-animate" style="border: 1.5px solid #f7bfb4;     background-position: bottom right;">
                    
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-dark text-truncate mb-0">Expired</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-22 fw-semibold ff-secondary mb-4 text-black">
                                    <span class="counter-value" data-target="">250</span>
                                </h4>
                                <!--<a href="{{ route('admin.users.female')}}" class=" btn btn-secondary" style="background: linear-gradient(144deg, #19297C 0%, #19297C 100%);">View all</a>-->
                            </div>
                            <div class="avatar-sm flex-shrink-0 svg-icon">
                                <span class="avatar-title bg-transparent rounded display-4">
                                    <img src="https://cdn-icons-png.flaticon.com/128/8044/8044032.png" width="45">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="card h-100 mb-0" style="border: 1.5px solid #f7bfb4; background-position: bottom right; background: #fff;">
                    <div class="card-body">
                        <h5 class="card-title">Subscription Plans</h5>
                        <div id="pieChart"></div>
                    </div>
                    
                </div>
            </div>
            
            <div class="col-lg-6 mb-4">
                <div class="card h-100 mb-0" style="border: 1.5px solid #f7bfb4; background-position: bottom right; background: #fff;">
                    <div class="card-body">
                        <h5 class="card-title">Monthly Registration (Male & Female)</h5>
                        <div id="barChart"></div>
                    </div>
                    
                </div>
            </div>
            
            <div class="col-lg-12 mb-4">
                <div class="card h-100 mb-0" style="border: 1.5px solid #f7bfb4; background-position: bottom right; background: #fff;">
                    <div class="card-body">
                        <h5 class="card-title">Latest Registration</h5>
                        <div class="table-responsive">
                            <table id="UsersTable" class="table table-bordered nowrap align-middle" style="width: 100%;">
                                <thead class="">
                                    <tr class="text-uppercase">
                                        <th>Sl No</th>
                                        <th>Profile Image</th>
                                        <th>User ID</th>
                                        <th>Name</th>
                                        <th>Gender</th>
                                        <th>Mobile Number</th>
                                        <th>Nationality</th>
                                        <th>Sect</th>
                                        <th>Subscription Plan</th>
                                        <th>Status</th>
                                        <th>Created Date</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="list form-check-all">
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

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

@endsection
@section('script')

 <script>

    
        var pieOptions = {
      chart: {
        type: 'pie',
        height: 400,
      },
      series: @json($pieChart['values']??[]), // Data values
      labels: @json($pieChart['labels']??[]), // Labels
    //   colors: ['#8884D9', '#81CB9E', '#FFC758', '#FF8050'], // 👈 Same color scheme
      legend: {
        position: 'bottom', // 👈 This moves the labels to the bottom
        horizontalAlign: 'center'
      },
      responsive: [{
        breakpoint: 480,
        options: {
          
          legend: {
            position: 'bottom'
          }
        }
      }]
    };
    var pieChart = new ApexCharts(document.querySelector("#pieChart"), pieOptions);
    pieChart.render();

    
    // === Bar Chart ===
    var barOptions = {
      chart: {
        type: 'bar',
        height: 400,
        toolbar: {
          show: false
        },
      },
      series: @json($barChatData),
      
      colors: ['#8884D9', '#FF69B5'], // 👈 Same color scheme
      xaxis: {
        categories: @json($months)
      },
      
      legend: {
        position: 'bottom'
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '60%'
        }
      },
      
      dataLabels: {
        enabled: false
      }
    };
    var barChart = new ApexCharts(document.querySelector("#barChart"), barOptions);
    barChart.render();

    $(document).ready(function() {
        var table = $('#UsersTable').DataTable({
            responsive: true, 
            paging: true,     
            searching: false,  
            ordering: false,   
            lengthChange: false, 
            serverSide: true,
            dom: '<"top"f>rt<"bottom"><"clear">',
            ajax: {
                url: "{{ route('admin.getUserList') }}",
                type:'GET',
                data: function(d) {
                    // Add the external search value to the reque
                    d.gender        = 'all';
                },
            },
            columns: [
                { data: 'id', name: 'id' },
                { data: 'user_image', name: 'user_image' },
                { data: 'user_number', name: 'user_number' },
                { data: 'name', name: 'name' },
                { data: 'gender', name: 'gender' },
                { data: 'phone', name: 'phone' },
                { data: 'nationality_name', name: 'nationality_name' },
                { data: 'sect_name', name: 'sect_name' },
                { data: 'subscription_plan', name: 'subscription_plan' },
                { 
                    data: 'status', 
                    name: 'status',
                    render: function(data, type, row) {
                        return data;
                    }
                },
                { data: 'created_at', name: 'created_at' },
                { data: 'action', name: 'action' }
            ],
            columnDefs: [
                {
                    orderable: false,
                    targets: [0, 6]
                },
                {
                    "targets": 0, // Target the first column (index 0)
                    "render": function(data, type, row, meta) {
                        // Calculate the starting index of the current page
                        const pageInfo = $('#UsersTable').DataTable().page.info();
                        const startIndex = pageInfo.start;
                        // Calculate the serial number
                        return startIndex + meta.row + 1;
                    }
                }
            ],
        });
    });
  </script>


@endsection