@extends('layouts.app', ['title' => 'Transaksi Penjualan'])

@section('content')
    @push('styles')
        <!-- JQuery DataTable Css -->
        <link href="{{ url('material') }}/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css"
            rel="stylesheet">
        <!-- JQuery DataTable Css -->
    @endpush
    @push('scripts')
        {{-- data Table --}}
        <script src="{{ url('material') }}/js/pages/tables/jquery-datatable.js"></script>
        <script src="{{ url('material') }}/plugins/jquery-datatable/jquery.dataTables.js"></script>
        <script src="{{ url('material') }}/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
        {{-- data Table --}}
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                const select_infobox = document.getElementById('select_infobox');
                const infobox = document.getElementById('infobox');

                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';
                    }
                });
            });
        </script>
    @endpush

    <style>
        #infobox {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
    </style>
    <div class="container-fluid">
        <div class="block-header">
            <h2>Transaksi Penjualan</h2>
        </div>

        <div class="row clearfix">
            <!-- Task Info -->
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="card">

                    <div class="body">
                        @include('layouts.includes.filter')
                        <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>
                                            <h2><i class="material-icons col-lime ">shopping_cart</i>Total
                                                Order</h2>
                                        </div>
                                    </div>
                                    <div class="body  text-center" style="padding-top:0">
                                        <div style="margin-bottom:0px;margin-top:0">
                                            <h2>{{ $jumlah_penjualan }}</h2>
                                        </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>
                                            <h2><i class="material-icons col-blue ">add_shopping_cart</i>Total Barang
                                                Terjual
                                            </h2>
                                        </div>
                                    </div>
                                    <div class="body  text-center" style="padding-top:0">
                                        <div style="margin-bottom:0px;margin-top:0">
                                            <h2>{{ $barang_terjual }}</h2>
                                        </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>
                                            <h2><i class="material-icons col-red ">money_off</i>
                                                Retur Penjualan</h2>
                                        </div>
                                    </div>
                                    <div class="body  text-center" style="padding-top:0">
                                        <div style="margin-bottom:0px;margin-top:0">
                                            <h2>{{ $jumlah_retur_penjualan }}</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        @if (\Helper::hakAkses('dashboard_admin', 'view'))
                            <div class="row">
                                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                    <div class="card">
                                        <div class="header  text-center">
                                            <div>
                                                <h3><i class="material-icons col-green ">attach_money</i>Omset
                                                </h3>
                                            </div>
                                        </div>
                                        <div class="body  text-center" style="padding-top:0">
                                            <div style="margin-bottom:0px;margin-top:0">
                                                <h3>Rp. {{ number_format($omset) }}</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                    <div class="card">
                                        <div class="header  text-center">
                                            <div>
                                                <h3><i class="material-icons col-amber ">attach_money</i>Omset Cash
                                                </h3>
                                            </div>
                                        </div>
                                        <div class="body  text-center" style="padding-top:0">
                                            <div style="margin-bottom:0px;margin-top:0">
                                                <h3>Rp. {{ number_format($omset_cash) }}</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                    <div class="card">
                                        <div class="header  text-center">
                                            <div>
                                                <h3><i class="material-icons col-blue ">attach_money</i>Omset Transfer
                                                </h3>
                                            </div>
                                        </div>
                                        <div class="body  text-center" style="padding-top:0">
                                            <div style="margin-bottom:0px;margin-top:0">
                                                <h3> Rp. {{ number_format($omset_transfer) }}</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                    <div class="card">
                                        <div class="header  text-center">
                                            <div>
                                                <h3><i class="material-icons col-blue ">attach_money</i>Omset Credit
                                                </h3>
                                            </div>
                                        </div>
                                        <div class="body  text-center" style="padding-top:0">
                                            <div style="margin-bottom:0px;margin-top:0">
                                                <h3> Rp. {{ number_format($omset_kredit) }}</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        @endif
                        <div id="infobox">
                            @if (\Helper::hakAkses('dashboard_admin', 'view'))
                                <div class="row">
                                    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                        <div class="card">
                                            <div class="header  text-center">
                                                <div>
                                                    <h3><i class="material-icons col-green ">attach_money</i>Uang Muka
                                                    </h3>
                                                </div>
                                            </div>
                                            <div class="body  text-center" style="padding-top:0">
                                                <div style="margin-bottom:0px;margin-top:0">
                                                    <h3>Rp. {{ number_format($dp) }}</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                        <div class="card">
                                            <div class="header  text-center">
                                                <div>
                                                    <h3><i class="material-icons col-amber ">attach_money</i> Uang Muka Cash
                                                    </h3>
                                                </div>
                                            </div>
                                            <div class="body  text-center" style="padding-top:0">
                                                <div style="margin-bottom:0px;margin-top:0">
                                                    <h3>Rp. {{ number_format($dp_cash) }}</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                        <div class="card">
                                            <div class="header  text-center">
                                                <div>
                                                    <h3><i class="material-icons col-blue ">attach_money</i>Uang Muka
                                                        Transfer
                                                    </h3>
                                                </div>
                                            </div>
                                            <div class="body  text-center" style="padding-top:0">
                                                <div style="margin-bottom:0px;margin-top:0">
                                                    <h3> Rp. {{ number_format($dp_transfer) }}</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                        <div class="card">
                                            <div class="header  text-center">
                                                <div>
                                                    <h3><i class="material-icons col-blue ">attach_money</i>Uang Muka Kredit
                                                    </h3>
                                                </div>
                                            </div>
                                            <div class="body  text-center" style="padding-top:0">
                                                <div style="margin-bottom:0px;margin-top:0">
                                                    <h3> Rp. {{ number_format($dp_kredit) }}</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            @endif
                            @if (\Helper::hakAkses('dashboard_admin', 'view'))
                                <div class="row">
                                    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                        <div class="card">
                                            <div class="header  text-center">
                                                <div>
                                                    <h3><i class="material-icons col-green ">attach_money</i>Total Uang Muka
                                                    </h3>
                                                </div>
                                            </div>
                                            <div class="body  text-center" style="padding-top:0">
                                                <div style="margin-bottom:0px;margin-top:0">
                                                    <h3>Rp. {{ number_format($total_dp) }}</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                        <div class="card">
                                            <div class="header  text-center">
                                                <div>
                                                    <h3><i class="material-icons col-amber ">attach_money</i>Total Uang
                                                        Muka
                                                        Cash
                                                    </h3>
                                                </div>
                                            </div>
                                            <div class="body  text-center" style="padding-top:0">
                                                <div style="margin-bottom:0px;margin-top:0">
                                                    <h3>Rp. {{ number_format($total_dp_cash) }}</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                        <div class="card">
                                            <div class="header  text-center">
                                                <div>
                                                    <h3><i class="material-icons col-blue ">attach_money</i>Total Uang Muka
                                                        Transfer
                                                    </h3>
                                                </div>
                                            </div>
                                            <div class="body  text-center" style="padding-top:0">
                                                <div style="margin-bottom:0px;margin-top:0">
                                                    <h3> Rp. {{ number_format($total_dp_transfer) }}</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                        <div class="card">
                                            <div class="header  text-center">
                                                <div>
                                                    <h3><i class="material-icons col-blue ">attach_money</i>Total Uang Muka
                                                        Kredit
                                                    </h3>
                                                </div>
                                            </div>
                                            <div class="body  text-center" style="padding-top:0">
                                                <div style="margin-bottom:0px;margin-top:0">
                                                    <h3> Rp. {{ number_format($total_dp_kredit) }}</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            @endif
                        </div>
                        <div class="m-b-20">
                            <select id="select_infobox">
                                <option value="0">Sembunyikan Informasi</option>
                                <option value="1">Tampilkan Informasi </option>
                            </select>
                        </div>
                        <div class="m-b-20">
                            @if (\Helper::hakAkses('penjualan', 'create'))
                                <a href="{{ route('penjualan.create') }}" class="btn btn-primary">Tambah Penjualan</a>
                            @endif
                        </div>
                        @if (\Helper::hakAkses('penjualan', 'cetak'))
                            <div class=" row ">
                                <div class="col-md-2">
                                    <div class=" row">
                                        <div class="col-md-6">

                                            <form action="{{ route('penjualan.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" class="form-control" name="periode" id="daterange"
                                                        value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif">
                                                    <input type="hidden" class="form-control" name="pengguna_id"
                                                        value="{{ $request->pengguna_id }}">
                                                    <input type="hidden" class="form-control" 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</span>
                                                    </button>

                                                </div>

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

                                            <form action="{{ route('penjualan.cetak') }}" target="_blank" class="">
                                                <div class="">
                                                    <input type="hidden" class="form-control" name="periode" id="daterange"
                                                        value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif">
                                                    <input type="hidden" class="form-control" name="pengguna_id"
                                                        value="{{ $request->pengguna_id }}">
                                                    <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>
                                    </div>
                                </div>

                            </div>
                        @endif
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Tanggal</th>
                                        <th>No.Penjualan</th>
                                        <th>Nama Pelanggan</th>
                                        <th>List Barang</th>
                                        <th>Status Garansi</th>
                                        <th>Total Harga</th>
                                        <th>Metode Bayar</th>
                                        <th>Status Pembayaran</th>

                                        <th>Sales</th>
                                        <th>Kasir</th>
                                        @if (\Helper::hakAkses('penjualan', 'edit'))
                                            <th>Action</th>
                                        @endif
                                        <th style="min-width: 150px!important;">Tools</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($datas as $key => $data)
                                        @php
                                            $list = '';
                                        @endphp
                                        @foreach ($data->detail_penjualan 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->harga_item .
                                                    ',' .
                                                    $detail->qty .
                                                    ',' .
                                                    $persentase_diskon .
                                                    ',' .
                                                    $detail->total .
                                                    ',' .
                                                    $formatted_date .
                                                    '.';

                                            @endphp
                                        @endforeach
                                        <tr>

                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $data->tanggal_penjualan }}</td>
                                            <td>{{ $data->nomor_nota }}</td>

                                            <td>
                                                <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 }}"
                                                    data-logo="{{ asset('images/Logo/' . $profil->photo) }}"
                                                    data-id="{{ $data->id }}"
                                                    data-telp_pelanggan="{{ $data->pelanggan->telp_pelanggan }}"
                                                    data-kecamatan_pelanggan="{{ $data->pelanggan->kecamatan_pelanggan }}"
                                                    data-status_transaksi="{{ $data->status_pembayaran }}"
                                                    data-metode_bayar="{{ $data->metode_bayar }}"
                                                    data-alamat_pelanggan="{{ $data->pelanggan->alamat_pelanggan }}"
                                                    data-list="{{ $list }}" data-total="{{ number_format($data->total) }}"
                                                    data-uang_bayar="{{ number_format($data->uang_bayar) }}"
                                                    data-uang_kembali="{{ number_format($data->uang_bayar - $data->total) }}"
                                                    @if (isset($infobox['profil']->photo))
                                                    data-logo="{{ asset('images/Logo/' . $infobox['profil']->photo) }}" @endif
                                                    data-id="{{ $data->id }}">
                                                    {{ $data->pelanggan->nama_pelanggan }}
                                                </a>
                                                <br>({{ $data->pelanggan->telp_pelanggan }})
                                                @if ($data->status_pesan == 0)
                                                    <br><span class="label label-danger">Belum dikirim nota</span>
                                                @endif
                                            </td>

                                            <td style="max-width: 300px;">
                                                @foreach ($data->detail_penjualan as $detail)
                                                    {!! $detail->nama_item . ',' . '<br>' !!}
                                                @endforeach
                                            </td>

                                            <td>
                                                @foreach ($data->detail_penjualan as $detail)
                                                    @if ($detail->akhir_garansi >= now())
                                                        <span class="label bg-green">aktif</span><br>
                                                    @else
                                                        <span class="label bg-orange">kedaluwarsa</span><br>
                                                    @endif
                                                @endforeach
                                            </td>



                                            <td>Rp. {{ number_format($data->total) }}</td>
                                            <td>
                                                @if ($data->metode_bayar == 'kredit')
                                                    <span class="label bg-orange">{{ $data->metode_bayar }}</span>
                                                @elseif($data->metode_bayar == 'transfer')
                                                    <span class="label bg-blue">{{ $data->metode_bayar }}</span>
                                                @else
                                                    <span class="label bg-green">{{ $data->metode_bayar }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if ($data->status_pembayaran == 'lunas')
                                                    <span class="label bg-green">{{ $data->status_pembayaran }}</span>
                                                @elseif($data->status_pembayaran == 'belum lunas')
                                                    <span class="label bg-orange">{{ $data->status_pembayaran }}</span>
                                                    <br>
                                                    @if ($data->status == 'indent')
                                                        <span class="label bg-blue">{{ $data->status }}</span>
                                                    @endif
                                                @elseif($data->status_pembayaran == 'Garansi')
                                                    <span class="label bg-blue">{{ $data->status_pembayaran }}</span>
                                                @elseif($data->status_pembayaran == 'refund')
                                                    <span class="label bg-light-blue">{{ $data->status_pembayaran }}</span>
                                                @endif
                                            </td>

                                            <td>
                                                {{ optional($data->sales)->nama_pengguna }}
                                            </td>
                                            <td>
                                                {{ $data->pengguna ? $data->pengguna->nama_pengguna : '-' }}
                                            </td>
                                            @if (\Helper::hakAkses('penjualan', 'edit'))
                                                <td>
                                                    <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">

                                                            <li><a href="{{ route('pesanWellcomePenjualan', $data->id) }}">Kirim
                                                                    Nota</a></li>


                                                            @if ($data->status_transaksi != 'cancel')
                                                                <li role="separator" class="divider"></li>
                                                                <li><a
                                                                        href="{{ route('service.proses', $data->id) }}?status=cancel">Cancel</a>
                                                                </li>
                                                            @endif
                                                            <li role="separator" class="divider"></li>
                                                            @if ($data->status_pembayaran == 'belum lunas')
                                                                <li><a
                                                                        href="{{ route('pembayaran_piutang.edit', $data->id) }}">Bayar</a>
                                                                </li>
                                                            @endif
                                                            <li><a
                                                                    href="{{ route('refund_penjualan.edit', $data->id) }}?status=refund">Refund</a>
                                                            </li>
                                                            <li><a href="{{ route('pesan_penjualan.edit', $data->id) }}">Kirim
                                                                    Pesan</a>
                                                            </li>
                                                            <!--                                                             <li><a href="javascript:void(0);">Batal</a></li> -->
                                                        </ul>
                                                    </div>
                                                </td>
                                            @endif
                                            <td>

                                                <div style="display: flex; gap: 6px;">
                                                    <a href="https://wa.me/{{ '628' . substr($data->pelanggan->telp_pelanggan, 2) }}"
                                                        target="blank_" class="btn btn-success waves-effect"><i
                                                            class="material-icons">chat</i></a>
                                                    @if (\Helper::hakAkses('penjualan', 'edit'))
                                                        <a href="{{ route('garansi_penjualan.create', [($id = $data->id)]) }}"
                                                            class="btn btn-info  waves-effect"><i
                                                                class="material-icons">verified_user</i>
                                                        </a>
                                                        <a href="{{ route('penjualan.edit', [($id = $data->id)]) }}"
                                                            class="btn btn-primary"><i class="material-icons">create</i></a>
                                                    @endif
                                                    @if (\Helper::hakAkses('penjualan', 'delete'))
                                                        <form action="{{ route('penjualan.destroy', $data->id) }}" method="POST"
                                                            style="display:inline">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-danger" id="hapus-button"><i
                                                                    class="material-icons">delete</i></button>
                                                        </form>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>

                            </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">
                <div class='modal-header bg-purple'>
                    <h4 class='modal-title' id='largeModalLabel'> Detail Penjualan </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'>place</i></td>
                                    <td style='padding:10px ;max-width:300px'>kecamatan_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;'>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                        <div class='col-sm-3 ' style=' width:200px;'>

                            <div
                                style="background-color:#efefef ;text-align:center;border-radius:10px;border:solid 2px #777777;padding-top: 20px;padding-bottom:20px;">

                                <h1 style="color: #777777;font-size:16px;margin:0px;">status_transaksi</h1>
                            </div>


                        </div>

                    </div>
                    <table style='width: 100%'>
                        <thead>
                            <tr>
                                <th style='border-bottom: 1px solid #dddddd;padding-bottom:10px'>Item</th>
                                <th style='border-bottom: 1px solid #dddddd;padding-bottom:10px'>Qty</th>
                                <th class='text-right' style='border-bottom: 1px solid #dddddd;padding-bottom:20px'>Total
                                </th>
                            </tr>
                        </thead>
                        <tbody>

                            <tr>
                                <td style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>item
                                <td style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>
                                    2
                                </td>
                                <td class='text-right font-bold'
                                    style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>
                                    Rp. totalSparepart</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 class='text-right font-bold' style='border-bottom: 2px solid #dddddd;padding-top:20px;'>
                                    TOTAL Rp. grandTotal</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 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>






            </div>
        </div>
    </div>
    {{-- Modal --}}
    @push('scripts')
        <script>
            $(document).ready(function () {
                $('.fill-table').click(function (e) {
                    e.preventDefault(); // Menghentikan aksi default dari link
                    $('.modal-content').empty();
                    // Mengambil data dari atribut data pada link
                    var nama_pelanggan = $(this).data('nama_pelanggan');
                    var telp_pelanggan = $(this).data('telp_pelanggan');
                    var alamat_pelanggan = $(this).data('alamat_pelanggan');
                    var kecamatan_pelanggan = $(this).data('kecamatan_pelanggan');
                    var logo = $(this).data('logo');
                    var uang_bayar = $(this).data('uang_bayar');
                    var uang_kembali = $(this).data('uang_kembali');
                    var id = $(this).data('id');
                    var total = $(this).data('total');
                    var metode_bayar = $(this).data('metode_bayar');
                    var status_transaksi = $(this).data('status_transaksi');

                    var list = $(this).data('list');


                    var items = list.split('.');
                    console.log(items);

                    var itemList = [];

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

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

                            itemList.push({
                                item: item,
                                price: price,
                                qty: qty,
                                diskon: diskon,
                                total: total,
                                garansi: garansi
                            });
                        }
                    }
                    var info =
                        "<div class='modal-header bg-purple'>" +
                        "<h4 class='modal-title' id='largeModalLabel'> Penjualan Detail </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'>place</i></td>" +
                        "<td style='padding:10px ;max-width:300px'>" + kecamatan_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 style='max-width:10px'><i class='material-icons'>attach_money</i></td>" +
                        "<td style='padding:10px ;max-width:300px'>" + metode_bayar + "</td>" +
                        "</tr>" +
                        "<tr>" +
                        "<td></td>" +
                        "<td class='font-bold font-18 font-underline' style='padding:10px;'>" +
                        "</td>" +
                        "</tr>" +
                        "</tbody>" +
                        "</table>" +
                        "<div class='col-sm-3 ' style=' width:200px;'>" +
                        "<div style='background-color:#efefef ;text-align:center;border-radius:10px;border:solid 2px #777777;padding-top: 20px;padding-bottom:20px;'>" +
                        "<h1 style='color: #777777;font-size:16px;margin:0px;'>" + status_transaksi + "</h1>" +
                        "</div>" +
                        "</div>" +
                        "</div>" +
                        "<table style='width: 100%'>" +
                        "<thead>" +
                        "<tr>" +
                        "<th style='border-bottom: 1px solid #dddddd;padding-bottom:10px'>Item</th>" +
                        "<th class='text-center'style='border-bottom: 1px solid #dddddd;padding-bottom:10px'>Harga</th>" +
                        "<th  class='text-right' style='border-bottom: 1px solid #dddddd;padding-bottom:10px;padding-left:10px; padding-right:10px;'>Qty</th>" +
                        "<th  class='text-center' style='border-bottom: 1px solid #dddddd;padding-bottom:10px'>Diskon</th>" +
                        "<th  class='text-center'  style='border-bottom: 1px solid #dddddd;padding-bottom:10px;padding-left:10px; padding-right:10px; '>Akhir Garansi</th>" +
                        "<th class='text-right' style='border-bottom: 1px solid #dddddd;padding-bottom:20px'>Total</th>" +
                        "</tr>" +
                        "</thead>" +
                        "<tbody>";

                    for (var i = 0; i < itemList.length; i++) {
                        var item = itemList[i].item;
                        var price = itemList[i].price;
                        var qty = itemList[i].qty;
                        var diskon = itemList[i].diskon;
                        var total_item = itemList[i].total;
                        var garansi = itemList[i].garansi;

                        info += "<tr>" +
                            "<td style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" + item +
                            "</td>" +
                            "<td class='text-center' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                            price +
                            "</td>" +
                            "<td  class='text-right' style='border-bottom: 1px dotted #dddddd;padding-top:20px;padding-left:10px; padding-right:10px;'>" +
                            qty + "</td>" +
                            "<td class='text-center' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                            diskon +
                            "</td>" +
                            "<td class='text-center'  font-bold' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                            garansi + "</td>" +
                            "<td class='text-right font-bold' style='border-bottom: 1px dotted #dddddd;padding-top:20px;'>" +
                            "Rp. " + total_item + "</td>" +
                            "</tr>";
                    }


                    info += "<tr>" +
                        "<td style='border-bottom: 2px solid #dddddd;padding-top:50px;'></td>" +
                        "<td style='border-bottom: 2px solid #dddddd;padding-top:50px;'></td>" +
                        "<td style='border-bottom: 2px solid #dddddd;padding-top:50px;'></td>" +
                        "<td style='border-bottom: 2px solid #dddddd;padding-top:50px;'></td>" +
                        "<td style='border-bottom: 2px solid #dddddd;padding-top:50px;'></td>" +
                        "<td class='text-right font-bold' style='border-bottom: 2px solid #dddddd;padding-top:50px;'>" +
                        "TOTAL Rp. " + total + "</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 col-teal' style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "UANG BAYAR Rp." + uang_bayar + "</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 col-teal' style='border-bottom: 2px solid #dddddd;padding-top:20px;'>" +
                        "UANG KEMBALI Rp." + uang_kembali + "</td>" +
                        "</tr>" +
                        "</tbody>" +
                        "</table>" +
                        "</div>" +
                        "<div class='modal-footer'>" +
                        "<a href='penjualan/kirim/nota/" + id +
                        "' class='btn btn-success'><i class='material-icons'>print</i> <span class='icon-name'>Kirim Nota</span></a>" +
                        "<a target='_blank' href='penjualan/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