@extends('admin.modern.layout.master')

@php
    $showDashboardDetails = auth()->user()->name === 'super_admin'
        || auth()->user()->cannot('admin.settings.dashboardDetails');
@endphp

@section('title')
    @lang('admin.home')
@stop

@section('page-breadcrumb')
    <div class="dashboard__bredcrumb">
        <ul class="d-flex">
            <li><a href="{{ url('/') }}">@lang('admin.home')</a></li>
            <li><img class="bc-arrow" alt="" src="{{ url('assets/modern/images/bc-arrow.svg') }}"/></li>
            <li><a href="#">@lang('admin.statistics')</a></li>
        </ul>
    </div>

    <div class="dashboard__section__overview d-flex flex-wrap justify-content-between align-items-center gap-3 pt-4">
        <div class="dashboard__section-tile">
            <h3>@lang('admin.home')</h3>
        </div>
        @if($showDashboardDetails)
            @if($dashboardPreferencesAvailable)
                <div class="dashboard__btn-outline">
                    <button type="button" data-bs-toggle="modal" data-bs-target="#DashboardCustomizeModal">
                        <svg class="dashboard-customize-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                            <path d="M5.83337 5.83325H5.00004C4.55801 5.83325 4.13409 6.00885 3.82153 6.32141C3.50897 6.63397 3.33337 7.05789 3.33337 7.49992V14.9999C3.33337 15.4419 3.50897 15.8659 3.82153 16.1784C4.13409 16.491 4.55801 16.6666 5.00004 16.6666H12.5C12.9421 16.6666 13.366 16.491 13.6786 16.1784C13.9911 15.8659 14.1667 15.4419 14.1667 14.9999V14.1666"/>
                            <path d="M16.9875 5.48759C17.3157 5.15938 17.5001 4.71424 17.5001 4.25009C17.5001 3.78594 17.3157 3.34079 16.9875 3.01259C16.6593 2.68438 16.2142 2.5 15.75 2.5C15.2858 2.5 14.8407 2.68438 14.5125 3.01259L7.5 10.0001V12.5001H10L16.9875 5.48759Z"/>
                            <path d="M13.3334 4.16675L15.8334 6.66675"/>
                        </svg>
                        @lang('admin.customize')
                    </button>
                </div>
            @endif
        @endif
    </div>
@stop

@section('page-content')
    @include('admin.modern.layout.error')

    @if($showDashboardDetails)
        <div class="dashboard__statistics__card-container modern-dashboard">
            <div class="row">
                @foreach($dashboardWidgets as $widget)
                    @if($widget['enabled'])
                        <div class="col-md-6 col-lg-4 col-xl-3">
                            <article class="dashboard__statistics__card">
                                @if($widget['url'])
                                    <a href="{{ $widget['url'] }}">
                                @endif
                                <h6>
                                    <span class="modern-dashboard__stat-icon" aria-hidden="true">
                                        @include('admin.modern.dashboard.widget_icon', ['widgetKey' => $widget['key']])
                                    </span>
                                    {{ $widget['label'] }}
                                </h6>
                                <h3>{{ $widget['value'] }}</h3>
                                @if($widget['url'])
                                    </a>
                                @endif
                            </article>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>

        <div class="dashboard__charts">
            <div class="row g-4">
                <div class="col-xl-8">
                    <article class="charts__card h-100">
                        <div class="modern-chart__heading">
                            <div>
                                <span>@lang('admin.statistics')</span>
                                <h5>@lang('admin.year-sale')</h5>
                            </div>
                            <i class="fas fa-chart-bar" aria-hidden="true"></i>
                        </div>
                        <div class="modern-chart__canvas"><canvas id="sales-purchases"></canvas></div>
                    </article>
                </div>
                <div class="col-xl-4">
                    <article class="charts__card h-100">
                        <div class="modern-chart__heading">
                            <div>
                                <span>@lang('admin.statistics')</span>
                                <h5>@lang('admin.expenses')</h5>
                            </div>
                            <i class="fas fa-wallet" aria-hidden="true"></i>
                        </div>
                        <div class="modern-chart__canvas"><canvas id="expenses-chart"></canvas></div>
                    </article>
                </div>
                <div class="col-xl-6">
                    <article class="charts__card h-100">
                        <div class="modern-chart__heading">
                            <div>
                                <span>@lang('admin.inventory')</span>
                                <h5>@lang('admin.items-store')</h5>
                            </div>
                            <i class="fas fa-boxes" aria-hidden="true"></i>
                        </div>
                        <div class="modern-chart__canvas"><canvas id="materials-quantity"></canvas></div>
                    </article>
                </div>
                <div class="col-xl-6">
                    <article class="charts__card h-100">
                        <div class="modern-chart__heading">
                            <div>
                                <span>@lang('admin.sales')</span>
                                <h5>@lang('admin.top-five')</h5>
                            </div>
                            <i class="fas fa-medal" aria-hidden="true"></i>
                        </div>
                        <div id="top-items-sales" class="modern-chart__canvas"></div>
                    </article>
                </div>
            </div>
        </div>

        @if($dashboardPreferencesAvailable)
            @include('admin.modern.dashboard.modal')
        @endif
    @endif
@stop

@section('css')
    @if($showDashboardDetails)
        <link href="{{ url('assets/lexa/libs/chart.js/Chart.min.css') }}" rel="stylesheet"/>
        <link href="{{ url('assets/lexa/libs/morris.js/morris.css') }}" rel="stylesheet"/>
        <style>
            .modern-dashboard .dashboard__statistics__card {height:calc(100% - 20px);background:#fff;overflow:hidden;transition:.2s ease}
            .modern-dashboard .dashboard__statistics__card:hover {border-color:#b2c5ff;box-shadow:0 10px 25px rgba(46,99,253,.09);transform:translateY(-2px)}
            .modern-dashboard .dashboard__statistics__card>a {display:block;color:inherit;text-decoration:none}
            .modern-dashboard .dashboard__statistics__card h3 {font-size:29px;line-height:126.667%}
            .modern-dashboard__stat-icon {display:inline-flex;width:22px;height:20px;align-items:center;justify-content:center;flex:0 0 22px}
            .dashboard-widget-icon {stroke:#101828;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
            .modern-dashboard .dashboard-widget-icon {width:22px;height:20px}
            .dashboard-customize-icon {width:20px;height:20px;stroke:#2e63fd;stroke-width:1.66667;stroke-linecap:round;stroke-linejoin:round}
            .modern-chart__heading {display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
            .modern-chart__heading span {display:block;margin-bottom:4px;color:#667085;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
            .modern-chart__heading h5 {margin:0}
            .modern-chart__heading>i {display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;color:#2e63fd;background:#eef4ff;border-radius:10px}
            .modern-chart__canvas {position:relative;min-height:310px;height:310px}
            .modern-chart__canvas canvas {max-height:310px}
            #top-items-sales svg {max-width:100%}
            .dashboard__customization__modal .modal-dialog {max-width:500px}
            .dashboard__customization__modal .modal-content {max-height:calc(100vh - 40px);overflow-y:auto}
            .dashboard__customization__modal .dashboard-widget-icon {width:16px;height:16px;flex:0 0 16px;stroke:#101828;stroke-width:1.33333}
            .dashboard__customization__modal__buttons button {width:100%;justify-content:center;cursor:pointer}
            .dashboard__customization__modal .dashboard__btn-outline,
            .dashboard__customization__modal .dashboard__btn-fill {width:50%}
            .dashboard__customization__modal .modal-footer .dashboard__btn-outline button {color:#344054!important;border-color:#d0d5dd}
            .dashboard__customization__modal .modal-footer .dashboard__btn-fill button,
            .dashboard__customization__modal .modal-footer .dashboard__btn-outline button {padding:10px 60px}
            @media(max-width:768px){.modern-dashboard .dashboard__statistics__card h3{font-size:24px}}
        </style>
    @endif
@stop

@section('js')
    @if($showDashboardDetails)
        <script src="{{ url('assets/lexa/libs/chart.js/Chart.min.js') }}"></script>
        <script src="{{ url('assets/lexa/libs/raphael/raphael.min.js') }}"></script>
        <script src="{{ url('assets/lexa/libs/morris.js/morris.min.js') }}"></script>
        <script>
            localStorage.removeItem('timer');
            const dashboardPalette = ['#2e63fd','#5b8cff','#96b1ff','#7a5af8','#53b1fd'];
            const parseLabels = value => value ? value.split(',').map(label => label.trim().replace(/^"|"$/g, '')) : [];
            const parseValues = value => value ? value.split(',').map(Number) : [];
            const chartDefaults = {responsive:true,maintainAspectRatio:false,legend:{position:'bottom',labels:{boxWidth:10,usePointStyle:true}}};
            const storeData = @json($dashboardChartData['store']);
            const expensesData = @json($dashboardChartData['expenses']);

            new Chart(document.getElementById('sales-purchases'), {
                type:'bar',
                data:{
                    labels:[
                        '@lang('admin.month_January')','@lang('admin.month_February')','@lang('admin.month_March')',
                        '@lang('admin.month_April')','@lang('admin.month_May')','@lang('admin.month_June')',
                        '@lang('admin.month_July')','@lang('admin.month_Augest')','@lang('admin.month_September')',
                        '@lang('admin.month_October')','@lang('admin.month_November')','@lang('admin.month_December')'
                    ],
                    datasets:[
                        {label:"@lang('admin.dashboard_sale_yearly')",backgroundColor:'#2e63fd',data:[{!! $dashboardChartData['sales_year'] !!}]},
                        {label:"@lang('admin.dashboard_purchase_yearly')",backgroundColor:'#ddebff',data:[{!! $dashboardChartData['purchases_year'] !!}]}
                    ]
                },
                options:{...chartDefaults,scales:{yAxes:[{ticks:{beginAtZero:true}}]},tooltips:{mode:'index',intersect:false}}
            });

            new Chart(document.getElementById('expenses-chart'), {
                type:'doughnut',
                data:{labels:parseLabels(expensesData.label),datasets:[{data:parseValues(expensesData.data),backgroundColor:dashboardPalette}]},
                options:{...chartDefaults,cutoutPercentage:68}
            });

            new Chart(document.getElementById('materials-quantity'), {
                type:'doughnut',
                data:{labels:parseLabels(storeData.label),datasets:[{data:parseValues(storeData.data),backgroundColor:dashboardPalette}]},
                options:{...chartDefaults,cutoutPercentage:62}
            });

            new Morris.Donut({
                element:'top-items-sales',
                data:[{!! $dashboardChartData['top_items'] !!}],
                colors:dashboardPalette,
                formatter:value => value + '%',
                resize:true
            });

            const preferencesForm = document.getElementById('dashboard-preferences-form');
            if (preferencesForm) {
                const preferencesModal = document.getElementById('DashboardCustomizeModal');
                const preferencesOverlay = document.getElementById('dashboard-custom-overlay');
                preferencesModal.addEventListener('show.bs.modal', () => preferencesOverlay.style.display = 'block');
                preferencesModal.addEventListener('hidden.bs.modal', () => preferencesOverlay.style.display = 'none');
                preferencesForm.querySelectorAll('[data-widget-key]').forEach(input => {
                    input.addEventListener('change', () => input.closest('.customize__checkbox-box').classList.toggle('checked', input.checked));
                });
                preferencesForm.addEventListener('submit', function (event) {
                    event.preventDefault();
                    const button = this.querySelector('button[type="submit"]');
                    const widgets = Array.from(this.querySelectorAll('[data-widget-key]')).map((input, sort) => ({
                        key:input.dataset.widgetKey,
                        enabled:input.checked ? 1 : 0,
                        sort:sort
                    }));
                    button.disabled = true;
                    fetch(this.action, {
                        method:'POST',
                        headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},
                        body:JSON.stringify({widgets})
                    }).then(response => response.ok ? response.json() : Promise.reject(response))
                      .then(() => window.location.reload())
                      .catch(() => toastr.error('@lang('admin.execution-error')'))
                      .finally(() => button.disabled = false);
                });
            }
        </script>
    @endif
@stop