@extends('layout.app')
@section('title')
    {{ __('message.tags_statistics') }}
@stop
@section('css')
    @if( LaravelLocalization::getCurrentLocale() == "ar")
        <!-- BEGIN: Vendor CSS-->
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css-rtl/vendors.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css-rtl/tables/datatable/dataTables.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css-rtl/tables/datatable/responsive.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css-rtl/tables/datatable/buttons.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css-rtl/tables/datatable/rowGroup.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css') }}">
        <!-- END: Vendor CSS-->
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/charts/apexcharts.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css-rtl/plugins/charts/chart-apex.css') }}">


        <!-- BEGIN: Page CSS-->
        <!-- END: Page CSS-->

        <style>
            @media(min-width: 576px){
                .course-model {
                    max-width: 1000px;
                }
            }
        </style>
    @else
        <!-- BEGIN: Vendor CSS-->
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/vendors.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css/tables/datatable/dataTables.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css/tables/datatable/responsive.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css/tables/datatable/buttons.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css/tables/datatable/rowGroup.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css') }}">
        <!-- END: Vendor CSS-->
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/charts/apexcharts.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/plugins/charts/chart-apex.css') }}">
        <!-- BEGIN: Page CSS-->
        <!-- END: Page CSS-->

        <style>
            @media(min-width: 576px){
                .course-model {
                    max-width: 1000px;
                }
            }
        </style>
    @endif
@stop

@section('content')

    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">{{ __('message.tags_statistics') }}</h2>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route("dashboard")}}">{{ __('message.dashboard') }}</a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{route("tags.index")}}">{{ __('message.tags') }}</a>
                            </li>
                            <li class="breadcrumb-item active">{{ __('message.tags_statistics') }}
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <!-- meals list start -->
            <section class="app-meals-list row">
                <!-- list section start -->
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-datatable table-responsive pt-0">


                            <table class="tags-apps-statistics-list-table table">
                                <thead class="thead-light">
                                <tr>

                                    <th>{{ __('message.name') }}</th>
                                    <th>{{ __('message.status') }}</th>

                                </tr>
                                </thead>
                            </table>
                        </div>

                    </div>
                </div>
                <!-- Support Tracker Card -->
                <div class="col-lg-6 col-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between pb-0">
                            <h4 class="card-title">@lang("message.tags_statistics")</h4>

                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-2 col-12 d-flex flex-column flex-wrap text-center">
                                    <h1 class="font-large-2 font-weight-bolder mt-2 mb-0">{{$count_apps}}</h1>
                                    <p class="card-text">@lang("message.apps_count")</p>
                                </div>
                                <div class="col-sm-10 col-12 d-flex justify-content-center">
                                    <div id="support-tracker-chart"></div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="text-center">
                                    <p class="card-text mb-50">@lang("message.success_app") @endlang</p>
                                    <span class="font-large-1 font-weight-bold">{{$count_success_apps}}</span>
                                </div>
                                <div class="text-center">
                                    <p class="card-text mb-50">@lang("message.fail_app")</p>
                                    <span class="font-large-1 font-weight-bold">{{$count_failure_apps}}</span>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <!--/ Support Tracker Card -->

                <!-- list section end -->
            </section>
        </div>
    </div>
@endsection

@section('js')
    <!-- BEGIN: Page Vendor JS-->
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/responsive.bootstrap4.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/jszip.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/pdfmake.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/vfs_fonts.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.print.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/charts/apexcharts.min.js') }}"></script>

    <script src="{{ asset('app-assets/js/tagsChart.js') }}"></script>
    <!-- END: Page Vendor JS-->
    <!-- END: Page Vendor JS-->
    @php
        $user = auth()->user();
    @endphp
    <script>
        const role_create = @if($user->isAbleTo('tag-create')) "" @else "d-none"  @endif ;
        const role_update = @if($user->isAbleTo('tag-update')) "" @else "d-none"  @endif ;
        const role_delete = @if($user->isAbleTo('tag-delete')) "" @else "d-none"  @endif ;
        const success_percent = {{$success_percent}};
        const text_of_chart = "@lang("message.success_apps")";


    </script>
    <script>
        const indexUrl = '{{route("tags.show",$tag->id)}}';

    </script>
    <!-- BEGIN: Page JS-->
    <script src="{{ asset('app-assets/js/dt.js') }}?v=0.3"></script>


@stop