@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);">Biyr</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="row">
        <div class="col-lg-3 col-md-6">
            <!-- card -->
            <div class="card card-animate">
                <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-muted text-truncate mb-0">Total Sellers</p>
                        </div>
                        <!-- <div class="flex-shrink-0">
                                            <h5 class="text-success fs-14 mb-0">
                                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +16.24 %
                                            </h5>
                                        </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">
                                <span class="counter-value" data-target="{{ $sellers }}">{{ $sellers }}</span>
                            </h4>
                            <a href="{{ route('admin.sellers') }}" class="text-decoration-underline">View all</a>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-success-subtle rounded fs-3">
                                        <i class="bx bx-user-circle text-success"></i>
                                    </span>
                        </div>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
        <div class="col-lg-3 col-md-6 ">
            <!-- card -->
            <div class="card card-animate">
                <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-muted text-truncate mb-0">Buyers</p>
                        </div>
                        <!-- <div class="flex-shrink-0">
                                            <h5 class="text-danger fs-14 mb-0">
                                                <i class="ri-arrow-right-down-line fs-13 align-middle"></i> -3.57 %
                                            </h5>
                                        </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"><span class="counter-value" data-target="{{ $buyers }}">{{ $buyers }}</span></h4>
                            <a href="{{ route('admin.users') }}" class="text-decoration-underline">View all</a>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-info-subtle rounded fs-3">
                                        <i class="bx bx-user-pin text-info"></i>
                                    </span>
                        </div>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
        <div class="col-lg-3 col-md-6 ">
            <!-- card -->
            <div class="card card-animate">
                <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-muted text-truncate mb-0">Business Liting</p>
                        </div>
                        <!-- <div class="flex-shrink-0">
                                            <h5 class="text-success fs-14 mb-0">
                                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +29.08 %
                                            </h5>
                                        </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"><span class="counter-value" data-target="{{ $businesses }}">{{$businesses}}</span></h4>
                            <a href="{{ route('admin.businesslisting') }}" class="text-decoration-underline">View all</a>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-warning-subtle rounded fs-3">
                                        <i class="ri ri-building-line text-warning"></i>
                                    </span>
                        </div>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->

        <div class="col-lg-3 col-md-6 ">
            <!-- card -->
            <div class="card card-animate">
                <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-muted text-truncate mb-0">User Interest</p>
                        </div>
                        <!-- <div class="flex-shrink-0">
                                            <h5 class="text-success fs-14 mb-0">
                                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +29.08 %
                                            </h5>
                                        </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"><span class="counter-value" data-target="{{ $interests }}">{{$interests}}</span></h4>
                            <a href="{{ route('admin.user-interests') }}" class="text-decoration-underline">View all</a>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-warning-subtle rounded fs-3">
                                        <i class="ri ri-building-line text-warning"></i>
                                    </span>
                        </div>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
       
    </div>

    <div class="row">
       
        <!-- end col -->

       

        <!-- end col -->
    </div>
    <!-- end row -->

    <div class="row ">
        
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Recent Business Listing</h4>
                   
                </div>
                <!-- end card header -->

                <div class="card-body">
                    <div class="table-responsive table-card">
                        <table id="BusinessTable" class="table table-bordered nowrap align-middle" style="width:100%;">
                            <thead class="text-uppercase">
                                <tr>
                                    <th>Sl No</th>
                                    <th>Image</th>
                                    <th>Title</th>
                                    <th>Owner</th>
                                    <th>Category</th>
                                    <th>Status</th>
                                   
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($businesseslist as $business)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>
                                    <img src="{{ $business->main_image }}" 
                                        alt="Image" 
                                        style="width:60px; height:60px; object-fit:cover; border-radius:6px;">
                                    </td>
                                    <td>{{ $business->title }}</td>
                                    <td>{{ $business->owner->name ?? '-' }}</td>
                                    <td>{{ $business->category->name ?? '-' }}</td>
                                    <td>{{ ucfirst($business->approval_status) }}</td>
                                   
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <!-- end table -->
                    </div>
                    <!-- end table responsive -->
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->
    <button id="refreshTable" class="btn btn-primary d-none">Refresh Table</button>
@endsection
@section('script')
 <script type="text/javascript" language="javascript">
        $(document).ready(function () {
          
            var table = $('#BusinessTable').DataTable();
            $('#refreshTable').on('click', function () {
                table.draw();
            });

            
        });
        
      
    </script>
<!-- <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
          
            var table = $('#postTable').DataTable();
            $('#refreshTable').on('click', function () {
                table.draw();
            });

            
        });
        
        $(document).ready(function () {
          
            var table = $('#challengeTable').DataTable();
            $('#refreshTable').on('click', function () {
                table.draw();
            });

            
        });
    </script>

    <script>
    function getChartColorsArray(id) {
        const el = document.getElementById(id);
        if (!el) return [];

        const theme = document.documentElement.getAttribute("data-theme");
        const attr = "data-colors" + (theme ? "-" + theme : "");
        let colors = el.getAttribute(attr) || el.getAttribute("data-colors");

        try {
            colors = JSON.parse(colors.replace(/'/g, '"'));
        } catch (e) {
            console.warn("Invalid color format", e);
            return [];
        }

        return colors.map(color => {
            const trimmed = color.trim();
            if (!trimmed.includes(",")) {
                return getComputedStyle(document.documentElement).getPropertyValue(trimmed) || trimmed;
            }
            const [base, alpha] = trimmed.split(",");
            return `rgba(${getComputedStyle(document.documentElement).getPropertyValue(base).trim()},${alpha})`;
        });
    }

    document.addEventListener("DOMContentLoaded", function () {
        const chartColors = getChartColorsArray("revenue-expenses-chartsdashboard");

        const options = {
            series: [
                {
                    name: "Active Customers",
                    data: @json($monthlyStats['users'])
                },
                {
                    name: "Journeys",
                    data: @json($monthlyStats['journeys'])
                },
            ],
            chart: {
                height: 290,
                type: "area",
                toolbar: { show: false }
            },
            dataLabels: { enabled: false },
            stroke: { curve: "smooth", width: 2 },
            xaxis: {
                categories: @json($monthlyStats['months'])
            },
            colors: chartColors,
            fill: {
                opacity: 0.06,
                colors: chartColors,
                type: "solid"
            }
        };

        const chart = new ApexCharts(document.querySelector("#revenue-expenses-chartsdashboard"), options);
        chart.render();
    });
</script>
<script>

document.addEventListener("DOMContentLoaded", function () {
    const chartColors1 = getChartColorsArray("myPieChart") || ['#1F7EDA', '#00BDE2']; // Fallback colors

    const options = {
        series: [78.56, 105.02],
        labels: ["Posts", "Journeys"],
        chart: {
            type: "pie",
            height: 290
        },
        colors: chartColors1, // 👈 Set chart colors here
        plotOptions: {
            pie: {
                size: 100,
                donut: {
                    size: "76%"
                }
            }
        },
        dataLabels: {
            enabled: false
        },
        legend: {
            show: true,
            position: "bottom",
            horizontalAlign: "center",
            offsetX: 0,
            offsetY: 0,
            markers: {
                width: 20,
                height: 6,
                radius: 2
            },
            itemMargin: {
                horizontal: 12,
                vertical: 0
            }
        },
        stroke: {
            width: 0
        }
    };

    const pchart = new ApexCharts(document.querySelector("#myPieChart"), options);
    pchart.render();
});

</script> -->

@endsection