{{--

    Name: import.partials.edit
    Author: JH2
    Created: 2016-02-10

--}}

@extends('partials.box')

@section($content_id)

    {!! Form::model($import, ['route' => ['imports.update', $import->id], 'method' => 'PUT',  'class' => 'form-horizontal']) !!}
    <div class="row">
        <div class="col-lg-12">

            <div class="form-group {{ $errors->has('receiverList') ? 'has-error' : '' }}">
                {!! Form::label('text', Lang::get('import.receiverList'), ['class' => 'col-md-3 control-label']) !!}
                <div class="col-md-4">
                    @if(!empty($receiverLists))
                        {!! Form::select('receiverList', $receiverLists, old('receiverList'), ['class' => 'form-control', 'data-event' => 'disable']) !!}
                        {!! $errors->first('receiverList', '<span class="help-block">:message</span>') !!}
                    @else
                        {!! Form::select('receiverList', $receiverLists, old('receiverList'), ['class' => 'form-control', 'data-event' => 'disable', 'disabled']) !!}
                    @endif
                </div>
                <div style="width:30px;line-height:40px;float:left;">
                    {{-- Sorry Bjorn! I don't know where to put the CSS atm :( --}}
                    {{ Lang::get('import.or') }}
                </div>
                <div class="col-md-4">
                    {!! Form::text('newReceiverList', old('newReceiverList'), ['class' => 'form-control', 'placeholder' => Lang::get('import.createNewReceiverList'), 'data-event' => 'isEmpty']) !!}
                </div>
            </div>

            <div class="form-group {{ $errors->has('overwrite') ? 'has-error' : '' }}">
                {!! Form::label('overwrite', Lang::get('import.overwrite'), ['class' => 'col-md-3 control-label']) !!}
                <div class="col-md-4">
                    {!! Form::checkbox('overwrite', 1, old('overwrite')) !!}
                    {!! $errors->first('overwrite', '<span class="help-block">:message</span>') !!}
                    <i class="fa fa-question-circle hover-info" title="{{ Lang::get('import.overwriteExplanation') }}"></i>
                </div>
            </div>

            <hr>

            <div class="col-md-7">
                <div class="form-group {{ $errors->has('email') ? 'has-error' : '' }}">
                    {!! Form::label('text', Lang::get('import.email'), ['class' => 'col-md-3 control-label']) !!}
                    <div class="col-md-8">
                        {!! Form::select('email', ['-1' => Lang::get('import.pickColumnEmail')] + json_decode($import->json, true)['headers'], old('email'), ['class' => 'form-control', 'required', 'data-event' => 'prop-dropdown']) !!}
                        {!! $errors->first('email', '<span class="help-block">:message</span>') !!}
                    </div>
                </div>

                <div class="form-group {{ $errors->has('phone') ? 'has-error' : '' }}">
                    {!! Form::label('text', Lang::get('import.phone'), ['class' => 'col-md-3 control-label']) !!}
                    <div class="col-md-8">
                        {!! Form::select('phone', ['-1' => Lang::get('import.pickColumnPhone')] + json_decode($import->json, true)['headers'], old('phone'), ['class' => 'form-control', 'required', 'data-event' => 'prop-dropdown']) !!}
                        {!! $errors->first('phone', '<span class="help-block">:message</span>') !!}
                    </div>
                </div>
            </div>

            <div class="col-md-4 hidden-xs">
                {{ Lang::get('import.infoText') }}
            </div>

            <div class="col-md-7">
                @if(array_key_exists('headers', json_decode($import->json, true)))
                    @foreach((array)$receiverPropTemplates as $templateId => $propTemplate)
                        <div class="form-group {{ $errors->has('receiverProp') ? 'has-error' : '' }}">
                            {!! Form::label('text', $propTemplate, ['class' => 'col-md-3 control-label']) !!}
                            <div class="col-md-8">
                                {!! Form::select('receiverProp['.$templateId.']', ['-1' => Lang::get('import.pickColumn', ['name' => $propTemplate])] + json_decode($import->json, true)['headers'], old('receiverProp'), ['class' => 'form-control', 'required', 'data-event' => 'prop-dropdown']) !!}
                                {!! $errors->first('receiverProp', '<span class="help-block">:message</span>') !!}
                            </div>
                        </div>
                    @endforeach
                @endif
                {{-- Check if we have more possible fields to add --}}
                @if(count(json_decode($import->json, true)['headers']) > 2)
                    <a class="btn btn-info white-text" data-element="propertyToggle">{!! Lang::get('import.showExtraHeaders') !!}</a>
                    <div class="hidden" data-element="propertyList">
                        <hr>
                        @foreach((array)json_decode($import->json, true)['headers'] as $property)
                            <div class="form-group">
                                {!! Form::label('text', $property, ['class' => 'col-md-3 control-label']) !!}
                                <div class="col-md-8">
                                    {!! Form::select('newReceiverProp['.$property.']', ['-1' => Lang::get('import.pickColumn', ['name' => $property])] + json_decode($import->json, true)['headers'], old('receiverProp'), ['class' => 'form-control', 'required', 'data-event' => 'prop-dropdown']) !!}
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            <div class="form-group">
                <div class="col-xs-12 text-right">
                    <hr>
                    @if((Auth::user()->company->package->max_receivers - Auth::user()->company->receivers()->count()) < $import->count)
                        {{-- Make sure the company have enought receivers to import this file --}}
                        <a href="{{ route('account.edit') }}">
                            <span class="note-box"><i class="fa fa-lightbulb-o"></i>
                                {{ Lang::get('import.edit.receiverLimit') }}
                            </span>
                        </a>
                        {!! Form::submit(Lang::get('import.importBtn'), ['class' => 'btn  btn-primary', 'disabled' => true]) !!}
                    @else
                        {!! Form::submit(Lang::get('import.importBtn'), ['class' => 'btn  btn-primary']) !!}
                    @endif
                </div>
            </div>

        </div>
    </div>
    {!! Form::close() !!}

@stop

@section('footer-script')
    <script type="text/javascript">
        /**
         * Make sure only one of the same dropdown value can exists through out
         * all dropdowns. If the second dropdown is set with a value we have
         * already used we will reset the first dropdown.
         */
        $('[data-event="prop-dropdown"]').change(function () {
            var dropdownElement = $(this);
            var dropdownValue = dropdownElement.val();

            $('[data-event="prop-dropdown"]').each(function(index, value){
                // Reset all other dropdowns with the same value as selected
                if($(this).val() == dropdownValue){
                    $(this).val('-1');
                }
                // Set dropdown value for the selected dropdown
                dropdownElement.val(dropdownValue);
            });
        });

        $('[data-element="propertyToggle"]').on('click', function() {
            if ($('[data-element="propertyList"]').hasClass('hidden')) {
                $('[data-element="propertyList"]').removeClass('hidden');
            } else {
                $('[data-element="propertyList"]').addClass('hidden');
            }
        });

        // Disable list dropdown if we are creating a new
        setInterval(function(){
            if($('[data-event="isEmpty"]').val() == ""){
                $('[data-event="disable"]').attr('readonly', false).attr('disabled', false);
            }else{
                $('[data-event="disable"]').attr('readonly', true).attr('disabled', true);
            }
        }, 500);

        // Check if we already have this receiverlist made and if so, we select it instead of making new
        $('[data-event="isEmpty"]').on('change', function() {
            var receiverLists = [
            @foreach($receiverLists as $index => $name)
                {
                    index: {{ $index }},
                    name: "{{ $name }}",
                },
            @endforeach
            ];

            var search = $(this).val();
            var result = $.grep(receiverLists, function(e) {
                if (e.name.toLowerCase() === search.toLowerCase()) {
                    return e.name;
                }
            });
            
            if(result.length != 0) {
                $('select[name="receiverList"] option[value='+result[0].index+']').prop('selected', true);
                $(this).val('');
            }
        });
    </script>
@stop