@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,
                    },
                    responsive: true,
                });
            }
        </script>
    @endforeach
    {{-- chart Pertanggal --}}
    <script>
        const TRANSAKSI_PENJUALAN = {{ env('TRANSAKSI_PENJUALAN', true) ? 'true' : 'false' }};
        var combinedCtx = document.getElementById('omsetKotorChart');
        if (combinedCtx) {

            var datasets = [];
            if (TRANSAKSI_PENJUALAN) {
                datasets.push({

                    label: 'OMSET PENJUALAN',
                    data: {!! json_encode($charts['omsetPenjualan']) !!},
                    backgroundColor: 'rgba(255, 99, 132, 0.5)',
                    borderWidth: 1
                });
            }

            datasets.push({
                label: 'SERVIS',
                data: {!! json_encode($charts['service']) !!},
                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                borderWidth: 1
            });
            new Chart(combinedCtx, {
                type: 'bar',
                data: {
                    labels: {!! json_encode($periodeTanggals) !!},
                    datasets: datasets
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true

                        }
                    },
                    maintainAspectRatio: false,
                },
                responsive: true,
            });
        }
    </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 ?? env('COUNTDOWN') }}"></div>
            @endif

        </div>

        @php
            $menunggu_persetujuan = \Helper::hakAkses('tindakan_cepat', 'menunggu_persetujuan');
            $sudah_jadi = \Helper::hakAkses('tindakan_cepat', 'sudah_jadi');
            $janji_datang_terlambat = \Helper::hakAkses('tindakan_cepat', 'janji_datang_terlambat') && env('MANAJEMEN_PROSPEK');
            $part_penting_habis = \Helper::hakAkses('tindakan_cepat', 'part_penting_habis') && env('MANAJEMEN_STOK');
        @endphp


        @if ($menunggu_persetujuan || $sudah_jadi || $janji_datang_terlambat || $part_penting_habis)
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="header">
                            <h2>
                                Tindakan Cepat Hari Ini
                            </h2>
                        </div>
                        <div class="body">
                            <div class="row">
                                @if ($menunggu_persetujuan)
                                    <div class="col-md-3">
                                        <div class="card">
                                            <div class="header bg-orange">
                                                <span>
                                                    Menunggu Persetujuan >24 jam
                                                </span>

                                            </div>
                                            <div class="body" style="min-height: 300px;">
                                                <ul class="list-group">
                                                    @foreach ($tindakanCepat1 as $item)
                                                        <li class="list-group-item">
                                                            <span class="truncate-satu-baris">{{ $item->no_service }} -
                                                                {{ $item->merk }} {{ $item->tipe }}</span>
                                                            <span class="badge bg-gray">{{ $item->waktu_lalu }}</span>
                                                        </li>
                                                    @endforeach

                                                </ul>
                                                <a href="{{ url('service?status=konfirmasi&status_transaksi=proses') }}"
                                                    class="btn btn-block btn-primary">
                                                    Lihat
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if ($sudah_jadi)
                                    <div class="col-md-3">
                                        <div class="card">
                                            <div class="header bg-red">
                                                <span>
                                                    Sudah Jadi >48 jam (belum diambil)
                                                </span>

                                            </div>
                                            <div class="body" style="min-height: 300px;">
                                                <ul class="list-group">
                                                    @foreach ($tindakanCepat2 as $item)
                                                        <li class="list-group-item">
                                                            <span class="truncate-satu-baris">{{ $item->no_service }} -
                                                                {{ $item->merk }} {{ $item->tipe }}</span>
                                                            <span
                                                                class="badge bg-gray">{{ $item->selesai_waktu_lalu }}</span>
                                                        </li>
                                                    @endforeach

                                                </ul>
                                                <a href="{{ url('service?status=selesai&status_transaksi=proses') }}"
                                                    class="btn btn-block btn-primary">
                                                    Lihat
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if ($janji_datang_terlambat)
                                    <div class="col-md-3">
                                        <div class="card">
                                            <div class="header bg-red">
                                                <span>
                                                    Janji Datang Terlambat
                                                </span>

                                            </div>
                                            <div class="body" style="min-height: 300px;">
                                                <ul class="list-group">
                                                    @foreach ($tindakanCepat3 as $item)
                                                        <li class="list-group-item">
                                                            <span class="truncate-satu-baris">{{ $item->no_konsultasi }} -
                                                                {{ $item->merk_hp }} {{ $item->tipe_hp }} </span>
                                                            <span class="badge bg-gray">{{ $item->waktu_lalu }}</span>
                                                        </li>
                                                    @endforeach

                                                </ul>
                                                <a href="{{ url('konsultasi/index?status=Booking Service') }}"
                                                    class="btn btn-block btn-primary">
                                                    Lihat
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if ($part_penting_habis)
                                    <div class="col-md-3">
                                        <div class="card">
                                            <div class="header bg-red">
                                                <span>
                                                    Part Penting Habis (Hari ini)
                                                </span>

                                            </div>
                                            <div class="body" style="min-height: 300px;">
                                                <ul class="list-group">
                                                    @foreach ($tindakanCepat4 as $item)
                                                        <li class="list-group-item">
                                                            <span class="truncate-satu-baris">{{ $item->item->nama_item }}
                                                            </span>
                                                            <span class="badge bg-gray">{{ $item->stok ?? 0 }}</span>
                                                        </li>
                                                    @endforeach

                                                </ul>
                                                <a href="{{ url('item?habis=true') }}" class="btn btn-block btn-primary">
                                                    Lihat
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif



        <div class="row">
            @if(\Helper::hakAkses('grafik','omset'))
                <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>

                                    @if (env("TRANSAKSI_PENJUALAN",true))
                                        <div class="col-lg-3 col-md-3">
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="material-icons">people</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 name="jenis" class="form-control" id="jenis">
                                                        <option value=""
                                                            @if (old('jenis', request()->jenis) == '') selected @endif>
                                                            Semua</option>
                                                        <option value="service"
                                                            @if (old('jenis', request()->jenis) == 'service') selected @endif>Servis</option>
                                                        <option value="penjualan"
                                                            @if (old('jenis', request()->jenis) == 'penjualan') selected @endif>Penjualan
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    
                                    
                                    <div class="col-lg-3 col-md-3">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">timeline</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>
                                <div class="row">
                                    <div class="col-lg-2 ">
                                        <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">
                                    @if (request()->jenis == 'semua' || request()->jenis == '')
                                        <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>
                                    @endif
                                    @if (request()->jenis != 'service' && env('TRANSAKSI_PENJUALAN', true))
                                        <li role="presentation" @if (request()->jenis == 'penjualan') class="active" @endif
                                            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>
                                    @endif
                                    @if (request()->jenis != 'penjualan' && env('TRANSAKSI_PENJUALAN', true))
                                        <li role="presentation" @if (request()->jenis == 'service') class="active" @endif
                                            style="flex: 1;">
                                            <a href="#service" data-toggle="tab">
                                                <p>Omset Servis</p>
                                                <h5 class="simplified" data-value="{{ number_format($service) }}"></h5>
                                            </a>
                                        </li>
                                    @endif
                                </ul>

                                <!-- Tab panes -->
                                <div class="tab-content">
                                    @if (request()->jenis == 'semua' || request()->jenis == '')
                                        <div role="tabpanel" class="tab-pane fade in active" id="omsetKotor">
                                            <b>Omset Kotor</b>
                                            <div style="overflow: auto;">
                                                <div style="height: 300px;min-width: 1200px; width: 100%;">
                                                    <canvas id="omsetKotorChart"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    @if (request()->jenis != 'servie' && env('TRANSAKSI_PENJUALAN', true))
                                        <div role="tabpanel"
                                            class="tab-pane fade in @if (request()->jenis == 'penjualan') active @endif"
                                            id="penjualan-kotor">
                                            <b>Omset Penjualan</b>
                                            <div style="overflow: auto;">
                                                <div style="height: 300px;min-width: 1200px; width: 100%;">
                                                    <canvas id="omsetPenjualanChart"></canvas>
                                                </div>
                                            </div>

                                        </div>

                                    @endif
                                    @if (request()->jenis != 'penjualan' && env('TRANSAKSI_PENJUALAN', true))
                                        <div role="tabpanel"
                                            class="tab-pane fade in @if (request()->jenis == 'service') active @endif"
                                            id="service">
                                            <b>Omset Servis</b>
                                            <div style="overflow: auto;">
                                                <div style="height: 300px;min-width: 1200px; width: 100%;">
                                                    <canvas id="serviceChart"></canvas>
                                                </div>
                                            </div>

                                        </div>
                                    @endif

                                </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>
                                    @if (env('TRANSAKSI_PENJUALAN', true))
                                        <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 Servis</p>
                                                <h5 class="simplified" data-value="{{ number_format($service) }}"></h5>
                                            </a>
                                        </li>
                                    @endif

                                </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 Servis</b>
                                        <div style="height: 300px;">
                                            <canvas id="servicePerjamChart"></canvas>
                                        </div>
                                    </div>

                                </div>
                            </div>

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

            @if (env('TRANSAKSI_PENJUALAN', true))
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="card  ">
                        <div class="header">
                            <h3>
                                Balance
                            </h3>
                        </div>
                        <div class="body">
                            <div class="row" style="padding-bottom:0px!important;padding-top:30px!important">
                                @if(\Helper::hakAkses('balance','total_omset_sistem'))
                                    <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>
                                @endif

                                @if(\Helper::hakAkses('balance','total_omset_kasir'))
                                    <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</div>
                                                <div class="number">Rp. {{ number_format($t_laporan_kasir) }}</div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                @if(\Helper::hakAkses('balance','total_uang_muka_sistem'))
                                    <div class="col-md-3">
                                        <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
                                                    {{-- <small>({{ number_format($uang_bayar_penjualan + $uang_bayar_service) }} -
                                                    {{number_format($uang_bayar_penjualan_lunas+$uang_bayar_service_lunas)}})
                                                </small> --}}
                                                </div>
                                                {{-- <div class="number">Rp.{{ number_format($dp_total_penjualan + $dp_total_service) }}
                                            </div> --}}
                                                <div class="number">Rp.{{ number_format($dp_total_service) }}</div>

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

                                @if(\Helper::hakAkses('balance','total_piutang'))
                                    <div class="col-md-3">
                                        <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 Piutang
                                                </div>

                                                <div class="number">
                                                    Rp.{{ number_format($lunas_total_service - $dp_total_service) }}</div>

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

                                @if(\Helper::hakAkses('balance','total_uang_muka_kasir'))
                                    <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 - $uang_bayar_service_lunas) }}
                                                </div>
                                            </div>
                                        </div>

                                        {{-- <div class="col-md-12">
                                        <small>Semua : {{ number_format($uang_bayar_penjualan + $uang_bayar_service) }}</small>
                                        <br>
                                        <small>Lunas :
                                            {{number_format($uang_bayar_penjualan_lunas+$uang_bayar_service_lunas)}}</small>
                                    </div> --}}

                                    </div>
                                @endif

                            </div>
                        </div>




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

                @if (env('TRANSAKSI_PENJUALAN', true))
                    <div class="card">
                        <div class="header">
                            <h3 class="font-bold">Transaksi</h3>
                        </div>


                        <div class="body">
                            <div class="row clearfix">
                                @if(\Helper::hakAkses('statistik_transaksi','servis'))
                                    <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">Servis</div>
                                                <div class="number">

                                                    {{ $t_service }}

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if (env('TRANSAKSI_PENJUALAN', true) && \Helper::hakAkses('statistik_transaksi','penjualan'))
                                    <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>
                                @endif
                                @if (env('MANAJEMEN_STOK', true) && \Helper::hakAkses('statistik_transaksi','pembelian'))
                                    <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>
                                @endif
                                @if (env('TRANSAKSI_PENJUALAN', true) && \Helper::hakAkses('statistik_transaksi','retur_penjualan'))
                                    <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>
                                @endif
                                @if (env('MANAJEMEN_STOK', true) && \Helper::hakAkses('statistik_transaksi','retur_pembalian'))
                                    <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>
                                @endif
                                @if (env('TRANSAKSI_PENJUALAN', true) && \Helper::hakAkses('statistik_transaksi','pembayaran_piutang'))
                                    <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>
                                @endif
                                @if (env('MANAJEMEN_STOK', true) && \Helper::hakAkses('statistik_transaksi','pembayaran_hutang'))
                                    <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>
                                @endif
                                {{-- <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>
                @endif

                
            </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 Servis </h3>


            </div>


            <div class="body">
                <div class="row clearfix">
                    @if(\Helper::hakAkses('statistik_transaksi_servis','on_progress'))
                        <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">Servis On Progress</div>
                                    <div class="number">

                                        {{ $t_service_proses }}

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

                </div>
                <h4>Status Perbaikan</h4>
                <div class="row clearfix">

                    @if(\Helper::hakAkses('statistik_transaksi_servis','pending'))
                        <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>
                    @endif

                    @if(\Helper::hakAkses('statistik_transaksi_servis','indent'))
                        <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>
                    @endif

                    @if(\Helper::hakAkses('statistik_transaksi_servis','pengecekan'))
                        <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>
                    @endif

                    @if(\Helper::hakAkses('statistik_transaksi_servis','konfirmasi'))
                        <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>
                    @endif

                    @if(\Helper::hakAkses('statistik_transaksi_servis','hp_normal'))
                        <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>
                    @endif

                    @if(\Helper::hakAkses('statistik_transaksi_servis','pending_perbaikan'))
                        <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>
                    @endif

                    @if(\Helper::hakAkses('statistik_transaksi_servis','proses_perbaikan'))
                        <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>
                    @endif

                    @if(\Helper::hakAkses('statistik_transaksi_servis','selesai_perbaikan'))
                        <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>
                    @endif

                    @if(\Helper::hakAkses('statistik_transaksi_servis','batal'))
                        <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>
                    @endif

                    @if(\Helper::hakAkses('statistik_transaksi_servis','tidak_bisa_diperbaiki'))
                        <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>
                    @endif

                    @if(\Helper::hakAkses('statistik_transaksi_servis','gagal_perbaikan'))
                        <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>
                    @endif

                    @if(\Helper::hakAkses('statistik_transaksi_servis','tidak_deal'))
                        <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>
                    @endif

                </div>



            </div>

        </div>


        @if (env('TRANSAKSI_PENJUALAN', true) && \Helper::hakAkses('item_terjual','tabel'))
            <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>
        @endif

    </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() {

                if ($('#table_barang')) {
                    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 + "&jenis=" + document.getElementById(
                                "jenis").value,
                            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();
                }

            });
        </script>
    @endpush
@endsection