@extends('layouts.admin')

@section('title', "$title ·")

@section('breadcrumb')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>{{ $title }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">Home</a>
                    </li>
                    <li class="breadcrumb-item active">{{ $title }}</li>
                </ol>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Data Item</h4>
                    </div>
                    <div class="card-body">
                        <section>
                            <div class="row mb-4">
                                <div class="col-md-4">
                                    <div class="form-group form-input">
                                        <label for="input-item_id" class="col-form-label text-dark">Barang</label>
                                        <select name="item_id" class="form-control" id="input-item_id" required>
                                            <option value="" selected disabled>-- Pilih Barang --</option>
                                        </select>
                                        <input type="hidden" name="item_code" id="input-item_code">
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-input">
                                        <label for="input-item_name" class="col-form-label text-dark">Nama Barang</label>
                                        <input type="text" name="item_name" class="form-control" id="input-item_name" required readonly>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-input">
                                        <label for="input-item_brand" class="col-form-label text-dark">Merk</label>
                                        <input type="text" name="item_brand" class="form-control" id="input-item_brand" required readonly>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-input">
                                        <label for="input-item_color" class="col-form-label text-dark">Warna</label>
                                        <input type="text" name="item_color" class="form-control" id="input-item_color" required readonly>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-input">
                                        <label for="input-item_size" class="col-form-label text-dark">Jenis/Kategori/Ukuran</label>
                                        <input type="text" name="item_size" class="form-control" id="input-item_size" required readonly>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-input">
                                        <label for="input-shelving" class="col-form-label text-dark">Rak/Shelving</label>
                                        <input type="text" name="shelving" class="form-control" id="input-shelving" required readonly>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                            </div>
                            {{-- <div id="barcode" class="d-flex justify-content-center"></div> --}}
                        </section>
                        <section>
                            <table class="table table-striped" id="tblbarcode">
                                <tr>
                                    <th>Kode Barang</th>
                                    <th>Nama Barang</th>
                                    <th>Merek</th>
                                    <th>Warna</th>
                                    <th>Jenis/Kategori/Ukuran</th>
                                    <th>Rak/Shelving</th>
                                </tr>
                                <tbody id="data-barcode">

                                </tbody>
                            </table>
                        </section>
                    </div>

                    <div class="card-footer">
                        <div class="">
                            <div class="row text-right">
                                <div class="col-12 text-right">
                                    <button id="kosongkan" class="btn btn-warning ml-auto">Kosongkan Data</button>
                                    &nbsp;
                                    <button id="print" class="btn btn-primary ml-auto">Print</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@push('js')
    <script>
        function getItem() {
            $.ajax({
                delay: 450,
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('items.index') }}',
                dataType: 'json',
                success: function (data) {
                    let items = data.data.map(function(item) {
                        return {
                            id: item.id,
                            text: `${item.code} - ${item.name}`,
                            name: item.name,
                            code: item.code,
                            brand: item.item_brand.name,
                            size: `${item.item_size.size} ${item.item_size.unit}`,
                            color: item.item_color.name,
                            unit: item.item_size.unit,
                            price: item.price,
                            shelving: `${item.shelving.name} - ${item.shelving.rack.name}`,
                            rack: item.shelving.rack.name,
                        }
                    });

                    $('#input-item_id').select2({
                        selectOnClose: true,
                        data: items,
                        templateSelection: function(container) {
                            $(container.element).attr('data-name', container.name);
                            $(container.element).attr('data-code', container.code);
                            $(container.element).attr('data-brand', container.brand);
                            $(container.element).attr('data-size', container.size);
                            $(container.element).attr('data-color', container.color);
                            $(container.element).attr('data-unit', container.unit);
                            $(container.element).attr('data-price', container.price);
                            $(container.element).attr('data-shelving', container.shelving);
                            $(container.element).attr('data-rack', container.rack);

                            return container.text;
                        }
                    });

                    // if (itemId) {
                    //     $('#input-item_id').select2('val', `${itemId}`);
                    //     $('#input-item_id').trigger({
                    //         type: 'select2:select',
                    //     });
                    // }
                }
            });
        }

        function getBarcode(item) {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`,
                },
                url: `{{ url('api/barcode') }}/${item.id}`,
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    // let html = `
                    //     <div class="d-flex flex-column align-items-center justify-content-center">
                    //         <div class="text-xs">${item.name}</div>
                    //         <div>
                    // `
                    // html += data.data.barcode;

                    // html += `
                    //         </div>
                    //     </div>
                    // `

                    // $('#barcode').html(html);
                },
                error: (e) => {
                    toastr.error(e.statusText, 'Error', {
                        progressBar: !0,
                        timeOut: 0
                    });
                }
            })
        }

        $(document).ready(function () {
            $.when(getItem()).done(function () {
                setTimeout(() => {
                    $('.custom-loading').fadeOut();
                }, 1500);
            });

            $('#input-item_id').on('select2:select change', function() {
                let selected = $(this).find(':selected');

                $('#input-item_code').val(selected.attr('data-code'));
                $('#input-item_name').val(selected.attr('data-name'));
                $('#input-item_brand').val(selected.attr('data-brand'));
                $('#input-item_size').val(selected.attr('data-size'));
                $('#input-item_color').val(selected.attr('data-color'));
                $('#input-item_type').val(selected.attr('data-type'));
                $('#input-price').val(selected.attr('data-price'));
                $('#input-shelving').val(selected.attr('data-shelving'));

                const item = {
                    id: $(this).val(),
                    code: selected.attr('data-code'),
                    name: selected.attr('data-name'),
                    brand: selected.attr('data-brand'),
                    size: selected.attr('data-size'),
                    color: selected.attr('data-color'),
                    type: selected.attr('data-type'),
                    price: selected.attr('data-price'),
                    shelving: selected.attr('data-shelving'),
                }

                if(selected.attr('data-code') !== undefined){
                    let data = {
                        kode_barcode: selected.attr('data-code'),
                        nama: selected.attr('data-name'),
                        brand: selected.attr('data-brand'),
                        size: selected.attr('data-size'),
                        color: selected.attr('data-color'),
                        shelving: selected.attr('data-shelving'),
                    }
                    let cek = JSON.parse(localStorage.getItem("data_barang_tmp")) ||[];
                    let hasil_cek = cek.findIndex(
                        (hasil) => hasil.kode_barcode === selected.attr('data-code')
                    );
                    //   console.log(index);
                    if (hasil_cek === -1) {
                        cek.push(data);
                        localStorage.setItem("data_barang_tmp",JSON.stringify(cek));
                        $('#data-barcode').append(`
                        <tr>
                            <td> `+selected.attr('data-code')+` </td>    
                            <td> `+selected.attr('data-name')+` </td>    
                            <td> `+selected.attr('data-brand')+` </td>    
                            <td> `+selected.attr('data-color')+` </td>    
                            <td> `+selected.attr('data-size')+` </td>    
                            <td> `+selected.attr('data-shelving')+` </td>    
                        </tr>
                    `);
                    }else{
                    Swal.fire({
                        title: "Gagal",
                        html: "Barang Sudah Ada DI Tabel",
                        icon: "warning",
                        heightAuto: false
                    });
                    }
                }
                // getBarcode(item);
            });

            $('#kosongkan').on('click', function () {
                $('.custom-loading').show()

                setTimeout(() => {
                    $('.custom-loading').fadeOut()
                    localStorage.setItem("data_barang_tmp",JSON.stringify([]));
                    Swal.fire({
                        title: "Berhasil",
                        html: "Data Berhasil Dikosongkan",
                        icon: "success",
                        heightAuto: false
                    })
                    $('#data-barcode').html('');
                    $('#input-item_code').val('');
                    $('#input-item_name').val('');
                    $('#input-item_brand').val('');
                    $('#input-item_size').val('');
                    $('#input-item_color').val('');
                    $('#input-item_type').val('');
                    $('#input-price').val('');
                    $('#input-shelving').val('');
                }, 1000);

            })
            $('#print').on('click', function () {
                $('.custom-loading').show()
                var temporary_tbl = $('table#tblbarcode tbody tr').get().map(function(row) {
                    return $(row).find('td').get().map(function(cell) {
                        return $(cell).html();
                    });
                });
                var DataLabelBarcode = JSON.stringify(temporary_tbl);
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: `{{ url('/ganerate-barcodes') }}`,
                    type: 'post',
                    dataType: 'json',
                    data: {
                        DataLabelBarcode: DataLabelBarcode
                    },
                    success: (data) => {
                        console.log(data);
                        console.log(data.status);
                        if(data.status=="berhasil"){
                            $('.custom-loading').fadeOut()
                            window.open(`{{ url('/download-barcode') }}`, '_blank');
                        }
                    }
                })
            
            });
        });
    </script>
@endpush