@push('scripts')
    <!-- Input Mask Plugin Js -->
    <script src="https://unpkg.com/autonumeric"></script>
    @include('penjualan.script');
    <script>
        $(document).ready(function() {
            $(document).on('keyup', '.bs-searchbox input', function(e) {
                var searchData = e.target.value;


                $.ajax({
                    type: 'GET',
                    url: 'https://alamat.thecloudalert.com/api/cari/index/?keyword=' + searchData,
                    success: function(data) {
                        // $('.kecamatan-wrapper select #kecamatan_pelanggan').empty();
                        var uniqueKecamatan = [];
                        var uniqueKabkota = [];
                        var uniqueProvinsi = [];

                        for (var i = 0; i < data.result.length; i++) {
                            var kecamatan = data.result[i].kecamatan;
                            var kabkota = data.result[i].kabkota;
                            var provinsi = data.result[i].provinsi;


                            if (uniqueKecamatan.indexOf(kecamatan) === -1) {
                                uniqueKecamatan.push(kecamatan);
                                uniqueProvinsi.push(provinsi);
                                uniqueKabkota.push(kabkota);

                            }
                        }

                        $('#kecamatan_pelanggan').empty();
                        for (var j = 0; j < uniqueKecamatan.length; j++) {
                            $('#kecamatan_pelanggan').append('<option value="' +
                                uniqueKecamatan[
                                    j] + '">' + uniqueProvinsi[j] + ' , ' + uniqueKabkota[
                                    j] + ' , ' + uniqueKecamatan[j] + '</option>');
                        }

                        $('#kecamatan_pelanggan').selectpicker('refresh');


                    },
                    error: function(error) {

                        console.log(error);
                    }
                });
            });

        });
    </script>
@endpush

@push('styles')
    <style>
        .image-upload {
            width: 200px;
            height: 200px;
            background-color: gainsboro;
            display: block;
            margin: auto;
            background-size: contain;
        }

        .image-upload>input {
            display: none;
        }

        .pilih-bentuk svg {
            width: 100px;
            height: 100px;
            display: block;
            margin: auto;
        }

        .pilih-bentuk i {
            font-size: 100px;
            color: grey;
            position: absolute;
            left: 0%;
            top: 0%;
            right: 0%;
            bottom: 0%;
        }

        .qty {
            width: 55px;
        }

        .show {
            display: block;
        }

        .hide {
            display: none;
        }
    </style>
@endpush

<div class="row clearfix">
    <!-- Task Info -->
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="card">
            <div class="header">
                <a href="{{ route('penjualan.index') }}" class="btn btn-warning">Kembali</a>
            </div>
            <div class="body">

                <div class="row">
                    <div class="col-md-3">
                        <b>Invoice</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line focused">
                                <input type="text" class="form-control" name="no_penjualan"
                                    @if (isset($data)) value="{{ $data->no_service }}" @else value="{{ 'P-' . date('his') }}" @endif
                                    required>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <b>Tanggal</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line focused">
                                <input type="text" class="form-control" name="tanggal" value="{{ date('Y-m-d') }}"
                                    required>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <b>Kasir</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line focused">
                                <select name="pengguna_id" class="form-control">
                                    @foreach ($pengguna as $p)
                                        <option value="{{ $p->id }}"
                                            @if (isset($datas)) @if ($datas->pengguna_id == $p->id) selected @endif
                                            @endif> {{ $p->nama_pengguna }} </option>
                                    @endforeach
                                </select>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <b>Sales</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line focused">
                                <select name="sale_id" class="form-control">

                                    @foreach ($pengguna as $p)
                                        <option value="{{ $p->id }}"
                                            @if (isset($datas)) @if ($datas->sale_id == $p->id) selected @endif
                                            @endif> {{ $p->nama_pengguna }} </option>
                                    @endforeach
                                </select>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <b>Toko</b>
                        <div class="form-group">
                            <div class="form-line">
                                <select class="form-control"
                                    name="toko_id" required id="toko_id">
                                    @foreach ($tokos as $toko)
                                        <option value="{{ $toko->id }}"
                                            @if (isset($datas)) @if ($toko->id == @$datas->tokos->first()->id ?? 0) selected @endif
                                            @endif>{{ $toko->nama_toko }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

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



<div class="row clearfix">
    <div class="col-md-12">
        <div class="card">
            <div class="header">
                <h2>
                    Pelanggan
                </h2>

            </div>
            <div class="body">
                <h2 class="card-inside-title">Pelanggan</h2>

                <div class="row clearfix">
                    <div class="col-sm-12 col-md-12">
                        {{-- <div class="form-group">
                                <div class="form-line">
                                    <select class="form-control" name="metode_bayar" onchange="ubahPilihan()"
                                        id="pilihan">
                                        <option value="" selected disabled hidden>-pilih Pelanggan-
                                        </option>
                                        <option value="umum">Pelanggan Umum</option>
                                        <option value="daftar">Pelanggan Daftar</option>

                                    </select>
                                </div>
                            </div> --}}

                        <div class="form-group">
                            <div class="form-line">
                                <input type="text" name="nama" id="nama_pelanggan" class="form-control"
                                    placeholder="Nama" required value="{{ old('nama',@$datas->pelanggan->nama_pelanggan) }}">
                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="form-line">
                                <label for="kecamatan_pelanggan">Kecamatan Pelanggan</label>
                                <select class="form-control" id="kecamatan_pelanggan" name="kecamatan_pelanggan"
                                    class="selectpicker" data-live-search="true" required>
                                    <option value="">Masukan Kecamatan</option>
                                    @if (isset($datas))
                                        <option value="{{ $datas->pelanggan->kecamatan_pelanggan }}"selected>
                                            {{ $datas->pelanggan->kecamatan_pelanggan }}</option>
                                    @endif

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

                        <div class="form-group">
                            <div class="form-line">
                                <label for="alamat_pelanggan">Alamat Pelanggan</label>
                                <input type="text" name="alamat" id="alamat_pelanggan" class="form-control"
                                    placeholder="Alamat" required value="{{ old('alamat',@$datas->pelanggan->alamat_pelanggan) }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-line">
                                <label for="kontak">Kontak Pelanggan</label>
                                <input type="text" name="kontak" id="kontak" class="form-control"
                                    placeholder="Kontak" required value="{{ old('kontak',@$datas->pelanggan->telp_pelanggan) }}">
                            </div>
                        </div>
                        <h2 class="card-inside-title">Metode Pembayaran</h2>
                        <div class="form-group">
                            <div class="form-line">
                                <select class="form-control" id="metode_bayar" name="metode_bayar"required>
                                    <option value="" selected disabled hidden>-pilih metode pembayaran-
                                    </option>
                                    <option
                                        @if (isset($datas)) @if ($datas->metode_bayar == 'cash') selected @endif
                                        @endif value="cash">Cash</option>
                                    <option
                                        @if (isset($datas)) @if ($datas->metode_bayar == 'transfer') selected @endif
                                        @endif value="transfer">Transfer</option>
                                    <option id="kredit"
                                        @if (isset($datas)) @if ($datas->metode_bayar == 'kredit') selected @endif
                                        @endif value="kredit">Kredit</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group hide" id="bukti_transfer_row">
                            <h2 class="card-inside-title">Bukti Transfer</h2>
                            <div class="form-line">
                                <input type="file" accept="image/*,application/pdf" id="bukti_transfer" name="bukti_transfer">
                            </div>
                        </div>
                        <h2 class="card-inside-title">Status Barang</h2>
                        <div class="form-group">
                            <div class="form-line">
                                <select class="form-control" id="status" name="status"required>

                                    <option
                                        @if (isset($datas)) @if ($datas->status == 'tersedia') selected @endif
                                        @endif value="tersedia">Tersedia</option>
                                    <option
                                        @if (isset($datas)) @if ($datas->status == 'indent') selected @endif
                                        @endif value="indent">Indent</option>

                                </select>
                            </div>
                        </div>
                        <h2 class="card-inside-title">Uang Bayar</h2>
                        <div class="form-group">
                            <div class="form-line">
                                <input type="number" id="uang_bayar" name="uang_bayar" required
                                    class="form-control" placeholder="Uang Bayar" step="500" value='{{ old('uang_bayar',@$datas->uang_bayar) }}'>
                            </div>
                        </div>
                        <h2 class="card-inside-title">Uang Kembalian</h2>
                        <div class="form-group">
                            <div class="form-line">
                                <input type="text" id="kembali" name="kembali" readonly value="0"
                                    class="form-control" placeholder="Kembali" step="500">
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">Simpan</button>
                        </div>
                        <i>*Pilih barang terlebih dahulu sebelum simpan!</i>
                    </div>
                </div>

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



@if (isset($datas->bukti_transfer))
    <div class="col-md-6 col-sm-12">
        <div class="card">
            <div class="header">
                <h2>Bukti Transfer</h2>
            </div>
            <div class="body">
                <a href="{{ asset('images/Bukti_transfer/' . $datas->bukti_transfer) }}"target="blank_"><img
                        style="width:400px;height:400px;object-fit:cover;"
                        src="{{ asset('images/Bukti_transfer/' . $datas->bukti_transfer) }}" alt=""></a>
            </div>
        </div>
    </div>
@endif

<div class="row clearfix">
    <!-- Task Info -->
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="card">
            <div class="header">
                <h2>Data Barang</h2>
                <button type="button" id="table-sparepart-list" class="btn btn-primary" data-toggle="modal"
                    data-target="#list-sparepart">Pilih Barang</button>
            </div>
            <div class="body">
                <div class="table-responsive">
                    <table id="table-detail-item" class="table table-hover ">
                        <thead>
                            <tr>
                                <th>Nama Barang</th>
                                <th>Diskon</th>
                                <th>Jumlah</th>
                                <th>Harga Jual</th>
                                <th>Subtotal</th>
                                <th>Tools</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($datas->detail_penjualan))
                                @foreach ($datas->detail_penjualan as $d)
                                    <tr>
                                        <td>{{ $d->nama_item }}</td>
                                        <td>
                                            <input class="item-diskon" name="diskon[]" value="{{ $d->diskon }}"
                                                step="500" min="0" type="number">
                                        </td>
                                        <td>
                                            <input class="qty" name="jumlah[]" value="{{ $d->qty }}"
                                                min="0" type="number">
                                            <input class="item_id" name="id[]" value="{{ $d->item_id }}"
                                                hidden>
                                            <input class="harga" name="harga[]" value="{{ $d->harga_item }}"
                                                hidden>
                                            <input class="harga" name="nama_item[]" value="{{ $d->nama_item }}"
                                                hidden>
                                            <input class="harga" name="biaya_item[]" value="{{ $d->biaya_item }}"
                                                hidden>
                                        </td>
                                        <td>{{ number_format($d->harga_item) }}</td>
                                        <td class="subTotal">
                                            {{ number_format($d->qty * ($d->harga_item - $d->diskon)) }}</td>
                                        <td><button class="btn btn-danger item-delete" type="button">X</button></td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3">
                                    <div class="text-center">
                                    </div>
                                </td>
                                <td>
                                    <div class="text-right">
                                        <p style="font-weight:bold;">Grand Total : </p>
                                    </div>
                                </td>
                                <td>
                                    <div class="text-left">
                                        <p style="font-weight:bold;" id="grandTotal">0</p>
                                        <input type="hidden" name="grand_total" id="input_grandTotal">
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- #END# Task Info -->
</div>


<!-- Modal -->
<div class="modal fade" id="list-sparepart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Pilih Item</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>


            </div>
            <div class="modal-body">
                <div class="row flex-column-reverse">
                    <div class="col-md-6"></div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="material-icons">search</i>
                            </span>
                            <div class="form-line">
                                <input type="text" class="form-control " id="cari" name="cari"
                                    placeholder="Search">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="table-sparepart" class="table table-hover ">
                        <thead>
                            <tr>
                                <th>Nama Item</th>
                                <th>Harga Jual</th>
                                <th>Harga Beli</th>
                                <th>Jumlah</th>
                                <th>Tools</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3">
                                    <div class="text-center">
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <hr>
    </div>
</div>
<div class="row" style="margin-bottom: 50px;">
    <div class="col-md-12" style="text-align: right;">
    </div>
</div>
{{-- script --}}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var metode_bayar = document.getElementById('metode_bayar');
        var buktiTransferRow = document.getElementById('bukti_transfer_row');
        if (metode_bayar.value === 'transfer') {
            buktiTransferRow.classList.add('show');
            buktiTransferRow.classList.remove('hide');
        };

    });
    document.getElementById('metode_bayar').addEventListener('change', function() {
        var buktiTransferRow = document.getElementById('bukti_transfer_row');
        if (this.value === 'transfer') {
            buktiTransferRow.classList.add('show');
            buktiTransferRow.classList.remove('hide');
        } else {
            buktiTransferRow.classList.add('hide');
            buktiTransferRow.classList.remove('show');
        }
    });
</script>
@push('scripts')
    {{-- <script>
        function ubahPilihan() {
            const pilihan = document.getElementById('pilihan');
            const nama = document.getElementById('nama_pelanggan');
            const kecamatan = document.getElementById('kecamatan_pelanggan');
            const telepon = document.getElementById('telp_pelanggan');
            const alamat = document.getElementById('alamat_pelanggan');


            if (pilihan.value === "umum") {
                nama.value = "umum";

                while (kecamatan.options.length > 0) {
                    kecamatan.remove(0);
                }

                const option = document.createElement("option");
                option.text = "Samarinda Kota";
                option.value = "Samarinda Kota";
                option.selected = true;
                kecamatan.add(option);
                telepon.value = "0";
                alamat.value = "Samarinda";
                $('#kecamatan_pelanggan').selectpicker('refresh');

            } else {
                nama.value = "";
                telepon.value = "";
                alamat.value = "";
            }
        }
    </script> --}}
@endpush
{{-- script --}}