@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 -->
    <style>
        .truncate-satu-baris {
            width: 80%;
            /* Tentukan lebar maksimal elemen */
            white-space: nowrap;
            /* Mencegah teks pindah ke baris baru */
            overflow: hidden;
            /* Sembunyikan teks yang meluber */
            text-overflow: ellipsis;

        }

        .list-group .list-group-item {
            display: flex;
            justify-content: space-between;
        }

        .chart-container {
            display: flex;
            justify-content: center;
            margin: 60px 0;
            position: relative;
        }

        svg {
            max-width: 100%;
            height: auto;
        }

        .funnel-segment {
            fill: #9ca3af;
            opacity: 0.9;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .funnel-segment:hover {
            opacity: 1;
            filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.15));
        }

        .tooltip {
            position: absolute;
            background-color: #1f2937;
            color: white;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 13px;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 1000;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .tooltip.show {
            opacity: 1;
            visibility: visible;
        }

        .tooltip-arrow {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: #1f2937;
            transform: rotate(45deg);
        }
    </style>
@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();
        });


        const funnelData = [{
            label: "Kontak",
            percentage: {{ $alur1 }},
            status: "Waspada",
            missing: 18
        },
        {
            label: "Datang",
            percentage: {{ $alur2 }},
            status: "OK",
            missing: 3
        },
        {
            label: "Setuju",
            percentage: 93,
            status: {{ $alur3 }},
            missing: 1
        }
        ];

        const conversionTotal = 39;
        const conversionStatus = "Waspada";
        // ===== AKHIR INISIASI DATA =====

        // Generate funnel chart
        function generateFunnelChart() {
            const svg = document.getElementById('funnel');
            const width = 600;
            const height = 350;
            const segmentHeight = height / funnelData.length;
            const maxWidth = 440;
            const minWidth = 100;

            funnelData.forEach((data, index) => {
                const currentWidth = maxWidth - (index * (maxWidth - minWidth) / funnelData.length);
                const nextWidth = maxWidth - ((index + 1) * (maxWidth - minWidth) / funnelData.length);

                const x1 = (width - currentWidth) / 2;
                const x2 = (width + currentWidth) / 2;
                const x3 = (width + nextWidth) / 2;
                const x4 = (width - nextWidth) / 2;

                const y1 = index * segmentHeight + 20;
                const y2 = (index + 1) * segmentHeight + 20;

                // Segment polygon
                const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
                polygon.setAttribute('class', 'funnel-segment');
                polygon.setAttribute('points', `${x1},${y1} ${x2},${y1} ${x3},${y2} ${x4},${y2}`);
                polygon.setAttribute('data-index', index);

                // Add tooltip events
                polygon.addEventListener('mouseenter', (e) => showTooltip(e, data, polygon));
                polygon.addEventListener('mousemove', (e) => moveTooltip(e));
                polygon.addEventListener('mouseleave', hideTooltip);

                svg.appendChild(polygon);

                // Border polyline
                const polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
                polyline.setAttribute('points',
                    `${x1},${y1} ${x2},${y1} ${x3},${y2} ${x4},${y2} ${x1},${y1}`);
                polyline.setAttribute('stroke', 'white');
                polyline.setAttribute('stroke-width', '2');
                polyline.setAttribute('fill', 'none');
                svg.appendChild(polyline);
            });
        }

        // Show tooltip
        function showTooltip(e, data, element) {
            const tooltip = document.getElementById('tooltip');
            const badgeClass = data.status === 'OK' ? '✓' : '⚠';
            tooltip.innerHTML = `
                                <strong>${data.label}</strong><br>
                                Jumlah: ${data.percentage}<br>
                            `;
            tooltip.classList.add('show');
            moveTooltip(e);
        }

        // Move tooltip
        function moveTooltip(e) {
            const tooltip = document.getElementById('tooltip');
            const chartContainer = document.querySelector('.chart-container');
            const rect = chartContainer.getBoundingClientRect();

            tooltip.style.left = (e.clientX - rect.left + 15) + 'px';
            tooltip.style.top = (e.clientY - rect.top - 60) + 'px';
        }

        // Hide tooltip
        function hideTooltip() {
            const tooltip = document.getElementById('tooltip');
            tooltip.classList.remove('show');
        }



        // Initialize
        function init() {
            generateFunnelChart();
        }

        // Run on load
        init();
    </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>
        @if (\Helper::hakAkses('dashboard_karyawan', 'view') && env('TRANSAKSI_PENJUALAN', true))
            <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">
                        <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>
                        @if (env('TRANSAKSI_PENJUALAN', true))
                            <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))
                            <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))
                            <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))
                            <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))
                            <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))
                            <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>

                </div>
            </div>
        @endif


        @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');
            $part_penting_habis = \Helper::hakAkses('tindakan_cepat', 'part_penting_habis');
        @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" style="display:flex; justify-content: space-between;">
                                                <span>
                                                    Menunggu Persetujuan >24 jam
                                                </span>
                                                <small>({{ $totalTindakanCepat1 }})</small>

                                            </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" style="display:flex; justify-content: space-between;">
                                                <span>
                                                    Sudah Jadi >48 jam (belum diambil)
                                                </span>
                                                <small>({{ $totalTindakanCepat2 }})</small>

                                            </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" style="display:flex; justify-content: space-between;">
                                                <span>
                                                    Janji Datang Terlambat
                                                </span>
                                                <small>({{ $totalTindakanCepat3 }})</small>

                                            </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" style="display:flex; justify-content: space-between;">
                                                <span>
                                                    Part Penting Habis (Hari ini)
                                                </span>
                                                <small>({{ $totalTindakanCepat4 }})</small>

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

        @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>

                                    @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>

                {{--
                <div class="col-md-6">
                    <div class="card">
                        <div class="header">
                            <h3 class="font-bold">Alur</h3>
                        </div>
                        <div class="body">

                            <div class="chart-container">
                                <svg id="funnel" width="600" height="350" viewBox="0 0 600 350">
                                </svg>
                                <div class="tooltip" id="tooltip"></div>
                            </div>
                        </div>
                        <div class="footer">
                            <div style="display: flex; justify-content: space-between;width:100%;padding:12px;">
                                <span>Kontak : {{ $alur1 }}</span>
                                <span>Datang : {{ $alur2 }}</span>
                                <span>Setuju : {{ $alur3 }}</span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="header">
                            <h3 class="font-bold">Statistik</h3>
                        </div>
                        <div class="body">
                            <div class="row clearfix">
                                <div class="col-lg-6 col-md-6">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-deep-orange">
                                            <i class="material-icons">access_time</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Belum Diambil (>48 jam) @if($jumlahBelumDiambil > 10) <small
                                                    class="badge bg-red">Waspada</small> @endif</div>
                                            <div class="number">{{ $jumlahBelumDiambil }}</div>

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

                                <div class="col-lg-6 col-md-6">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-red">
                                            <i class="material-icons">close</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Batal @if($persentaseBatal > 10) <small
                                                    class="badge bg-red">Perbaiki</small> @endif</div>
                                            <div class="number">{{ $persentaseBatal }}%</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-green">
                                            <i class="material-icons">check_circle</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Tepat Waktu @if($persentaseTepatWaktu >= 80) <small
                                                    class="badge bg-green">Baik</small> @else <small
                                                    class="badge bg-red">Waspada</small> @endif</div>
                                            <div class="number">{{ $persentaseTepatWaktu }}%</div>

                                        </div>

                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-amber">
                                            <i class="material-icons">money</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Yang Bayar DP @if($persentaseBayarDP >= 50) <small
                                                    class="badge bg-green">Baik</small> @else <small
                                                    class="badge bg-red">Waspada</small> @endif</div>
                                            <div class="number">{{ $persentaseBayarDP }}%</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-purple">
                                            <i class="material-icons">build</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Pekerjaan Aktif</div>
                                            <div class="number">{{ $jumlahDiperbaiki }}</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-blue">
                                            <i class="material-icons">trending_up</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Beban/Teknisi @if($bebanPerTeknisi <= 2) <small
                                                    class="badge bg-green">Baik</small> @else <small
                                                        class="badge bg-red">Waspada</small> @endif</div>
                                            <div class="number">{{ $bebanPerTeknisi }}</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-teal">
                                            <i class="material-icons">local_shipping</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Vendor Tepat Waktu @if($persentaseVendorTepat >= 75) <small
                                                    class="badge bg-green">Baik</small> @else <small
                                                    class="badge bg-red">Waspada</small> @endif</div>
                                            <div class="number">{{ $persentaseVendorTepat }}%</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6">
                                    <div class="info-box hover-zoom-effect">
                                        <div class="icon bg-indigo">
                                            <i class="material-icons">done_all</i>
                                        </div>
                                        <div class="content">
                                            <div class="text">Service Lunas @if($persentaseLunas >= 80) <small
                                                    class="badge bg-green">Baik</small> @else <small
                                                    class="badge bg-red">Waspada</small> @endif</div>
                                            <div class="number">{{ $persentaseLunas }}%</div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
                --}}
                @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">
                                    <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</div>
                                                <div class="number">Rp. {{ number_format($t_laporan_kasir) }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <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>
                                    <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>
                                    <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>

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





                @if (env('TRANSAKSI_PENJUALAN', true))
                    <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">Servis</div>
                                                <div class="number">

                                                    {{ $t_service }}

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @if (env('TRANSAKSI_PENJUALAN', true))
                                        <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))
                                        <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))
                                        <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))
                                        <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))
                                        <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))
                                        <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>
                    </div>
                @endif

            </div>
        @endif


        <div class="row">
            <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">
                            <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>

                        </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>
        </div>

        @if (env('TRANSAKSI_PENJUALAN', true))
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="card">
                        <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>
        @endif


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