@extends('layouts.main')
@section('title')
    {{__('Home')}}
@endsection
@section('content')
<style>
.card_title {
    white-space: normal;
    word-break: break-word;
}
</style>
    <section class="section">
        <div class="dashboard_title mb-3">{{__("Hi, Admin")}}</div>
        <div class="row mb-3 d-flex">
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="row">
                    <div class="col-sm-6 col-12 mb-3">
                        <a href="{{ url('customer') }}">
                            <div class="card h-100" style="width: 100%;">
                                <div class="total_customer d-flex">
                                    <div class="curtain"></div>
                                    <div class="row">
                                        <div class="col-4 col-md-12 ">
                                            <div class="svg_icon align-items-center d-flex justify-content-center me-3">
                                                <span class="fa fa-users text-white fa-2x"></span>
                                            </div>
                                        </div>
                                        <div class="col-8 col-md-12">
                                            <div class="total_number">{{$user_count}}</div>
                                            <div class="card_title">{{ __('Total Customers') }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col-sm-6 col-12 mb-3">
                        <a href="{{ url('advertisement') }}">
                            <div class="card h-100" style="width: 100%;">
                                <div class="total_items d-flex">
                                    <div class="curtain"></div>
                                    <div class="row">
                                        <div class="col-4 col-md-12 ">
                                            <div class="svg_icon align-items-center d-flex justify-content-center me-3">
                                                <span class="fa fa-box text-white fa-2x"></span>
                                            </div>
                                        </div>
                                        <div class="col-8 col-md-12">
                                            <div class="total_number">{{$item_count}}</div>
                                            <div class="card_title">{{ __('Total Advertisements') }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col-sm-6 col-12 mb-3">
                        <a href="{{ route('category.index') }}">
                            <div class="card h-100" style="width: 100%;">
                                <div class="item_for_sale d-flex">
                                    <div class="curtain"></div>
                                    <div class="row">
                                        <div class="col-4 col-md-12 ">
                                            <div class="svg_icon align-items-center d-flex justify-content-center me-3">
                                                <span class="fa fa-layer-group text-white fa-2x"></span>
                                            </div>
                                        </div>
                                        <div class="col-8 col-md-12">
                                            <div class="total_number">{{$categories_count}}</div>
                                            <div class="card_title">{{ __('Total Categories') }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col-sm-6 col-12 mb-3">
                        <a href="{{ route('custom-fields.index') }}">
                            <div class="card h-100" style="width: 100%;">
                                <div class="properties_for_rent d-flex">
                                    <div class="curtain"></div>
                                    <div class="row">
                                        <div class="col-4 col-md-12 ">
                                            <div class="svg_icon align-items-center d-flex justify-content-center me-3">
                                                <span class="fab fa-wpforms text-white fa-2x"></span>
                                            </div>
                                        </div>
                                        <div class="col-8 col-md-12">
                                            <div class="total_number">{{$custom_field_count}}</div>
                                            <div class="card_title">{{ __('Total Custom Fields') }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 col-md-6 col-sm-12">
                <div class="card h-100" style="width: 100%;">
                    <div class="card-header border-0 pb-0">
                        <h3 style="font-weight: 600">{{__("Featured Sections")}}</h3>
                    </div>
                    <div class="card-body">
                        <table class="table-borderless table-striped" aria-describedby="mydesc"
                               id="table_list" data-toggle="table" data-url="{{ route('feature-section.show',1) }}"
                               data-click-to-select="true" data-search="true" data-toolbar="#toolbar"
                               data-show-columns="true" data-show-refresh="true" data-fixed-columns="true"
                               data-fixed-number="1" data-trim-on-search="false" data-responsive="true"
                               data-escape="true"
                               data-sort-name="id" data-sort-order="desc" data-query-params="queryParams" data-mobile-responsive="true"
                               data-side-pagination="server"  data-pagination="true" data-page-size="3">
                            <thead class="thead-dark">
                            <tr>
                                <th scope="col" data-field="id" data-sortable="true">{{ __('ID') }}</th>
                                <th scope="col" data-field="style" data-formatter="styleImageFormatter">{{ __('Style') }}</th>
                                <th scope="col" data-field="title" data-sortable="false">{{ __('Title') }}</th>
                                <th scope="col" data-field="filter" data-sortable="false" data-formatter="filterTextFormatter">{{ __('Filters') }}</th>
                                <th scope="col" data-field="min_price" data-sortable="true" data-visible="false">{{ __('Min Price') }}</th>
                                <th scope="col" data-field="max_price" data-sortable="true" data-visible="false">{{ __('Max price') }}</th>
                                <th scope="col" data-field="values_text" data-sortable="true" data-visible="false">{{ __('Value') }}</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="map_data" id="map_data" value="{{ $items }}">
        {{-- <div class="row"> --}}
            <div class="col-md-12 col-sm-12">
                <div class="card map_title h-100">
                    <div class="card-header border-0 pb-0">
                        <h3 style="font-weight: 600">{{ __('Most Viewed') }}</h3>
                    </div>
                    <div class="card-body h-50">
                        <div id="world-map" style="width: 100%; height:400px"></div>
                    </div>
                </div>
            </div>
        {{-- </div> --}}
        <div class="row mb-10">
            <div class="col-md-6 col-sm-12">
                <div class="card h-100">
                    <div class="card-header">
                        <div class="recent_list_heading">{{ __("Total Categories") }}</div>
                    </div>
                    <div class="card-body mt-5">
                       <div class="card-body mt-5">
                            @if(!empty($category_item_count) && count($category_item_count) > 0)
                                <div id="pie_chart"></div>
                            @else
                                <div class="text-center py-5">
                                    <h5>{{ __('No categories available to display') }}</h5>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('js')
    <script>
        let seriesData = {!! json_encode(array_values($category_item_count)) !!};
        let hasData = Array.isArray(seriesData) && seriesData.length > 0 && seriesData.some(count => count > 0);

        if (hasData) {
            let options = {
                series: seriesData,
                chart: {
                    type: 'donut',
                    height: "700px"
                },
                labels: {!! json_encode($category_name) !!},
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: '100%',
                            height: '300px',
                        },
                    }
                }],
                legend: {
                    show: true,
                    showForSingleSeries: false,
                    showForNullSeries: true,
                    showForZeroSeries: true,
                    position: 'bottom',
                    horizontalAlign: 'center',
                    fontSize: '18px',
                    fontFamily: 'Helvetica, Arial',
                    fontWeight: 400,
                    itemMargin: {
                        horizontal: 30,
                        vertical: 10
                    }
                }
            };
            let chart1 = new ApexCharts(document.querySelector("#pie_chart"), options);
            chart1.render();
        } else {
            document.getElementById('pie_chart').style.display = 'none';
            document.getElementById('no_data_msg').style.display = 'block';
        }
    </script>



    <!-- Existing JS for chart rendering -->

@endsection
@section('script')
<script>
    var mapData = JSON.parse($('#map_data').val());
        //  var currency_symbol = $('#currency_symbol').val();
        //  var featured='<div class="featured_tag"><div class="featured_lable">Featured</div>';
        var markerValues = mapData.map(function(item, index) {
    return {
        latLng: [parseFloat(item.latitude), parseFloat(item.longitude)],
        name: item.city,
        label: item.city,
        style: {
            fill: '#00B2CA',
            stroke: '#00000'
        },
        card: {
            content: '<div class="card_map">' +
                        '<div class="image-container">' +
                            '<img src="' + item.image + '" alt="' + item.name + '" class="object-fit-cover">' +
                        '</div>' +
                        '<div class="title mt-3">' + item.name + '</div>' +
                        '<div class="price mt-2">' + item.price + '</div>' +
                        '<div class="city mt-2">' +
                            '<i class="bi bi-geo-alt"></i> ' + item.city +
                        '</div>' +
                    '</div>'
        }
    };
});

            $('#world-map').vectorMap({
            map: 'world_mill',
            // scaleColors: ['#116D6E', '#116D6E'],
            backgroundColor: '#fffff',
            markerStyle: {
            initial: {
            strokeWidth: 1,
            stroke: '#383F47',
            fillOpacity: 1,
            r: 8,
            },
            onMarkerLabelShow: function(event, label, index) {
            // Add custom CSS classes to the label element
            label.addClass('custom-marker-label');
            },
            },
            markers: markerValues,
            series: {
            markers: [{
            // attribute: 'fill',
            scale: {}, // Empty scale object to be populated dynamically
            values: mapData.map(function(item) {
            return item.city;
            })
            }]
            },
            onMarkerTipShow: function(event, label, index) {
            var cardContent = markerValues[index].card.content;
            label.html(cardContent);
            }
            });
</script>
@endsection