@extends('admin.layouts.app')

@section('content')
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->

<style>
    .table-scroll {
        overflow-y: auto;
        max-height: 450px;
    }
</style>

<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="page-title-box">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h6 class="page-title">Dashboard</h6>
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-xl-3 col-md-6">
                    <div class="card mini-stat bg-primary text-white">
                        <div class="card-body">
                            <div class="mb-4">
                                <div class="float-start mini-stat-img me-4">
                                    <img src="{{asset('public/admin/assets/images/services-icon/02.png')}}" alt="">
                                </div>
                                <h5 class="font-size-16 text-uppercase text-white-50">Places</h5>
                                <h4 class="fw-medium font-size-24">{{count($church_count)}}</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card mini-stat bg-primary text-white">
                        <div class="card-body">
                            <div class="mb-4">
                                <div class="float-start mini-stat-img me-4">
                                    <img src="{{asset('public/admin/assets/images/services-icon/01.png')}}" alt="">
                                </div>
                                <h5 class="font-size-16 text-uppercase text-white-50">Nearby</h5>
                                <h4 class="fw-medium font-size-24">{{count($nearby_count)}}</h4>

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

            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4">Map Visits</h4>
                            <a class="btn btn-primary float-end d-none d-md-block" type="button" href="{{route('export-map-visits')}}">Export Visits</a>
                            <br><br>
                            <!-- <div class="table-responsive table-scroll"> -->
                            <!-- <table id="datatable" class="table table-hover table-centered table-nowrap mb-0"> -->
                            <table id="datatable" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr>
                                        <th scope="col">Page Type</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Visits</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($map_visit_counts as $key => $value)
                                    <tr>
                                        <td scope="row">{{$value->type}}</td>
                                        <td scope="row">{{$value->page}}</td>
                                        <td scope="row">{{$value->total_visit}}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->

            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4">Page Visits</h4>
                            <a class="btn btn-primary float-end d-none d-md-block" type="button" href="{{route('export-visits')}}">Export Visits</a>
                            <br><br>
                            <!-- <div class="table-responsive table-scroll"> -->
                            <!-- <table id="datatable" class="table table-hover table-centered table-nowrap mb-0"> -->
                            <table id="datatable" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr>
                                        <th scope="col">Page Type</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Visits</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($visit_counts as $key => $value)
                                    <tr>
                                        <td scope="row">{{$value->type}}</td>
                                        <td scope="row">{{$value->page}}</td>
                                        <td scope="row">{{$value->total_visit}}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->

        </div> <!-- container-fluid -->
    </div>
    <!-- End Page-content -->



    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    © <script>
                        document.write(new Date().getFullYear())
                    </script> Veltrix<span class="d-none d-sm-inline-block"> - Crafted with <i class="mdi mdi-heart text-danger"></i> by <a href="https://1.envato.market/themesdesign" target="_blank">Themesdesign</a>.</span>
                </div>
            </div>
        </div>
    </footer>

</div>
<!-- end main content-->
@endsection
@section('script')
<script src="{{asset('public/admin/assets/js/pages/datatables.init.js')}}"></script>
<script src="{{asset('public/admin/assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('public/admin/assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>

@endsection