@extends('admin.layout.master')
@section('title', 'Dashboard')
@section('section', __('dashboard.Dashboard'))
@section('body')
    <!-- Main Content -->
    <section class="section">


        <div class="row">
            @if (Auth::user()->hasRole(App\Models\User::SUPER_ADMIN_ROLE) || Auth::user()->hasRole(App\Models\User::SUPERVISOR_ROLE))
                <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1">
                        <div class="card-icon bg-primary">
                            <i class="far fa-user"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header" id="qiam-cards">
                                <h4>@lang('dashboard.Total Users')</h4>
                            </div>
                            <div class="card-body">
                                {{ count($users) }}
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <div class="card card-statistic-1">
                    <div class="card-icon bg-danger">
                        <i class="fas fa-shopping-bag"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="card-header" id="qiam-cards">
                            <h4>@lang('dashboard.Total Assets')</h4>
                        </div>
                        <div class="card-body">
                            {{ count($assets) }}
                        </div>
                    </div>
                </div>
            </div>

            @can('show-cards')
                <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1">
                        <div class="card-icon bg-warning">
                            <i class="fas fa-shopping-bag"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header" id="qiam-cards">
                                <h4>@lang('dashboard.Remaining Assets For Assign')</h4>
                            </div>
                            <div class="card-body">
                                {{ $remainingAssets }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1">
                        <div class="card-icon bg-success">
                            <i class="fas fa-building"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header" id="qiam-cards">
                                <h4>@lang('dashboard.Total Entities')</h4>
                            </div>
                            <div class="card-body">
                                {{ $entities }}
                            </div>
                        </div>
                    </div>
                </div>
            @endcan
        </div>

        <script>
            var markers = [];
        </script>

        @can('show-map')
            <form onsubmit="filterAssetsByDateRange(); return false;">
                <div class="row">
                    <div class="form-group col-2 ml-3">
                        <label for="start-date-picker">@lang('dashboard.Start Date'):</label>
                        <input class="form-control" type="date" id="start-date-picker" name="start-date-picker">
                    </div>
                    <div class="form-group col-2 ml-3">
                        <label for="end-date-picker">@lang('dashboard.End Date'):</label>
                        <input class="form-control" type="date" id="end-date-picker" name="end-date-picker">
                    </div>
                    <button class="btn btn-danger" id="btn-style" type="submit">@lang('button.Filter')</button>
                </div>
            </form>

            <body onload="initMap()">
                <div id="map" style="height: 400px;"></div>
            </body>
        @endcan

    </section>


    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4e04U9e6wGxVJdO70TvbgDcOij1MemKA&libraries=places&callback=initMap"
        async defer></script>

    <script>
        var map;
        var markers = [];
        var infoWindow;
        var assets = @json($assets);

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: 30.19679,
                    lng: 71.47824
                },
                zoom: 5,

                styles: [{
                        "featureType": "poi",
                        "elementType": "labels",
                        "stylers": [{
                            "visibility": "off"
                        }]
                    },
                    {
                        "featureType": "road",
                        "elementType": "geometry",
                        "stylers": [{
                            "color": "#FF0000"
                        }]
                    },
                    {
                        "featureType": "road",
                        "elementType": "labels",
                        "stylers": [{
                            "visibility": "off"
                        }]
                    },
                    {
                        "featureType": "transit",
                        "elementType": "labels.icon",
                        "stylers": [{
                            "visibility": "off"
                        }]
                    },
                    {
                        "featureType": "administrative",
                        "elementType": "labels",
                        "stylers": [{
                            "visibility": "on"
                        }]
                    },
                    {
                        "featureType": "road",
                        "elementType": "geometry.stroke",
                        "stylers": [{
                            "weight": 0.1
                        }]
                    }
                ]
            });

            // Initialize an empty InfoWindow
            infoWindow = new google.maps.InfoWindow();

            // Add markers for all assets
            displayAllMarkers();
        }

        function displayAllMarkers() {
            // Add markers for each asset
            assets.forEach(asset => {
                var marker = new google.maps.Marker({
                    position: {
                        lat: Number(asset.latitude),
                        lng: Number(asset.longitute)
                    },
                    map: map,
                    title: asset.bar_code
                });

                var routeUrl = "{{ route('show.asset', ['asset' => ':assetId']) }}".replace(':assetId', asset.id);

                marker.addListener('click', function() {
                    infoWindow.setContent('<a href="' + routeUrl + '" class="text-danger">' +
                        'See Details' + '</a>');
                    infoWindow.open(map, marker);
                });

                markers.push(marker);
            });
        }

        function filterAssetsByDateRange() {
            var startDate = document.getElementById('start-date-picker').value;
            var endDate = document.getElementById('end-date-picker').value;

            // Filter assets by selected date range
            var filteredAssets = assets.filter(asset => {
                var assetDate = new Date(asset.created_at).toISOString().slice(0, 10);
                return assetDate >= startDate && assetDate <= endDate;
            });

            // Clear existing markers
            markers.forEach(marker => marker.setMap(null));
            markers = [];

            if (filteredAssets.length === 0) {
                // Display an error message
                alert('No assets found for the selected date range.');
            } else {
                // Display filtered markers
                filteredAssets.forEach(asset => {
                    var marker = new google.maps.Marker({
                        position: {
                            lat: Number(asset.latitude),
                            lng: Number(asset.longitute)
                        },
                        map: map,
                        title: asset.bar_code
                    });

                    marker.addListener('click', function() {
                        infoWindow.setContent('<strong>' + asset.bar_code + '</strong>');
                        infoWindow.open(map, marker);
                    });

                    markers.push(marker);
                });
            }
        }
    </script>


@endsection