@extends('layouts.admin')
@section('styles')
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<style>
    #invoice-reorder-table tr.reorder-row{
        cursor: all-scroll;
    }
</style>
@endsection

@section('content')
<form method="POST" action="{{ route("admin.invoices.update-invoice-items-position", $invoice->id) }}" enctype="multipart/form-data">
@method('PUT')
@csrf
    <div class="card">
        <div class="card-header">
            {{ trans('global.edit') }} {{ trans('cruds.invoice.title_singular') }} ({{ $invoice->invoice_no }})
        </div>
        <div class="card-body">
            <div class="form-group">
                <table class="table table-bordered table-striped" id="invoice-reorder-table">
                    <thead>
                        <tr>
                            <th style="width: 5%;">#</th>
                            <th style="width: 5%;">Taxable</th>
                            <th style="width: 20%;">Item Type</th>
                            <th style="width: 30%;">Description</th>
                            <th style="width: 8%;">Quantity</th>
                            <th style="width: 8%;">U.Price (RM)</th>
                            <th style="width: 8%;">Amount (RM)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($invoiceItems as $key => $invoiceItem)
                            <tr class="reorder-row" data-index="{{ $invoiceItem->id }}" data-position="{{ $invoiceItem->position }}" data-row="{{ $invoiceItem->id }}">
                                <td>
                                    {{ $key + 1 }}
                                    <input type="hidden" name="invoiceItems[{{ $invoiceItem->id }}][position]" id="invoiceItems-{{ $invoiceItem->id }}-position" value="{{ $invoiceItem->position }}">
                                </td>
                                <td>
                                    @if($invoiceItem->taxable)
                                        <span class="badge badge-success">Taxable</span>
                                    @else
                                        <span class="badge badge-secondary">Nontaxable</span>
                                    @endif
                                </td>
                                <td>
                                    {{ App\Models\InvoiceItem::ITEM_TYPE[$invoiceItem->type] }}
                                </td>
                                <td>
                                    {{ $invoiceItem->description }}
                                </td>
                                <td>
                                    {{ $invoiceItem->quantity }}
                                </td>
                                <td>
                                    {{ $invoiceItem->unit_price }}
                                </td>
                                <td>
                                    {{ $invoiceItem->amount }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4">
                                Click and drag a row to reorder.
                            </td>
                            <td colspan="2" align="right">Subtotal</td>
                            <td>
                                RM<span id="invoiceItems-subtotal">{{ $invoice->subtotal_amount }}</span>
                                <input type="hidden" name="subtotal" id="subtotal" step="0.01" value="{{ $invoice->subtotal_amount }}">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4"></td>
                            <td colspan="2" align="right">Amount Due</td>
                            <td>RM<span id="invoiceItems-due">{{ $invoice->due_amount }}</span></td>
                            <input type="hidden" name="due_amount" id="due_amount" step="0.01" value="{{ $invoice->due_amount }}">
                        </tr>
                    </tfoot>
                </table>
            </div>

            <div class="form-group">
                <button class="btn btn-danger" type="submit">{{ trans('global.save') }}</button>
                <a class="btn btn-secondary" href="{{ route('admin.invoices.index') }}">Back</a>
            </div>
        </div>
    </div>
</form>
@endsection

@section('scripts')
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="{{ asset('js/databinder.js') }}"></script>
<script type="text/javascript">
    $(function(){
        var invoiceItems = {!! $invoiceItems !!};
        var i;
        // let obj = {
        //     id: 0,
        //     taxable: 0,
        //     type: '',
        //     description: '',
        //     quantity: 0,
        //     unit_price: 0.00,
        //     amount: 0.00,
        // };

        // const data = {
        //     invoiceItems: [] // 
        // };

        // Object.defineProperty(data, 'prop', {
        //     get: function() {
        //         return this.invoiceItems;
        //     },
        //     set: function(value) {
        //         this.invoiceItems.push(obj);
        //     }
        // });

        function addSubtotalAmount()
        {
            let amounts = $("[id$='amount']");

            let subtotal = 0.00;

            $.each(amounts, function(index, dom) {
                subtotal += Number.parseFloat($(dom).val());
            });

            subtotal = subtotal.toFixed(2);

            $('#subtotal').val(subtotal);

            $('#invoiceItems-subtotal').html(subtotal);
        }

        $("#invoice-reorder-table tbody").sortable({
            update: function(e, ui) {
                $(this).children().each(function(index) {
                    if($(this).attr('data-position') != (index + 1))
                    {
                        $(this).attr('data-position', (index + 1)).addClass('updated');
                        $(this).children('td:first').find('input').val(index + 1);
                    }
                });
            }
        });

        $("#reorder-btn").click(function(){
            $("#invoice-reorder-table").show();
            $("#invoice-table").hide();
        });

        $("#done-reorder-btn").click(function(){
            $("#invoice-reorder-table").hide();
            $("#invoice-table").show();
        });

        $('body').on('click', '#add-item-btn', function() { 
            // i = $('#tab_logic tr').length; 
            i =  latestInvoiceItemId;

            i = i+1;
            $('#invoice-table tbody').append('<tr data-row="'+ i +'">\
                <td><button class="btn btn-danger remove-item-btn"><i class="fas fa-times"></i></button><input type="hidden" name="invoiceItems[' + i + '][id]" value="0"></td>\
                <td><input class="form-control" type="checkbox" name="invoiceItems[' + i + '][taxable]" id="invoiceItems-1-taxable" value="1"></td>\
                <td>\
                    <select class="select2 form-control" name="invoiceItems['+ i +'][type]" id="invoiceItems-' + i + '-type"></select>\
                </td>\
                <td>\
                    <textarea class="form-control" name="invoiceItems['+ i +'][description]" id="invoiceItems-' + i + '-description"></textarea>\
                </td>\
                <td>\
                    <input class="form-control" type="number" step="0.01" name="invoiceItems[' + i + '][quantity]" id="invoiceItems-' + i +'-quantity" value="0.00" required>\
                </td>\
                <td>\
                    <input class="form-control" type="number" step="0.01" name="invoiceItems[' + i + '][unit_price]" id="invoiceItems-' + i +'-unit_price" value="0.00" required>\
                </td>\
                <td>\
                    <input class="form-control" type="number" step="0.01" name="invoiceItems[' + i + '][amount]" id="invoiceItems-' + i +'-amount" value="0.00" readonly required>\
                </td>\
            </tr>');

            $.each(invoiceItemType , function (key, value) {
                $('#invoiceItems-' + i + '-type').append($('<option>',
                    {
                    value: key,
                    text: value
                    })
                );
            });

            $('#invoiceItems-' + i + '-type').select2({
                placeholder: "Select an option",
                allowClear: true,
            });

            $('#invoiceItems-' + i + '-type').val(null).trigger('change');

            latestInvoiceItemId++;
        });

        $(document).on('click', '.remove-item-btn', function () {
            let id = $(this).parents('tr').data('row');

            i--;

            $(this).parents('tr').remove();
            $("#invoiceItems-" + id + '-position').remove();
            addSubtotalAmount();
            $('#invoice-table tbody').append("<input type='hidden' name='invoiceDeletedItems[" + id + "]' value='" + id + "'>");
        });

        $(document).on('focusout', '[id$="quantity"]', function(){
            let quantity = Number.parseFloat($(this).val());
            let unit_price = Number.parseFloat($(this).parent().next('td').find('input').val());

            let amount = quantity * unit_price;

            amount = amount.toFixed(2); 

            $(this).parent().next('td').next('td').find('input').val(amount).change();
        });

        $(document).on('focusout', '[id$="unit_price"]', function(){
            let quantity = Number.parseFloat($(this).parent().prev('td').find('input').val());
            let unit_price = Number.parseFloat($(this).val());

            let amount = quantity * unit_price;

            amount = amount.toFixed(2); 

            $(this).parent().next('td').find('input').val(amount).change();
        });

        $(document).on('change', '[id$="amount"]', function() {
            addSubtotalAmount();
        });
    })
</script>
@endsection