@extends('layouts.app')

@section('content')
    <div class="container-fluid">



        <form action="{{ route('penjualan.guest.store') }}" method="POST">
            @csrf
            @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;
                    }
                </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">
                            <h1 class="h3 mb-3 font-weight-normal" style="color:#9e35af;font-weight:bolder;font-size:3.5em">
                                Penjualan</h1>
                        </div>
                        <div class="body">

                            <div class="row clearfix">
                                <div class="col-md-3">
                                    <b></b>
                                    <div class="">
                                        <div class="form-line focused">
                                            <input type="hidden" class="form-control" name="no_penjualan"
                                                @if (isset($data)) value="{{ $data->no_service }}" @else value="{{ 'P-' . date('his') }}" @endif
                                                required>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="">
                                        <div class="">
                                            <input type="hidden" class="form-control" name="tanggal"
                                                value="{{ date('Y-m-d') }}" required>
                                        </div>

                                    </div>
                                </div>

                            </div>
                            <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
                                                @if (isset($datas)) value="{{ $datas->pelanggan->nama_pelanggan }}" @endif>
                                        </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
                                                @if (isset($datas)) value="{{ $datas->pelanggan->alamat_pelanggan }}" @endif>
                                        </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
                                                @if (isset($datas)) value="{{ $datas->pelanggan->telp_pelanggan }}" @endif>
                                        </div>
                                    </div>
                                    <h2 class="card-inside-title">Penjualan</h2>
                                    <div class="form-group">
                                        <div class="form-line">
                                            <select class="form-control" 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 == 'kredit') selected @endif
                                                    @endif value="kredit">Kredit</option>
                                                <option
                                                    @if (isset($datas)) @if ($datas->metode_bayar == 'transfer') selected @endif
                                                    @endif value="transfer">Transfer</option>
                                            </select>
                                        </div>
                                    </div>
                                    <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>
                                    <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"
                                                @if (isset($datas)) value='{{ $datas->uang_bayar }}' @endif>
                                        </div>
                                    </div>
                                    <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>
                <!-- #END# Task Info -->
            </div>


            <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 modal-lg" 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 --}}
            @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 --}}

        </form>


    </div>
@endsection