@extends('layouts.iconbar')

@section('title')
Create New Item
@endsection

@section('breadcrumbs')
{{ Breadcrumbs::render(\Request::route()->getName()) }}
@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::open(['method' => 'POST', 'route' => ['admin.invoices.store'], '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', $global_next_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" style="display:none;">
                        <div class="col-md-6 form-group">

                        </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' => 'submit']) !!}
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>


@stop

@section('javascript')
@parent
<script>
    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 invoiceItemsAction = '/admin/invoices/items/' + $(this).val();
        var formData = {
            internal_job_id: $(this).val()
        };
        updateView('#countryList', companyAction, formData, true, false);
        updateView('#invoiceItems', invoiceItemsAction, formData, true, false);
    });

    function updateView(entityId, action, formData, updateCompany = false, updateJobItems = 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) {

            },
        });
    }
</script>
@stop