@extends('layouts.app')

@section('page-title')
    <div class="row bg-title">
        <!-- .page title -->
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 bg-title-left">
            <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}</h4>
        </div>
        <!-- /.page title -->
        <!-- .breadcrumb -->
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12 bg-title-right">
            <ol class="breadcrumb">
                <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
                <li><a href="{{ route('admin.invoices.index') }}">{{ __($pageTitle) }}</a></li>
                <li class="active">@lang('app.addNew')</li>
            </ol>
        </div>
        <!-- /.breadcrumb -->
    </div>
@endsection

@push('head-script')
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">

<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/switchery/dist/switchery.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2/select2.min.css') }}">

<style>
    .dropdown-content {
        width: 250px;
        max-height: 250px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    #product-box .select2-results__option--highlighted[aria-selected] {
         background-color: #ffffff !important;
         color: #000000 !important;
    }
    #product-box .select2-results__option[aria-selected=true] {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    #product-box .select2-results__option[aria-selected] {
        cursor:default !important;
    }
    #selectProduct {
        width: 200px !important;
    }

    #project-contacts {
        max-height: 95px !important;
        overflow: auto;
    }

    #client-contacts {
        max-height: 95px !important;
        overflow: auto;
    }
</style>
@endpush

@section('content')

    <div class="row">
        <div class="col-xs-12">

            <div class="panel panel-inverse">
                <div class="panel-heading"> @lang('modules.invoices.addInvoice')</div>
                <div class="panel-wrapper collapse in" aria-expanded="true">
                    <div class="panel-body">
                        {!! Form::open(['id'=>'storePayments','class'=>'ajax-form','method'=>'POST']) !!}
                        <div class="form-body">

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label">@lang('app.invoice') #</label>
                                        <div>
                                            <div class="input-group">
                                                <div class="input-group-addon"><span class="invoicePrefix" data-prefix="{{ $invoiceSetting->invoice_prefix }}">{{ str_replace('{year}',date("y"), explode('{sequence}', $invoiceSetting->invoice_prefix)[0]) }}</span></div>
                                                <input type="number"  class="form-control readonly-background"  name="invoice_number" id="invoice_number" value="@if(is_null($lastInvoice))1 @else{{ ($lastInvoice) }}@endif">
                                                <div class="input-group-addon"><span class="invoicePrefix" data-sufix="{{ $invoiceSetting->invoice_prefix }}">{{ explode('{sequence}', $invoiceSetting->invoice_prefix)[1] }}</span></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @if(in_array('projects', $modules))
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="control-label">@lang('app.project')
                                                <a class="mytooltip" href="javascript:void(0)">
                                                    <i class="fa fa-info-circle"></i>
                                                    <span class="tooltip-content5">
                                                        <span class="tooltip-text3">
                                                            <span class="tooltip-inner2">
                                                                @lang('modules.invoices.projectWithClient')
                                                            </span>
                                                        </span>
                                                    </span>
                                                </a>
                                            </label>
                                            <div class="row">
                                                <div class="col-xs-12">
                                                    <select class="select2 form-control" onchange="getCompanyName()" data-placeholder="@lang('modules.invoices.chooseProject')" id="project_id" name="project_id">
                                                        <option value="">--</option>
                                                        @foreach($projects as $project)
                                                            <option 
                                                                data-client-id="{{ $project->client_id }}"
                                                                data-client-name="{{ $project->client->name }}"
                                                                data-retention="{{ $project->retention }}"
                                                                value="{{ $project->id }}">
                                                                {{ $project->account_code." ".ucwords($project->client->name." - ".$project->project_name) }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label" id="companyClientName">@lang('app.client_name')</label>
                                        <div class="row">
                                            <div class="col-xs-12" id="client_company_div">
                                                <div class="input-icon">
                                                    <input type="text" readonly class="form-control" name="" id="company_name" value="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">

                                    <div class="form-group" >
                                        <label class="control-label">@lang('modules.invoices.invoiceDate')</label>
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="input-icon">
                                                    <input type="text" class="form-control" name="issue_date" id="invoice_date" value="{{ Carbon\Carbon::today()->format($global->date_format) }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label">@lang('app.dueDate')</label>
                                        <div class="input-icon">
                                            <input type="text" class="form-control" name="due_date" id="due_date" value="{{ Carbon\Carbon::today()->addDays($invoiceSetting->due_after)->format($global->date_format) }}">
                                        </div>
                                    </div>

                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label">@lang('modules.invoices.currency')</label>
                                        <select class="form-control select2" name="currency_id" id="currency_id">
                                            @foreach($currencies as $currency)
                                                <option value="{{ $currency->id }}" @if($global->currency_id == $currency->id) selected @endif>{{ $currency->currency_symbol.' ('.$currency->currency_code.')' }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                </div>

                            </div>


                            <div class="row">
                                <div class="col-md-4" id="data-fact" style="height:150px; overflow: scroll;">
                                    <div class="col-xs-12" style="margin-bottom: 10px;">
                                        <label class="control-label">@lang('app.headerEs')</label>  
                                    </div>

                                        <div class="col-md-5 text-center">
                                            @lang('app.fieldName')  
                                        </div>

                                        <div class="col-md-5 text-center">
                                            @lang('app.valueEs')
                                        </div>

                                            <button type="button" class="btn btn-circle btn-info" style="margin-left: 8px;margin-bottom:-11px;margin-top:-11px;" id="add-item-fact"><i class="fa fa-plus" style="color: white;"></i></button>
                                   
                                    <div class="col-xs-12 item-row" id="empty-item">

                                        <div class="col-md-5">
                                            <label class="control-label"></label>
                                            <input type="text" class="form-control" name="NombreCampo[]" >
                                        </div>

                                        <div class="col-md-5">
                                            <label class="control-label"></label>
                                            <input type="text" class="form-control" name="Valor[]" >
                                        </div>

                                        <div class="col-md-2 text-right" style="margin-top:13px;">
                                            <button type="button" class="btn remove-item btn-circle btn-danger"><i class="fa fa-remove"></i></button>
                                        </div>
                                    </div>
                               
                                </div>
                                <div class="col-md-4" id="tittle-project-contact">
                                    <div class="control-label">
                                        <label class="control-label">@lang('modules.projects.contactsProjects')</label>
                                    </div>
                                    <div class="panel b-all border-radius" id="project-contacts" hidden>
                                        <div class="panel-wrapper collapse in">
                                            <div>
                                                @forelse ($contacts as $key=>$cont)
                                                <div class="row m-b-10 m-l-5 m-t-5 m-r-5">
                                                    <div class="col-xs-12 m-b-5">
                                                        <h7>{{ ucfirst($cont->contact_name )}}</h7>
                                                    </div>
                                                    <div class="col-xs-6">
                                                        @if($cont->email != '' || $cont->email != null)
                                                            <label style="font-weight: 300; font-size: 8px">{{ ucfirst($cont->email )}}</label>
                                                        @endif
                                                    </div>
                                                    <div class="col-xs-6 text-right">
                                                        @if($cont->phone != '' || $cont->phone != null)
                                                            <label  style="font-weight: 300; font-size: 8px">{{ ucfirst($cont->phone )}}</label>
                                                        @else
                                                            <label  style="font-weight: 300; font-size: 8px">@lang('app.doesNotHave')</label>
                                                        @endif
                                                    </div>
                                                </div>
                                                    @empty
                                                        @lang('messages.NoRegisteredContacts')
                                                    @endforelse
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4" id="tittle-client-contact">
                                    <div class="control-label">
                                        <label class="control-label">@lang('modules.projects.contactsClient')
                                    </div>
                                    <div class="panel b-all border-radius" id="client-contacts" hidden>
                                        <div class="panel-wrapper collapse in">
                                            <div>
                                                @forelse ($contacts as $key=>$cont)
                                                <div class="row m-b-10 m-l-5 m-t-5 m-r-5">
                                                    <div class="col-xs-12 m-b-5">
                                                        <h7>{{ ucfirst($cont->contact_name )}}</h7>
                                                    </div>
                                                    <div class="col-xs-6">
                                                        @if($cont->email != '' || $cont->email != null)
                                                            <label style="font-weight: 300; font-size: 8px">{{ ucfirst($cont->email )}}</label>
                                                        @endif
                                                    </div>
                                                    <div class="col-xs-6 text-right">
                                                        @if($cont->phone != '' || $cont->phone != null)
                                                            <label  style="font-weight: 300; font-size: 8px">{{ ucfirst($cont->phone )}}</label>
                                                        @else
                                                            <label  style="font-weight: 300; font-size: 8px">@lang('app.doesNotHave')</label>
                                                        @endif
                                                    </div>
                                                </div>
                                                    @empty
                                                        @lang('messages.NoRegisteredContacts')
                                                    @endforelse
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            @if(count($fields) > 0)
                            <h3 class="box-title">@lang('modules.projects.otherInfo')</h3>
                            <div class="row">
                                @foreach($fields as $field)
                                    <div class="col-md-3">
                                        <label>{{ ucfirst($field->label) }}</label>
                                        <div class="form-group">
                                            @if( $field->type == 'text')
                                                <input type="text" name="custom_fields_data[{{$field->name.'_'.$field->id}}]" class="form-control" placeholder="{{$field->label}}" value="{{$editUser->custom_fields_data['field_'.$field->id] ?? ''}}">
                                            @elseif($field->type == 'password')
                                                <input type="password" name="custom_fields_data[{{$field->name.'_'.$field->id}}]" class="form-control" placeholder="{{$field->label}}" value="{{$editUser->custom_fields_data['field_'.$field->id] ?? ''}}">
                                            @elseif($field->type == 'number')
                                                <input type="number" name="custom_fields_data[{{$field->name.'_'.$field->id}}]" class="form-control" placeholder="{{$field->label}}" value="{{$editUser->custom_fields_data['field_'.$field->id] ?? ''}}">

                                            @elseif($field->type == 'textarea')
                                                <textarea name="custom_fields_data[{{$field->name.'_'.$field->id}}]" class="form-control" id="{{$field->name}}" cols="3">{{$editUser->custom_fields_data['field_'.$field->id] ?? ''}}</textarea>

                                            @elseif($field->type == 'radio')
                                                <div class="radio-list">
                                                    @foreach($field->values as $key=>$value)
                                                        <label class="radio-inline @if($key == 0) p-0 @endif">
                                                            <div class="radio radio-info">
                                                                <input type="radio" name="custom_fields_data[{{$field->name.'_'.$field->id}}]" id="optionsRadios{{$key.$field->id}}" value="{{$value}}" @if(isset($editUser) && $editUser->custom_fields_data['field_'.$field->id] == $value) checked @elseif($key==0) checked @endif>>
                                                                <label for="optionsRadios{{$key.$field->id}}">{{$value}}</label>
                                                            </div>
                                                        </label>
                                                    @endforeach
                                                </div>
                                            @elseif($field->type == 'select')
                                                {!! Form::select('custom_fields_data['.$field->name.'_'.$field->id.']',
                                                        $field->values,
                                                        isset($editUser)?$editUser->custom_fields_data['field_'.$field->id]:'',['class' => 'form-control gender'])
                                                !!}

                                            @elseif($field->type == 'checkbox')
                                            <div class="mt-checkbox-inline custom-checkbox checkbox-{{$field->id}}">
                                                <input type="hidden" name="custom_fields_data[{{$field->name.'_'.$field->id}}]" 
                                                id="{{$field->name.'_'.$field->id}}" value=" ">
                                                @foreach($field->values as $key => $value)
                                                    <label class="mt-checkbox mt-checkbox-outline">
                                                        <input name="{{$field->name.'_'.$field->id}}[]"
                                                               type="checkbox" onchange="checkboxChange('checkbox-{{$field->id}}', '{{$field->name.'_'.$field->id}}')" value="{{$value}}"> {{$value}}
                                                        <span></span>
                                                    </label>
                                                @endforeach
                                            </div>
                                            @elseif($field->type == 'date')
                                                <input type="text" class="form-control date-picker" size="16" name="custom_fields_data[{{$field->name.'_'.$field->id}}]"
                                                    value="{{ isset($editUser->dob)?Carbon\Carbon::parse($editUser->dob)->format('Y-m-d'):Carbon\Carbon::now()->format($global->date_format)}}">
                                            @endif
                                            <div class="form-control-focus"> </div>
                                            <span class="help-block"></span>

                                        </div>
                                    </div>
                                @endforeach

                            </div>
                        @endif

                            <hr>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group m-b-10 product-select" id="product-select">
                                        <select id="selectProduct" name="select"  data-placeholder="Select a product">
                                            <option></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 text-center">
                                    
                                    <span class="btn btn-sm btn-info btn-file">
                                    <span class="fa fa-download"></span>
                                        <span>@lang('modules.invoices.importExcel')</span>
                                        <input type="file" class="form-control" id="importExcel" name="upload" accept=".csv, .xlsx, .xls, .xlsm"> 
                                    </span>

                                    <button type="button" class="btn btn-sm btn-info" id="importPrevInvoice" name="importPrevInvoice"><i class="fa fa-download"></i> @lang('modules.invoices.importPreviousInvoice')</button>
                                    
                                </div>
                                <div class="col-md-3 text-right">
                                    <button type="button" class="btn btn-sm btn-info" id="add-item"><i class="fa fa-plus"></i> @lang('modules.invoices.addItem')</button>
                                </div>  
                            </div>
                            
                        <br>
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="control-label">@lang('modules.invoices.showInvoiceTitle')
                                            <a class="mytooltip" href="javascript:void(0)">
                                                <i class="fa fa-info-circle"></i>
                                                <span class="tooltip-content5">
                                                    <span class="tooltip-text3">
                                                        <span class="tooltip-inner2">
                                                            @lang('modules.invoices.showInvoiceTitleInfo')
                                                        </span>
                                                    </span>
                                                </span>
                                            </a>
                                        </label>
                                        <div class="switchery-demo">
                                            <input type="checkbox" id="show_invoice_title" name="show_invoice_title" class="js-switch " data-color="#00c292" data-secondary-color="#f96262" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div class="form-group" >
                                        <label class="control-label">@lang('modules.invoices.invoiceTitle')</label>
                                        <textarea class="form-control" name="invoiceTitle" id="invoiceTitle" rows="2" readonly></textarea>
                                    </div>
                                </div>
                                <div class="col-md-1">&nbsp;</div>
                            </div>

                            <div class="row">

                                <div class="col-xs-12 visible-md visible-lg">
                                    <div class="col-md-2 font-bold" style="padding: 8px 15px">
                                        @lang('modules.invoices.item')
                                    </div>
                                    <div class="col-md-4 font-bold" style="padding: 8px 15px; visibility: hidden;">
                                        @lang('app.description')
                                    </div>
                                    <div class="col-md-1 font-bold" style="padding: 8px 15px">
                                        @lang('modules.invoices.qty')
                                    </div>
                                    @if($invoiceSetting->hsn_sac_code_show)
                                        <div class="col-md-1 font-bold" style="padding: 8px 15px">
                                            @lang('modules.invoices.hsnSacCode')
                                        </div>
                                    @endif
                                    <div class="col-md-1 font-bold" style="padding: 8px 15px">
                                        @lang('modules.invoices.unitPrice')
                                    </div>
                                    <div class="col-md-1 text-center font-bold" style="padding: 8px 15px">
                                        @lang('modules.invoices.amount')
                                    </div>
                                    <div class="col-md-1" style="padding: 8px 15px">
                                        &nbsp;
                                    </div>
                                </div>

                                <div id="sortable" style="width:100%; height:400px; overflow: scroll;">
                                    <div class="col-xs-12 item-row margin-top-5">
                                        <div class="col-md-1">
                                            <div class="row">
                                                <div class="form-group">
                                                    <label class="control-label hidden-md hidden-lg">@lang('modules.invoices.item')</label>
                                                    <div class="input-group">
                                                        <div class="input-group-addon"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></div>
                                                        <input type="text" class="form-control item_name" name="item_name[]">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label class="control-label hidden-md hidden-lg">@lang('app.description')</label>
                                                <textarea name="item_summary[]" class="form-control" placeholder="@lang('app.description')" rows="1"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="form-group">
                                                <label class="control-label hidden-md hidden-lg">@lang('modules.invoices.qty')</label>
                                                <input type="number" min="1" class="form-control quantity" value="" name="quantity[]">
                                            </div>
                                        </div>
                                        @if($invoiceSetting->hsn_sac_code_show)
                                            <div class="col-md-1">
                                                <label class="control-label hidden-md hidden-lg">@lang('modules.invoices.hsnSacCode')</label>
                                                <input type="text" class="form-control" name="hsn_sac_code[]">
                                            </div>
                                        @endif
                                        <div class="col-md-1">
                                            <div class="form-group">
                                                <label class="control-label hidden-md hidden-lg">@lang('modules.invoices.unitPrice')</label>
                                                <input type="text" class="form-control cost_per_item" name="cost_per_item[]" value="">
                                            </div>
                                        </div>
                                        <div class="col-md-1 border-dark text-center">
                                            <label class="control-label hidden-md hidden-lg">@lang('modules.invoices.amount')</label>
                                            <p class="form-control-static"><span class="amount-html">0.00</span></p>
                                            <input type="hidden" class="amount" name="amount[]" value="">
                                        </div>
                                        <div class="col-md-1 text-right visible-md visible-lg">
                                            <button type="button" class="btn remove-item btn-circle btn-danger"><i class="fa fa-remove"></i></button>
                                        </div>
                                        <div class="col-md-1 hidden-md hidden-lg">
                                            <div class="row">
                                                <button type="button" class="btn btn-circle remove-item btn-danger"><i class="fa fa-remove"></i> @lang('app.remove')</button>
                                            </div>
                                        </div>
                                        <!-- Campo oculto para el código de categoría con valor por defecto -->
                                        <input type="hidden" name="category_code[]" value="0">
                                    </div>
                                </div>

                                <hr>
                                <div class="row">
                                    <div class="col-xs-8 text-right">
    
                                        <div class="row p-t-10">
                                            <div class="col-md-offset-6 col-xs-6 col-md-6 text-center font-bold" >
                                                @lang('modules.invoices.invoiceConfig')
                                            </div>
                                        </div>
                                        <div class="row p-t-10">
                                            <div class="col-md-offset-6 col-xs-6 col-md-6 text-right" >
                                                <input type="text" min="0" value="