@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 shadow">
                    <div class="card-header">
                        <div class="d-flex flex-column flex-md-row align-items-center justify-content-between">
                            <h4 class="card-title">Data Barang</h4>
                            <div class="mt-2 mt-md-0">
                                Tanggal : {{ date('d F Y') }}
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4"></div>
                            <div class="col-md-4">
                                <div class="form-group form-input">
                                    <label> Pilih Lokasi</label>
                                    <select name="stock_type_id" class="form-control select2" id="input-stock_type_id" required>
                                        <option value="{{ config('stock.real') }}" selected>GUDANG</option>
                                        <option value="{{ config('stock.display') }}">PAJANGAN</option>
                                        <option value="{{ config('stock.split') }}">BELAHAN</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-content">
                        <div class="card-body">
                            <table class="table table-hover" id="dataTable-Opname" width="100%" cellspacing="0">
                                <thead>
                                <tr>
                                    <th class="column-auto-width">No</th>
                                    <th class="column-auto-width">Kode</th>
                                    <th>Nama Barang</th>
                                    <th>Merk</th>
                                    <th>Warna</th>
                                    <th>Ukuran</th>
                                    {{--<th>Jenis</th>--}}
                                    <th>Rak & Shelving</th>
                                    <th class="text-right column-auto-width">Qty Program <span class="text-xs">(Pcs)</span></th>
                                    <th class="text-right">Qty Opname <span class="text-xs">(Pcs)</span></th>
                                    <th class="text-right column-auto-width">Selisih <span class="text-xs">(Pcs)</span></th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="card-footer">
                            <form target="_blank" id="printForm" action="{{ route('admin.opnames.print') }}" method="POST">
                                @csrf
                            </form>
                            <form target="_blank" id="printOverForm" action="{{ route('admin.opnames.print-over') }}" method="POST">
                                @csrf
                            </form>
                            <form target="_blank" id="printLostForm" action="{{ route('admin.opnames.print-lost') }}" method="POST">
                                @csrf
                            </form>
                            <div class="d-flex flex-sm-row flex-column justify-content-end">
                                <button id="resetOpname" class="btn btn-outline-danger mr-auto">Reset</button>
                                @can('process-opname-stock')
                                <button id="printLostOpname" class="btn btn-outline-primary mr-2">Cetak Barang Hilang</button>
                                <button id="printOverOpname" class="btn btn-outline-primary mr-2">Cetak Barang Lebih</button>
                                <button id="printOpname" class="btn btn-outline-primary mr-2">Cetak</button>
                                <button id="processOpname" class="btn btn-primary btn-submit">
                                    <span class="spinner-grow spinner-grow-sm d-none btn-spinner" id="status" role="status" aria-hidden="true"></span>
                                    <span class="btn-text">Proses</span>
                                </button>
                                @endcan
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        function getData(_data = null) {
            dataTable.ajax.reload();

            setTimeout(() => {
                //getFilter(dataTable)
            }, 250);
        }

        function editOpname(code, available) {
            let el = $(`#opnameEditor${code}`);
            let diffEl = $(`#opnameDiff${code}`);
            let inputEl = el.find("input");
            let qtyEl = el.find("span");
            let btnEl = el.find("button");
            let diff = diffEl.find("span");

            let val = inputEl.val() === "" ? 0 : inputEl.val();
            qtyEl.text(val);
            diff.text(val - available);

            if  (inputEl.is(":visible")) {
                qtyEl.show();
                inputEl.hide();
                btnEl.text("Edit");
            } else {
                qtyEl.hide();
                inputEl.show();
                btnEl.text("Simpan");
            }
        }

        $(document).ready(() => {
            dataTable = $('#dataTable-Opname').DataTable({
                'processing': true,
                'ordering': false,
                'language': {
                    'loadingRecords': `<div class="spinner-grow" id="table-loader" role="status">
                                            <span class="sr-only">Loading...</span>
                                        </div>`
                },
                'ajax': {
                    headers: {
                        'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                    },
                    url: '{{ (Route::has('items.index')) ? route('items.index') : null }}',
                    type: 'GET',
                    'dataSrc': 'data'
                },
                columns: [
                    { 'data': null, defaultContent: '' },
                    { 'data': 'code' },
                    { 'data': 'name' },
                    { 'data': 'item_brand.name' },
                    {
                        'data': 'item_color.name',
                        render: (data, type, row) => {
                            let {item_color} = row;

                            return `
                                    <div class="d-flex flex-row">
                                        <div class="align-self-center rounded" style="width: 1.5rem; height: 1.5rem; background: ${item_color.hex};"></div>
                                        <div class="align-self-center ml-1">${item_color.name}</div>
                                    </div>`;
                        }
                    },
                    {
                        'data': 'item_size.size',
                        render: (data, type, row) => {
                            let {item_size} = row;

                            return `<span>${item_size.size} ${item_size.unit}</span>`;
                        }
                    },
                    //{ 'data': 'item_type.name', },
                    //{ 'data': 'shelving.rack.name', },
                    {
                        'data': 'shelving.name',
                        render: (data, type, row) => {
                            let { shelving } = row;

                            return `<span>${shelving.rack.name}, ${shelving.name}</span>`;
                        }
                    },
                    {
                        'data': null,
                        className: 'text-right bg-light-blue',
                        render: (data, type, row) => {
                            let {item_size, stock} = row;
                            let stock_type = $('#input-stock_type_id').val();
                            stock_tampil = stock.real;
                            if (stock_type == "8") {
                                stock_tampil = stock.display;
                            } else if (stock_type == "7") {
                                stock_tampil = stock.split;
                            }

                            return `<span>${stock_tampil}</span>`;
                        }
                    },
                    {
                        'data': null,
                        className: 'text-right bg-lighter-blue',
                        width: '150px',
                        render: (data, type, row) => {
                            let {id, code, stock} = row;
                            let stock_type = $('#input-stock_type_id').val();
                            stock_tampil = stock.real;
                            if (stock_type == "8") {
                                stock_tampil = stock.display;
                            } else if (stock_type == "7") {
                                stock_tampil = stock.split;
                            }

                            return `
                                <div id="opnameEditor${code}" class="d-flex align-items-center justify-content-end">
                                    <span class="mr-2 font-weight-bold opname-val">${stock_tampil}</span>
                                    <input type="number" min="0" value="${stock_tampil}" data-id="${id}" class="form-control form-control-sm opname-input" style="display: none;">
                                    <button class="btn btn-primary btn-sm ml-2" onclick="editOpname('${code}', '${stock_tampil}')">Edit</button>
                                </div>
                            `;
                        }
                    },
                    {
                        'data': null,
                        className: 'text-right',
                        render: (data, type, row) => {
                            let {code, stock} = row;
                            
                            let stock_type = $('#input-stock_type_id').val();
                            stock_tampil = stock.real;
                            if (stock_type == "8") {
                                stock_tampil = stock.display;
                            } else if (stock_type == "7") {
                                stock_tampil = stock.split;
                            }
                            let diff = 0 - stock_tampil

                            return `
                                <div id="opnameDiff${code}" class="d-flex align-items-center justify-content-end">
                                    <span class="mr-2 font-weight-bold opname-diff">${diff}</span>
                                </div>
                            `;
                        }
                    }
                ],
                'columnDefs': [
                    {
                        'searchable': false,
                        'orderable': false,
                        'targets': 0
                    },
                    {
                        'searchable': false,
                        'orderable': false,
                        'targets': -1
                    }
                ],
                'lengthMenu': [[-1], ['All']],
                dom: `
                    <'row'
                        <'col-sm-12 col-md-6'l>
                        <'col-sm-12 col-md-6'f>
                    >
                    <'row'
                        <'col-sm-12'
                            <'table-responsive'
                                t
                            >
                        >
                    >
                    <'row'
                        <'col-12 text-right'i>
                    >`,
                'order': [],
                initComplete: function () {
                    //getFilter(this.api())
                },
                'deferRender': true
            });

            dataTable.on('draw.dt', function () {
                dataTable.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            });

            $('#input-stock_type_id').on('change', function() {
                dataTable.ajax.reload();
            });

            $('#resetOpname').on('click', function () {
                Swal.fire({
                    title: "Apakah anda yakin?",
                    html: "Stok opname akan kembali 0.",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    reverseButtons: true,
                    heightAuto: false
                })
                .then((result) => {
                    if (result.value) {
                        window.location.reload();
                    }
                });
            });

            $(document).on('click', '#printOverOpname', function() {
                const formEl = $('#printOverForm');

                $('.opname-input').each(function (index, value) {
                    let el = $(value)
                    let id = el.data('id');

                    formEl.append(`<input type="hidden" name="item_ids[${index}]" value="${id}" />`)
                    formEl.append(`<input type="hidden" name="stocks[${id}]" value="${parseInt(el.val())}" />`)
                });

                formEl.submit();
                formEl.find('*').not('input[name=_token]').remove();
            });

            $(document).on('click', '#printLostOpname', function() {
                const formEl = $('#printLostForm');

                $('.opname-input').each(function (index, value) {
                    let el = $(value)
                    let id = el.data('id');

                    formEl.append(`<input type="hidden" name="item_ids[${index}]" value="${id}" />`)
                    formEl.append(`<input type="hidden" name="stocks[${id}]" value="${parseInt(el.val())}" />`)
                });

                formEl.submit();
                formEl.find('*').not('input[name=_token]').remove();
            });

            $(document).on('click', '#printOpname', function() {
                const formEl = $('#printForm');

                $('.opname-input').each(function (index, value) {
                    let el = $(value)
                    let id = el.data('id');

                    formEl.append(`<input type="hidden" name="item_ids[${index}]" value="${id}" />`)
                    formEl.append(`<input type="hidden" name="stocks[${id}]" value="${parseInt(el.val())}" />`)
                });

                formEl.submit();
                formEl.find('*').not('input[name=_token]').remove();
            });

            @can('process-opname-stock')
            $(document).on('click', '#processOpname', function() {
                const url = '/api/opnames';
                let itemIds = [];
                let opnames = {};

                let stock_type_id = $('#input-stock_type_id').val();
                $('.opname-input').each(function (index, value) {
                    let el = $(value)
                    let id = el.data('id');

                    itemIds.push(id);
                    opnames[id.toString()] = parseInt(el.val());
                });

                $.ajax({
                    headers: {
                        'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`,
                        'Content-Type': 'application/json'
                    },
                    url: url,
                    type: "post",
                    data: JSON.stringify({
                        'stock_type_id' : stock_type_id,
                        'item_ids': itemIds,
                        'stocks': opnames
                    }),
                    dataType: "json",
                    contentType: false,
                    processData: false,
                    cache: false,
                    async: true,
                    timeout: 40000,
                    beforeSend:function(){
                        $('.custom-loading').fadeIn();
                    },
                    complete:function(){
                        $('.custom-loading').fadeOut();
                    },
                    success:(data) => {
                        if ($.isEmptyObject(data.errors)) {
                            Swal.fire({
                                title: "Berhasil",
                                html: data.message,
                                icon: "success",
                                timer: 2000,
                                showConfirmButton: false,
                                timerProgressBar: true,
                                heightAuto: false,
                                willOpen: () => {
                                    Swal.showLoading()
                                }
                            }).then(() => {
                                if ($.isEmptyObject(data.url)) {
                                    location.reload();
                                } else {
                                    location = data.url
                                }
                            });
                        } else {
                            Swal.fire({
                                title: "Gagal",
                                html: data.errors,
                                icon: "error",
                                heightAuto: false
                            });
                        }
                    },
                    error:(xhr, status, error) => {
                        const {responseJSON:response} = xhr;
                        if(response.errors) {
                            Swal.fire({
                                title: "Gagal",
                                text: "Anda belum mengubah stok opname",
                                icon: "warning",
                                heightAuto: false
                            });
                            /*for(let form_data in response.errors) {
                                $('#input-' + form_data).addClass('is-invalid');
                                $('#input-' + form_data).parents('.form-input').find('.invalid-feedback').html(response.errors[form_data][0]);
                            }*/
                        } else {
                            Swal.fire({
                                title: "Error",
                                text: response.message,
                                icon: "error",
                                heightAuto: false
                            });
                        }
                    }
                });
            });
            @endcan
        });
    </script>
@endpush