@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"/>
    <link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/plugins/dragula/css/dragula.min.css"/>
    <style>
        .pipeline-header-select {
            padding-top: 0rem;
            padding-bottom: 0.1rem;
            padding-left: 0.5rem;
            border-radius: 0.25rem;
            margin-top: 0.05rem;
        }

        .head-custom-btn {
            height: 32px;
            background: white !important;
            color: #262A2A;
            display: inline-flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            justify-content: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            border: 1px solid #E8E8E8;
            border-radius: 5px;
            margin-right: 8px;
            font-weight: 400 !important;
        }

        [data-theme=dark] .head-custom-btn {
            border-color: #393947 !important;
            background: transparent !important;
            color: white !important;
        }

        .head-custom-btn:hover {
            background: #00918E !important;
            color: #fff !important;
        }
    </style>
@endsection

@section('page_content')
    <div class="row">
        <div class="col-lg-12">
            @livewire('tenant.lemarex.dashboard.dashboard-landing-page', ['page_title' => $page_title])
        </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 src="{{ config('env.themes.dreams_tech.folder') }}/plugins/dragula/js/dragula.min.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/dragula/js/drag-drop.min.js"></script>
    {{--    <script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/dragula/js/draggable-cards.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();
                }
            },
        });

        window.addEventListener('dashboard-widgets-updated', event => {
            $('#modify_widgets').offcanvas('hide');
            Swal.fire({
                title: "Dashboard Widgets Updated!",
                text: "The dashboard widgets list has been updated!",
            }).then(res => {
                Livewire.dispatch('reset-filters')
            });
        });
    </script>
@endsection