@extends('layouts.admin')

 <link href="https://cdnjs.cloudflare.com/ajax/libs/gijgo/1.9.13/combined/css/gijgo.min.css" rel="stylesheet" type="text/css" />
 
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
@section('content')
@if(session()->has('message'))
<div class="alert alert-success">
    {{ session()->get('message') }}
</div>
@endif

<div class="col-12 col-sm-12">
<div class="card card-primary card-outline card-tabs">
<div class="card-header p-0 pt-1 border-bottom-0">
<ul class="nav nav-tabs" >

<li class="nav-item">
<a class="nav-link active"  href="{{route('result.index')}}"  aria-selected="false"  role="tabpanel">Results</a>
</li>
</ul>

</div>


    <small>
        <div class="card card card-secondary">
            <div class="card-header-new">
                <span class="card-title">Edit Project Activity</span>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                </div>
            </div>

            <!-- /.card-header -->
            <div class="card-body">
            <form method="POST" action="{{ route('activity.update',$activity->id) }}">
    @method('PUT')
  @csrf 
 
            <table class="table table-hover" >
            <input type="hidden" name="project_id" value="{{$project_id}}">
            <input type="hidden" name="result_id" value="{{$result_id}}" id="results">
             <input type="hidden" id="activity" name="activity_id" value="{{$activity->id}}">

                <tr>


                   
                    <td style="width:100%;"> 
                        <label for="title">Title</label>
						<textarea type="textarea"  class="form-control" name="title" required value="{{$activity->title}}">{{$activity->title}}</textarea>
                       
                        <span class="text-danger"></span>

                    </select>
                </td>
               
            </tr>
            <tr>
                <td style="width:33%;"> 
                    <label for="total_target">Total Target</label>
                    <input type="number"  class="form-control" name="total_target" value="{{$activity->total_target}}"required />
                    <span class="text-danger"></span>


                </td>

                <td style="width:33%;"> 
                    <label for="budget">Budget</label>
                    <input type="number"  class="form-control" name="budget"  value="{{$activity->budget}}"required />
                    <span class="text-danger"></span>
                </td>
                <td style="width:33%;"> 
                    <label for="activity_no">Activity Number</label>
                    <input type="number"  class="form-control" name="activity_no" value="{{$activity->activity_no}}" required />
                    <span class="text-danger"></span>

                </td>
            </tr>
            <tr>
                <td style="width:33%;">
                    <label for="type">Activity Type</label>
                    <select class="form-control" id="type" name='type'>
                        <option selected >{{$activity->type}}</option>
                        @foreach($activity_types as $pro)
                        <option value="{{$pro->description}}">{{$pro->description}}</option>
                        @endforeach
                    </select>
                </td>

                <td style="width:33%;"> 
                    <label for="start_date">Start Date</label>
                    <input type="date"  class="form-control" name="start_date" value="{{$activity->start_date }}" required />
                    <span class="text-danger"></span>
            </td>
            <td style="width:33%;"> 
                <label for="end_date">End Date</label>
                <input type="date"  class="form-control" name="end_date"  value="{{$activity->end_date }}" required />
                <span class="text-danger"></span>
        </td>

    </tr>

    <tr>


        <td style="width:33%;">
            <label for="responsible">Sector</label>
            <select class="form-control" id="responsible" name='responsible'>
                <option selected  value="{{$activity->responsible}}">{{$activity->choices->description}}</option>
                 @foreach($sectors as $s)
                <option value="{{$s->id}}">{{$s->description}}</option>
                @endforeach
            </select>
        </td>
		
		 <td style="width:33%;">
                        <label for="status">Status</label>
                        <select class="form-control" id="status" name='status'>
                            <option selected >{{$activity->status}}</option>
                            @foreach($status as $pro)
                            <option value="{{$pro->description}}">{{$pro->description}}</option>
                            @endforeach
                        </select>
                    </td>


    </tr>

</table>
</div>
</div>

<div class="card card card-secondary">
    <div class="card-header-new">
        <span class="card-title">Activity Target Geography</span>
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
            </button>
        </div>
    </div>

<div class="card-body">
     	 <div class="row text-muted">
		@foreach($activity_district as $acd)
         @foreach($projectdistrict as $pd)
         @if($pd->id==$acd->district)
		<input type="hidden"  name="dd[]" value="{{$pd->id}}">
		<div class="col-sm-4 invoice-col">
			<div class="form-check">
				<label class="form-check-label" for="{{$pd->geographies->name}}">
				{{$pd->geographies->name}}
					 <input type="number" class="form-control"  name="target[]" value="{{$acd->target}}">					
				
				</label>
			</div>
		</div>
@endif
  
    @endforeach
    @endforeach
</div>

</div>
</div>
    <div class="card card card-secondary">
    <div class="card-header-new">
        <span class="card-title">Edit Project Activity Indicators</span>
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
            </button>
        </div>
        </div>
       <div class="card-body"> 
        <div class="col-sm-10">
		<div id='emptytree'></div>
            <input type="hidden" name="userIndicator[]" id="userIndicator"> 
           
<div id="indicatorTree"></div>

</div>
    </div>
</div>
<div class="row">
    <div class="col-sm">
        <button id="btnSave" class="btn btn-primary float-right " >Save Activity</button>
    </div>
</div>
<form>
</small>
<script type="text/javascript">
    $(document).ready(function(){
       

         // Result id
         var id = $('#activity').val();
         
         ajaxcall= $.ajax({
            url: '/editTreeView/'+id,
            type: 'get',
            dataType: 'json',
           
            
        success: function(response){
          
            
             var data=response[0];
			 if(data.length==0)
				$('#emptytree').append('Result is not aligned with SDGs Framework.');
             var selectedIndicators=response[1];
             
                  var mytree = $('#indicatorTree').tree({
                     primaryKey: 'id',
                     uiLibrary: 'bootstrap4',
                     dataSource: data,
                     checkboxes: true 
                    });
                  selectedIndicators.forEach(function(item,index){
                     mytree.check(mytree.getNodeById(item));
                  });
                    
          
      
             $('#btnSave').on('click', function () {
                 var checkedIds = mytree.getCheckedNodes();

                    $('#userIndicator').val(checkedIds);
                

                    });

              }});

          });

</script>

@endsection