@extends('layouts.admin')

@section('title', "$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">
                <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">
                        <a href="{{ route('admin.transactions.index') }}">Penjualan Customer</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">
                        <div class="card-header">
                            <h4 class="card-title">Filter</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-3">
                                    <label for="input-select_kode">No Order</label>
                                    <fieldset class="form-group">
                                        <input type="text" id="input-select_kode" class="form-control">
                                    </fieldset>
                                </div>
                                <div class="col-sm-3">
                                    <label for="input-select_name">Nama Customer</label>
                                    <fieldset class="form-group">
                                        <input type="text" id="input-select_name" class="form-control">
                                    </fieldset>
                                </div>
                                <div class="col-sm-3">
                                    <label for="input-date">Tanggal</label>
                                    <fieldset class="form-group">
                                        <input type="text" id="input-date" class="form-control" autocomplete="off" value="">
                                    </fieldset>
                                </div>
                                <div class="col-sm-3">
                                    <label for="input-status">Status</label>
                                    <fieldset class="form-group">
                                        <select id="input-status" class="form-control select">
                                            <option value="">Semua</option>
                                            <option value="1" selected>Belum lunas</option>
                                            <option value="2">Lunas</option>
                                            <option value="3">Jatuh tempo</option>
                                            <option value="4">Jatuh tempo hari ini</option>
                                        </select>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </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>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <table class="table table-hover" id="dataTable-Receivables" width="100%" cellspacing="0">
                                <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Status Raw</th>
                                    <th>No Order</th>
                                    <th>Nama Customer</th>
                                    <th>Total Piutang</th>
                                    <th>Sisa Piutang</th>
                                    <th>Tanggal Transaksi</th>
                                    <th>Status</th>
                                    <th>Aksi</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@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 dataTableDetailReceivable = null;
        let startDate = null;
        let endDate = null;
        let dataTable = null;

        $.fn.dataTable.ext.search.push(
            function( settings, data, dataIndex ) {
                let date = moment(data[6], "DD/MM/YYYY");

                if (startDate || endDate) {
                    return date.diff(startDate) >= 0 && date.diff(endDate) <= 0;
                }

                return true;
            }
        );

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

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

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

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

            table.columns(6).every( function () {
                let column = this;
                let form = $('#input-date');
                let from, to;

                form.daterangepicker(
                    {
                        autoUpdateInput: false,
                        locale: {
                            cancelLabel: 'Clear'
                        },
                    },
                    function(start, end) {
                        from = start;
                        to = end;
                    }
                );

                form.on('apply.daterangepicker', function(ev, picker) {
                    $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));

                    startDate = picker.startDate;
                    endDate = picker.endDate;

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

                form.on('cancel.daterangepicker', function(ev, picker) {
                    $(this).val('');

                    startDate = null;
                    endDate = null;

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

                form.on('clear.daterangepicker', function(ev, picker) {
                    $(this).val('');

                    picker.clear();

                    startDate = null;
                    endDate = null;

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

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

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

        function detailReceivable(url) {
            if ($.isEmptyObject(dataTableDetailReceivable)) {
                $('.custom-loading').fadeIn();

                $.when(
                    dataTableDetailReceivable = $('#dataTable-DetailReceivable').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: url,
                            type: 'GET',
                            'dataSrc': 'data.receivable_payments'
                        },
                        columns: [
                            { 'data': null, defaultContent: '', className: 'align-middle column-auto-width' },
                            { 'data': 'id', className: 'align-middle column-auto-width' },
                            {
                                'data': null,
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { cash_in_out, credit_card_detail, debit_card_detail, transfer_detail, is_return } = row;

                                    if (credit_card_detail) return 'Credit Card';
                                    if (debit_card_detail) return 'Debit Card';
                                    if (transfer_detail) return 'Transfer';
                                    if (is_return) return 'Retur';
                                    return 'Cash';
                                }
                            },
                            {
                                'data': 'created_at',
                                className: 'align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { created_at } = row;

                                    return dayjs(created_at).format('DD/MM/YYYY');
                                }
                            },
                            {
                                'data': 'amount',
                                className: 'text-right align-middle column-auto-width',
                                render: (data, type, row) => {
                                    let { amount } = row;

                                    return numeral(amount).format('0,0');
                                }
                            },
                        ],
                        'columnDefs': [
                            {
                                'searchable': false,
                                'orderable': false,
                                'targets': 0
                            },
                        ],
                        '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': [],
                        'deferRender': true
                    })
                ).done(() => {
                    $('.custom-loading').fadeOut()
                });
            } else {
                dataTableDetailReceivable.clear().draw();

                $('.custom-loading').fadeIn();
                $.when(
                    dataTableDetailReceivable.ajax.url(url).load()
                ).done(() => {
                    $('.custom-loading').fadeOut()
                });
            }

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

        $(document).ready(() => {
            dataTable = $('#dataTable-Receivables').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('receivables.index')) ? route('receivables.index'):null }}',
                    type: 'GET',
                    'dataSrc': 'data'
                },
                columns: [
                    { 'data': null, defaultContent: '', className: 'align-middle column-auto-width' },
                    {
                        'data': 'status',
                        className: 'align-middle column-auto-width',
                        render: (data, type, row) => {
                            let { status } = row;

                            if (status == 'Belum lunas') return '1';
                            if (status == 'Lunas') return '2';
                            if (status == 'Jatuh tempo') return '3';
                            if (status == 'Jatuh tempo hari ini') return '4';
                        },
                    },
                    {
                        'data': null,
                        className: 'align-middle column-auto-width',
                        render: (data, type, row) => {
                            let { transaction } = row;

                            if (transaction) {
                                return transaction.id;
                            };
                            let {transaction_id} = row;
                            return transaction_id;
                        },
                    },
                    {  
                        'data': null,
                        className: 'align-middle',
                        render: (data, type, row) => {
                            let { transaction } = row;

                            if (transaction) {
                                return transaction.customer.name;
                            };
                            return '-';
                        },
                    },
                    {
                        'data': null,
                        className: 'align-middle column-auto-width',
                        render: (data, type, row) => {
                            let { transaction } = row;
                            let {total} = row;
                            if (transaction) {
                                return `Rp ${numeral(transaction.total).format('0,0')}`;
                            }
                            return `Rp ${numeral(total).format('0,0')}`;
                            
                        }
                    },
                    {
                        'data': 'remains',
                        className: 'align-middle column-auto-width',
                        render: (data, type, row) => {
                            let { remains } = row;
                            return `Rp ${numeral(remains).format('0,0')}`;
                        }
                    },
                    {
                        'data': null,
                        className: 'align-middle column-auto-width',
                        render: (data, type, row) => {
                            let { transaction } = row;
                            if (transaction) {
                                return dayjs(transaction.created_at).format('DD/MM/YYYY');   
                            }
                            return '-';
                        }
                    },
                    {
                        'data': 'status',
                        className: 'align-middle column-auto-width',
                        render: (data, type, row) => {
                            let { status } = row;

                            let badgeClass = 'badge-primary';

                            if (status === 'Belum lunas') {
                                badgeClass = 'badge-success';
                            }

                            if (status === 'Jatuh tempo') {
                                badgeClass = 'badge-danger';
                            }

                            if (status === 'Jatuh tempo hari ini') {
                                badgeClass = 'badge-warning';
                            }

                            return `<div class="badge ${badgeClass}">${status}</div>`;
                        }
                    },
                    {
                        'data': null,
                        className: 'align-middle column-auto-width',
                        render: (data, type, row) => {
                            let { id, status, total } = row;
                            let button = '';

                            button += `
                                <button class="btn btn-info shadow-sm btn-custom-1 detail-receivable" data-toggle="modal" data-target="#detailReceivableModal" data-url="/api/receivables/${id}" data-id="${id}" title="Details">
                                    <i class="fas fa-eye fa-sm"></i>
                                </button>
                            `;

                            if (status === 'Lunas') {
                                button += `
                                    <a href="/receivables/invoice/${id}" class="btn btn-info shadow-sm btn-custom-1" title="Print" target='_blank'>
                                        <i class="fas fa-print fa-sm"></i>
                                    </a>
                                `;
                            }

                            if (status !== 'Lunas') {
                                button += `<button class="btn btn-success shadow-sm btn-custom-1 pay-receivable" data-toggle="modal" data-target="#addPaymentReceivableModal" data-id="${id}" data-total="${total}" title="Pay">
                                    <i class="fas fa-coins fa-sm"></i>
                                </button>`;
                            }

                            return button;
                        }
                    },
                ],
                'columnDefs': [
                    {
                        'searchable': false,
                        'orderable': false,
                        'targets': 0
                    },
                    {
                        'orderable': false,
                        'visible': false,
                        'targets': 1
                    },
                    {
                        '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())
                    $('#input-status').val(1).trigger('change');
                },
                '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', '.detail-receivable', function() {
                detailReceivable($(this).attr('data-url'));
            });
        });
    </script>
@endpush

@push('modal')
    @include('app.receivable.pay')
    @include('app.receivable.detail')
@endpush