@push('scripts')
    <!-- Input Mask Plugin Js -->
    <script src="https://unpkg.com/autonumeric"></script>
    <script>
        new AutoNumeric('#harga_item', {
            currencySymbol: 'Rp ',
            decimalPlaces: 0,
            digitGroupSeparator: '.',
            decimalCharacter: ','
        })
        new AutoNumeric('#biaya_item', {
            currencySymbol: 'Rp ',
            decimalPlaces: 0,
            digitGroupSeparator: '.',
            decimalCharacter: ','
        });

        let jenis_item_id = document.getElementById("jenis_item_id");
        let kategori_item_id = document.getElementById("kategori_item_id");
        let belumpilih = document.getElementById("belumpilih");

        $(document).ready(function() {

            if (kategori_item_id.value != '') {
                fetch("{{ route('get-jenis-kategori') }}/?kategori_item_id=" + kategori_item_id.value, {
                    method: "GET",
                }).then(
                    (response) => {
                        return response.json();
                    }
                ).then((data) => {
                    // console.log(data);



                    belumpilih.style.display = 'none';

                    let items = data;
                    items.data.forEach(item => {
                        console.log(item);
                        let jenisOptionText = document.createTextNode(item.nama_jenis);
                        let jenisOption = document.createElement("option");
                        jenisOption.setAttribute('value', item.id);
                        jenisOption.appendChild(jenisOptionText);
                        jenis_item_id.appendChild(jenisOption);
                        $('#jenis_item_id').selectpicker("destroy");
                        $('#jenis_item_id').selectpicker();
                    })
                });
            }

            kategori_item_id.addEventListener("change", function() {
                getJenis(this.value);
            });
        });

        function getJenis(id) {
            console.log(this.value);
            fetch("{{ route('get-jenis-kategori') }}/?kategori_item_id=" + id, {
                method: "GET",
            }).then(
                (response) => {
                    return response.json();
                }
            ).then((data) => {
                // console.log(data);

                while (jenis_item_id.firstChild) {
                    jenis_item_id.removeChild(jenis_item_id.firstChild);
                }

                let items = data;
                items.data.forEach(item => {
                    console.log(item);
                    let jenisOptionText = document.createTextNode(item.nama_jenis);
                    let jenisOption = document.createElement("option");
                    jenisOption.setAttribute('value', item.id);
                    jenisOption.appendChild(jenisOptionText);
                    jenis_item_id.appendChild(jenisOption);
                    $('#jenis_item_id').selectpicker("destroy");
                    $('#jenis_item_id').selectpicker();
                })
            });
        }


        $(document).ready(function() {

            var input = $("#lacak_stok_input");
            $('#lacak_stok').on('change', function() {
                if ($(this).is(':checked')) {
                    input.show();
                    //find and enable all input
                    input.find('input').removeAttr('disabled');

                } else {
                    input.hide();
                    //find and disable all input
                    input.find('input').prop('disabled', true);
                }
            });
            var warna_dan_bentuk = $("#warna_dan_bentuk");
            warna_dan_bentuk.on('change', function() {
                if ($(this).is(':checked')) {
                    $('.pilihan-warna').removeAttr('disabled');
                    $("#file-input").prop('disabled', true);
                } else {
                    $("#file-input").removeAttr('disabled');
                }
            });

            $("#gambar").on('change', function() {
                if ($(this).is(':checked')) {
                    $('.pilihan-warna').prop('disabled', true);
                    $("#file-input").removeAttr('disabled');

                } else {
                    $("#file-input").prop('disabled', true);

                }
            });
            $('.pilih-warna').on('click', function() {
                //empty html inside all .pilih-warna
                //check warna_dan_bentuk is checked
                if (warna_dan_bentuk.is(':checked')) {
                    $('.pilih-warna').html('');
                    $(this).html(
                        '<i class="material-icons" style="font-size: 100px;color:white;">check</i>');
                }

            });

            $('.pilih-bentuk').on('click', function() {
                //empty html inside all .pilih-warna
                //check warna_dan_bentuk is checked
                if (warna_dan_bentuk.is(':checked')) {
                    $('.pilih-bentuk i').remove();
                    $(this).append('<i class="material-icons">check</i>');
                }

            });

            $("#file-input").on('change', function() {
                var parent = $(this).closest('.image-upload');
                var files = $(this)[0].files;
                if (files.length > 0) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        //chaneg bg parent
                        parent.css('background-image', 'url(' + e.target.result + ')');
                    }
                    reader.readAsDataURL(files[0]);
                }
            })
        });
    </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%;
        }
    </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('item.index') }}" class="btn btn-warning">Kembali</a>
            </div>
            <div class="body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input type="text" name="nama_item" class="form-control"
                                    value="{{ old('nama_item', @$data->nama_item) }}">
                                <label class="form-label">Nama</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group form-float ">
                            <div class="form-line focused">
                                <label for="" class="form-label" style="top: -18px">Kategori</label>
                                <select class="form-control" name="kategori_item_id" id="kategori_item_id">
                                    <option value="">Tidak Ada</option>
                                    @foreach ($kategoris as $kategori)
                                        <option value="{{ $kategori->id }}"
                                            @if (old('kategori_item_id', @$data->kategori_item_id) == $kategori->id) selected @endif>
                                            {{ $kategori->nama_kategori }}</option>
                                    @endforeach
                                </select>
                            </div>

                        </div>

                    </div>
                    <div class="col-md-6">
                    </div>
                    <div class="col-md-6">
                        <div class="form-group form-float ">
                            <div class="form-line focused">
                                <label for="" class="form-label" style="top: -18px">Jenis Item</label>
                                <select class="form-control" name="jenis_item_id" id="jenis_item_id">
                                    @if (isset($data))
                                        @if (isset($data->jenis_item))

                                            <option style="border-bottom: 1px solid #333;"
                                                value="{{ $data->jenis_item_id }}" selected>
                                                {{ $data->jenis_item->nama_jenis }}</option>
                                        @endif
                                        <option value="">-lengkapi jenis item didata master-</option>
                                    @endif
                                    <option value="" id="belumpilih">Pilih Kategori Terlebih dahulu</option>

                                </select>
                            </div>

                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input type="text" class="form-control money-rupiah" name="harga_item"
                                    id="harga_item" value="{{ old('harga_item', @$data->harga_item) }}">
                                <label class="form-label">Harga Jual</label>
                            </div>
                        </div>

                    </div>

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

                        <div class="form-group form-float">
                            <div class="form-line">
                                <input type="text" class="form-control money-rupiah" name="biaya_item"
                                    id="biaya_item" value="{{ old('biaya_item', @$data->biaya_item) }}">
                                <label class="form-label">Harga Beli</label>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input type="text" name="barcode" class="form-control"
                                    value="{{ old('barcode', @$data->barcode) }}">
                                <input type="hidden" name="sku" class="form-control"
                                    value="{{ old('sku', @$data->sku) }}">
                                <label class="form-label">SKU/Barcode</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <input type="checkbox" id="pakai_notif"
                                class="filled-in chk-col-red" name="pakai_notif" @if(old('pakai_notif', @$data->pakai_notif) == 1) checked @endif
                                />
                            <label for="pakai_notif">Pakai Notifikasi</label>
                        </div>

                        
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input type="number" class="form-control" name="stok_minimal"
                                    id="stok_minimal" value="{{ old('stok_minimal', @$data->stok_minimal) }}">
                                <label class="form-label">Stok Minimal</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input type="number" name="durasi_garansi" class="form-control"
                                    value="{{ old('durasi_garansi', @$data->durasi_garansi) }}">
                                <label class="form-label">Durasi_garansi</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <div class="">
                                <select name="ket_waktu" id="ket_waktu">
                                    <option
                                        value="days"@if (isset($data->ket_waktu)) @if ($data->ket_waktu == 'days')selected @endif
                                        @endif>hari</option>
                                    <option
                                        value="month"@if (isset($data->ket_waktu)) @if ($data->ket_waktu == 'month')selected @endif
                                        @endif>bulan</option>
                                    <option
                                        value="year"@if (isset($data->ket_waktu)) @if ($data->ket_waktu == 'year')selected @endif
                                        @endif>tahun</option>
                                </select>
                            </div>
                        </div>
                    </div>

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

<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>
                    INVENTARIS

                </h2>

            </div>
            <div class="body">



                <div class="demo-switch">
                    {{-- <div class="row">
                        <div class="col-md-6">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input type="number" name="stok" class="form-control"
                                        value="{{ old('stok', @$data->stok ?? 0) }}" min="0">
                                    <label class="form-label">Stok Toko</label>
                                </div>
                            </div>
                        </div>

                    </div> --}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input type="number" name="stok_gudang" class="form-control"
                                        value="{{ old('stok', @$data->stok_gudang ?? 0) }}" min="0">
                                    <label class="form-label">Stok Gudang</label>
                                </div>
                            </div>
                        </div>

                    </div>

                    @foreach ($tokos as $toko)
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input type="number" name="stok_tokos[{{ $toko->id }}]" class="form-control"
                                            value="{{ old('stok', isset($data)?$data->stok_item_tokos->where('toko_id',$toko->id)->sum('stok') : 0) }}" min="0">
                                        <label class="form-label">Stok Toko : {{$toko->nama_toko}}</label>
                                    </div>
                                </div>
                            </div>

                        </div>
                    @endforeach
                </div>
            </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;">
        <button type="submit" class="btn btn-success">Simpan</button>
    </div>
</div>