@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')
<livewire:admins.invoices.edit :invoice="$invoice" />
{{-- <form method="POST" action="{{ route("admin.invoices.update", $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="row">
                <div class="col-12 col-md-12">
                    <div class="form-group">
                        <label class="required" for="agent_id">{{ trans('cruds.invoice.fields.agent') }}</label>
                        <select class="form-control select2 @error('agent_id') is-invalid @enderror" name="agent_id" id="agent_id">
                            @foreach($agents as $id => $entry)
                                <option value="{{ $id }}" {{ old('agent_id', $invoice->agent_id) == $id ? 'selected' : '' }}>{{ $entry }}</option>
                            @endforeach
                        </select>
                        @if($errors->has('agent_id'))
                            <div class="invalid-feedback">
                                {{ $errors->first('agent_id') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.invoice.fields.agent_helper') }}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label for="tax">{{ trans('cruds.invoice.fields.tax') }} (%)</label>
                        <input class="form-control @error('tax') is-invalid @enderror" type="number" step="0.01" min="0.00" max="100" name="tax" id="tax" value="{{ old('tax', $invoice->tax) }}" required>
                        @if($errors->has('tax'))
                            <div class="invalid-feedback">
                                {{ $errors->first('tax') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.invoice.fields.tax_helper') }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label for="discount">{{ trans('cruds.invoice.fields.discount') }} (%)</label>
                        <input class="form-control @error('tax') is-invalid @enderror" type="number" step="0.01" min="0.00" max="100" name="discount" id="discount" value="{{ old('discount', $invoice->discount) }}" required>
                        @if($errors->has('discount'))
                            <div class="invalid-feedback">
                                {{ $errors->first('discount') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.invoice.fields.discount_helper') }}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label for="issue_date">{{ trans('cruds.invoice.fields.issue_date') }}</label>
                        <input class="form-control date @error('issue_date') is-invalid @enderror" type="text" step="0.01" name="issue_date" id="issue_date" value="{{ old('issue_date', $invoice->issue_date) }}" required>
                        @if($errors->has('issue_date'))
                            <div class="invalid-feedback">
                                {{ $errors->first('issue_date') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.invoice.fields.issue_date_helper') }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label for="due_date">{{ trans('cruds.invoice.fields.due_date') }}</label>
                        <input class="form-control date @error('due_date') is-invalid @enderror" type="text" step="0.01" name="due_date" id="due_date" value="{{ old('due_date', $invoice->due_date) }}" required>
                        @if($errors->has('due_date'))
                            <div class="invalid-feedback">
                                {{ $errors->first('due_date') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.invoice.fields.due_date_helper') }}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label class="required" for="subject">{{ trans('cruds.invoice.fields.subject') }}</label>
                        <input class="form-control @error('subject') is-invalid @enderror" type="text" name="subject" id="subject" value="{{ old('subject', $invoice->subject) }}" required>
                        @if($errors->has('subject'))
                            <div class="invalid-feedback">
                                {{ $errors->first('subject') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.invoice.fields.subject_helper') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            {{ trans('global.create') }} {{ trans('cruds.invoice.title_singular') }} Items
        </div>
        <div class="card-body">
            <div class="form-group">
                <table class="table table-bordered table-striped" id="invoice-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 data-row="{{ $invoiceItem->id }}">
                                <td>
                                    <button class="btn btn-danger remove-item-btn"><i class="fas fa-times"></i></button>
                                    <input type="hidden" name="invoiceItems[{{ $invoiceItem->id }}][id]" value="{{ $invoiceItem->id }}">
                                </td>
                                <td><input class="form-control" type="checkbox" name="invoiceItems[{{ $invoiceItem->id }}][taxable]" id="invoiceItems-{{ $invoiceItem->id }}-taxable" value="1" {{ $invoiceItem->taxable == 1 ? 'Checked' : '' }}></td>
                                <td>
                                    <select class="form-control select2 {{ $errors->has('invoiceItems.'.($invoiceItem->id).'.type') ? 'is-invalid' : '' }}" name="invoiceItems[{{ $invoiceItem->id }}][type]" id="invoiceItems-{{ $invoiceItem->id }}-type" required>
                                        <option value disabled {{ old('invoiceItems.'.($invoiceItem->id).'.type', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                                        @foreach(App\Models\InvoiceItem::ITEM_TYPE as $id => $label)
                                            <option value="{{ $id }}" {{ old('invoiceItems.'.($invoiceItem->id).'.type', $invoiceItem->type) == $id ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <textarea class="form-control" name="invoiceItems[{{ $invoiceItem->id }}][description]" id="invoiceItems-{{ $invoiceItem->id }}-description">{{ $invoiceItem->description }}</textarea>
                                </td>
                                <td>
                                    <input class="form-control" type="number" step="0.01" name="invoiceItems[{{ $invoiceItem->id }}][quantity]" id="invoiceItems-{{ $invoiceItem->id }}-quantity" value="{{ $invoiceItem->quantity }}" required>
                                </td>
                                <td>
                                    <input class="form-control" type="number" step="0.01" name="invoiceItems[{{ $invoiceItem->id }}][unit_price]" id="invoiceItems-{{ $invoiceItem->id }}-unit_price" value="{{ $invoiceItem->unit_price }}" required>
                                </td>
                                <td><input class="form-control" type="number" step="0.01" name="invoiceItems[{{ $invoiceItem->id }}][amount]" id="invoiceItems-{{ $invoiceItem->id }}-amount" value="{{ $invoiceItem->amount }}" readonly></td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4">
                                <button class="btn btn-light" id="add-item-btn" type="button"><i class="fas fa-plus"></i> Add Item</button>
                                <a class="btn btn-light" target="_blank" href="{{ route('admin.invoices.sort-invoice-items', $invoice->id) }}" rel="noopener noreferrer">Reorder rows</a>
                            </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">
                <table class="table table-bordered table-striped" id="invoice-reorder-table" style="display: none;">
                    <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. <button class="btn btn-link" type="button" id="done-reorder-btn">Done reordering</button>
                            </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">
                <label for="remark">{{ trans('cruds.invoice.fields.remark') }} (optional, displayed on invoice)</label>
                <textarea class="form-control" name="remark" id="remark" rows="2">{{ $invoice->remark }}</textarea>
            </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 invoiceItemType = {!! $invoiceItemType !!};
        var latestInvoiceItemId = {!! $latestInvoiceItemId !!};
        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