@extends('layouts.app')
@push('styles')
    {{-- date picker style --}}
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    {{-- pattern lock style --}}
    <link rel="stylesheet" href="{{ asset('material/plugins/pattern-lock/dist/patternlock.min.css') }}">
@endpush
@push('scripts')
    {{-- tooltips --}}
    <script type="text/javascript" src="{{ url('material') }}/js/pages/ui/tooltips-popovers.js"></script>

    {{-- date picker js --}}
    <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>

    {{-- morris js --}}
    <script src="{{ url('material') }}/plugins/raphael/raphael.min.js"></script>
    <script src="{{ url('material') }}/plugins/morrisjs/morris.js"></script>


    {{-- Script date picker --}}
    <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(100, '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);

            });
        });
    </script>


    {{-- info box hide --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const select_infobox = document.getElementById('select_infobox');
            const infobox = document.getElementById('infobox');
            const chart = document.getElementById('chart');

            if (select_infobox.value == "0") {
                infobox.style.display = 'none';
            }

            select_infobox.addEventListener("change", function() {
                if (select_infobox.value == "1") {
                    infobox.style.display = 'block';
                    infobox.style.opacity = '1';
                } else {
                    infobox.style.display = 'none';
                    infobox.style.opacity = '0';
                }
            });

            if (window.innerWidth < 768) {
                chart.style.display = 'none';
            } else {
                chart.style.display = 'block';
            }
        });
    </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: 'Service Masuk',
                                data: {!! json_encode($charts_perjam['servicePerjam']) !!},
                                borderWidth: 1,
                                backgroundColor: 'rgba(255, 99, 132, 0.5)',
                            },
                            {
                                label: 'Service Keluar',
                                data: {!! json_encode($charts_perjam['servicePerjam_keluar']) !!},
                                borderWidth: 1,
                                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                            }
                        ]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        maintainAspectRatio: false,
                    }
                });
            }
        </script>
    @endforeach


    {{-- donut chart --}}
    <script>
        Morris.Donut({
            element: donut_chart,
            data: [{
                label: 'Proses',
                value: {!! json_encode($infobox['persentase_proses']) !!}
            }, {
                label: 'Success',
                value: {!! json_encode($infobox['persentase_success']) !!}
            }, {
                label: 'Cancel',
                value: {!! json_encode($infobox['persentase_cancel']) !!}
            }],
            colors: [
                'rgb(33,150,243)',
                'rgb(76,175,80)',
                'rgb(244,67,54)',
            ],
            formatter: function(y) {
                return y + '%'
            }
        });
    </script>

    <script>
        var targetElements = @json($metaPixels->where('target_page', 'service.index')->groupBy('target_element'));


        for (const t in targetElements) {
            if (Object.prototype.hasOwnProperty.call(targetElements, t)) {
                const pixels = targetElements[t];
                $(document).on('click', `${t} a`, function() {
                    event.preventDefault();
                    const nextUrl = $(this).attr('href');
                    for (const p in pixels) {
                        if (Object.prototype.hasOwnProperty.call(pixels, p)) {
                            const pixel = pixels[p];
                            if (pixel.source == "meta") {
                                //fbq('init', `${pixel.pixel_id}`);
                                fbq('trackCustom', `${pixel.pixel_event}`);
                            } else if (pixel.source == "tiktok") {
                                //ttq.load(`${pixel.pixel_id}`);
                                ttq.track(`${pixel.pixel_event}`);
                            } else if (pixel.source == "gtm") {
                                dataLayer.push({
                                    'event': `${pixel.pixel_event}`
                                });
                            }
                        }
                    }
                    console.log(nextUrl);
                    if (nextUrl != "" && nextUrl != "#" && nextUrl != undefined) {
                        setTimeout(function() {
                            window.location.href = nextUrl;
                        }, 200);
                    }
                });

            }
        }
    </script>


<script>
        $(document).on('change', '.pilih-banyak', function () {
            pilihBanyakData();
        });

        function pilihBanyakData() {
            var dataIds = [];
            document.querySelectorAll(".pilih-banyak").forEach(function (checkbox) {
                if (checkbox.checked) {
                    dataIds.push(checkbox.value);
                } else {
                    dataIds.splice(dataIds.indexOf(checkbox.value), 1);
                }
            });

            document.getElementById("pilih-banyak-id").value = dataIds;
        }
    </script>
@endpush
@section('content')

    @php
        $canPesan = \Helper::hakAkses('pesan&followup', 'view');
    @endphp
    <style>
        #infobox {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .label {
            padding-top: 5px !important;
            padding-bottom: 5px !important;
            padding-right: 10px !important;
            padding-left: 10px !important;
            border-radius: 5px !important;
        }

        .flexible-cell {
            padding: 0;
            white-space: nowrap;
            max-width: 100%;
            overflow: auto;
            text-overflow: ellipsis;
        }

        .btn-active {
            background-color: #a88b42;
            color: white !important;
        }

        .btn-inactive {
            background-color: #E9C46A;

            color: white !important;
        }
    </style>

    <div class="container-fluid">
        <div class="block-header">
            <h2>Transaksi Service</h2>
        </div>
        {{-- info box --}}
        <div class="row clearfix">
            <!-- Task Info -->
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="card" style="min-height:100vh">

                    <div class="header">

                        <div>

                            <div class="row">
                                <!-- Donut Chart -->
                                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">

                                    <h4 class="align-center">Transaksi Service</h4>

                                    <div class="">
                                        <div id="donut_chart" class="graph"></div>
                                    </div>
                                </div>
                                <!-- #END# Donut Chart -->
                                {{-- Chart Omset Perjam --}}
                                <div id="chart" class="col-lg-6 col-sm-12 col-xs-12   ">
                                    <h4 class="align-center">Service </h4>
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">


                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div role="tabpanel" class="tab-pane fade in active" id="servicePerjam">
                                                <b>Jam Transaksi</b>
                                                <div style="height: 400px;">
                                                    <canvas id="servicePerjamChart"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- ENDChart Omset Perjam --}}
                                {{-- Status Transaksi --}}
                                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                                    <h4 class="align-center">Status Transaksi</h4>
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="info-box hover-zoom-effect"style="margin:0;">
                                                <div class="icon bg-amber">
                                                    <i class="material-icons">notifications_off</i>
                                                </div>
                                                <div class="content">
                                                    <div class="text">Belum Dihubungi</div>
                                                    <div class="number">
                                                        @if (isset($infobox['belum_dihubungi']))
                                                            {{ $infobox['belum_dihubungi'] }}
                                                        @else
                                                            0
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="info-box hover-zoom-effect" style="margin:0;">
                                                <div class="icon bg-blue">
                                                    <i class="material-icons">loop</i>
                                                </div>
                                                <div class="content">
                                                    <div class="text">Proses</div>
                                                    <div class="number">
                                                        @if (isset($infobox['proses']))
                                                            {{ $infobox['proses'] }}
                                                        @else
                                                            0
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="info-box hover-zoom-effect" style="margin:0;">
                                                <div class="icon bg-green">
                                                    <i class="material-icons">check_circle</i>
                                                </div>
                                                <div class="content">
                                                    <div class="text">Success</div>
                                                    <div class="number">
                                                        @if (isset($infobox['success']))
                                                            {{ $infobox['success'] }}
                                                        @else
                                                            0
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="info-box hover-zoom-effect" style="margin:0;">
                                                <div class="icon bg-red">
                                                    <i class="material-icons">cancel</i>
                                                </div>
                                                <div class="content">
                                                    <div class="text">Cancel</div>
                                                    <div class="number">
                                                        @if (isset($infobox['cancel']))
                                                            {{ $infobox['cancel'] }}
                                                        @else
                                                            0
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="info-box hover-zoom-effect" style="margin:0;"v>
                                                <div class="icon bg-indigo">
                                                    <i class="material-icons">build</i>
                                                </div>
                                                <div class="content">
                                                    <div class="text">Total Transaksi</div>
                                                    <div class="number">
                                                        @if (isset($infobox['total_transaksi']))
                                                            {{ $infobox['total_transaksi'] }}
                                                        @else
                                                            0
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            {{-- Status Transaksi --}}
                            {{-- info box --}}
                            @if (\Helper::hakAkses('dashboard_admin', 'view'))
                                <div class="m-b-20">
                                    <select id="select_infobox">
                                        <option value="0">Sembunyikan Informasi</option>
                                        <option value="1">Tampilkan Informasi </option>
                                    </select>
                                </div>
                                <div id="infobox" class="text-center">
                                    <div id="loading">
                                        <div class="preloader pl-size-xs">
                                            <div class="spinner-layer pl-red-grey">
                                                <div class="circle-clipper left">
                                                    <div class="circle"></div>
                                                </div>
                                                <div class="circle-clipper right">
                                                    <div class="circle"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            @endif


                        </div>



                        @if (\Helper::hakAkses('service', 'create'))
                            <div class="m-b-20">
                                <div class="">
                                    <a href="{{ route('service.create') }}" class="btn btn-primary">Tambahkan Service</a>
                                </div>
                            </div>
                        @endif


                    </div>
                    <div class="body">
                        {{-- filter --}}
                        <form action="" id="filter-form">
                            <div class="row">
                                <div class="col-lg-2 col-md-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">date_range</i>
                                        </span>
                                        <div class="form-line">

                                            <input type="text" class="form-control" name="periode" id="daterange"
                                                value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">assignment</i>
                                        </span>
                                        <div class="form-line">
                                            <select class="form-control" name="status">
                                                <option value="">Pilih Status</option>
                                                <option value="pending" @if ($request->status == 'pending') selected @endif>
                                                    Pending</option>
                                                <option value="indent" @if ($request->status == 'indent') selected @endif>
                                                    Indent</option>
                                                <option value="pengecekan"
                                                    @if ($request->status == 'pengecekan') selected @endif>
                                                    Pengecekan</option>
                                                <option value="hp_bisa_diperbaiki"
                                                    @if ($request->status == 'hp_bisa_diperbaiki') selected @endif>
                                                    HP Bisa Diperbaiki</option>
                                                <option value="hp_normal"
                                                    @if ($request->status == 'hp_normal') selected @endif>
                                                    HP Normal</option>
                                                <option value="konfirmasi"
                                                    @if ($request->status == 'konfirmasi') selected @endif>
                                                    Konfirmasi</option>
                                                <option value="pending_perbaikan"
                                                    @if ($request->status == 'pending_perbaikan') selected @endif>
                                                    Pending Perbaikan</option>

                                                <option value="proses_perbaikan"
                                                    @if ($request->status == 'proses_perbaikan') selected @endif>
                                                    Proses Perbaikan</option>
                                                <option value="selesai" @if ($request->status == 'selesai') selected @endif>
                                                    Selesai Perbaikan</option>
                                                <option value="batal" @if ($request->status == 'batal') selected @endif>
                                                    Batal</option>
                                                <option value="tidak_bisa_diperbaiki"
                                                    @if ($request->status == 'tidak_bisa_diperbaiki') selected @endif>
                                                    Tidak Bisa Diperbaiki</option>
                                                <option value="gagal_perbaikan"
                                                    @if ($request->status == 'gagal_perbaikan') selected @endif>
                                                    Gagal Perbaikan</option>
                                                <option value="tidak_deal"
                                                    @if ($request->status == 'tidak_deal') selected @endif>
                                                    Tidak Deal</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">monetization_on</i>
                                        </span>
                                        <div class="form-line">
                                            <select class="form-control" name="status_pembayaran">
                                                <option value="">Status Pembayaran</option>
                                                <option value="belum_ditanggapi"
                                                    @if ($request->status_pembayaran == 'belum_ditanggapi') selected @endif>Belum Ditanggapi
                                                </option>
                                                <option value="bayar_dp"
                                                    @if ($request->status_pembayaran == 'bayar_dp') selected @endif>Down Payment
                                                </option>
                                                <option value="refund" @if ($request->status_pembayaran == 'refund') selected @endif>
                                                    Refund
                                                </option>
                                                <option value="refund_dp"
                                                    @if ($request->status_pembayaran == 'refund_dp') selected @endif>
                                                    Refund_DP
                                                </option>
                                                <option value="belum_lunas"
                                                    @if ($request->status_pembayaran == 'belum_lunas') selected @endif>
                                                    Unpaid</option>
                                                <option value="lunas" @if ($request->status_pembayaran == 'lunas') selected @endif>
                                                    Paid</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">compare_arrows</i>
                                        </span>
                                        <div class="form-line">
                                            <select class="form-control" name="status_transaksi">
                                                <option value="">Status Transaksi</option>
                                                <option value="proses" @if ($request->status_transaksi == 'proses') selected @endif>
                                                    Proses
                                                </option>
                                                <option value="cancel" @if ($request->status_transaksi == 'cancel') selected @endif>
                                                    cancel</option>
                                                <option value="success"
                                                    @if ($request->status_transaksi == 'success') selected @endif>
                                                    Success</option>
                                                <option value="garansi"
                                                    @if ($request->status_transaksi == 'garansi') selected @endif>
                                                    Garansi</option>
                                            </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">person</i>
                                        </span>
                                        <div class="form-line">
                                            <input class="form-control" placeholder="No. Service/Nama/No Telp"
                                                name="nama_pelanggan" value="{{ $request->nama_pelanggan }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-1 col-md-3">
                                    <div class="input-group">
                                        <button class="btn btn-primary">Cari</button>
                                    </div>
                                </div>
                            </div>
                        </form>

                        {{-- filter --}}


                        <div class=" row ">
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-md-4">
                                        <button type="button" class="btn bg-deep-purple waves-effect m-r-20"
                                            data-toggle="modal" data-target="#tableSetting"><i
                                                class="material-icons">view_comfy</i>
                                            <span>Table Setting</span></button>
                                    </div>
                                    @if (\Helper::hakAkses('service', 'cetak'))
                                        <div class="col-md-4">
                                            <form action="{{ route('service.cetak') }}" target="_blank" class="">
                                                <div class="">
                                                    <input type="hidden" class="" name="periode" id="daterange"
                                                        value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif">

                                                    <input type="hidden" name="status" value="{{ $request->status }}">
                                                    <input type="hidden" name="status_pembayaran"
                                                        value="{{ $request->status_pembayaran }}">
                                                    <input type="hidden" name="status_transaksi"
                                                        value="{{ $request->status_transaksi }}">
                                                    <input type="hidden" name="nama_pelanggan"
                                                        value="{{ $request->nama_pelanggan }}">
                                                    <input type="hidden" name="teknisi_id"
                                                        value="{{ $request->teknisi_id }}">
                                                    <input type="hidden" name="pengguna_id"
                                                        value="{{ $request->pengguna_id }}">
                                                    <input type="hidden" name="jenis_id"
                                                        value="{{ $request->jenis_id }}">
                                                    <input type="hidden" name="sale_id"
                                                        value="{{ $request->sale_id }}">
                                                    <input type="hidden" name="sales_out"
                                                        value="{{ $request->sales_out }}">
                                                    <input type="hidden" name="kasir_out"
                                                        value="{{ $request->kasir_out }}">
                                                    <input type="hidden" name="excel" value="0">
                                                </div>
                                                <div class="">
                                                    <button type="submit" class="btn bg-light-green waves-effect">
                                                        <i class="material-icons">print</i>
                                                        <span>Cetak Service</span>
                                                    </button>

                                                </div>

                                            </form>
                                        </div>
                                        <div class="col-md-4">

                                            <form action="{{ route('service.cetak') }}" target="_blank" class="">
                                                <div class="">
                                                    <input type="hidden" class="" name="periode" id="daterange"
                                                        value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif">
                                                    <input type="hidden" name="status_pembayaran"
                                                        value="{{ $request->status_pembayaran }}">
                                                    <input type="hidden" name="status_transaksi"
                                                        value="{{ $request->status_transaksi }}">
                                                    <input type="hidden" name="nama_pelanggan"
                                                        value="{{ $request->nama_pelanggan }}">
                                                    <input type="hidden" name="status" value="{{ $request->status }}">
                                                    <input type="hidden" name="nama_pelanggan"
                                                        value="{{ $request->nama_pelanggan }}">
                                                    <input type="hidden" name="teknisi_id"
                                                        value="{{ $request->teknisi_id }}">
                                                    <input type="hidden" name="pengguna_id"
                                                        value="{{ $request->pengguna_id }}">
                                                    <input type="hidden" name="jenis_id"
                                                        value="{{ $request->jenis_id }}">
                                                    <input type="hidden" name="sale_id"
                                                        value="{{ $request->sale_id }}">
                                                    <input type="hidden" name="sales_out"
                                                        value="{{ $request->sales_out }}">
                                                    <input type="hidden" name="kasir_out"
                                                        value="{{ $request->kasir_out }}">
                                                    <input type="hidden" name="excel" value="1">
                                                </div>
                                                <div class="">
                                                    <button type="submit" class="btn bg-green waves-effect">
                                                        <i class="material-icons">print</i>
                                                        <span>Cetak Excel</span>
                                                    </button>

                                                </div>

                                            </form>

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

                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover dashboard-task-infos">
                                <thead>
                                    <tr>
                                        <th>
                                            *
                                        </th>
                                        @if (auth()->user()->SettingServiceTable->no_service == 1)
                                            <th>
                                                <a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'no_service', 'sorting_order' => $sorting_order]) }}">No.
                                                    Service</a>
                                            </th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->tanggal_masuk == 1)
                                            <th><a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'tanggal', 'sorting_order' => $sorting_order]) }}">Tanggal
                                                    Masuk</a>
                                            </th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->nama_pelanggan == 1)
                                            <th><a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'nama_pelanggan', 'sorting_order' => $sorting_order]) }}">Nama
                                                    Pelanggan</a></th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->status_perbaikan == 1)
                                            <th><a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'status', 'sorting_order' => $sorting_order]) }}">Status
                                                    Perbaikan</a>
                                            </th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->status_pembayaran == 1)
                                            <th><a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'status_pembayaran', 'sorting_order' => $sorting_order]) }}">Status
                                                    Pembayaran</a>
                                            </th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->status_transaksi == 1)
                                            <th><a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'status_transaksi', 'sorting_order' => $sorting_order]) }}">Status
                                                    Transaksi</a>
                                            </th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->biaya == 1)
                                            <th><a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'biaya', 'sorting_order' => $sorting_order]) }}">Biaya</a>
                                            </th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->DP == 1)
                                            <th><a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'uang_bayar', 'sorting_order' => $sorting_order]) }}">Dp</a>
                                            </th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->merk_tipe_hp == 1)
                                            <th><a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'merk', 'sorting_order' => $sorting_order]) }}">Merek
                                                    & type HP</a>
                                            </th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->kerusakan == 1)
                                            <th><a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'deskripsi', 'sorting_order' => $sorting_order]) }}">Kerusakan</a>
                                            </th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->status_garansi == 1)
                                            <th><a style="color:#555555;">Status Garansi</a>
                                            </th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->nama_teknisi == 1)
                                            <th><a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'teknisi_id', 'sorting_order' => $sorting_order]) }}">Nama
                                                    <br>
                                                    Teknisi</a></th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->nama_kasir == 1)
                                            <th><a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'pengguna_id', 'sorting_order' => $sorting_order]) }}">Nama
                                                    Kasir</a></th>
                                        @endif
                                        @if (auth()->user()->SettingServiceTable->nama_sales == 1)
                                            <th><a style="color:#555555;"
                                                    href="{{ request()->fullUrlWithQuery(['order' => 'sale_id', 'sorting_order' => $sorting_order]) }}">Nama
                                                    Sales</a></th>
                                        @endif
                                        @if (\Helper::hakAkses('service', 'edit'))
                                            @if ($canPesan)
                                                @if (auth()->user()->SettingServiceTable->pesan_follow_up == 1)
                                                    <th>Pesan & Follow-Up</th>
                                                @endif
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->action == 1)
                                                <th>Action</th>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->tools == 1)
                                                <th>Tools</th>
                                            @endif
                                        @endif
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($datas as $data)
                                        @php
                                            $list = '';
                                            $list_SL = '';

                                            if ($data->pembayaran_service->last() != '') {
                                                $pembayaran = $data->pembayaran_service->last()->akhir_garansi;
                                                $akhir_garansi_jasa = date('d-m-Y', strtotime($pembayaran));
                                            } else {
                                                $akhir_garansi_jasa = '-';
                                            }

                                        @endphp

                                        @foreach ($data->detail as $detail)
                                            @php
                                                if ($detail->akhir_garansi != '') {
                                                    $date = strftime('%d-%m-%Y', strtotime($detail->akhir_garansi));

                                                    $formatted_date = $date;
                                                } else {
                                                    $formatted_date = '-';
                                                }

                                                $diskon = ($detail->diskon / $detail->harga_item) * 100;
                                                $diskon_bulat = ceil($diskon);
                                                if ($diskon_bulat <= 0) {
                                                    $persentase_diskon = '-';
                                                } else {
                                                    $persentase_diskon = $diskon_bulat . '%';
                                                }
                                                $list .=
                                                    $detail->nama_item .
                                                    ',' .
                                                    $detail->jumlah .
                                                    ',' .
                                                    $detail->harga_item .
                                                    ',' .
                                                    $formatted_date .
                                                    ',' .
                                                    $persentase_diskon .
                                                    ',' .
                                                    $detail->total_sparepart .
                                                    '.';
                                            @endphp
                                        @endforeach
                                        {{-- @if (isset($data->sparepart_luar))
                                        @endif --}}
                                        @foreach ($data->sparepart_luar as $SL)
                                            @php

                                                $diskon = ($SL->diskon_SL / $SL->harga_jual_SL) * 100;
                                                $diskon_bulat = round($diskon);
                                                if ($diskon_bulat <= 0) {
                                                    $persentase_diskon = '-';
                                                } else {
                                                    $persentase_diskon = $diskon_bulat . '%';
                                                }
                                                $list_SL .=
                                                    $SL->nama_SL .
                                                    ',' .
                                                    $SL->jumlah_SL .
                                                    ',' .
                                                    $SL->harga_jual_SL .
                                                    ',' .
                                                    $persentase_diskon .
                                                    ',' .
                                                    $SL->total_sparepart .
                                                    '.';
                                            @endphp
                                        @endforeach


                                        <tr>
                                            <td>
                                                <input type="checkbox" id="pilih-banyak-{{ $data->id }}" name="data_id[]"
                                                    value="{{ $data->id }}" class="pilih-banyak filled-in chk-col-red" />
                                                <label for="pilih-banyak-{{ $data->id }}">Pilih</label>
                                            </td>
                                            @if (auth()->user()->SettingServiceTable->no_service == 1)
                                                <td style="min-width: 150px">{{ $data->no_service }} <br>
                                                    @if ($data->garansi == 1)
                                                        <span class="label label-info">Garansi</span>
                                                    @endif

                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->tanggal_masuk == 1)
                                                <td style="min-width: 100px">
                                                    @php
                                                        $tanggal = new DateTime($data->tanggal);
                                                    @endphp

                                                    {{ $tanggal->format('d-m-Y') }}</td>




                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->nama_pelanggan == 1)
                                                <td style="min-width:150px;"> <a
                                                        class="fill-table font-bold font-14"style="text-decoration:none;"
                                                        href="#"data-toggle="modal" data-target="#largeModal"
                                                        data-nama_pelanggan="{{ $data->pelanggan->nama_pelanggan }}"
                                                        @if ($data->pembayaran_service->last() != '') data-akhir_garansi_jasa="{{ $akhir_garansi_jasa }}"@else data-akhir_garansi_jasa="-" @endif
                                                        @if (isset($infobox['profil']->photo)) data-logo="{{ asset('images/Logo/' . $infobox['profil']->photo) }}" @endif
                                                        @if ($data->grand_total - $data->biaya != 0) data-total_sparepart="{{ number_format($data->total_jual_sparepart) }}"@else data-total_sparepart="-" @endif
                                                        data-id="{{ $data->id }}"
                                                        data-telp_pelanggan="{{ $data->pelanggan->telp_pelanggan }}"
                                                        data-alamat_pelanggan="{{ $data->pelanggan->alamat_pelanggan }}"
                                                        data-merk="{{ $data->merk }}"
                                                        data-kelengkapan="{{ str_replace('_', ' ', $data->kelengkapan) }}"
                                                        data-kelengkapan_unit="{{ str_replace('_', ' ', $data->kelengkapan_unit) }}"
                                                        data-fungsi_tombol="{{ str_replace('_', ' ', $data->fungsi_tombol) }}"
                                                        data-arus_charger="{{ str_replace('_', ' ', $data->arus_charger) }}"
                                                        data-kondisi_layar="{{ str_replace('_', ' ', $data->kondisi_layar) }}"
                                                        data-kerusakan="{{ str_replace('_', ' ', $data->kerusakan) }}"
                                                        data-deskripsi="{{ $data->deskripsi }}"
                                                        data-warna="{{ $data->color }}" data-pin="{{ $data->pin }}"
                                                        data-pola="{{ $data->pola }}"
                                                        data-biaya="{{ number_format($data->biaya) }}"
                                                        data-grand-total="{{ number_format($data->grand_total) }}"
                                                        data-list-sparepart="{{ $list }}"
                                                        data-list-sparepart-luar="{{ $list_SL }}"
                                                        data-tipe="{{ $data->tipe }}"
                                                        data-dp="{{ number_format($data->uang_bayar) }}"
                                                        data-final="{{ number_format($data->grand_total - $data->uang_bayar) }}"
                                                        data-imei1="{{ $data->imei1 }}"
                                                        data-catatan-teknisi="{{ $data->catatan_teknisi }}"
                                                        data-imei2="{{ $data->imei2 }}">
                                                        {{ $data->pelanggan->nama_pelanggan }}
                                                    </a>
                                                    <br>
                                                    ({{ $data->pelanggan->telp_pelanggan }})
                                                    @if ($data->status_pesan == 0)
                                                        <span class="label label-danger">Belum dihubungi</span>
                                                    @endif
                                                </td>
                                            @endif

                                            @if (auth()->user()->SettingServiceTable->status_perbaikan == 1)
                                                <td>

                                                    @switch($data->status)
                                                        @case('pending')
                                                            <span class="label label-danger">{{ $data->status }}</span>
                                                        @break

                                                        @case('tidak_deal')
                                                            <span class="label label-danger"
                                                                style="text-transform: capitalize;">{{ str_replace('_', ' ', $data->status) }}</span>
                                                        @break

                                                        @case('konfirmasi')
                                                            <span class="label label-warning"
                                                                style="text-transform: capitalize;">{{ $data->status }}</span>
                                                        @break

                                                        @case('pending_perbaikan')
                                                            <span class="label bg-cyan"
                                                                style="text-transform: capitalize;">{{ str_replace('_', ' ', $data->status) }}</span>
                                                        @break

                                                        @case('tidak_bisa_diperbaiki')
                                                            <span class="label label-danger text-center "
                                                                style="text-transform: capitalize;">{{ str_replace('_', ' ', $data->status) }}</span>
                                                        @break

                                                        @case('hp_bisa_diperbaiki')
                                                            <span class="label bg-light-green text-center "
                                                                style="text-transform: capitalize;">{{ str_replace('_', ' ', $data->status) }}
                                                            </span>
                                                        @break

                                                        @case('hp_normal')
                                                            <span class="label bg-indigo text-center "
                                                                style="text-transform: capitalize;">{{ str_replace('_', ' ', $data->status) }}</span>
                                                        @break

                                                        @case('gagal_perbaikan')
                                                            <span class="label label-danger text-center "
                                                                style="text-transform: capitalize;">
                                                                {{ str_replace('_', ' ', $data->status) }}</span>
                                                        @break

                                                        @case('pengecekan')
                                                            <span class="label label-info">{{ $data->status }}</span>
                                                        @break

                                                        @case('indent')
                                                            <span class="label label-info">{{ $data->status }}</span>
                                                        @break

                                                        @case('proses_perbaikan')
                                                            <span class="label label-primary"
                                                                style="text-transform: capitalize;">{{ str_replace('_', ' ', $data->status) }}</span>
                                                        @break

                                                        @case('selesai')
                                                            <span class="label label-success">Selesai Perbaikan</span>
                                                        @break

                                                        @case('batal')
                                                            <span class="label label-danger">{{ $data->status }}</span>
                                                        @break

                                                        @default
                                                            <span class="label label-success">{{ $data->status }}</span>
                                                    @endswitch


                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->status_pembayaran == 1)
                                                <td>
                                                    @switch($data->status_pembayaran)
                                                        @case('belum_ditanggapi')
                                                            <span
                                                                class="label label-danger">{{ $data->status_pembayaran_label }}</span>
                                                            @if ($data->uang_bayar != 0)
                                                                <br>
                                                                <br>
                                                                <span class="label bg-light-green">
                                                                    Down Payment
                                                                </span>
                                                            @endif
                                                        @break

                                                        @case('belum_lunas')
                                                            @if ($data->uang_bayar != 0)
                                                                <span class="label bg-light-green">
                                                                    Down Payment
                                                                </span>
                                                            @else
                                                                <span class="label label-warning">Unpaid</span>
                                                            @endif
                                                        @break

                                                        @case('refund')
                                                            <span class="label label-primary">Refund</span>
                                                        @break

                                                        @case('refund_dp')
                                                            <span class="label label-primary">Refund DP</span>
                                                        @break

                                                        @case('Waranty')
                                                            <span class="label bg-purple">Waranty</span>
                                                        @break

                                                        @case('lunas')
                                                            <span class="label label-success">Paid</span>
                                                        @break
                                                    @endswitch

                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->status_transaksi == 1)
                                                <td>

                                                    @switch($data->status_transaksi)
                                                        @case('proses')
                                                            <span class="label label-info">Proses</span>
                                                        @break

                                                        @case('cancel')
                                                            <span class="label label-danger"> Cancel </span>
                                                        @break

                                                        @case('success')
                                                            <span class="label label-success"> Success </span>
                                                        @break
                                                    @endswitch
                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->biaya == 1)
                                                <td>{{ number_format($data->grand_total) }} <br>
                                                    @if (isset($data->pembayaran_service))
                                                        @php
                                                            $pembayaran = $data->pembayaran_service->first();

                                                        @endphp
                                                        @if (isset($pembayaran))
                                                            ({{ $pembayaran->metode_bayar }})
                                                        @else
                                                            -
                                                        @endif
                                                    @else
                                                        -
                                                    @endif
                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->DP == 1)
                                                <td>
                                                    @if ($data->uang_bayar != 0)
                                                        {{ number_format($data->uang_bayar) }}
                                                        ({{ $data->metode_bayar }})
                                                    @else
                                                        {{ number_format($data->uang_bayar) }}
                                                    @endif
                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->merk_tipe_hp == 1)
                                                <td style="min-width:150px;">{{ $data->merk }} <br>
                                                    ({{ $data->tipe }})
                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->kerusakan == 1)
                                                <td style="min-width:200px;">{{ $data->deskripsi }}</td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->status_garansi == 1)
                                                <td>
                                                    @if ($data->pembayaran_service->last() != '')
                                                        @if ($data->pembayaran_service->last()->akhir_garansi >= now())
                                                            <span class="label bg-green">aktif</span><br>
                                                        @else
                                                            <span class="label bg-orange">kedaluwarsa</span><br>
                                                        @endif
                                                    @else
                                                        -
                                                    @endif

                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->nama_teknisi == 1)
                                                <td>


                                                    {{ $data->teknisi->nama_pengguna }}

                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->nama_kasir == 1)
                                                <td style="">
                                                    <table style="border: none !important;">
                                                        <tr>
                                                            <td style="border: none !important;">
                                                                {{ $data->pengguna ? $data->pengguna->nama_pengguna : '-' }}
                                                            </td>
                                                            <td style="border: none !important;"><span
                                                                    class="label bg-cyan ">
                                                                    in</span></td>
                                                        </tr>
                                                        @if (isset($data->kasir_out))
                                                            <tr>
                                                                <td style="border: none !important;">
                                                                    {{ $data->kasir_out }}
                                                                </td>
                                                                <td style="border: none !important;"><span
                                                                        class="label bg-teal ">
                                                                        out</span></td>
                                                            </tr>
                                                        @endif
                                                    </table>

                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->nama_sales == 1)
                                                <td>
                                                    <table style="border: none !important;">
                                                        <tr>
                                                            <td style="border: none !important;">
                                                                {{ $data->sales ? $data->sales->nama_pengguna : '-' }}
                                                            </td>
                                                            <td style="border: none !important;"><span
                                                                    class="label bg-cyan ">
                                                                    in</span></td>
                                                        </tr>
                                                        @if (isset($data->sales_out))
                                                            <tr>
                                                                <td style="border: none !important;">
                                                                    {{ $data->sales_out }}
                                                                </td>
                                                                <td style="border: none !important;"><span
                                                                        class="label bg-teal ">
                                                                        out</span></td>
                                                            </tr>
                                                        @endif
                                                    </table>
                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->pesan_follow_up == 1)
                                                <td style="padding:10px;">
                                                    @php
                                                        if (isset($data->follow_up)) {
                                                            $array = explode(',', $data->follow_up);
                                                        } else {
                                                            $array = [];
                                                        }
                                                    @endphp
                                                    <div
                                                        style="display: flex; flex-direction: row; gap: 10px; padding: 10px;">
                                                        @if (\Helper::hakAkses('pesan&followup', 'view'))
                                                            @foreach ($pesan_customs as $p)
                                                                @if ($p->tampilkan == 1)
                                                                    <a href="{{ route('pesanCustom', [$data->id, $p->id]) }}"
                                                                        class="btn btn-circle waves-effect waves-circle waves-float {{ in_array($p->id, $array) ? 'btn-active' : 'btn-inactive' }}"
                                                                        style="margin: 5px; min-width:40px; min-height:40px; color:white!important;"
                                                                        data-toggle="tooltip" data-placement="top"
                                                                        title="{{ $p->nama_pesan }}">
                                                                        <i
                                                                            class="material-icons">{{ $p->icon_pesan }}</i>
                                                                    </a>
                                                                @endif
                                                            @endforeach

                                                            @if (\Helper::hakAkses('pesan&followup', 'edit'))
                                                                <a href="{{ route('pesan_custom.index') }}"
                                                                    class="btn btn-circle waves-effect waves-circle waves-float btn-inactive "
                                                                    style="margin: 5px; min-width:40px; min-height:40px; color:white!important;"
                                                                    data-toggle="tooltip" data-placement="top"
                                                                    title="Pengaturan Pesan">
                                                                    <i class="material-icons">settings</i>
                                                                </a>
                                                            @endif
                                                        @endif
                                                        @if (\Helper::hakAkses('service', 'pesan'))
                                                            <a href="{{ route('pesan.edit', $data->id) }}"
                                                                class="btn btn-circle waves-effect waves-circle waves-float btn-inactive "
                                                                style="margin: 5px; min-width:40px; min-height:40px; color:white!important;"
                                                                data-toggle="tooltip" data-placement="top"
                                                                title="Kirim Pesan">
                                                                <i class="material-icons">message</i>
                                                            </a>
                                                        @endif
                                                    </div>

                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->action == 1)
                                                <td>
                                                    @if (\Helper::hakAkses('service', 'admin_action'))
                                                        <div class="btn-group btn-block ">
                                                            <button type="button"
                                                                class="btn btn-default btn-block waves-effect dropdown-toggle"
                                                                data-toggle="dropdown" aria-haspopup="true"
                                                                aria-expanded="false">
                                                                Action <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu">

                                                                @if ($data->status_transaksi != 'success' && $data->status_transaksi != 'cancel')
                                                                    @if ($data->status != 'pending')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=pending">Pending</a>
                                                                        </li>
                                                                    @endif
                                                                    @if ($data->status != 'indent')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=indent">Indent</a>
                                                                        </li>
                                                                    @endif
                                                                    @if ($data->status != 'pengecekan')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=pengecekan">pengecekan</a>
                                                                        </li>
                                                                    @endif
                                                                    @if ($data->status != 'konfirmasi')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=konfirmasi">Konfirmasi</a>
                                                                        </li>
                                                                    @endif
                                                                    @if ($data->status != 'pending_perbaikan')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=pending_perbaikan">Pending
                                                                                Perbaikan</a>
                                                                        </li>
                                                                    @endif

                                                                    @if ($data->status != 'proses_perbaikan')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=proses_perbaikan">Proses
                                                                                Perbaikan</a>
                                                                        </li>
                                                                    @endif

                                                                    @if ($data->status != 'selesai')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=selesai">Selesai
                                                                                Perbaikan</a>
                                                                        </li>
                                                                    @endif
                                                                    <li role="separator" class="divider"></li>
                                                                    @if ($data->status == 'pengecekan')
                                                                        <li><a class="bg-success"
                                                                                href="{{ route('service.proses', $data->id) }}?status=hp_bisa_diperbaiki">HP
                                                                                Bisa Diperbaiki</a>
                                                                        </li>
                                                                        <li><a class="bg-info"
                                                                                href="{{ route('service.proses', $data->id) }}?status=hp_normal">HP
                                                                                Normal</a>
                                                                        </li>
                                                                    @endif
                                                                    @if ($data->status == 'konfirmasi')
                                                                        <li><a class="bg-success"
                                                                                href="{{ route('service.proses', $data->id) }}?status=deal">Deal</a>
                                                                        </li>
                                                                    @endif

                                                                    @if ($data->status != 'batal')
                                                                        <li><a class="bg-danger"
                                                                                href="{{ route('service.proses', $data->id) }}?status=batal">Pembatalan</a>
                                                                        </li>
                                                                    @endif
                                                                @endif

                                                                <li role="separator" class="divider"></li>
                                                                <li class="action-bayar"
                                                                    data-biaya="{{ $data->biaya }}"><a
                                                                        data-biaya="{{ $data->biaya }}"
                                                                        href="{{ route('pembayaran_service.edit', $data->id) }}">Bayar</a>
                                                                </li>
                                                                <li><a
                                                                        href="{{ route('refund.edit', $data->id) }}?status=refund">Refund</a>
                                                                </li>
                                                                @if ($data->status == 'selesai' && $data->status_pembayaran == 'lunas')
                                                                    <li>
                                                                        <a title="Garansi"
                                                                            href="{{ route('service.garansi.create', $id = $data->id) }}">
                                                                            Garansi
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                                <li role="separator" class="divider"></li>
                                                                
                                                                @if ($data->status_transaksi != 'cancel')
                                                                    <li>
                                                                        <a data-toggle="modal"
                                                                            class="cancel-action bg-red"
                                                                            data-target="#mdModal"
                                                                            data-servisid="{{ $data->id }}">Cancel</a>

                                                                    </li>
                                                                    <li role="separator" class="divider"></li>
                                                                @endif
                                                                @if ($canPesan)
                                                                    <li>
                                                                        <a
                                                                            href="{{ route('pesan_action.index', $data->id) }}">Atur
                                                                            Pesan Action</a>
                                                                    </li>
                                                                @endif
                                                            </ul>
                                                        </div>
                                                    @endif
                                                    @if (\Helper::hakAkses('service', 'akses_kasir'))
                                                        <div class="btn-group btn-block ">
                                                            <button type="button"
                                                                class="btn btn-default btn-block waves-effect dropdown-toggle"
                                                                data-toggle="dropdown" aria-haspopup="true"
                                                                aria-expanded="false">
                                                                Action <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu">


                                                                @if ($data->status_transaksi != 'success' && $data->status_transaksi != 'cancel')
                                                                    @if ($data->status != 'pending')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=pending">Pending</a>
                                                                        </li>
                                                                    @endif
                                                                    @if ($data->status != 'indent')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=indent">Indent</a>
                                                                        </li>
                                                                    @endif

                                                                    @if ($data->status != 'konfirmasi')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=konfirmasi">Konfirmasi</a>
                                                                        </li>
                                                                    @endif




                                                                    <li role="separator" class="divider"></li>

                                                                    @if ($data->status == 'konfirmasi')
                                                                        <li><a class="bg-success"
                                                                                href="{{ route('service.proses', $data->id) }}?status=deal">Deal</a>
                                                                        </li>
                                                                    @endif

                                                                    @if ($data->status != 'batal')
                                                                        <li><a class="bg-danger"
                                                                                href="{{ route('service.proses', $data->id) }}?status=batal">Pembatalan</a>
                                                                        </li>
                                                                    @endif
                                                                @endif

                                                                <li role="separator" class="divider"></li>
                                                                @if ($data->status == 'selesai' && $data->status_pembayaran == 'lunas')
                                                                    <li>
                                                                        <a title="Garansi"
                                                                            href="{{ route('service.garansi.create', $id = $data->id) }}">
                                                                            Garansi
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                                <li class="action-bayar"
                                                                    data-biaya="{{ $data->biaya }}"><a
                                                                        href="{{ route('pembayaran_service.edit', $data->id) }}"
                                                                        data-biaya="{{ $data->biaya }}">Bayar</a>
                                                                </li>
                                                                <li><a
                                                                        href="{{ route('refund.edit', $data->id) }}?status=refund">Refund</a>
                                                                </li>
                                                                {{-- <li><a href="{{ route('pesan.edit', $data->id) }}">Kirim
                                                                    Pesan</a>
                                                            </li> --}}
                                                                <li role="separator" class="divider"></li>
                                                                @if ($data->status_transaksi != 'cancel')
                                                                    <li>
                                                                        <a data-toggle="modal"
                                                                            class="cancel-action bg-red"
                                                                            data-target="#mdModal"
                                                                            data-servisid="{{ $data->id }}">Cancel</a>

                                                                    </li>
                                                                    <li role="separator" class="divider"></li>
                                                                @endif
                                                            </ul>
                                                        </div>
                                                    @endif
                                                    @if (\Helper::hakAkses('service', 'akses_teknisi'))
                                                        <div class="btn-group btn-block ">
                                                            <button type="button"
                                                                class="btn btn-default btn-block waves-effect dropdown-toggle"
                                                                data-toggle="dropdown" aria-haspopup="true"
                                                                aria-expanded="false">
                                                                Action <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu">
                                                                @if ($data->status_transaksi != 'success' && $data->status_transaksi != 'cancel')
                                                                    @if ($data->status != 'pending')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=pending">Pending</a>
                                                                        </li>
                                                                    @endif
                                                                    @if ($data->status != 'pengecekan')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=pengecekan">pengecekan</a>
                                                                        </li>
                                                                    @endif
                                                                    @if ($data->status != 'konfirmasi')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=konfirmasi">Konfirmasi</a>
                                                                        </li>
                                                                    @endif
                                                                    @if ($data->status != 'pending_perbaikan')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=pending_perbaikan">Pending
                                                                                Perbaikan</a>
                                                                        </li>
                                                                    @endif

                                                                    @if ($data->status != 'proses_perbaikan')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=proses_perbaikan">Proses
                                                                                Perbaikan</a>
                                                                        </li>
                                                                    @endif

                                                                    @if ($data->status != 'selesai')
                                                                        <li><a
                                                                                href="{{ route('service.proses', $data->id) }}?status=selesai">Selesai
                                                                                Perbaikan</a>
                                                                        </li>
                                                                    @endif
                                                                    <li role="separator" class="divider"></li>
                                                                    @if ($data->status == 'pengecekan')
                                                                        <li><a class="bg-success"
                                                                                href="{{ route('service.proses', $data->id) }}?status=hp_bisa_diperbaiki">HP
                                                                                Bisa Diperbaiki</a>
                                                                        </li>
                                                                        <li><a class="bg-info"
                                                                                href="{{ route('service.proses', $data->id) }}?status=hp_normal">HP
                                                                                Normal</a>
                                                                        </li>
                                                                    @endif
                                                                    @if ($data->status == 'konfirmasi')
                                                                        <li><a class="bg-success"
                                                                                href="{{ route('service.proses', $data->id) }}?status=deal">Deal</a>
                                                                        </li>
                                                                    @endif

                                                                    @if ($data->status != 'batal')
                                                                        <li><a class="bg-danger"
                                                                                href="{{ route('service.proses', $data->id) }}?status=batal">Pembatalan</a>
                                                                        </li>
                                                                    @endif
                                                                @endif

                                                                <li role="separator" class="divider"></li>
                                                                @if ($data->status == 'selesai' && $data->status_pembayaran == 'lunas')
                                                                    <li>
                                                                        <a title="Garansi"
                                                                            href="{{ route('service.garansi.create', $id = $data->id) }}">
                                                                            Garansi
                                                                        </a>
                                                                    </li>
                                                                @endif


                                                                <li><a href="{{ route('pesan.edit', $data->id) }}">Kirim
                                                                        Pesan</a>
                                                                </li>
                                                                <li role="separator" class="divider"></li>


                                                            </ul>
                                                        </div>
                                                    @endif
                                                </td>
                                            @endif
                                            @if (auth()->user()->SettingServiceTable->tools == 1)
                                                <td style="min-width: 300px;">
                                                    <div class="" style="display:flex;gap:6px;">
                                                        @if (\Helper::hakAkses('service', 'edit'))
                                                            <a title="Chat Wa Ke Pelanggan"
                                                                href="https://wa.me/{{ '628' . substr($data->pelanggan->telp_pelanggan, 2) }}"
                                                                target="blank_" class="btn btn-success waves-effect">
                                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                                    width="20" height="20" viewBox="0,0,256,256"
                                                                    style="fill:#FFFFFF;">
                                                                    <g fill="#ffffff" fill-rule="nonzero" stroke="none"
                                                                        stroke-width="1" stroke-linecap="butt"
                                                                        stroke-linejoin="miter" stroke-miterlimit="10"
                                                                        stroke-dasharray="" stroke-dashoffset="0"
                                                                        font-family="none" font-weight="none"
                                                                        font-size="none" text-anchor="none"
                                                                        style="mix-blend-mode: normal">
                                                                        <g transform="scale(8.53333,8.53333)">
                                                                            <path
                                                                                d="M15,3c-6.627,0 -12,5.373 -12,12c0,2.25121 0.63234,4.35007 1.71094,6.15039l-1.60352,5.84961l5.97461,-1.56836c1.74732,0.99342 3.76446,1.56836 5.91797,1.56836c6.627,0 12,-5.373 12,-12c0,-6.627 -5.373,-12 -12,-12zM10.89258,9.40234c0.195,0 0.39536,-0.00119 0.56836,0.00781c0.214,0.005 0.44692,0.02067 0.66992,0.51367c0.265,0.586 0.84202,2.05608 0.91602,2.20508c0.074,0.149 0.12644,0.32453 0.02344,0.51953c-0.098,0.2 -0.14897,0.32105 -0.29297,0.49805c-0.149,0.172 -0.31227,0.38563 -0.44727,0.51563c-0.149,0.149 -0.30286,0.31238 -0.13086,0.60938c0.172,0.297 0.76934,1.27064 1.65234,2.05664c1.135,1.014 2.09263,1.32561 2.39063,1.47461c0.298,0.149 0.47058,0.12578 0.64258,-0.07422c0.177,-0.195 0.74336,-0.86411 0.94336,-1.16211c0.195,-0.298 0.39406,-0.24644 0.66406,-0.14844c0.274,0.098 1.7352,0.8178 2.0332,0.9668c0.298,0.149 0.49336,0.22275 0.56836,0.34375c0.077,0.125 0.07708,0.72006 -0.16992,1.41406c-0.247,0.693 -1.45991,1.36316 -2.00391,1.41016c-0.549,0.051 -1.06136,0.24677 -3.56836,-0.74023c-3.024,-1.191 -4.93108,-4.28828 -5.08008,-4.48828c-0.149,-0.195 -1.21094,-1.61031 -1.21094,-3.07031c0,-1.465 0.76811,-2.18247 1.03711,-2.48047c0.274,-0.298 0.59492,-0.37109 0.79492,-0.37109z">
                                                                            </path>
                                                                        </g>
                                                                    </g>
                                                                </svg>
                                                            </a>
                                                            {{-- @if ($data->status == 'selesai' && $data->status_pembayaran == 'lunas')
                                                                <a title="Garansi"
                                                                    href="{{ route('service.garansi.create', [($id = $data->id)]) }}"
                                                                    class="btn btn-info  waves-effect"><i
                                                                        class="material-icons">verified_user</i>
                                                                </a>
                                                            @endif --}}

                                                            <a title="Edit Data"
                                                                href="{{ route('service.edit', [($id = $data->id)]) }}"
                                                                class="btn btn-primary  waves-effect"><i
                                                                    class="material-icons">create</i></a>
                                                        @endif
                                                        @if (\Helper::hakAkses('service', 'delete'))
                                                            <form action="{{ route('service.destroy', $data->id) }}"
                                                                method="POST">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button title="Hapus Data" type="submit"
                                                                    class="btn btn-danger  waves-effect"
                                                                    id="hapus-button"><i class="material-icons">delete</i>
                                                                </button>
                                                            </form>
                                                        @endif
                                                        @if (\Helper::hakAkses('service', 'duplikat'))
                                                            <a title="Duplicate Data"
                                                                href="{{ route('service.duplicate', [($id = $data->id)]) }}"
                                                                class="btn bg-teal waves-effect"
                                                                onclick="return confirm('Apakah Anda yakin ingin menduplikasi layanan ini?');">
                                                                <i class="material-icons">content_copy</i>
                                                            </a>
                                                        @endif



                                                    </div>


                                                </td>
                                            @endif

                                        </tr>
                                    @endforeach
                                </tbody>

                                <tfoot>
                                    <tr>
                                        <td colspan="17">
                                            <form action="{{ route('service.multiDelete') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="data_id" id="pilih-banyak-id" value="">
                                                <button class="btn btn-danger" id="hapus-button">
                                                    <i class="material-icons">delete</i>
                                                    Hapus Yang Dipilih
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    @include('layouts.includes.pagination',['colspan'=>17])
                                </tfoot>
                                 
                               
                            </table>
                        </div>
                    </div>

                </div>
            </div>
            <!-- #END# Task Info -->
        </div>
    </div>

    {{-- Modal --}}
    <div class="modal fade" id="largeModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" id="servicenota">





            </div>
        </div>
    </div>
    <div class="modal fade" id="mdModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content ">

                <div class="modal-body">
                    <h4>Apakah anda yakin ingin mengubah status menjadi Cancel?</h4>
                    <br>
                    <form id="cancelForm" action="{{ route('service.cancel') }}" method="POST">
                        @csrf
                        @method('POST')

                        <div class="row clearfix">
                            <div class="col-md-12">
                                <b>Kasir</b>
                                <input type="hidden" name="service_id" id="editId">
                                <select name="kasir_id" class="form-control" required>
                                    <option value="" selected disabled>-Pilih Kasir-</option>
                                    @foreach ($pengguna as $p)
                                        <option value="{{ $p->id }}"
                                            @if (auth()->user()->id == $p->id) selected @endif> {{ $p->nama_pengguna }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-12">
                                <b>Sales</b>
                                <select name="sale_id" class="form-control" required>
                                    <option value="" selected disabled>-Pilih Sales-</option>
                                    @foreach ($pengguna as $p)
                                        <option value="{{ $p->id }}">
                                            {{ $p->nama_pengguna }} </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <i>*Jika iya, harap isi terlebih dahulu nama kasir dan sales yang bertugas.</i>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger waves-effect">Cancel</button>
                    <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">Batalkan</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="tableSetting" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="largeModalLabel">Pengaturan Tabel</h4>
                </div>

                <form method="POST" action="{{ route('tableServiceSetting.update', auth()->user()->id) }}">
                    @csrf
                    @method('put')
                    <div class="modal-body">
                        <div class="demo-checkbox">
                            <input type="checkbox" id="md_checkbox_21" class="filled-in chk-col-cyan" value="1"
                                name="no_service"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->no_service == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_21">NO Service</label>
                            <input type="checkbox" id="md_checkbox_22" class="filled-in chk-col-cyan" value="1"
                                name="tanggal_masuk"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->tanggal_masuk == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_22">Tanggal Masuk</label>
                            <input type="checkbox" id="md_checkbox_23" class="filled-in chk-col-cyan" value="1"
                                name="nama_pelanggan"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->nama_pelanggan == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_23">Nama Pelanggan</label>
                            <input type="checkbox" id="md_checkbox_24" class="filled-in chk-col-cyan" value="1"
                                name="status_perbaikan"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->status_perbaikan == 1) checked @endif
                                @endif/>
                            <label for="md_checkbox_24">Status Perbaikan</label>
                            <input type="checkbox" id="md_checkbox_25" class="filled-in chk-col-cyan" value="1"
                                name="status_pembayaran"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->status_pembayaran == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_25">Status Pembayaran</label>
                            <input type="checkbox" id="md_checkbox_26" class="filled-in chk-col-cyan" value="1"
                                name="status_transaksi"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->status_transaksi == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_26">Status Transaksi</label>
                            <input type="checkbox" id="md_checkbox_27" class="filled-in chk-col-cyan" value="1"
                                name="biaya"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->biaya == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_27">Biaya</label>
                            <input type="checkbox" id="md_checkbox_28" class="filled-in chk-col-cyan" value="1"
                                name="DP"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->DP == 1) checked @endif
                                @endif/>
                            <label for="md_checkbox_28">DP</label>
                            <input type="checkbox" id="md_checkbox_29" class="filled-in chk-col-cyan" value="1"
                                name="merk_tipe_hp"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->merk_tipe_hp == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_29">Merk & Tipe HP</label>
                            <input type="checkbox" id="md_checkbox_30" class="filled-in chk-col-cyan" value="1"
                                name="kerusakan"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->kerusakan == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_30">Kerusakan</label>
                            <input type="checkbox" id="md_checkbox_31" class="filled-in chk-col-cyan" value="1"
                                name="status_garansi"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->status_garansi == 1) checked @endif
                                @endif/>
                            <label for="md_checkbox_31">Status Garansi</label>
                            <input type="checkbox" id="md_checkbox_32" class="filled-in chk-col-cyan" value="1"
                                name="nama_teknisi"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->nama_teknisi == 1) checked @endif
                                @endif/>
                            <label for="md_checkbox_32">Nama Teknisi</label>
                            <input type="checkbox" id="md_checkbox_33" class="filled-in chk-col-cyan" value="1"
                                name="nama_kasir"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->nama_kasir == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_33">Nama Kasir</label>
                            <input type="checkbox" id="md_checkbox_34" class="filled-in chk-col-cyan" value="1"
                                name="nama_sales"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->nama_sales == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_34">Nama Sales</label>
                            <input type="checkbox" id="md_checkbox_35" class="filled-in chk-col-cyan" value="1"
                                name="pesan_follow_up"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->pesan_follow_up == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_35">Pesan & Follow Up</label>
                            <input type="checkbox" id="md_checkbox_36" class="filled-in chk-col-cyan" value="1"
                                name="action"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->action == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_36">Action</label>
                            <input type="checkbox" id="md_checkbox_37" class="filled-in chk-col-cyan" value="1"
                                name="tools"
                                @if (isset(auth()->user()->SettingServiceTable)) @if (auth()->user()->SettingServiceTable->tools == 1) checked @endif
                                @endif />
                            <label for="md_checkbox_37">Tools</label>

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success waves-effect">Terapkan</button>
                        <button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">Batal</button>
                    </div>
                </form>
            </div>
        </div>
    </div>




    {{-- Modal --}}

    @push('scripts')
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const select_infobox = document.getElementById('select_infobox');
                const infobox = document.getElementById('infobox');
                const loading = document.getElementById('loading');

                select_infobox.addEventListener("change", function() {
                    if (select_infobox.value == "1") {
                        var periode = {!! json_encode($periode) !!};
                        var periodeString = periode.join(' - ');
                        var encodedPeriode = encodeURIComponent(periodeString);
                        loading.style.display = 'block';

                        $.ajax({
                            url: '/getservicedata?periode=' + encodedPeriode,
                            type: 'GET',
                            success: function(data) {
                                loading.style.display = 'none';
                                infobox.innerHTML = '';

                                const formatNumber = (number) => {
                                    return parseInt(number).toLocaleString('en-US');
                                };

                                var infoHtml = `
                <h4>Status Perbaikan</h4>
                                <div class="row clearfix">
                                    <div class="col-lg-3 col-md-3 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">
                                                    ${data.pending || 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-3 col-md-3 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">

                                                    ${data.indent || 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-3 col-md-3 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">
                                                   ${data.pengecekan|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-3 col-md-3 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">
                                                   ${data.konfirmasi || 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="col-lg-3 col-md-3 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">
                                                    ${data.hp_normal || 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="col-lg-3 col-md-3 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">
                                                    ${data.pending_perbaikan || 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-3 col-md-3 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">
                                                    ${data.proses_perbaikan|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-3 col-md-3 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">
                                                   ${data.selesai|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-3 col-md-3 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">
                                                   ${data.batal|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-3 col-md-3 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">
                                                   ${data.tidak_bisa_diperbaiki|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-3 col-md-3 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">
                                                   ${data.gagal_perbaikan|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-3 col-md-3 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">
                                                    ${data.tidak_deal|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>

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

                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="info-box-4 hover-zoom-effect">
                                            <div class="icon">
                                                <i class="material-icons col-green">monetization_on</i>
                                            </div>
                                            <div class="content">
                                                <div class="text">Paid</div>
                                                <div class="number">
                                                    ${data.lunas|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="info-box-4 hover-zoom-effect">
                                            <div class="icon">
                                                <i class="material-icons col-amber">monetization_on</i>
                                            </div>
                                            <div class="content">
                                                <div class="text">Unpaid</div>
                                                <div class="number">
                                                    ${data.belum_lunas|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="info-box-4 hover-zoom-effect">
                                            <div class="icon">
                                                <i class="material-icons col-orange">business_center</i>
                                            </div>
                                            <div class="content">
                                                <div class="text">Down Payment</div>
                                                <div class="number">
                                                   ${data.down_payment|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="info-box-4 hover-zoom-effect">
                                            <div class="icon">
                                                <i class="material-icons col-light-blue">money_off</i>
                                            </div>
                                            <div class="content">
                                                <div class="text">Refund</div>
                                                <div class="number">
                                                    ${data.refund|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="info-box-4 hover-zoom-effect">
                                            <div class="icon">
                                                <i class="material-icons col-indigo">money_off</i>
                                            </div>
                                            <div class="content">
                                                <div class="text">Refund DP</div>
                                                <div class="number">
                                                    ${data.refund_dp|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="info-box-4 hover-zoom-effect">
                                            <div class="icon">
                                                <i class="material-icons col-red">notifications_off</i>
                                            </div>
                                            <div class="content">
                                                <div class="text">Belum Ditanggapi</div>
                                                <div class="number">
                                                    ${data.belum_ditanggapi|| 0}
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                </div>
                                
                                    <h4>Omset</h4>
                                    <div class="row">

                                        <div class="row col-lg-12">

                                            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                                <div class="card">
                                                    <div class="header  text-center">
                                                        <div>
                                                            <h4><i class="material-icons col-green ">attach_money</i>Omset
                                                            </h4>
                                                        </div>
                                                    </div>
                                                    <div class="body text-center" style="">
                                                        <div style="margin-bottom:0px;margin-top:0">
                                                            <h4>Rp. ${data.omset|| 0}
                                                            </h4>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                                <div class="card">
                                                    <div class="header  text-center">
                                                        <div>
                                                            <h4><i class="material-icons col-amber ">attach_money</i>Omset
                                                                Cash
                                                            </h4>
                                                        </div>
                                                    </div>
                                                    <div class=" body text-center" style="padding-top:0">
                                                        <div style="margin-bottom:0px;margin-top:0">
                                                            <h4>Rp. ${data.cash|| 0}
                                                            </h4>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-md-4  col-sm-12 col-xs-12">
                                                <div class="card">
                                                    <div class="header  text-center">
                                                        <div>
                                                            <h4><i class="material-icons col-blue ">attach_money</i>Omset
                                                                Transfer
                                                            </h4>
                                                        </div>
                                                    </div>
                                                    <div class=" body text-center" style="padding-top:0">
                                                        <div style="margin-bottom:0px;margin-top:0">
                                                            <h4>Rp. ${data.transfer|| 0}
                                                            </h4>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <h4>Uang Muka Pelanggan</h4>
                                    <div class="row">
                                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                            <div class="card">
                                                <div class="header  text-center">
                                                    <div>
                                                        <h4><i class="material-icons col-green ">attach_money</i>Uang Muka
                                                        </h4>
                                                    </div>
                                                </div>
                                                <div class="body  text-center" style="padding-top:0">
                                                    <div style="margin-bottom:0px;margin-top:0">
                                                        <h4>Rp. ${data.dp_service|| 0}
                                                        </h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                            <div class="card">
                                                <div class="header  text-center">
                                                    <div>
                                                        <h4><i class="material-icons col-amber ">attach_money</i>Uang Muka
                                                            Cash
                                                        </h4>
                                                    </div>
                                                </div>
                                                <div class="body  text-center" style="padding-top:0">
                                                    <div style="margin-bottom:0px;margin-top:0">
                                                        <h4>Rp. ${data.dp_service_cash|| 0}
                                                        </h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                            <div class="card">
                                                <div class="header  text-center">
                                                    <div>
                                                        <h4><i class="material-icons col-blue ">attach_money</i>Uang Muka
                                                            Transfer
                                                        </h4>
                                                    </div>
                                                </div>
                                                <div class="body  text-center" style="padding-top:0">
                                                    <div style="margin-bottom:0px;margin-top:0">
                                                        <h4>Rp. ${data.dp_service_transfer|| 0}
                                                        </h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                    <h4>Uang Muka Total</h4>
                                    <div class="row">
                                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                            <div class="card">
                                                <div class="header  text-center">
                                                    <div>
                                                        <h4><i class="material-icons col-green ">attach_money</i>Uang Muka
                                                        </h4>
                                                    </div>
                                                </div>
                                                <div class="body  text-center" style="padding-top:0">
                                                    <div style="margin-bottom:0px;margin-top:0">
                                                        <h4>Rp. ${data.dp_total|| 0}
                                                        </h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                            <div class="card">
                                                <div class="header  text-center">
                                                    <div>
                                                        <h4><i class="material-icons col-amber ">attach_money</i>Uang Muka
                                                            Cash
                                                        </h4>
                                                    </div>
                                                </div>
                                                <div class="body  text-center" style="padding-top:0">
                                                    <div style="margin-bottom:0px;margin-top:0">
                                                        <h4>Rp. ${data.dp_total_cash|| 0}
                                                        </h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                            <div class="card">
                                                <div class="header  text-center">
                                                    <div>
                                                        <h4><i class="material-icons col-blue ">attach_money</i>Uang Muka
                                                            Transfer
                                                        </h4>
                                                    </div>
                                                </div>
                                                <div class="body  text-center" style="padding-top:0">
                                                    <div style="margin-bottom:0px;margin-top:0">
                                                        <h4>Rp.${data.dp_service_transfer|| 0}
                                                        </h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>

               
            `;

                                // Append the constructed HTML to the infobox
                                infobox.innerHTML = infoHtml;
                            },
                            error: function(xhr, status, error) {
                                loading.style.display = 'none';
                                console.error('Error fetching data:', error);
                            }
                        });
                    } else {
                        // Reset infobox
                        infobox.innerHTML = '';
                    }
                });
            });
        </script>
        <script>
            $(document).ready(function() {
                $(document).on('click', '.cancel-action', function(e) {
                    e.preventDefault(); // Mencegah aksi default dari tautan

                    var serviceid = $(this).data('servisid');
                    $('#editId').val(serviceid);
                });
            });
            $(document).ready(function() {

                $('.fill-table').click(function(e) {
                    e.preventDefault(); // Menghentikan aksi default dari link
                    $('#servicenota').empty();
                    // Mengambil data dari atribut data pada link
                    var grandTotal = $(this).data('grand-total');
                    var nama_pelanggan = $(this).data('nama_pelanggan');
                    var kelengkapan = $(this).data('kelengkapan');
                    var kelengkapan_unit = $(this).data('kelengkapan_unit');
                    var fungsi_tombol = $(this).data('fungsi_tombol');
                    var arus_charger = $(this).data('arus_charger');
                    var kondisi_layar = $(this).data('kondisi_layar');
                    var telp_pelanggan = $(this).data('telp_pelanggan');
                    var alamat_pelanggan = $(this).data('alamat_pelanggan');
                    var merk = $(this).data('merk');
                    var kerusakan = $(this).data('kerusakan');
                    var deskripsi = $(this).data('deskripsi');
                    var warna = $(this).data('warna');
                    var pola = $(this).data('pola');
                    var pin = $(this).data('pin');
                    var tipe = $(this).data('tipe');
                    var item = $(this).data('item');
                    var biaya = $(this).data('biaya');
                    var dp = $(this).data('dp');
                    var final = $(this).data('final');
                    var imei1 = $(this).data('imei1');
                    var imei2 = $(this).data('imei2');
                    var logo = $(this).data('logo');
                    var total_sparepart = $(this).data('total_sparepart');
                    var id = $(this).data('id');
                    var akhir_garansi_jasa = $(this).data('akhir_garansi_jasa');
                    var listSparepart = $(this).data('list-sparepart');
                    var listSparepartLuar = $(this).data('list-sparepart-luar');
                    var catatan_teknisi = $(this).data('catatan-teknisi');
                    var baseUrl = $('meta[name="base-url"]');


                    // Sparepart dalam
                    var items = listSparepart.split('.');

                    var itemList = [];

                    for (var i = 0; i < items.length; i++) {
                        var itemQtyPrice = items[i].trim().split(',');

                        if (itemQtyPrice.length === 6) {
                            var item = itemQtyPrice[0].trim();
                            var qty = itemQtyPrice[1].trim();
                            var price = itemQtyPrice[2].trim();
                            var garansi = itemQtyPrice[3].trim();
                            var diskon = itemQtyPrice[4].trim();
                            var totalSparepart = itemQtyPrice[5].trim();

                            itemList.push({
                                item: item,
                                qty: qty,
                                price: price,
                                garansi: garansi,
                                diskon: diskon,
                                totalSparepart: totalSparepart
                            });
                        }
                    }

                    // Sparepart luar
                    var itemsLuar = listSparepartLuar.split('.');

                    var itemListLuar = [];

                    for (var j = 0; j < itemsLuar.length; j++) { // Gunakan 'j' di sini, bukan 'i'
                        var dataSL = itemsLuar[j].trim().split(',');

                        console.log("data sl" + dataSL);

                        if (dataSL.length === 5) {
                            var nama_SL = dataSL[0].trim();
                            var jumlah_SL = dataSL[1].trim();
                            var hargaJual_SL = dataSL[2].trim();
                            var diskon_SL = dataSL[3].trim();
                            var total_SL = dataSL[4].trim();

                            itemListLuar.push({
                                nama: nama_SL,
                                jumlah: jumlah_SL,
                                harga: hargaJual_SL,
                                diskon: diskon_SL,
                                total: total_SL,
                            });
                        }
                    }
                    console.log("item list luar", itemListLuar);
                    // console.log(itemList);
                    // Mengisi tabel dengan data yang diambil
                    var info =
                        "<div class='modal-header bg-purple'>" +
                        "<h4 class='modal-title' id='largeModalLabel'>Detail Service </h4>" +
                        "</div>" +
                        " <div class='modal-body '>" +
                        "<div>" +
                        "<img style='width:150px;object-fit:cover;' src='" + logo + "'>" +
                        "</div>" +
                        "<h2>" + nama_pelanggan + "</h2>" +
                        " <div class='row'>" +
                        "<table class='font-12 col-sm-9 ' id='table-data'>" +
                        "<tbody>" +
                        "<tr> " +
                        "<td style='max-width:10px'><i class='material-icons'>phone</i></td> " +
                        "<td style='padding:10px ;max-width:300px'>" + telp_pelanggan + "</td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td style='max-width:10px'><i class='material-icons'>home</i></td>" +
                        "<td style='padding:10px ;max-width:300px'>" + alamat_pelanggan + "</td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td></td>" +
                        "<td class='font-bold font-18 font-underline' style='padding:10px;'>Handphone</td>" +
                        "<td class='font-bold font-18 font-underline' style='padding:10px;'>Catatan Teknisi</td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td style='max-width:10px'><i class='material-icons'>stay_primary_portrait</i></td>" +
                        "<td style='padding:10px ;max-width:300px'>" + merk + " " + tipe + " (" + imei1 +
                        " /" +
                        imei2 + ")" +
                        "</td>" +
                        "<td style='padding:10px ;max-width:300px'>" + catatan_teknisi + "</td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td style='max-width:10px'><i class='material-icons'>color_lens</i></td>" +
                        "<td style='padding:10px ;max-width:300px'>" + warna + "</td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td style='max-width:10px'><i class='material-icons'>business_center</i></td>" +
                        "<td style='padding:10px ;max-width:300px'>" + kelengkapan_unit + " (" + kelengkapan +
                        ") </td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td style='max-width:10px'><i class='material-icons'>build</i></td>" +
                        "<td style='padding:10px ;max-width:300px'>Fungsi Tombol : " + fungsi_tombol +
                        ", Arus Charger : " + arus_charger + " , Kondisi Layar : " + kondisi_layar + "  </td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td style='max-width:10px'><i class='material-icons'>lock</i></td>" +
                        "<td style='padding:10px ;max-width:300px'>" + pin + "</td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td style='max-width:10px'><i class='material-icons'>book</i></td>" +
                        "<td style='padding:10px ;max-width:300px'>" + deskripsi + "</td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td></td>" +
                        "<td class='font-bold font-18 font-underline' style='padding:10px ;max-width:300px'>Service</td>" +
                        " </tr>" +
                        "</tbody>" +
                        "</table>" +
                        "<div class='col-sm-3 bg-grey' style='border-radius:10px; width:200px;'>" +
                        "<h5 class='text-center'>Pola</h5>" +
                        pola +
                        "</div>" +
                        "</div>" +
                        "<table style='width: 100%'>" +
                        "<thead>" +
                        " <tr>" +
                        "<th style='border-bottom: 1px solid #dddddd;padding-bottom:20px'>Item</th>" +
                        "<th style='border-bottom: 1px solid #dddddd;padding-bottom:20px'>Akhir Garansi</th>" +
                        "<th style='border-bottom: 1px solid #dddddd;padding-bottom:20px'>Qty</th>" +
                        "<th class='text-center ' style='border-bottom: 1px solid #dddddd;padding-bottom:20px'>Harga</th>" +
                        "<th class='text-center ' style='border-bottom: 1px solid #dddddd;padding-bottom:20px'>Diskon</th>" +
                        " <th class='text-right' style='border-bottom: 1px solid #dddddd;padding-bottom:20px'>Biaya</th>" +
                        "</tr>" +
                        "</thead>" +
                        "<tbody>" +
                        "<tr>" +
                        "<td  style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" + "Service (" +
                        kerusakan + ")" +
                        "</td>" +
                        "<td style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                        akhir_garansi_jasa +
                        "</td>" +
                        "<td style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                        "</td>" +
                        "<td class=' text-center  font-bold' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                        "Rp. " +
                        biaya + "</td>" +
                        "<td style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                        "</td>" +
                        "<td class=' text-right font-bold' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                        "Rp. " +
                        biaya + "</td>" +
                        "</tr>";


                    // sparepart dalam
                    for (var i = 0; i < itemList.length; i++) {
                        var item = itemList[i].item;
                        var qty = itemList[i].qty;
                        var price = itemList[i].price;
                        var garansi = itemList[i].garansi;
                        var diskon = itemList[i].diskon;
                        var totalSparepart = itemList[i].totalSparepart;


                        info += "<tr>" +
                            "<td style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" + item +
                            "</td>" +
                            "<td class=' font-bold' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                            garansi + "</td>" +
                            "<td style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" + qty +
                            "</td>" +
                            "<td class=' text-center font-bold' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                            "Rp. " + price + "</td>" +
                            "<td class=' text-center font-bold' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                            diskon + "</td>" +
                            "<td class='text-right font-bold' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                            "Rp. " + totalSparepart + "</td>" +
                            "</tr>";
                    }
                    // sparepart luar
                    for (var i = 0; i < itemListLuar.length; i++) {
                        var nama_sl = itemListLuar[i].nama;
                        var jumlah_sl = itemListLuar[i].jumlah;
                        var harga_jual_sl = itemListLuar[i].harga;
                        var diskon_sl = itemListLuar[i].diskon;
                        var total_sl = itemListLuar[i].total;


                        info += "<tr>" +
                            "<td style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" + nama_sl +
                            "</td>" +
                            "<td class=' font-bold' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                            "-" + "</td>" +
                            "<td style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" + jumlah_sl +
                            "</td>" +
                            "<td class=' text-center font-bold' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                            "Rp. " + harga_jual_sl + "</td>" +
                            "<td class=' text-center font-bold' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                            diskon_sl + "</td>" +
                            "<td class='text-right font-bold' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                            "Rp. " + total_sl + "</td>" +
                            "</tr>";
                    }


                    info +=

                        "<tr>" +
                        "<td style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "</td>" +
                        "<td style='border-bottom: 2px solid #dddddd;padding-top:20px;;'>" +
                        "</td>" +
                        "<td  style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "</td>" +
                        "<td  style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "</td>" +
                        "<td  style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "</td>" +
                        "<td class='text-right font-bold' style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "TOTAL SPAREPART Rp. " +
                        total_sparepart + "</td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "</td>" +
                        "<td style='border-bottom: 2px solid #dddddd;padding-top:20px;;'>" +
                        "</td>" +
                        "<td  style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "</td>" +
                        "<td  style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "</td>" +
                        "<td  style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "</td>" +
                        "<td class='text-right font-bold' style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "TOTAL Rp. " +
                        grandTotal + "</td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td class='col-teal'  style='border-bottom: 1px dotted #dddddd;padding-top:40px;'>" +
                        "Uang Muka" +
                        "</td>" +
                        "<td class='text-right font-bold col-teal' style='border-bottom: 1px dotted #dddddd;padding-top:40px;'>" +
                        "</td>" +
                        "<td class='text-right font-bold col-teal' style='border-bottom: 1px dotted #dddddd;padding-top:40px;'>" +
                        "</td>" +
                        "<td class='text-right font-bold col-teal' style='border-bottom: 1px dotted #dddddd;padding-top:40px;'>" +
                        "</td>" +
                        "<td class='text-right font-bold col-teal' style='border-bottom: 1px dotted #dddddd;padding-top:40px;'>" +
                        "</td>" +
                        "<td class='text-right font-bold col-teal' style='border-bottom: 1px dotted #dddddd;padding-top:40px;'>" +
                        "Rp. " +
                        dp + "</td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td class='text-right font-bold col-teal' style='border-bottom:2px solid #dddddd;padding-top:40px;'>" +
                        "</td>" +
                        "<td class='text-right font-bold col-teal' style='border-bottom: 2px solid #dddddd;padding-top:40px;'>" +
                        "</td>" +
                        "<td class='text-right font-bold col-teal' style='border-bottom: 2px solid #dddddd;padding-top:40px;'>" +
                        "</td>" +
                        "<td class='text-right font-bold col-teal' style='border-bottom: 2px solid #dddddd;padding-top:40px;'>" +
                        "</td>" +
                        "<td   style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "</td>" +
                        "<td class='text-right font-bold col-teal' style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "TOTAL BAYAR Rp. " +
                        final + "</td>" +
                        "</tr>" +
                        "</tbody>" +
                        "</table>" +
                        " </div>" +
                        " <div class='modal-footer'>" +
                        "<a  href='" + "service/nota/" + id + "'" +
                        "class='btn btn-success'><i class='material-icons'>print</i> <span class='icon-name'>Kirim Nota</span></a>" +
                        "<a  target='_blank'href='" + "service/rincian/nota/" + id + "'" +
                        "class='btn btn-warning'><i class='material-icons'>print</i> <span class='icon-name'>Cetak</span></a>" +
                        " <button type='button' class='btn btn-link waves-effect' data-dismiss='modal'>TUTUP</button>" +
                        " </div>";

                    $('.modal-content').append(info);
                });
            });
        </script>
    @endpush
@endsection