@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">Activity</a>
                </li>
            </ul>

        </div>

        <form method="POST" action="{{ route('activity.store') }}">
            @csrf   
            <small>
                <div class="card card card-secondary">
                    <div class="card-header-new">
                        <span class="card-title">Add 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-new -->
                    <div class="card-body">
                        
                        <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">

                            <tr>
                                <td colspan=3> 
                                    <label for="title">Title</label>
									<textarea type="textarea"  class="form-control" name="title" required></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" required />
                                <span class="text-danger"></span>


                            </td>

                            <td style="width:33%;"> 
                                <label for="budget">Budget</label>
                                <input type="number"  class="form-control" name="budget" required />
                                <span class="text-danger"></span>


                            </td>
                            
                    <td style="width:33%;">
                        <label for="responsible">Sector</label>
                        <select class="form-control" id="responsible" name='responsible' required>
                            
                              <option value="">Sector</option>
                            @foreach($sectors as $s)
                            <option value="{{$s->id}}">{{$s->description}}</option>
                            @endforeach
                        </select>
                    </td>   
                        </tr>
                        <tr>
                            <td style="width:33%;">
                                <label for="type">Activity Type</label>
                                <select class="form-control" id="type" name='type'>
                                    <option selected disabled>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" required />
                                <span class="text-danger"></span>

                            </select>
                        </td>
                        <td style="width:33%;"> 
                            <label for="end_date">End Date</label>
                            <input type="date"  class="form-control" name="end_date" required />
                            <span class="text-danger"></span>

                        </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)
		<input type="hidden" name="dd[]" value="{{$acd->id}}">
		<div class="col-sm-3 invoice-col">
			<div class="form-check">
				<label class="form-check-label" for="{{$acd->geographies->name}}">
				{{$acd->geographies->name}}
					<input type="number" class="form-control" name="target[]" value="0">						
				
				</label>
			</div>
		</div>
@endforeach
</div>
  

            </div>
        </div>
        <div class="card card card-secondary">
            <div class="card-header-new">
                <span class="card-title">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 = $('#results').val();
          $.ajax({
            url: 'treeView/'+id,
            type: 'get',
            dataType: 'json',
            
            success: function(response){
                
                var data=response;
				
				if(data.length==0)
					$('#emptytree').append('Result is not aligned with SDGs Framework.');
			
                var mytree = $('#indicatorTree').tree({
                    primaryKey: 'id',
                    uiLibrary: 'bootstrap4',
                    dataSource: data,
                    checkboxes: true
                });
                $('#btnSave').on('click', function () {
                    var checkedIds = mytree.getCheckedNodes();
					
                    $('#userIndicator').val(checkedIds);
                    


                });

            }});

      });

  </script>

  @endsection