@extends('layouts.main')
@section('title', (isset($rec->id)) ? __('form.edit_invoice') : __('form.create_new_invoice'))
@section('content')
<style>
  [v-cloak] {
    display: none;
  }
</style>

    <div id="sales" v-cloak>

    <div v-if="unbilledTasks.length > 0" style="background-color: #fff; padding: 20px; margin-bottom: 20px;">
        
        
        <div class="row">
                <div class="col-md-6"><h5>@lang('form.unbilled_tasks_and_expenses')</h5></div>
                <div class="col-md-6 text-right">
                    <a href="#" style="color: red;" v-on:click.prevent="unbilledTasks = []"><i class="fas fa-times"></i></a>
                </div>
         </div>   
        <table class="table table-sm" style="font-size: 13px;">
              <thead>
                <tr>
                  <th scope="col">@lang('form.task')</th>
                  <th scope="col" class="text-right">@lang('form.rate')</th>
                  <th scope="col" class="text-right">@lang('form.decimal_time')/@lang('form.quantity')</th>
                  <th scope="col" class="text-right">@lang('form.sub_total')</th>
                  <th scope="col" class="text-right">@lang('form.action')</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in unbilledTasks">
                  
                  <td><a v-bind:href="item.url_to_source" target="_blank">@{{ item.description }}</a></td>
                  <td class="text-right">@{{ item.rate }}</td>
                  <td class="text-right">@{{ item.quantity }}</td>                  
                  <td class="text-right">@{{ item.formatted_sub_total }}</td>
                  <td class="text-right"><a href="#" v-on:click.prevent="add_unbilled_task_to_invoice(item, index)" target="_blank">@lang('form.add_to_invoice')</a></td>
                </tr>
                
              </tbody>
        </table>

      
    </div>    

    <form method="post" action="{{ (isset($rec->id)) ? route( 'patch_invoice', $rec->id) : route('post_invoice') }}">

        {{ csrf_field()  }}
        @if(isset($rec->id))
            {{ method_field('PATCH') }}
        @endif

        @include('invoice.partials.general')
        @include('generic.items')
        @include('invoice.partials.notes')

        @if((isset($rec->proposal_id)) && $rec->proposal_id)
            <input type="hidden" name="proposal_id" value="{{ $rec->proposal_id }}" />
        @endif

        @if((isset($rec->estimate_id)) && $rec->estimate_id)
            <input type="hidden" name="estimate_id" value="{{ $rec->estimate_id }}" />
        @endif

        @if((isset($rec->expense_id)) && $rec->expense_id)
            <input type="hidden" name="expense_id" value="{{ $rec->expense_id }}" />
        @endif

        @if((isset($rec->invoicing_for_project)) && $rec->invoicing_for_project)
            <input type="hidden" name="invoicing_for_project" value="{{ $rec->invoicing_for_project }}" />
        @endif

    </form>
    </div>
@endsection
@section('onPageJs')

    <script>
        vm = ""; 
        $(function () {

         

            var customer_id = $( ".customer_id" );

            customer_id.select2( {
                theme: "bootstrap",
                minimumInputLength: 2,
                maximumSelectionSize: 6,
                placeholder: "{{ __('form.select_and_begin_typing') }}",
                allowClear: true,
                "language": {
                   "noResults": function(){
                       return "