@extends('admin.layout.app')

@section('main_title', 'Dashboard')
@section('title', 'Dashboard')
@section('sub_title', 'Control Panel')
@push('styles')
 <link href="{{ asset('public/assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('public/assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('public/assets/libs/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('public/assets/libs/datatables.net-select-bs5/css//select.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
<style>
            .card.portlet_card {
                height: 100%;
            }
            .uefa_img {
                margin-bottom: 20px;
            }
            .img_box img {
                height: inherit;
            }
            .img_box{height:200px;}
            .card_box{
                height: 100%;
            }
            .pointer{
                cursor: pointer;
            }
        </style>
@endpush
<!-- start content -->
@section('content')
<div class="row">
    <div class="col-md-6 col-xl-3 pointer" onclick="window.location.href = '{{ route('events.index')}}?category=Music'">
                                <div class="widget-rounded-circle card card_box">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="avatar-lg rounded-circle bg-primary border-primary border shadow">
                                                    <i class="fe-music font-22 avatar-title text-white"></i>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="text-end">
                                                    <h3 class="text-dark mt-1"><span data-plugin="counterup"></span></h3>
                                                    <p class="mb-1 fw-bold">Music Events</p>
                                                </div>
                                            </div>
                                        </div> <!-- end row-->
                                    </div>
                                </div> <!-- end widget-rounded-circle-->
                            </div> <!-- end col-->

    <div class="col-md-6 col-xl-3 pointer" onclick="window.location.href = '{{ route('events.index')}}?category=Sport'" >
                                <div class="widget-rounded-circle card card_box">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="avatar-lg rounded-circle bg-success border-success border shadow">
                                                    <i class="mdi mdi-baseball font-22 avatar-title text-white"></i>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="text-end">
                                                    <h3 class="text-dark mt-1"><span data-plugin="counterup"></span></h3>
                                                    <p class="mb-1 fw-bold">Sport Events</p>
                                                </div>
                                            </div>
                                        </div> <!-- end row-->
                                    </div>
                                </div> <!-- end widget-rounded-circle-->
                            </div> <!-- end col-->
                            
    <div class="col-md-6 col-xl-3 pointer" style="display:none;" onclick="window.location.href = 'event_listing.php?domain=stubhub&type=football';" >
                                <div class="widget-rounded-circle card card_box">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="avatar-lg rounded-circle bg-danger border-danger border shadow">
                                                    <i class="mdi mdi-football font-22 avatar-title text-white"></i>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="text-end">
                                                    <h3 class="text-dark mt-1"><span data-plugin="counterup"></span></h3>
                                                    <p class="mb-1 fw-bold">Football Events</p>
                                                </div>
                                            </div>
                                        </div> <!-- end row-->
                                    </div>
                                </div> <!-- end widget-rounded-circle-->
                            </div> <!-- end col-->
                            
    <div class="col-md-6 col-xl-3 pointer" onclick="window.location.href = '{{ route('events.index')}}?mappedStatus=false'" >
                                <div class="widget-rounded-circle card card_box">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="avatar-lg rounded-circle bg-info border-info border shadow">
                                                    <i class="fe-plus font-22 avatar-title text-white"></i>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="text-end">
                                                    <h3 class="text-dark mt-1"><span data-plugin="counterup"></span></h3>
                                                    <p class="mb-1 fw-bold">UnMapped/New Events</p>
                                                </div>
                                            </div>
                                        </div> <!-- end row-->
                                    </div>
                                </div> <!-- end widget-rounded-circle-->
                            </div> <!-- end col-->

    <div class="col-md-6 col-xl-3 pointer" onclick="window.location.href = '{{ route('events.index')}}?mappedStatus=true&&updatedEvents=true'" >
                                <div class="widget-rounded-circle card card_box">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="avatar-lg rounded-circle bg-warning border-warning border shadow">
                                                    <i class="mdi mdi-update font-22 avatar-title text-white"></i>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="text-end">
                                                    <h3 class="text-dark mt-1"><span data-plugin="counterup"></span></h3>
                                                    <p class="mb-1 fw-bold">Updated Required Events</p>
                                                </div>
                                            </div>
                                        </div> <!-- end row-->
                                    </div>
                                </div> <!-- end widget-rounded-circle-->
                            </div> <!-- end col-->
</div>
<br>
<div class="row">
       
                             <div class="col-md-6 col-xl-3 pointer" onclick="window.location.href = '{{ route('events.index')}}?mappedStatus=true;" >
                                <div class="widget-rounded-circle card card_box">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="avatar-lg rounded-circle bg-success border-success border shadow">
                                                    <i class="mdi mdi-reply font-22 avatar-title text-white"></i>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="text-end">
                                                    <h3 class="text-dark mt-1"><span data-plugin="counterup"></span></h3>
                                                    <p class="mb-1 fw-bold">Mapped Events</p>
                                                </div>
                                            </div>
                                        </div> <!-- end row-->
                                    </div>
                                </div> <!-- end widget-rounded-circle-->
                            </div> <!-- end col-->
</div>
<br>
<div class="row">
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body" >
                                        
                                        <table id="scroll-vertical-datatable" class="table dt-responsive w-100 dataTable" data-tablesaw-mode="stack" >
                                            <thead>
                                            <tr>
                                                <th>Category</th>
                                                <th class="text-end">UnMapped Events</th>
                                                <th class="text-end">Mapped Events</th>
                                                <th class="text-end">Update Required Events</th>
                                              
                                            </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($categoryEventsCount as $category)
                                                @if($category->mapped_events == 0 && $category->unmapped_event == 0)
                                                    @php continue; @endphp
                                                @endif
                                            <tr>
                                                <td >{{$category->search_type}}</td>
                                                <td class="text-end">{{$category->unmapped_event}}</td>
                                                <td class="text-end">{{$category->mapped_event}}</td>
                                                <td class="text-end">{{$category->update_requires}}</td>
                                            </tr>
                                            @endforeach
                                           
                                        
                                            
                                            </tbody>
                                        </table>
                                    </div>
                                </div> <!-- end card-->
                            </div> <!-- end col -->
                            <div class="col-xl-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-widgets">
                                            <a href="javascript: void(0);" data-bs-toggle="reload"><i class="mdi mdi-refresh"></i></a>
                                            <a data-bs-toggle="collapse" href="#cardCollpase5" role="button" aria-expanded="false" aria-controls="cardCollpase5"><i class="mdi mdi-minus"></i></a>
                                            <a href="javascript: void(0);" data-bs-toggle="remove"><i class="mdi mdi-close"></i></a>
                                        </div>
                                        <h4 class="header-title mb-0">Event Sources Overview</h4>

                                        <div id="cardCollpase5" class="collapse show" dir="ltr">
                                            <div id="apex-column-1" class="apex-charts pt-3" data-colors="#6658dd,#1abc9c,#CED4DC"></div>
                                        </div> <!-- collapsed end -->
                                    </div> <!-- end card-body -->
                                </div> <!-- end card-->
                            </div> <!-- end col-->
                        </div>
 
<!-- end row-->
@endsection
<!-- end content -->

@push('scripts')
    <!-- datatables js -->
<script src="{{ asset('public/assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('public/assets/libs/datatables.net/js/dataTables.editor.min.js') }}"></script>
<script src="{{ asset('public/assets/libs/datatables.net-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="{{ asset('public/assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('public/assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>

<script src="{{ asset('public/assets/libs/apexcharts/apexcharts.min.js') }}"></script>


<script>

colors = ["#6658dd", "#1abc9c", "#CED4DC"];
var SourceArray = null;
var unmappedArray = null;
var mappedArray = null;
var updateArray = null;

(dataColors = $("#apex-column-1").data("colors")) && (colors = dataColors.split(","));
options = {
    chart: {
        height: 380,
        type: "bar",
        toolbar: {
            show: !1
        }
    },
    plotOptions: {
        bar: {
            horizontal: !1,
            endingShape: "rounded",
            columnWidth: "55%"
        }
    },
    dataLabels: {
        enabled: !1
    },
    stroke: {
        show: !0,
        width: 2,
        colors: ["transparent"]
    },
    colors: colors,
    series: [{
        name: "Un-Mapped Event",
        data: unmappedArray
    }, {
        name: "Mapped Event",
        data: mappedArray
    }, {
        name: "Update Required",
        data: updateArray
    }],
    xaxis: {
        categories: SourceArray
    },
    legend: {
        offsetY: 5
    },
    yaxis: {
        title: {
            text: " (events)"
        }
    },
    fill: {
        opacity: 1
    },
    grid: {
        row: {
            colors: ["transparent", "transparent"],
            opacity: .2
        },
        borderColor: "#f1f3fa",
        padding: {
            bottom: 10
        }
    },
    tooltip: {
        y: {
            formatter: function(e) {
                return  + e + " events"
            }
        }
    }
};
chart=(new ApexCharts(document.querySelector("#apex-column-1"),options)).render();

$('#scroll-vertical-datatable').dataTable( {
  "scrollY": "350px",
  "scrollCollapse": true,
  "paging": false,
  "ordering":false
} );
</script>
@endpush