@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <!-- JQuery DataTable Css -->
    <link href="{{ url('material') }}/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css" rel="stylesheet">
    <!-- JQuery DataTable Css -->
@endpush

@push('scripts')
    {{-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> --}}
    <!-- ChartJs -->
    <script src="{{ url('material') }}/plugins/chartjs/Chart.bundle.js"></script>
    <script src="{{ url('material') }}/js/simplified.js"></script>


    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        $(function() {
            $('#daterange').daterangepicker({
                opens: 'right',
                locale: {
                    format: 'DD/MM/YYYY'
                },
                showCustomRangeLabel: true,
                alwaysShowCalendars: true,
                ranges: {

                    'Hari Ini': [moment(), moment()],
                    'Kemarin': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '7 Hari Terakhir': [moment().subtract(6, 'days'), moment()],
                    '1 Bulan Terakhir': [moment().subtract(29, 'days'), moment()],
                    'Bulan Ini': [moment().startOf('month'), moment().endOf('month')],
                    'Bulan Terakhir': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')],
                    'Semua Waktu': [moment().subtract(10, 'year'), moment().add(10, 'year')]

                }
            }, function(start, end, label) {

                console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end
                    .format('YYYY-MM-DD'));
                var delayInMilliseconds = 500; //1 second

                setTimeout(function() {
                    $("#filter-form").submit();
                }, delayInMilliseconds);

            });
        });

        $("#karyawan_id").change(function() {
            $("#filter-form").submit();
        });

        $("#kategori_item_id").change(function() {
            $("#filter-form").submit();
        });
    </script>
    {{-- chart Pertanggal --}}
    @foreach ($charts as $key => $v)
        <script>
            var ctx_{{ $key }} = document.getElementById('{{ $key }}Chart');
            if (ctx_{{ $key }}) {
                new Chart(ctx_{{ $key }}, {
                    type: 'bar',
                    data: {
                        labels: {!! json_encode($periodeTanggals) !!},
                        datasets: [{
                            label: ' # {{ strtoupper(implode(' ', preg_split('/(?=[A-Z])/', $key))) }}',
                            data: {!! json_encode($v) !!},
                            borderWidth: 1,
                            backgroundColor: 'rgba(255, 99, 132, 0.5)',
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        maintainAspectRatio: false,
                    }
                });
            }
        </script>
    @endforeach
    {{-- chart Pertanggal --}}
    <script>
        var combinedCtx = document.getElementById('omsetKotorChart');
        if (combinedCtx) {
            new Chart(combinedCtx, {
                type: 'bar',
                data: {
                    labels: {!! json_encode($periodeTanggals) !!},
                    datasets: [{

                            label: 'OMSET PENJUALAN',
                            data: {!! json_encode($charts['omsetPenjualan']) !!},
                            backgroundColor: 'rgba(255, 99, 132, 0.5)',
                            borderWidth: 1
                        },
                        {
                            label: 'SERVICE',
                            data: {!! json_encode($charts['service']) !!},
                            backgroundColor: 'rgba(54, 162, 235, 0.5)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true

                        }
                    },
                    maintainAspectRatio: false,
                }
            });
        }
    </script>

    {{-- chart Perjam --}}
    @foreach ($charts_perjam as $key => $v)
        <script>
            var ctx_{{ $key }} = document.getElementById('{{ $key }}Chart');
            if (ctx_{{ $key }}) {
                new Chart(ctx_{{ $key }}, {
                    type: 'bar',
                    data: {
                        labels: {!! json_encode($jam) !!},
                        datasets: [{
                            label: ' # {{ strtoupper(implode(' ', preg_split('/(?=[A-Z])/', $key))) }}',
                            data: {!! json_encode($v) !!},
                            borderWidth: 1,
                            backgroundColor: 'rgba(255, 99, 132, 0.5)',
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        maintainAspectRatio: false,
                    }
                });
            }
        </script>
    @endforeach
    {{-- chart Perjam --}}
    <script>
        var combinedCtx = document.getElementById('omsetKotorPerjamChart');
        if (combinedCtx) {
            new Chart(combinedCtx, {
                type: 'bar',
                data: {
                    labels: {!! json_encode($jam) !!},
                    datasets: [{

                            label: 'OMSET PENJUALAN',
                            data: {!! json_encode($charts_perjam['penjualanPerjam']) !!},
                            backgroundColor: 'rgba(255, 99, 132, 0.5)',
                            borderWidth: 1
                        },
                        {
                            label: 'SERVICE',
                            data: {!! json_encode($charts_perjam['servicePerjam']) !!},
                            backgroundColor: 'rgba(54, 162, 235, 0.5)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    maintainAspectRatio: false,
                }
            });
        }
    </script>
    <script>
        var tipeChart = document.getElementById('tipe_chart');
        var chartHari = document.getElementById('hari');
        var chartJam = document.getElementById('jam');
        document.addEventListener('DOMContentLoaded', function() {


            ubahTipe(tipeChart.value);
            tipeChart.addEventListener('change', function() {
                ubahTipe(tipeChart.value);

            });

        });

        function ubahTipe(tipe) {
            if (tipe == 1) {
                chartJam.style.display = 'block';
                chartHari.style.display = 'none';
            } else {
                chartJam.style.display = 'none';
                chartHari.style.display = 'block';
            }
        }
    </script>

@endpush

@section('content')
    <style>
        #jam {
            display: none;
        }
    </style>
    <div class="container-fluid">
        <div class="block-header">
            <h2>DASHBOARD</h2>
            @if (str_contains(request()->getHost(), "fixmate"))
            <div id="countdown" data-countdown="{{ $countdown[0]->countdown }}"></div>
            @endif

        </div>
        @if (\Helper::hakAkses('dashboard_karyawan', 'view'))
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                <div class="card">
                    <div class="header">
                        <h3 class="font-bold">Transaksi</h3>
                        <form action="" id="filter-form">

                            <div class="row">
                                <div class="col-lg-5 col-md-5">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">date_range</i>
                                        </span>
                                        <div class="form-line">

                                            <input type="text" class="form-control" name="periode" id="daterange"
                                                value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif">
                                        </div>
                                    </div>
                                </div>


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


                    <div class="body">
                        <div class="row clearfix">
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-teal">
                                        <i class="material-icons">build</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Service</div>
                                        <div class="number">

                                            {{ $t_service }}

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-blue">
                                        <i class="material-icons">attach_money</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Penjualan</div>
                                        <div class="number">
                                            {{ $t_penjualan }}
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-green">
                                        <i class="material-icons">shopping_cart</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Pembelian</div>
                                        <div class="number">
                                            {{ $t_pembelian }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-cyan">
                                        <i class="material-icons">money_off</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Retur Penjualan</div>
                                        <div class="number">
                                            {{ $t_retur_penjualan }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-grey">
                                        <i class="material-icons">remove_shopping_cart</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Retur Pembelian</div>
                                        <div class="number">
                                            {{ $t_retur_pembelian }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-orange">
                                        <i class="material-icons">monetization_on</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Pembayaran Piutang</div>
                                        <div class="number">
                                            {{ $t_pembayaran_piutang }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-red">
                                        <i class="material-icons">business_center</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Pembayaran Hutang</div>
                                        <div class="number">
                                            {{ $t_pembayaran_hutang }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-lime">
                                        <i class="material-icons">store_mall_directory</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Transaksi Gudang</div>
                                        <div class="number">
                                            {{ $t_transaksi_gudang }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>


            </div>
        @endif


        @if (\Helper::hakAkses('dashboard_admin', 'view'))

            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="header">
                            <form action="" id="filter-form">

                                <div class="row">
                                    <div class="col-lg-3 col-md-3">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">date_range</i>
                                            </span>
                                            <div class="form-line">

                                                <input type="text" class="form-control" name="periode" id="daterange"
                                                    value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-3">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">card_membership</i>
                                            </span>
                                            <div class="form-line focused">
                                                <select name="pengguna_id" class="form-control">
                                                    <option value="">Umum</option>
                                                    @foreach ($pengguna as $p)
                                                        <option value="{{ $p->id }}"
                                                            @if (isset($request->pengguna_id)) @if ($request->pengguna_id == $p->id) selected @endif
                                                            @endif>
                                                            {{ $p->nama_pengguna }} </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-3">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">card_membership</i>
                                            </span>
                                            <div class="form-line focused">
                                                <select id="tipe_chart" class="form-control">
                                                    <option value="0">Hari</option>
                                                    <option value="1">Jam</option>
                                                    

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

                                    <div class="col-lg-2 col-md-3">
                                        <div class="input-group">
                                            <button class="btn btn-primary">Cari</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <ul class="header-dropdown m-r--5">
                                <li class="dropdown">
                                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"
                                        role="button" aria-haspopup="true" aria-expanded="false">
                                        <i class="material-icons">more_vert</i>
                                    </a>
                                    <ul class="dropdown-menu pull-right">
                                        <li><a href="javascript:void(0);">Action</a></li>
                                        <li><a href="javascript:void(0);">Another action</a></li>
                                        <li><a href="javascript:void(0);">Something else here</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="body">
                            <!-- Nav tabs -->
                            <div id="hari">
                                <ul class="nav nav-tabs tab-nav-right" style="display: flex;" role="tablist">
                                    <li role="presentation"class="active" style="flex: 1;">
                                        <a href="#omsetKotor" data-toggle="tab">
                                            <p>Omset Kotor</p>
                                            <h5 class="simplified" data-value="{{ number_format($omsetKotor) }}"></h5>
                                        </a>
                                    </li>
                                    <li role="presentation" style="flex: 1;">
                                        <a href="#penjualan-kotor" data-toggle="tab">
                                            <p>Omset Penjualan</p>
                                            <h5 class="simplified" data-value="{{ number_format($omsetPenjualan) }}">
                                            </h5>
                                        </a>
                                    </li>
                                    <li role="presentation" style="flex: 1;">
                                        <a href="#service" data-toggle="tab">
                                            <p>Omset Service</p>
                                            <h5 class="simplified" data-value="{{ number_format($service) }}"></h5>
                                        </a>
                                    </li>

                                </ul>

                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane fade in active" id="omsetKotor">
                                        <b>Omset Kotor</b>
                                        <div style="height: 300px;">
                                            <canvas id="omsetKotorChart"></canvas>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane fade in " id="penjualan-kotor">
                                        <b>Omset Penjualan</b>
                                        <div style="height: 300px;">
                                            <canvas id="omsetPenjualanChart"></canvas>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane fade" id="service">
                                        <b>Omset Service</b>
                                        <div style="height: 300px;">
                                            <canvas id="serviceChart"></canvas>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div id="jam">
                                <ul class="nav nav-tabs tab-nav-right" style="display: flex;" role="tablist">
                                    <li role="presentation"class="active" style="flex: 1;">
                                        <a href="#omsetKotorPerjam" data-toggle="tab">
                                            <p>Omset Kotor </p>
                                            <h5 class="simplified" data-value="{{ number_format($omsetKotor) }}"></h5>
                                        </a>
                                    </li>
                                    <li role="presentation" style="flex: 1;">
                                        <a href="#penjualanPerjam" data-toggle="tab">
                                            <p>Omset Penjualan</p>
                                            <h5 class="simplified" data-value="{{ number_format($omsetPenjualan) }}">
                                            </h5>
                                        </a>
                                    </li>
                                    <li role="presentation" style="flex: 1;">
                                        <a href="#servicePerjam" data-toggle="tab">
                                            <p>Omset Service</p>
                                            <h5 class="simplified" data-value="{{ number_format($service) }}"></h5>
                                        </a>
                                    </li>

                                </ul>

                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane fade in active" id="omsetKotorPerjam">
                                        <b>Omset Kotor</b>
                                        <div style="height: 300px;">
                                            <canvas id="omsetKotorPerjamChart"></canvas>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane fade in " id="penjualanPerjam">
                                        <b>Omset Penjualan</b>
                                        <div style="height: 300px;">
                                            <canvas id="penjualanPerjamChart"></canvas>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane fade" id="servicePerjam">
                                        <b>Omset Service</b>
                                        <div style="height: 300px;">
                                            <canvas id="servicePerjamChart"></canvas>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="header">
                            <h3 class="font-bold">Transaksi</h3>
                        </div>


                        <div class="body">
                            <div class="row clearfix">
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-teal">
                                            <i class="material-icons">build</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Service</div>
                                            <div class="number">

                                                {{ $t_service }}

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-blue">
                                            <i class="material-icons">attach_money</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Penjualan</div>
                                            <div class="number">
                                                {{ $t_penjualan }}
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-green">
                                            <i class="material-icons">shopping_cart</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Pembelian</div>
                                            <div class="number">
                                                {{ $t_pembelian }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-cyan">
                                            <i class="material-icons">money_off</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Retur Penjualan</div>
                                            <div class="number">
                                                {{ $t_retur_penjualan }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-grey">
                                            <i class="material-icons">remove_shopping_cart</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Retur Pembelian</div>
                                            <div class="number">
                                                {{ $t_retur_pembelian }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-orange">
                                            <i class="material-icons">monetization_on</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Pembayaran Piutang</div>
                                            <div class="number">
                                                {{ $t_pembayaran_piutang }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-red">
                                            <i class="material-icons">business_center</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Pembayaran Hutang</div>
                                            <div class="number">
                                                {{ $t_pembayaran_hutang }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-lime">
                                            <i class="material-icons">store_mall_directory</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Transaksi Gudang</div>
                                            <div class="number">
                                                {{ $t_transaksi_gudang }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>

                    <div class="card col-lg-12 col-md-12 col-sm-12 ">

                        <div class="row" style="padding-bottom:0px!important;padding-top:30px!important">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="info-box-4 hover-expand-effect">
                                    <div class="icon">
                                        <i class="material-icons col-teal">account_balance_wallet</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Total Omset Sistem</div>
                                        <div class="number">Rp. {{ number_format($omsetKotor) }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="info-box-4 hover-expand-effect">
                                    <div class="icon">
                                        <i class="material-icons col-green">credit_card</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Total Omset Kasir (Total omset kasir + Dp selesai)</div>
                                        <div class="number">Rp. {{ number_format($t_laporan_kasir) }}</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="info-box-4 hover-expand-effect">
                                    <div class="icon">
                                        <i class="material-icons col-deep-orange">book</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Total Uang Muka Sistem</div>
                                        <div class="number">Rp.
                                            {{ number_format($dp_total_penjualan + $dp_total_service) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="info-box-4 hover-expand-effect">
                                    <div class="icon">
                                        <i class="material-icons col-orange">event_note</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Total Uang Muka Kasir</div>
                                        <div class="number">Rp. {{ number_format($t_laporan_uang_muka) }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>


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

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

        <div class="card">
            <div class="header">
                <h3 class="font-bold">Transaksi Service </h3>


            </div>


            <div class="body">
                <div class="row clearfix">
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box hover-zoom-effect">
                            <div class="icon bg-blue">
                                <i class="material-icons">build</i>
                            </div>
                            <div class="content">
                                <div class="text">Service On Progress</div>
                                <div class="number">

                                    {{ $t_service_proses }}

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

                </div>
                <h4>Status Perbaikan</h4>
                <div class="row clearfix">
                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="info-box-2 bg-deep-orange hover-zoom-effect">
                            <div class="icon">
                                <i class="material-icons">av_timer</i>
                            </div>
                            <div class="content">
                                <div class="text">Pending</div>
                                <div class="number">
                                    @if (isset($pending))
                                        {{ $pending }}
                                    @else
                                        0
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="info-box-2 bg-indigo hover-zoom-effect">
                            <div class="icon">
                                <i class="material-icons">format_indent_increase</i>
                            </div>
                            <div class="content">
                                <div class="text">Indent</div>
                                <div class="number">

                                    @if (isset($indent))
                                        {{ $indent }}
                                    @else
                                        0
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="info-box-2 bg-teal hover-zoom-effect">
                            <div class="icon">
                                <i class="material-icons">playlist_add_check</i>
                            </div>
                            <div class="content">
                                <div class="text">Pengecekan</div>
                                <div class="number">
                                    @if (isset($pengecekan))
                                        {{ $pengecekan }}
                                    @else
                                        0
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="info-box-2 bg-amber hover-zoom-effect">
                            <div class="icon">
                                <i class="material-icons">check_box</i>
                            </div>
                            <div class="content">
                                <div class="text">Konfirmasi</div>
                                <div class="number">
                                    @if (isset($konfirmasi))
                                        {{ $konfirmasi }}
                                    @else
                                        0
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="info-box-2 bg-deep-purple hover-zoom-effect">
                            <div class="icon">
                                <i class="material-icons">phonelink_ring</i>
                            </div>
                            <div class="content">
                                <div class="text">HP Normal</div>
                                <div class="number">
                                    @if (isset($hp_normal))
                                        {{ $hp_normal }}
                                    @else
                                        0
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="info-box-2 bg-pink hover-zoom-effect">
                            <div class="icon">
                                <i class="material-icons">query_builder</i>
                            </div>
                            <div class="content">
                                <div class="text">Pending Perbaikan</div>
                                <div class="number">
                                    @if (isset($pending_perbaikan))
                                        {{ $pending_perbaikan }}
                                    @else
                                        0
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="info-box-2 bg-blue hover-zoom-effect">
                            <div class="icon">
                                <i class="material-icons">build</i>
                            </div>
                            <div class="content">
                                <div class="text">Proses Perbaikan</div>
                                <div class="number">
                                    @if (isset($proses_perbaikan))
                                        {{ $proses_perbaikan }}
                                    @else
                                        0
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="info-box-2 bg-green hover-zoom-effect">
                            <div class="icon">
                                <i class="material-icons">done</i>
                            </div>
                            <div class="content">
                                <div class="text">Selesai Perbaikan</div>
                                <div class="number">
                                    @if (isset($selesai))
                                        {{ $selesai }}
                                    @else
                                        0
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="info-box-2 bg-red hover-zoom-effect ">
                            <div class="icon">
                                <i class="material-icons">close</i>
                            </div>
                            <div class="content">
                                <div class="text">Batal</div>
                                <div class="number">
                                    @if (isset($batal))
                                        {{ $batal }}
                                    @else
                                        0
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="info-box-2 bg-grey hover-zoom-effect">
                            <div class="icon">
                                <i class="material-icons">bug_report</i>
                            </div>
                            <div class="content">
                                <div class="text">Tidak Bisa Diperbaiki</div>
                                <div class="number">
                                    @if (isset($tidak_bisa_diperbaiki))
                                        {{ $tidak_bisa_diperbaiki }}
                                    @else
                                        0
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="info-box-2 bg-brown hover-zoom-effect">
                            <div class="icon">
                                <i class="material-icons">highlight_off</i>
                            </div>
                            <div class="content">
                                <div class="text">Gagal Perbaikan</div>
                                <div class="number">
                                    @if (isset($gagal_perbaikan))
                                        {{ $gagal_perbaikan }}
                                    @else
                                        0
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="info-box-2 bg-blue-grey  hover-zoom-effect">
                            <div class="icon">
                                <i class="material-icons">money_off</i>
                            </div>
                            <div class="content">
                                <div class="text">Tidak Deal</div>
                                <div class="number">
                                    @if (isset($tidak_deal))
                                        {{ $tidak_deal }}
                                    @else
                                        0
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>

                </div>



            </div>

        </div>


        <div class="card col-lg-12 col-md-12 col-sm-12">
            <div class="header">
                <h3 class="font-bold">Item Terjual</h3>
            </div>
            <div class="body">
                <div class="table-responsive" style="   ">
                    <table id="table_barang"
                        class=" table-responsive table table-bordered table-striped table-hover ">
                        <thead>
                            <tr>
                                <th>Nama Barang</th>
                                <th>Kategori</th>
                                <th>Transaksi</th>
                                <th>Terjual</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>



    </div>


    </div>
    @push('scripts')
        {{-- data Table --}}
        <script src="{{ url('material') }}/plugins/jquery-datatable/jquery.dataTables.js"></script>
        <script src="{{ url('material') }}/js/pages/tables/jquery-datatable.js"></script>
        <script src="{{ url('material') }}/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>

        <!-- Jquery DataTable Plugin Js -->


        {{-- data Table --}}
        @if (str_contains(request()->getHost(), "fixmate"))
        <script>
              let element = document.getElementById("countdown");
            var countDownDate = new Date(element.dataset.countdown).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  element.innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s Fixmate Free";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
        </script>
        @endif

        <script>
          
            document.addEventListener("DOMContentLoaded", function() {
                var table = $('#table_barang').DataTable({
                    "order": [[ 3, 'desc' ]]
                });
                // var table = document.querySelector('#table_barang');
                var periode = {!! json_encode($periode) !!};
                var periodeString = periode.join(' - ');

                var encodedPeriode = encodeURIComponent(periodeString);

                function loadData() {
                    $.ajax({
                        url: '/itemterjual?periode=' + encodedPeriode,
                        type: 'GET',
                        success: function(data) {
                            table.destroy();
                            var tbody = $('#table_barang tbody');
                            tbody.empty();
                            var items = Object.values(data);
                            items.forEach(function(item) {
                                var row = '<tr>' +
                                    '<td>' + item.nama_barang + '</td>' +
                                    '<td>' + item.kategori + '</td>' +
                                    '<td>' + item.transaksi + '</td>' +
                                    '<td>' + item.total_qty + '</td>' +
                                    '</tr>';
                                tbody.append(row);
                            });

                            table = $('#table_barang').DataTable({
                                "order": [[ 3, 'desc' ]]
                            });

                            


                        },
                        error: function(xhr, status, error) {
                            console.error('Error:', error);
                        }
                    });
                }

                loadData();

                // var observer = new IntersectionObserver(function(entries, observer) {
                //     entries.forEach(function(entry) {
                //         if (entry.isIntersecting) {
                //             loadData();
                //         }
                //     });
                // }, {
                //     threshold: 0.1
                // });
                // observer.observe(table);
            });
        </script>
    @endpush
@endsection