@extends('layouts.master')
@section('content')
    @include('partials.containers-header')
    <div class="row">
        <div class="col-md-12">
            @include('partials.errors_display')
            <div class="card">
                <div class="card-header {{config('adminlte.bg-card-header', 'bg-info-gradient')}}" style="min-height: 3.5em">
                    <h4 class="card-title">@lang('Edit') @lang('Phase')</h4>
                </div>
                <div class="card-body">
                    <form role="form" action="{{route($model.'.update',$record->id)}}" method="post">
                        @csrf
                        @method('PUT')
                        <div class="form-group row" style="margin-top: -.5em">
                            <div class="col-md-4"></div>
                            <div class="col-md-8">
                                @include('partials.edit-buttons',[
                                    'model' => $model,
                                    'btns'  => 'mics'
                                ])
                                @if ($record->deleteable)
                                <a href="{{url('phase/delete-data/'.$record->id)}}" class="btn btn-sm btn-danger">
                                    <i class="fa fa-trash"></i> @lang('Data Reset')
                                </a>
                                @endif                                
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-7">
                                @include('config.phase.fields',[
                                    'option'  => 'update',
                                    'record'  => $record,
                                ])
                            </div>
                            <div class="col-md-5">
                                <div class="form-group">
                                    <div class="col-sm-3" style="text-align: right">
                                        {{ Form::label('actual_data',__('Actual Data')) }}
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" 
                                            class="form-control" 
                                            name="actual_data" 
                                            id="actual_data" 
                                            value="{{$strTextResu}}" disabled>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-3" style="text-align: left">
                                        {{ Form::label('another_id',__('Copy From')) }}
                                    </div>
                                    <div class="col-sm-7">
                                        <select name="another_id" id="another_id" class="form-control">
                                            <option value="0">@lang('Phase to copy data from')</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-3" style="text-align: right">
                                        {{ Form::label('data_copy',__('What Copy ?')) }}
                                    </div>
                                    <div class="col-sm-7">
                                        <select name="data_copy" id="data_copy" class="form-control" disabled>
                                            <option value="null">@lang('What do you want to Copy')?</option>
                                            <option value="o">@lang('Only Objectives (Map)')</option>
                                            <option value="k">@lang('Objectives and KPIs (BSC)')</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <form role="form" action="{{url('behavior/'.$record->id)}}" method="post">
                        @csrf
                        @method('PUT')
                        <div class="row justify-content-center">
                            <div class="col-md-7">
                                @include('config.phase.behavior',[
                                    'option'  => 'update',
                                    'record'  => $record,
                                ])
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @include('partials.changes')
    @include('partials.containers-footer')
@endsection

@section('javascript')
<script type="text/javascript">
    function startIntro(){
        var intro = introJs();
        intro.setOptions({
            nextLabel: "{{__('Next')}}",
            prevLabel: "{{__('Prev')}}",
            skipLabel: "{{__('Skip')}}",
            doneLabel: "{{__('Done')}}",
            steps: [
                { intro: "{{__('This form allows to Update a Phase')}}!!" },
                { element: '#save', intro: "{{__('Use this button to save this record to database')}}", },
                { element: '#show', intro: "{{__('Use this button to change to the show view')}}", },
                { element: '#back', intro: "{{__('Use this button to go to records list')}}", },
                { element: '#chan', intro: "{{__('Use this button to see the changes have been applied to this record')}}", },
                { element: '#name', intro: "{{__('Name of the Phase')}}", },
                { element: '#country_id', intro: "{{__('Country in which one you will work during the Phase')}}", },
                { element: '#start_date', intro: "{{__('Start date of the Phase')}}", },
                { element: '#end_date', intro: "{{__('End date of the Phase')}}", },
                { element: '#active', intro: "{{__('It indicates weather the Phase is active or not')}}", },
                { element: '#actual_data', intro: "{{__('Data associated with the Phase.  When the Phase is empty, you can copy data from another one')}}", },
                { element: '#another_id', intro: "{{__('Here you can choose the Phase which data copy from.  It is available only if the actual Phase is empty')}}", },
                { element: '#data_copy', intro: "{{__('Here you must specify which data will be copy from the other Phase')}}", },
                { element: '#optipesi', intro: "{{__('By default the Phase is pessimistic.  Here you can change that behavior')}}", },
                { element: '#behaobje', intro: "{{__('Here you can tweak the behavior of the Objectives. Only when It is optimistic')}}", },
                { element: '#behapers', intro: "{{__('Here you can tweak the behavior of the Perspectives. Only when It is optimistic')}}", },
            ]
        });

        intro.start();
    };

    $(function () {
        $.getJSON('/api/v1/anp/'+{{$record->id}},function (data) {
            // var i = 0;
            // $.each(data, function () {
            //     i++;
            // });
            // $('#another_id').empty();
            // var option = $("<option></option>")
            //     .attr("value", "0")
            //     .text("Phase to copy data from");
            // $('#another_id').append(option);
            $.each(data, function(key, value) {
                var option = $("<option></option>")
                    .attr("value", value.id)
                    .text(value.name);
                $('#another_id').append(option);
            });
        });
        $("#another_id").on('change',function(e) {
            var id = e.target.value;
            if (id > 0) {
                $('#data_copy').attr('disabled',false);
                $('#data_copy').attr('required',true);
            } else {
                $('#data_copy').attr('disabled',true);
                $('#data_copy').attr('required',false);
            }
        });
        $('#optimistic').click(function(e) {
            $('#objective_o').attr('disabled',null);
            $('#objective_a').attr('disabled',null);
            $('#objective_d').attr('disabled',null);
            $('#perspective_o').attr('disabled',null);
            $('#perspective_a').attr('disabled',null);
            $('#perspective_d').attr('disabled',null);
        });
        $('#pessimistic').click(function(e) {
            $('#objective_o').attr('disabled','disabled');
            $('#objective_a').attr('disabled','disabled');
            $('#objective_d').attr('disabled','disabled');
            $('#perspective_o').attr('disabled','disabled');
            $('#perspective_a').attr('disabled','disabled');
            $('#perspective_d').attr('disabled','disabled');
        });
    });
</script>
@endsection