@extends('layouts.tenant.dreams_tech.app')

@section('page_css')
    <link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/plugins/select2/css/select2.min.css" />
    <link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/plugins/icons/feather/feather.css" />
    <style>
        .custom-header-select {
            padding-top: 0rem;
            padding-bottom: 0.1rem;
            padding-left: 0.5rem;
            border-radius: 0.25rem;
            margin-top: 0.05rem;
        }
    </style>
@endsection

@section('page_content')
    <div class="row">
        <div class="col-lg-12">
            @if ($page_type == 'status')
                @livewire('tenant.lemarex.stats.invoices.status', ['page_title' => $page_title])
            @elseif ($page_type == 'type')
                @livewire('tenant.lemarex.stats.invoices.type', ['page_title' => $page_title])
            @elseif ($page_type == 'bank-account')
                @livewire('tenant.lemarex.stats.invoices.bank-account', ['page_title' => $page_title])
            @endif
        </div>
    </div>
@endsection

@section('page_js')
    <script src="https://cdn.jsdelivr.net/gh/livewire/sortable@v1.x.x/dist/livewire-sortable.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/js/jquery-ui.min.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/js/chart.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/select2/js/select2.min.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/sweetalert/sweetalert2.all.min.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/sweetalert/sweetalerts.min.js"></script>

    <script>
        Chart.register({
            id: 'NoData',
            afterDraw: function (chart) {
                if (chart.data.datasets.map((d) => d.data.length).reduce((p, a) => p + a, 0) === 0) {
                    // No data is present
                    const ctx = chart.ctx;
                    const width = chart.width;
                    const height = chart.height;
                    chart.clear();

                    ctx.save();
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.font = `1rem ${window.getComputedStyle(document.body).fontFamily}`;
                    ctx.fillStyle = 'grey';
                    ctx.fillText('No data to display', width / 2, height / 2);
                    ctx.restore();
                }
            },
        });
    </script>
@endsection