@extends('layouts.admin')

@section('title', "Data $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-content">
                        <form class="filter-form">
                            <div class="card-header">
                                <div class='d-sm-flex align-items-center justify-content-between'>
                                    <h4 class="card-title">Filter</h4>
                                    <button type="reset" id="filter-reset" class="d-inline-block btn btn-outline-danger col-sm col-md-auto mt-2 mt-sm-0">Reset</button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-2">
                                        <label for="input-select_supplier">Kode Supplier</label>
                                        <fieldset class="form-group">
                                            <select id="input-select_supplier" class="form-control select">
                                                <option value="">Semua</option>
                                            </select>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="input-select_category">Kategori</label>
                                        <fieldset class="form-group">
                                            <select id="input-select_category" class="form-control select">
                                                <option value="">Semua</option>
                                            </select>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="input-select_type">Jenis Barang</label>
                                        <fieldset class="form-group">
                                            <select id="input-select_type" class="form-control select">
                                                <option value="">Semua</option>
                                            </select>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="input-select_code">Barcode</label>
                                        <fieldset class="form-group">
                                            <input type="text" id="input-select_code" class="form-control nullable">
                                        </fieldset>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="input-select_name">Nama {{ $title }}</label>
                                        <fieldset class="form-group">
                                            <input type="text" id="input-select_name" class="form-control nullable">
                                        </fieldset>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="input-select_brand">Merk</label>
                                        <fieldset class="form-group">
                                            <select id="input-select_brand" class="form-control select">
                                                <option value="">Semua</option>
                                            </select>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="input-select_color">Warna</label>
                                        <fieldset class="form-group">
                                            <select id="input-select_color" class="form-control select">
                                                <option value="">Semua</option>
                                            </select>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="input-select_size">Ukuran</label>
                                        <fieldset class="form-group">
                                            <select id="input-select_size" class="form-control select">
                                                <option value="">Semua</option>
                                            </select>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="input-select_rack">Rak</label>
                                        <fieldset class="form-group">
                                            <select id="input-select_rack" class="form-control select">
                                                <option value="">Semua</option>
                                            </select>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="input-select_shelving">Shelving</label>
                                        <fieldset class="form-group">
                                            <select id="input-select_shelving" class="form-control select">
                                                <option value="">Semua</option>
                                            </select>
                                        </fieldset>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header">
                        <div class='d-md-flex align-items-center justify-content-between'>
                            <h4 class="card-title">Data {{ $title }}</h4>
                            @can('create-item')
                                <a href="#" class="d-inline-block btn btn-primary col-md col-md-auto mt-2 mt-md-0"
                                    id="addItem" data-toggle="modal" data-target="#addItemModal">
                                    <i class="fa fa-plus fa-fw small"></i>
                                    <span>
                                        Tambah Data
                                    </span>
                                </a>
                            @endcan
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="card-body" id="data-wrap">
                            <table class="table table-hover" id="dataTable-Item" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th class="column-auto-width text-right">No</th>
                                        <th>Kode Supplier</th>
                                        <th>Kategori</th>
                                        <th>Jenis Barang</th>
                                        <th>Kategori/Jenis</th>
                                        <th>Barcode</th>
                                        <th>Nama Barang</th>
                                        <th>Merk</th>
                                        <th>Ukuran</th>
                                        <th>Warna</th>
                                        <th class="text-right">Harga Jual</th>
                                        <th class="text-right">Harga Beli</th>
                                        <th>Rak/Shelving</th>
                                        <th>Rak</th>
                                        <th>Shelving</th>
                                        <th class="column-auto-width">Aksi</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

        function getFilter(table) {
            $('#input-select_supplier').html(`<option value="">Semua</option>`);
            $('#input-select_category').html(`<option value="">Semua</option>`);
            $('#input-select_type').html(`<option value="">Semua</option>`);
            $('#input-select_brand').html(`<option value="">Semua</option>`);
            $('#input-select_color').html(`<option value="">Semua</option>`);
            $('#input-select_size').html(`<option value="">Semua</option>`);
            $('#input-select_rack').html(`<option value="">Semua</option>`);

            table.columns(6).every( function () {
                let column = this;
                let select = $('#input-select_code')
                    .on( 'keyup', function () {
                        let val = $(this).val()

                        column
                            .search(val)
                            .draw();
                    } );
            } );

            table.columns(7).every( function () {
                let column = this;
                let select = $('#input-select_name')
                    .on( 'keyup', function () {
                        let val = $(this).val()

                        column
                            .search(val)
                            .draw();
                    } );
            } );

            table.columns(1).every( function () {
                let column = this;
                let select = $('#input-select_supplier')
                    .on( 'change', function () {
                        let val = $(this).val()

                        column
                            .search(val)
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    if (d != '') {
                        select.append( `<option value="${d}">${d}</option>`)
                    }
                } );
            } );

            table.columns(2).every( function () {
                let column = this;
                let select = $('#input-select_category')
                    .on( 'change', function () {
                        let val = $(this).val()

                        column
                            .search(val)
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    if (d != '') {
                        select.append( `<option value="${d}">${d}</option>`)
                    }
                } );
            } );

            table.columns(3).every( function () {
                let column = this;
                let select = $('#input-select_type')
                    .on( 'change', function () {
                        let val = $(this).val()

                        column
                            .search(val)
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    if (d != '') {
                        select.append( `<option value="${d}">${d}</option>`)
                    }
                } );
            } );

            table.columns(7).every( function () {
                let column = this;
                let select = $('#input-select_brand')
                    .on( 'change', function () {
                        let val = $(this).val()

                        column
                            .search(val)
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    if (d != '') {
                        select.append( `<option value="${d}">${d}</option>`)
                    }
                } );
            } );

            table.columns(8).every( function () {
                let column = this;
                let select = $('#input-select_size')
                    .on( 'change', function () {
                        let val = $(this).val()

                        column
                            .search(val)
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    let { item_size } = d;
                    if (item_size) {
                        select.append( `<option value="${item_size.size} ${item_size.unit}">${item_size.size} ${item_size.unit}</option>`)
                    }
                } );
            } );

            table.columns(9).every( function () {
                let column = this;
                let select = $('#input-select_color')
                    .on( 'change', function () {
                        let val = $(this).val()

                        column
                            .search(val)
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    if (d != '') {
                        select.append( `<option value="${d}">${d}</option>`)
                    }
                } );
            } );

            table.columns(13).every( function () {
                let column = this;
                let select = $('#input-select_rack')
                    .on( 'change', function () {
                        let val = $(this).val()

                        column
                            .search(val)
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    console.log(d);
                    if (d != '') {
                        select.append( `<option value="${d}">${d}</option>`)
                    }
                } );
            } );

            table.columns(14).every( function () {
                let column = this;
                let select = $('#input-select_shelving')
                    .on( 'change', function () {
                        let val = $(this).val()

                        column
                            .search(val)
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    if (d != '') {
                        select.append( `<option value="${d}">${d}</option>`)
                    }
                } );
            } );

        }

        function getType() {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('item-types.index') }}',
                type: 'get',
                dataType: 'json',
                success:(data) => {
                    let _html = `<option value="" disabled>-- Pilih Jenis/Kategori Barang --</option>`;

                    data.data.forEach(item => {
                        if (item.item_category) {
                            _html += `<option value="${item.id}">${item.code} - ${item.name} (${item.item_category.name})</option>`
                        }
                    });

                    $('#input-item_type_id').html(_html);
                    $('#input-item_type_id-e').html(_html);
                },
                error:(e) => {
                    console.log(e);

                    toastr.error(e.statusText, 'Error', {
                        progressBar: !0,
                        timeOut: 0
                    });
                }
            });
        }

        function getBrand() {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('item-brands.index') }}',
                type: 'get',
                dataType: 'json',
                success:(data) => {
                    let _html = `<option value="" disabled>-- Pilih Merk --</option>`;

                    data.data.forEach(item => {
                        _html += `<option value="${item.id}">${item.code + ' - ' + item.name}</option>`
                    });

                    $('#input-item_brand_id').html(_html);
                    $('#input-item_brand_id-e').html(_html);
                },
                error:(e) => {
                    console.log(e);

                    toastr.error(e.statusText, 'Error', {
                        progressBar: !0,
                        timeOut: 0
                    });
                }
            });
        }

        function getSize() {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('item-sizes.index') }}',
                type: 'get',
                dataType: 'json',
                success:(data) => {
                    let _html = `<option value="" disabled>-- Pilih Ukuran --</option>`;

                    data.data.forEach(item => {
                        _html += `<option value="${item.id}">${item.code} - ${item.size} ${item.unit}</option>`
                    });

                    $('#input-item_size_id').html(_html);
                    $('#input-item_size_id-e').html(_html);
                },
                error:(e) => {
                    console.log(e);

                    toastr.error(e.statusText, 'Error', {
                        progressBar: !0,
                        timeOut: 0
                    });
                }
            });
        }

        function getColor() {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('item-colors.index') }}',
                type: 'get',
                dataType: 'json',
                success:(data) => {
                    let _html = `<option value="0">-- Pilih Warna --</option>`;

                    data.data.forEach(item => {
                        _html += `<option value="${item.id}">${item.code + ' - ' + item.name}</option>`
                    });

                    $('#input-item_color_id').html(_html);
                    $('#input-item_color_id-e').html(_html);
                },
                error:(e) => {
                    console.log(e);

                    toastr.error(e.statusText, 'Error', {
                        progressBar: !0,
                        timeOut: 0
                    });
                }
            });
        }

        function getShelving() {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('shelvings.index') }}',
                type: 'get',
                dataType: 'json',
                success:(data) => {
                    let _html = `<option value="" disabled>-- Pilih Shelving --</option>`;

                    data.data.forEach(item => {
                        _html += `<option value="${item.id}">${item.code} - ${item.name} (${item.rack.code} - ${item.rack.name})</option>`
                    });

                    $('#input-shelving_id').html(_html);
                    $('#input-shelving_id-e').html(_html);
                },
                error:(e) => {
                    console.log(e);

                    toastr.error(e.statusText, 'Error', {
                        progressBar: !0,
                        timeOut: 0
                    });
                }
            });
        }

        function getSupplier() {
            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                },
                url: '{{ route('suppliers.index') }}',
                type: 'get',
                dataType: 'json',
                success:(data) => {
                    let _html = `<option value="" disabled>-- Pilih Supplier --</option>`;

                    data.data.forEach(item => {
                        _html += `<option value="${item.id}">${item.code} - ${item.name}</option>`
                    });

                    $('#input-supplier_id').html(_html);
                    $('#input-supplier_id-e').html(_html);
                },
                error:(e) => {
                    console.log(e);

                    toastr.error(e.statusText, 'Error', {
                        progressBar: !0,
                        timeOut: 0
                    });
                }
            });
        }

        $(document).ready(() => {
            dataTable = $('#dataTable-Item').DataTable({
                'processing': true,
                '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: '', className: 'column-auto-width' },
                    { 'data': 'supplier.code', className: 'column-auto-width' },
                    { 'data': 'item_type.item_category.name', className: 'column-auto-width' },
                    { 'data': 'item_type.name', className: 'column-auto-width' },
                    {
                        'data': null,
                        className: 'column-auto-width',
                        render: (data, type, row) => {
                            let { item_type } = row;

                            return `${item_type.name} (${item_type.item_category.name})`
                        }
                    },
                    { 'data': 'code', className: 'column-auto-width' },
                    { 'data': 'name' },
                    { 'data': 'item_brand.name', className: 'column-auto-width' },
                    {
                        'data': null,
                        className: 'column-auto-width',
                        render: (data, type, row) => {
                            let { item_size } = row;

                            return `<span>${item_size.size} ${item_size.unit}</span>`;
                        }
                    },
                    {
                        'data': 'item_color.name',
                        className: 'column-auto-width',
                        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': 'price',
                        className: 'column-auto-width',
                        render: (data, type, row) => {
                            let {price} = row;
                            return `<span>Rp ${numeral(price).format('0,0')}</span>`;
                        }
                    },
                    {
                        'data': 'price_buy',
                        className: 'column-auto-width',
                        render: (data, type, row) => {
                            let {price_buy} = row;
                            return `<span>Rp ${numeral(price_buy).format('0,0')}</span>`;
                        }
                    },
                    {
                        'data': null,
                        className: 'column-auto-width',
                        render: (data, type, row) => {
                            let { shelving } = row;
                            return `<span>${shelving.name} (${shelving.rack.name})</span>`;
                        }
                    },
                    { 'data': 'shelving.rack.name', className: 'column-auto-width' },
                    { 'data': 'shelving.name', className: 'column-auto-width' },
                    {
                        'data': null,
                        className: 'column-auto-width',
                        render: (data, type, row) => {
                            let {id} = row;
                            let button = '';

                            @can('edit-item')
                                button += `<button class="btn btn-primary shadow-sm btn-custom-1" id="editItem" data-toggle="modal" data-target="#editItemModal" data-id="${id}" title="Edit"><i class="fas fa-pen fa-sm"></i></button> `;
                            @endcan

                            @can('delete-item')
                                button += `<button class="btn btn-danger shadow-sm btn-custom-1 delete-data" data-url="/api/items/" data-id="${id}" title="Hapus"><i class="far fa-trash-alt fa-sm"></i></button>`;
                            @endcan

                            return button;
                        }
                    }
                ],
                'columnDefs': [
                    {
                        'searchable': false,
                        'orderable': false,
                        'targets': 0
                    },
                    {
                        'orderable': false,
                        'visible': false,
                        'targets': 1
                    },
                    {
                        'orderable': false,
                        'visible': false,
                        'targets': 2
                    },
                    {
                        'orderable': false,
                        'visible': false,
                        'targets': 3
                    },
                    {
                        'orderable': false,
                        'visible': false,
                        'targets': 12
                    },
                    {
                        'orderable': false,
                        'visible': false,
                        'targets': 13
                    },
                    {
                        'searchable': false,
                        'orderable': false,
                        'targets': -1
                    }
                ],
                'lengthMenu': [[10, 25, 50, 100, -1], [10, 25, 50, 100, '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-sm-12 col-md-5'i>
                        <'col-sm-12 col-md-7'
                            <'table-responsive'
                                p
                            >
                        >
                    >`,
                '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;
                });
            });

            $(document).on('click', '#addItem', function() {
                $('.custom-loading').fadeIn();

                $.when(getSupplier(), getType(), getBrand(), getSize(), getColor(), getShelving()).done(() => {
                    setTimeout(() => {
                        $('.custom-loading').fadeOut();
                    }, 1500);
                });
            });

            $(document).on('click', '#editItem', function() {
                $('.custom-loading').fadeIn();

                $.when(getSupplier(), getType(), getBrand(), getSize(), getColor(), getShelving()).done(() => {
                    const id = $(this).attr('data-id');
                    const url = '/api/items/';
                    $.ajax({
                        headers: {
                            'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`
                        },
                        url: url + id,
                        type: "get",
                        dataType: "json",
                        beforeSend:function(){
                            $('.custom-loading').fadeIn();
                        },
                        complete:function(){
                            $('.custom-loading').fadeOut();
                        },
                        success:(data) => {
                            const {id, code, name, supplier_id, item_type_id, item_brand_id, item_size_id, item_color_id, shelving_id, price, price_buy} = data.data;

                            $('#editItemModal form').attr("action", url + id);

                            $('#editItemModal #input-code-e').val(code);

                            $('#editItemModal #input-name-e').val(name);

                            $('#editItemModal #input-price-e').val(price);

                            $('#editItemModal #input-price-buy-e').val(price_buy);

                            $('#editItemModal #input-supplier_id-e').val(supplier_id);
                            $("#editItemModal #input-supplier_id-e").trigger('change');

                            $('#editItemModal #input-item_type_id-e').val(item_type_id);
                            $("#editItemModal #input-item_type_id-e").trigger('change');

                            $('#editItemModal #input-item_brand_id-e').val(item_brand_id);
                            $("#editItemModal #input-item_brand_id-e").trigger('change');

                            $('#editItemModal #input-item_size_id-e').val(item_size_id);
                            $("#editItemModal #input-item_size_id-e").trigger('change');

                            $('#editItemModal #input-item_color_id-e').val(item_color_id);
                            $("#editItemModal #input-item_color_id-e").trigger('change');

                            $('#editItemModal #input-shelving_id-e').val(shelving_id);
                            $("#editItemModal #input-shelving_id-e").trigger('change');
                        },
                        error:(xhr, status, error) => {
                            const {responseJSON:response} = xhr;

                            toastr.error(response.message, 'Gagal', {
                                progressBar: !0
                            });
                        }
                    });
                });
            });

            $("#filter-reset").on('click', () => {
                $.when(
                    $('.select', '.filter-form').each(function() {
                        $(this).val('');
                        $(this).trigger('change');
                    })
                ).done(() => {
                    dataTable.search( '' ).columns().search( '' ).draw();
                })
            });
        });
    </script>
@endpush

@push('modal')
    @can('create-item')
        @include('app.item.add')
    @endcan
    @can('edit-item')
        @include('app.item.edit')
    @endcan
@endpush