@extends('layouts.iconbar')

@section('title')
Edit invoice
@endsection

@section('breadcrumbs')
{{ Breadcrumbs::render(\Request::route()->getName(), $invoice) }}
@endsection

@section('content')
<div class="page-content" id="create-invoices">
    <div class="panel">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    {!! Form::model($invoice, ['method' => 'PUT', 'route' => ['admin.invoices.update', $invoice->id], 'files' => true,]) !!}
                    <div class="row">
                        <div class="col-md-3 form-group">
                            <div class="form-group form-material floating" data-plugin="formMaterial">
                                {!! Form::select('internal_job_id', $jobs, old('internal_job_id'), ['class' => 'form-control select2','id' => 'internal_job_id']) !!}
                                {!! Form::label('internal_job_id', trans('global.invoices.fields.internal_job_id'), ['class' => 'floating-label main-label']) !!}

                                <p class="error-block"></p>
                                @if($errors->has('internal_job_id'))
                                <p class="error-block">
                                    {{ $errors->first('internal_job_id') }}
                                </p>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-3" id="countryList">
                            @include('admin.invoices.customer')
                        </div>
                        <div class="col-md-3 form-group">
                            <div class="form-group form-material floating" data-plugin="formMaterial">
                                {!! Form::text('invoice_number', old('invoice_number'), ['class' => 'form-control', 'readonly' => true]) !!}
                                {!! Form::label('invoice_number', trans('global.invoices.fields.invoice_number').'', ['class' => 'floating-label']) !!}
                                <p class="error-block"></p>
                                @if($errors->has('invoice_number'))
                                <p class="error-block">
                                    {{ $errors->first('invoice_number') }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>
                    <h4 class="example-title">Invoice Items</h4>
                    <div class="row invoice-items" id="invoiceItems">
                        <div class="col-md-12 items-container">
                            @forelse ($invoice->items as $item)
                            <div class="row invoice-single-item">
                                <div class="col-md-4 form-group">
                                    <input type="hidden" name="items[{{ $item->id }}][job_id]" value="{{ $item->job_id }}">
                                    <input type="hidden" name="items[{{ $item->id }}][id]" value="{{ $item->id }}">
                                    <label>Item</label>
                                    <input type="text" name="items[{{ $item->id }}][item]" class="form-control itemname" value="{{ $item->item }}">
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Qty</label>
                                    <input type="text" name="items[{{ $item->id }}][qty]" class="form-control itemqty" value="{{ $item->qty }}" onkeyup="calculateTotal(this);">
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Price</label>
                                    <input type="text" name="items[{{ $item->id }}][price]" class="form-control itemprice" value="{{ $item->price }}" onkeyup="calculateTotal(this);">
                                </div>
                                <div class="col-md-2 form-group">
                                    <label>Total</label>
                                    <input type="text" name="items[{{ $item->id }}][total]" class="form-control itemtotal" value="{{ $item->total }}" readonly>
                                </div>
                                <div class="col-md-2 form-group p-2">
                                    <div class="mt-4">
                                        <button class="btn btn-danger btn-xs" onclick="removeItem(this);"><i class="fa-fa-remove"></i> Remove</button>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="col-md-12">
                                <p>No Item Available</p>
                            </div>
                            @endforelse

                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="float-left">
                                    <button class="btn btn-success btn-xs" onclick="addItem();"><i class="fa-fa-plus"></i> Add New Item</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <div class="form-group form-material floating" data-plugin="formMaterial">
                                {!! Form::select('status', $status_list, old('status'), ['class' => 'form-control select2','id' => 'status']) !!}
                                {!! Form::label('status', 'Status', ['class' => 'floating-label main-label']) !!}

                                <p class="error-block"></p>
                                @if($errors->has('status'))
                                <p class="error-block">
                                    {{ $errors->first('status') }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>

                    {!! Form::button(trans('global.app_save'), ['class' => 'btn btn-info', 'type' => 'update']) !!}
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="item-sample" style="display: none;">
    <div class="row invoice-single-item">
        <div class="col-md-4 form-group">
            <label>Item</label>
            <input type="text" name="items[0][item]" class="form-control itemname" value="">
        </div>
        <div class="col-md-2 form-group">
            <label>Qty</label>
            <input type="text" name="items[0][qty]" class="form-control itemqty" value="" onkeyup="calculateTotal(this);">
        </div>
        <div class="col-md-2 form-group">
            <label>Price</label>
            <input type="text" name="items[0][price]" class="form-control itemprice" value="" onkeyup="calculateTotal(this);">
        </div>
        <div class="col-md-2 form-group">
            <label>Total</label>
            <input type="text" name="items[0][total]" class="form-control itemtotal" value="" readonly>
        </div>
        <div class="col-md-2 form-group p-2">
            <div class="mt-4">
                <button class="btn btn-danger btn-xs" onclick="removeItem(this);"><i class="fa-fa-remove"></i> Remove</button>
            </div>
        </div>
    </div>
</div>

@stop

@section('javascript')
@parent
<script>
    window.total_items = parseInt("{{ $invoice->items->count()  }}");
    $(function() {
        var companyAction = '/admin/invoices/company/' + '{{ $invoice->internal_job_id }}';
        var formData = {
            internal_job_id: '{{ $invoice->internal_job_id }}'
        };
        updateView('#countryList', companyAction, formData, true, false)
    });
    new Vue({
        el: '#create-invoices',
        data: {

        },
        watch: {

        },

        computed: {},

        methods: {

        }
    });

    $("#internal_job_id").on('click', function() {
        if ($(this).val() == "") {
            return false;
        }
        var companyAction = '/admin/invoices/company/' + $(this).val();
        var invoiceinvoicesAction = '/admin/invoices/invoices/' + $(this).val();
        var formData = {
            internal_job_id: $(this).val()
        };
        updateView('#countryList', companyAction, formData, true, false);
        updateView('#invoiceinvoices', invoiceinvoicesAction, formData, true, false);
    });

    function updateView(entityId, action, formData, updateCompany = false, updateJobinvoices = false) {
        $.ajax({
            url: action,
            type: 'GET',
            beforeSend: function() {

            },
            complete: function() {

            },
            success: function(data) {
                if (data.success) {
                    $(entityId).html(data.html)
                    $(entityId).show();
                }
            },
            error: function(result) {

            },
        });
    }

    function removeItem(me) {
        $(me).parents(".invoice-single-item").remove();
        window.COLOR_COUNT -= 1;
        $(".itemname").each(function(v, i) {
            $(i).attr('name', 'items[' + v + '][item]');
        });
        $(".itemqty").each(function(v, i) {
            $(i).attr('name', 'items[' + v + '][qty]');
        });
        $(".itemprice").each(function(v, i) {
            $(i).attr('name', 'items[' + v + '][price]');
        });
        $(".itemtotal").each(function(v, i) {
            $(i).attr('name', 'items[' + v + '][total]');
        });
    }

    function addItem() {
        window.total_items += 1;
        $('.item-sample').find('.itemname').attr('name', 'items[' + total_items + '][item]').attr('required', true);
        $('.item-sample').find('.itemqty').attr('name', 'items[' + total_items + '][qty]').attr('required', true);
        $('.item-sample').find('.itemprice').attr('name', 'items[' + total_items + '][price]').attr('required', true);
        $('.item-sample').find('.itemtotal').attr('name', 'items[' + total_items + '][total]').attr('required', true);
        var html = $('.item-sample').html();
        $('.items-container').append(html);

    }

    function calculateTotal(me){
        var qty = $(me).parents('.invoice-single-item').find('.itemqty').val();
        var price = $(me).parents('.invoice-single-item').find('.itemprice').val();
        var total = 0;
        if (qty != "" || qty > 0 || price != "" || price > 0){
             total = parseFloat(qty) * parseFloat(price);
        }
        $(me).parents('.invoice-single-item').find('.itemtotal').val(total);
    }
</script>
@stop