@extends('layouts.master')

@section('title', 'Dashboard')

@section('breadcrumb-text')
    <div>
        <h1 class="mb-1">
            {{__('Hello,')}} {{ Auth::user()->roles[0]->name }}
        </h1>
        <p class="m-0">{{__('You can manage privileges access to the website and launch it in seconds.')}}</p>
    </div>
@endsection

@section('content')
    <div class="row">
        @can('dashboard-yearly-sales-chart-view')
            <div class="col-xl-8 col-lg-8 col-md-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <div class="d-flex justify-content-between">
                            <h4 class="mt-1 pt-2">{{ __('Weekly Bonus') }}</h4>
                            <div class="float-end" style="max-width: 160px;">
                                <div class="form-group m-0">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <input type="month" id="month" max="{{ date('Y-m') }}" value="{{ date('Y-m') }}" class="form-control rounded-lg p-2.5 w-full text-sm text-black-900 bg-white border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11"/>
                                        <label for="month" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{__('Select Month') }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="weeklyChartLoader" style="display: none;height: 350px;">
                            <div class="d-flex m-auto h-100">
                                <span class="h5 m-auto">Loading...</span>
                            </div>
                        </div>
                        <div id="weeklyChart" style="height: 350px;"></div>
                    </div>
                </div>
            </div>
        @endcan
        @can('dashboard-sales-by-country-chart-view')
            <div class="col-xl-4 col-lg-4 col-sm-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <div class="d-flex justify-content-between">
                            <h4 class="mt-1 pt-2">{{ __('Monthly Bonus') }}</h4>
                            <div class="float-end" style="max-width: 160px;">
                                <div class="form-group m-0">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <input type="month" id="monthlyBonusChartMonth" max="{{ date('Y-m') }}" value="{{ date('Y-m') }}" class="form-control rounded-lg p-2.5 w-full text-sm text-black-900 bg-white border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11"/>
                                        <label for="monthlyBonusChartMonth" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{__('Select Month') }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="monthlyChartLoader" style="display: none;height: 350px;">
                            <div class="d-flex m-auto h-100">
                                <span class="h5 m-auto">Loading...</span>
                            </div>
                        </div>
                        <div id="monthlyChart" style="height: 350px;"></div>
                    </div>
                </div>
            </div>
        @endcan
    </div>
    @can('logs-list')
        <div class="card">
            <div class="card-body">
                <div class="row">
                    @include('backend.dashboard-logs')
                </div>
            </div>
        </div>
    @endcan
    @if(Auth::user()->hasRole(['translator','translation-manager']))
    @can('dashboard-words-count')
    <div class="row">

        <div class="col-6  mt-4">
            <div class="card mb-4">
                <div class="card-body mt-4">
                    <h5 class="card-title text-center">{{__('Total Words:')}} <b>{{ $countStaticDataKeys }}</b></h5>

                </div>
            </div>
        </div>
        <div class="col-6  mt-4">
            <div class="card mb-4">
                <div class="card-body mt-4">
                    <h5 class="card-title text-center">{{__('Total PDF Settings:')}} <b>{{ $countPdfSettings }}</b></h5>
                </div>
            </div>
        </div>


        <div class="col-6 mt-4">
            @foreach ($countWords as $item)
                @if(Auth::user()->hasRole(['translator']))
                <a href="{{ url('admin/translator/static-data') }}" class="text-decoration-none">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">{{ ucwords($item['langauge_name']) }} {{ __('Words') }}</h5>
                            <div class="row">
                                <div class="col-4">
                                    <div class="text-center">
                                        <b>{{ $item['pending'] }}</b>
                                        <p>{{ __('Pending') }}</p>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="text-center">
                                        <b>{{ $item['approved'] }}</b>
                                        <p>{{ __('Approved') }}</p>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="text-center">
                                        <b>{{ $item['rejected'] }}</b>
                                        <p>{{ __('Rejected') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                @elseif(Auth::user()->hasRole(['translation-manager']))
                <a href="{{ url('admin/translation-approval') }}" class="text-decoration-none">
                    <div class="card mb-4">
                        <div class="card-body mt-4">
                            <h5 class="card-title text-center">{{ ucwords($item['langauge_name']) }} {{__('Pending Words :')}} <b>{{ $item['pending'] }}</b></h5>

                        </div>
                    </div>
                </a>
                @endif
            @endforeach

        </div>
        <div class="col-6 mt-4">
            @foreach ($pdfCountWords as $item)
                @if(Auth::user()->hasRole(['translator']))
                <a href="{{ url('admin/translator/pdf-settings') }}" class="text-decoration-none">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">{{ ucwords($item['langauge_name']) }} {{__('PDF Settings')}}</h5>
                            <div class="row">
                                <div class="col-4">
                                    <div class="text-center">
                                        <b>{{ $item['pending'] }}</b>
                                        <p>{{ __('Pending') }}</p>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="text-center">
                                        <b>{{ $item['approved'] }}</b>
                                        <p>{{ __('Approved') }}</p>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="text-center">
                                        <b>{{ $item['rejected'] }}</b>
                                        <p>{{ __('Rejected') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                @elseif(Auth::user()->hasRole(['translation-manager']))
                <a href="{{ url('admin/pdf-translation-approval') }}" class="text-decoration-none">
                    <div class="card mb-4">
                        <div class="card-body mt-4">
                            <h5 class="card-title text-center">{{ ucwords($item['langauge_name']) }} {{__('PDF Settings :')}} <b>{{ $item['pending'] }}</b></h5>

                        </div>
                    </div>
                </a>
                @endif
            @endforeach

        </div>
    </div>
    @endcan
    @endif

@endsection

@push('scripts')
    <script src="{{ asset('backend/js/vendor/echarts.min.js') }}"></script>
    <script src="{{ asset('backend/js/pages-js/dashboard.js') }}"></script>

    <script>
        // your custom ajax request here
        var log = JSON.parse('{!! json_encode($logName) !!}');

        function ajaxRequest(params) {
            let currentLog = $('.bootstrap-table-filter-control-log_name').val();
            params.data.logs = '{{ $logs }}';
            if (currentLog) {
                params.data.log_name = currentLog;
            }
            var url = "{{ route('admin.dashboardLog') }}"
            $('.filter-control input.search-input').prop('readonly', true);
            $.get(url + '?' + $.param(params.data)).then(function(res) {
                $('.filter-control input.search-input').prop('readonly', false);
                params.success(res)
            })
        }
    </script>
@endpush