@extends('laundry::layouts/contentLayoutMaster')

@section('title', auth()->user()->id==1 ? 'Dashboard | Super Admin' : 'Dashboard')

@section('vendor-style')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <style>
        .half_rem_padding_lr{ padding-left: 0.5rem !important;; padding-right: 0.5rem !important; }
        .avatar:hover{ background-color: #c3c3c3 !important; }
    </style>
@endsection

@section('content')
@if(session()->has('message'))
    <div class="alert alert-success p-2" role="alert">
        {{ session()->get('message') }}
    </div>
@endif

@if(auth()->user()->id!=1)
    <div class="row">
        <div class="col-12">

            <div class="card card-statistics">
                <div class="card-header d-block align-items-start">
                    <span class="card-subtitle text-muted ">{{ __('Different actions to Perform Laundry Management') }}</span>
                </div>
                <div class="card-body statistics-body">
                    <div class="row">

                        <div class="col-xs-6 col-sm-4 col-md-4 pb-1">
                            <a href="{{ url('/laundry/launder-stock/add') }}" class="btn btn-success btn-block">{{ __('Add Received') }}</a>
                        </div>

                        <div class="col-xs-6 col-sm-4 col-md-4 pb-1">
                            <a href="{{ url('/laundry/launder-stock/wash') }}" class="btn btn-info btn-block">{{ __('Add Washed') }}</a>
                        </div>
                        <div class="col-xs-6 col-sm-4 col-md-4 pb-1">
                            <a href="{{ url('/laundry/launder-stock/sent') }}" class="btn btn-outline-info btn-block">{{ __('Add Returned') }}</a>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
@endif

    <div class="row">

        <!-- Donut Chart Starts-->
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card">
                <div class="card-header d-block align-items-start">
                    <h4 class="card-title mb-75">{{ __('Status') }}</h4>
                    <span class="card-subtitle text-muted">{{ __('Product Status w.r.t Percentage') }}</span>
                </div>
                <div class="card-body">
                    <div id="donut-chart"></div>
                </div>
            </div>
        </div>
        <!-- Donut Chart Ends-->

        <!-- Statistics Card -->
        <div class="col-xl-8 col-md-6 col-12">
            <div class="card card-statistics">
                <div class="card-header d-block align-items-start">
                    <h4 class="card-title">{{ __('Statistics') }}</h4>
                    <span class="card-subtitle text-muted">{{ __('Static Report of the System') }}</span>
                    <div class="d-flex align-items-center">
                        <p class="card-text font-small-2 mr-25 mb-0">{{ __('From last 30 days') }}</p>
                    </div>
                </div>
                <div class="card-body statistics-body">
                    <div class="row">
                        <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-xl-0 half_rem_padding_lr">
                            <div class="media">
                                <div class="avatar bg-light-primary mr-1">
                                    <div class="avatar-content">
                                        <img class="avatar-icon" src="{{ asset('laundry-files/images/icons/increase.png') }}" alt="Trending" style="border-radius: 0;">
                                    </div>
                                </div>
                                <div class="media-body my-auto">
                                    <h4 class="font-weight-bolder mb-0">{{ $in_stock }}</h4>
                                    <p class="card-text font-small-3 mb-0">{{ __('In-Stock') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-xl-0 half_rem_padding_lr">
                            <div class="media">
                                <div class="avatar bg-light-info mr-1">
                                    <div class="avatar-content">
                                        <img class="avatar-icon" src="{{ asset('laundry-files/images/icons/bedding.png') }}" alt="Damages" style="border-radius: 0;">
                                    </div>
                                </div>
                                <div class="media-body my-auto">
                                    <h4 class="font-weight-bolder mb-0">{{ $lost_damaged_expired }}</h4>
                                    <p class="card-text font-small-3 mb-0">{{ __('Lost / Damage / Expired') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-xl-0 half_rem_padding_lr">
                            <div class="media">
                                <div class="avatar bg-light-danger mr-1">
                                    <div class="avatar-content">
                                        <img class="avatar-icon" src="{{ asset('laundry-files/images/icons/box.png') }}" alt="Products" style="border-radius: 0;">
                                    </div>
                                </div>
                                <div class="media-body my-auto">
                                    <h4 class="font-weight-bolder mb-0">{{ $total_items }}</h4>
                                    <p class="card-text font-small-3 mb-0">{{ __('Items') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-xl-0 half_rem_padding_lr">
                            <div class="media">
                                <div class="avatar bg-light-success mr-1">
                                    <div class="avatar-content">
                                        <img class="avatar-icon" src="{{ asset('laundry-files/images/icons/expense.png') }}" alt="Expenses" style="border-radius: 0;" >
                                    </div>
                                </div>
                                <div class="media-body my-auto">
                                    <h4 class="font-weight-bolder mb-0">{{ $washing_cost }}</h4>
                                    <p class="card-text font-small-3 mb-0">{{ __('Washing Cost') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Statistics Card -->
    </div>



    <div class="row">

        <!-- Bar Chart Starts-->
        <div class="col-12">
            <div class="card">
                <div class="card-header d-block align-items-start">
                    <h4 class="card-title mb-75">{{ __('Monthly Washings') }}</h4>
                </div>
                <div class="card-body">
                    <div id="bar-chart"></div>
                </div>
            </div>
        </div>
        <!-- Bar Chart Ends-->

    </div>

@endsection


@section('page-script')
    <script src="{{ asset('laundry-files/vendors/js/charts/apexcharts.js') }}"></script>

    <script>
        $((function () {
            "use strict";
            var e = $(".flat-picker"), t = "rtl" === $("html").attr("data-textdirection");

            function s(e, t) {
                for (var a = 0, o = []; a < e;) {
                    var r = "w" + (a + 1).toString(), s = Math.floor(Math.random() * (t.max - t.min + 1)) + t.min;
                    o.push({x: r, y: s}), a++
                }
                return o
            }

            if (e.length) {
                new Date;
                e.each((function () {
                    $(this).flatpickr({mode: "range", defaultDate: ["2019-05-01", "2019-05-10"]})
                }))
            }


            /**
             * Donut Chart
             */
            var O = document.querySelector("#donut-chart"), D = {
                chart: {height: 295, type: "donut"},
                legend: {show: !0, position: "bottom"},
                labels: ["Available",             "Out",              "In Use",     "Laundry"],
                series: [{{$in_stock}}, {{$lost_damaged_expired}}, {{$in_use}}, {{$in_washing}}],
                colors: ["#00d4bd","#FF0000","#826bf8","#FFA1A1"],
                dataLabels: {
                    enabled: !0, formatter: function (e, t) {
                        return parseInt(e) + "%"
                    }
                },
                plotOptions: {
                    pie: {
                        donut: {
                            labels: {
                                show: !0,
                                name: {fontSize: "1.2rem", fontFamily: "Montserrat"},
                                value: {
                                    fontSize: "0.9rem", fontFamily: "Montserrat", formatter: function (e) {
                                        return parseInt(e) + "%"
                                    }
                                },
                                total: {
                                    show: !0, fontSize: "1rem", label: "Total Items", formatter: function (e) {
                                        return "{{ $total_items }}"
                                    }
                                }
                            }
                        }
                    }
                },
                responsive: [{breakpoint: 992, options: {chart: {height: 345}}}, {
                    breakpoint: 576,
                    options: {
                        chart: {height: 295},
                        plotOptions: {
                            pie: {
                                donut: {
                                    labels: {
                                        show: !0,
                                        name: {fontSize: "1.5rem"},
                                        value: {fontSize: "1rem"},
                                        total: {fontSize: "1.5rem"}
                                    }
                                }
                            }
                        }
                    }
                }]
            };
            void 0 !== typeof O && null !== O && new ApexCharts(O, D).render()
        }));


        /**
         * Bar/column chart Monthly Washings
         */
        var options_bar = {
            chart: { type: 'bar', height: 350 },
            dataLabels: { enabled: false },
            plotOptions: {
                bar: {
                    columnWidth: '30%',
                }
            },
            series: [{
                name: 'No. of Washes',
                data: [
                    @foreach ($monthly_washing as $month)
                        {{$month['washing_count']}},
                    @endforeach
                ]
            }],
            xaxis: {
                categories: [
                    @foreach ($monthly_washing as $month)
                        '{{$month['month']}}',
                    @endforeach
                ],
            }
        };

        var chart_bar = new ApexCharts(document.querySelector("#bar-chart"), options_bar);
        chart_bar.render();





        /**
         * Bar/column chart Monthly Washings
         */
        var options_line = {
            series: [{
                name: "Cost",
                data: [
                    @foreach ($monthly_washing as $month)
                        {{$month['washing_cost']}},
                    @endforeach
                ]
            }],
            colors: ['#FF9F41'],
            chart: {
                height: 350,
                type: 'line',
                zoom: {
                    enabled: false
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'straight'
            },
            title: {
                text: 'Product Trends by Month',
                align: 'left'
            },
            grid: {
                row: {
                    colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                    opacity: 0.5
                },
            },
            xaxis: {
                categories: [
                    @foreach ($monthly_washing as $month)
                        '{{$month['month']}}',
                    @endforeach
                ],
            }
        };

        var chart_line = new ApexCharts(document.querySelector("#line-chart"), options_line);
        chart_line.render();




    </script>

@endsection