@extends('layouts.admin')

@section('title', "Data $title ·")
@push('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush
@section('breadcrumb')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h6 class="text-muted mb-2">{{ $title }}</h6>
                <h3>{{ $item->name }}</h3>
            </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">
                        <a href="{{ route('admin.stocks.stocks.index') }}">Stok</a>
                    </li>
                    <li class="breadcrumb-item active">{{ $item->name }}</li>
                </ol>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow">
                    <div class="card-content">
                        <div class="card-header">
                            <h4 class="card-title">Filter</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="input-date">Periode {{ $title }}</label>
                                    <fieldset class="form-group form-input">
                                        <input type="text" name="datefilter" class="form-control" id="input-date" autocomplete="off" value="">
                                    </fieldset>
                                </div>
                                <div class="col-md-6">
                                    <label for="input-select_nama">Transaksi</label>
                                    <fieldset class="form-group">
                                        <input type="text" id="input-select_nama" class="form-control">
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-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>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="card-body" id="data-wrap">
                            <table class="table table-hover" id="dataTable-Supplier" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>Tanggal</th>
                                        <th>Transaksi</th>
                                        <th>Kode</th>
                                        <th>Pengurangan</th>
                                        <th>Pertambahan</th>
                                        <th>Mutasi Belahan</th>
                                        <th>Mutasi Pajangan</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        let startDate = moment().startOf('month'), endDate = moment().endOf('month');

        function getData(_data = null) {
            dataTable.ajax.reload();

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

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

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

        }

        $(document).ready(() => {
            dataTable = $('#dataTable-Supplier').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')}`
                    },
                    data: {
                        from: function () { return startDate.format('YYYY-MM-DD') },
                        to: function () { return endDate.format('YYYY-MM-DD') }
                    },
                    url: '{{ url("/api/stock-details/".$item_id) }}',
                    type: 'GET',
                    'dataSrc': 'data',
                    beforeSend:function(){
                        $('.custom-loading').fadeIn();
                    },
                    complete:function(){
                        $('.custom-loading').fadeOut();
                    },
                },
                columns: [
                    { 'data': 'created_at', className: 'align-middle column-auto-width',
                        render: (data,type,row)=>{
                            let {created_at} = row;

                            return dayjs(created_at).format("dddd, DD MMM YYYY");
                        }
                    },
                    {
                        'data': null,
                        className: 'align-middle column-auto-width',
                        render: (data,type,row) =>{
                            let { transaction, mutation, purchase, wasting, stock_type, opname, lost_item } = row;

                            if (transaction) {
                                return `Transaksi Penjualan`;
                            }

                            if (mutation) {
                                if (mutation.stock_type.id === {{ config('stock.split') }}) {
                                    return `Mutasi Stock Ke Belahan`;
                                }
                            }
                            
                            if (mutation) {
                                if (mutation.stock_type.id === {{ config('stock.out') }}) {
                                    return `Mutasi Stock Ke Stock Terjual`;
                                }
                            }

                            if (stock_type.name === 'display') {
                                return 'Mutasi Stock Ke Pajangan';
                            }

                            if (purchase) {
                                return `Transaksi Pembelian Supplier`;
                            }

                            if (wasting) {
                                return `Wasting Stock Barang`;
                            }

                            if (stock_type.name === 'return') {
                                return 'Return Penjualan Customer';
                            }

                            if (stock_type.name === 'return_purchase') {
                                return 'Return Pembelian Supplier';
                            }

                            if (opname) {
                                return 'Penyesuaian Stok (Opname)';
                            }

                            if (lost_item) {
                                return 'Hilang Stock Barang';
                            }

                            return '';
                        }
                    },
                    {
                        'data': null,
                        className: 'align-middle column-auto-width',
                        render: (data,type,row) =>{
                            let { transaction, mutation, purchase, wasting, id } = row;
                            
                            if (transaction) {
                                return `${transaction.code}`;
                            }

                            if (mutation) {
                                return `${mutation.code}`;
                            }

                            if (purchase) {
                                return `${purchase.code}`;
                            }

                            if (wasting) {
                                return `${wasting.code}`;
                            }

                            return `${id}`;
                        }
                    },
                    {
                        'data': null,
                        className: 'align-middle column-auto-width',
                        render: (data,type,row) =>{
                            let { stock_type, mutation, transaction, wasting, qty } = row;

                            if (transaction
                                || wasting
                                || stock_type.id === {{ config('stock.lost') }}
                                || stock_type.id === {{ config('stock.return_purchase') }}) {
                                return `${qty}`;
                            }

                            if (mutation) {
                                if (stock_type.id === {{ config('stock.out') }}) {
                                    return `${qty}`;
                                }
                            }

                            return `-`;
                        }
                    },
                    {
                        'data': null,
                        className: 'align-middle column-auto-width',
                        render: (data,type,row) =>{
                            let { stock_type, purchase, qty } = row;
                            if (purchase
                                || stock_type.id === {{ config('stock.over') }}
                                || stock_type.id === {{ config('stock.return') }}){
                                return `${qty}`;
                            }

                            return `-`;
                        }
                     },
                    {
                        'data': null,
                        className: 'align-middle column-auto-width',
                        render: (data,type,row) =>{
                            let { mutation, qty, stock_type } = row;

                            if (mutation) {
                                if (mutation.transaction) {
                                    return `${qty} <span class="text-sm text-muted">(Ditransaksikan)</span>`;
                                }

                                if (stock_type.id === {{ config('stock.split') }}) {
                                    return `${qty}`;
                                }
                            }

                            return `-`;
                        }
                    },
                    {
                        'data': null,
                        className: 'align-middle column-auto-width',
                        render: (data,type,row) =>{
                            let { mutation, qty, stock_type } = row;

                            if (mutation) {
                                if (stock_type.id === {{ config('stock.display') }}) {
                                    return `${qty}`;
                                }
                            }

                            return `-`;
                        }
                    },
                ],
                'columnDefs': [
                    {
                        'searchable': false,
                        'orderable': false,
                        'targets': 0
                    },
                    {
                        '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
            });

            function cb(start, end) {
                $('#input-date').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#input-date').daterangepicker({
                autoUpdateInput: false,
                startDate: startDate,
                endDate: endDate,
                locale: {
                    cancelLabel: 'Clear',
                    customRangeLabel: 'Input Periode Manual'
                },
                ranges: {
                    'Bulan ini': [moment().startOf('month'), moment().endOf('month')],
                    'Bulan lalu': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    '7 Hari Terakhir': [moment().subtract(7, 'days'), moment()],
                    '30 Hari Terakhir': [moment().subtract(30, 'days'), moment()],
                    '90 Hari Terakhir': [moment().subtract(90, 'days'), moment()],
                }
            }, cb);

            cb(startDate, endDate);

            $('#input-date').on('apply.daterangepicker', function(ev, picker) {
                startDate = picker.startDate;
                endDate = picker.endDate;

                dataTable.ajax.reload();
            });
        });
    </script>
@endpush

@push('modal')
    @can('create-supplier')
        @include('app.supplier.add')
    @endcan

    @can('edit-supplier')
        @include('app.supplier.edit')
    @endcan
@endpush