@extends('layouts.admin')

@section('content')
<livewire:admins.sales-invoices.create />
{{-- <form method="POST" action="{{ route("admin.invoices.store") }}" enctype="multipart/form-data">
@csrf
    <div class="card">
        <div class="card-header">
            {{ trans('global.create') }} {{ trans('cruds.invoice.title_singular') }}
        </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') == $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" max="100" name="tax" id="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" max="100" name="discount" id="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" 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" 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" 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>
                        <tr data-row="1">
                            <td>
                                <button class="btn btn-danger remove-item-btn"><i class="fas fa-times"></i></button>
                            </td>
                            <td><input class="form-control" type="checkbox" name="invoiceItems[1][taxable]" id="invoiceItems-1-taxable" value="1"></td>
                            <td>
                                <select class="form-control select2 {{ $errors->has('invoiceItems.'.'1'.'.type') ? 'is-invalid' : '' }}" name="invoiceItems[1][type]" id="invoiceItems-1-type" required>
                                    <option value disabled {{ old('type', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                                    @foreach(App\Models\InvoiceItem::ITEM_TYPE as $key => $label)
                                        <option value="{{ $key }}" {{ old('type', '0') === (string) $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <textarea class="form-control" name="invoiceItems[1][description]" id="invoiceItems-1-description"></textarea>
                            </td>
                            <td>
                                <input class="form-control" type="number" step="0.01" name="invoiceItems[1][quantity]" id="invoiceItems-1-quantity" value="0.00" required>
                            </td>
                            <td>
                                <input class="form-control" type="number" step="0.01" name="invoiceItems[1][unit_price]" id="invoiceItems-1-unit_price" value="0.00" required>
                            </td>
                            <td><input class="form-control" type="number" step="0.01" name="invoiceItems[1][amount]" id="invoiceItems-1-amount" data-amount="0.00" value="0.00" readonly></td>
                        </tr>
                        <tr data-row="2">
                            <td>
                                <button class="btn btn-danger remove-item-btn"><i class="fas fa-times"></i></button>
                            </td>
                            <td><input class="form-control" type="checkbox" name="invoiceItems[2][taxable]" id="invoiceItems-2-taxable" value="1"></td>
                            <td>
                                <select class="form-control select2 {{ $errors->has('invoiceItems.'.'2'.'.type') ? 'is-invalid' : '' }}" name="invoiceItems[2][type]" id="invoiceItems-2-type" required>
                                    <option value disabled {{ old('type', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                                    @foreach(App\Models\InvoiceItem::ITEM_TYPE as $key => $label)
                                        <option value="{{ $key }}" {{ old('type', '0') === (string) $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <textarea class="form-control" name="invoiceItems[2][description]" id="invoiceItems-2-description"></textarea>
                            </td>
                            <td>
                                <input class="form-control" type="number" step="0.01" name="invoiceItems[2][quantity]" id="invoiceItems-2-quantity" value="0.00" required>
                            </td>
                            <td>
                                <input class="form-control" type="number" step="0.01" name="invoiceItems[2][unit_price]" id="invoiceItems-2-unit_price" value="0.00" required>
                            </td>
                            <td><input class="form-control" type="number" step="0.01" name="invoiceItems[2][amount]" id="invoiceItems-2-amount" data-amount="0.00" value="0.00" readonly></td>
                        </tr>
                    </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>
                                <button class="btn btn-link" type="button">Reorder rows</button>
                            </td>
                            <td colspan="2" align="right">Subtotal</td>
                            <td>
                                RM<span id="invoiceItems-subtotal">0.00</span>
                                <input type="hidden" name="subtotal" id="subtotal" step="0.01" value="0.00">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4"></td>
                            <td colspan="2" align="right">Amount Due</td>
                            <td>RM<span id="invoiceItems-due">0.00</span></td>
                            <input type="hidden" name="due_amount" id="due_amount" step="0.01" value="0.00">
                        </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"></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 type="text/javascript">
    $(function(){
        $('body').on('click', '#add-item-btn', function() { 
            // i = $('#tab_logic tr').length; 
            var i =  $('#invoice-table tbody tr:last').data('row');
            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></td>\
                <td><input class="form-control" type="checkbox" name="invoiceItems[1][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" data-amount="0.00" 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');
        });

        $(document).on('change', '#tax', function() {
            if(Number.parseFloat($(this).val()))
            {
                var tax_value = Number.parseFloat($(this).val());
            }
            else
            {
                var tax_value = 0;
            }

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

            $.each(amounts, function(index, dom) {
                let item_amount = Number.parseFloat($(dom).val()) * (100 - tax_value) / 100;

                $(dom).val(item_amount);
            });
        });

        $(document).on('change', '#discount', function() {
            if(Number.parseFloat($(this).val()))
            {
                var discount_value = Number.parseFloat($(this).val());
            }
            else
            {
                var discount_value = 0;
            }

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

            $.each(amounts, function(index, dom) {
                let item_amount = Number.parseFloat($(dom).val()) * (100 - discount_value) / 100;

                $(dom).val(item_amount);
            });
        });
        
        $(document).on('click', '.remove-item-btn', function () {
            $(this).parents('tr').remove();
        });

        $(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;

            $(this).parent().next('td').next('td').find('input').data('amount', amount);
            $(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;

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

        $(document).on('change', '[id$="amount"]', function() {
            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);
        });
    })
</script>
@endsection