@extends('admin.layouts.master') 
@section('content')
<style>
/*# bootstrap-duration-picker */
.bdp-input input {
    display: inline-block;
    margin-bottom: 3px;
    width: 60px;
}

.bdp-block {
    display: inline-block;
    line-height: 1;
    text-align: center;
    padding: 5px 3px;
}
.bdp-block.hidden{
  display: none;
}
/* .sub_stage_box .form-group{
  margin: 0;
} */
</style>
<div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6" >
            <h1 class="m-0 text-dark">Template</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{asset('admin')}}">Home</a></li>
              <li class="breadcrumb-item active"><a href="{{asset(route('template'))}}">Template</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
  <div class="container-fluid">
    @if(session()->has('success'))
      <div class="alert alert-success">
        {{ session()->get('success') }}
       </div>
    @endif
    @if(session()->has('error'))
      <div class="alert alert-success">
        {{ session()->get('error') }}
      </div>
    @endif
        <div class="row">
          <div class="col-md-12">
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Add Template</h3>
              </div>
              <form id="journey_form" role="form" method="post" action="{{!isset($template['id']) ? route('template.store') : route('template.update',$template['id'])}}">
                @csrf
                @if(isset($template['id']))
                   {{ method_field('PUT') }}
                @endif
                <div class="card-body">
                  <div class="form-group">
                    <label for="template_name">Template</label>
                    <input type="hidden" id="template_id" name="template_id" value="{{ $template['id'] }}">
                    <input type="text" class="form-control" id="template_name" name="template_name" required placeholder="Enter template name" value="{{ old('name', $template['name']) }}">
                  </div>
              <!-- STAGE BOX START -->
              <div class="stages_container">
              @if(isset($template['id']))
                @foreach($stage as $stageKey => $stageVal)
                <div class="card card-info stage_box">
                  <div class="card-header">
                    <h3 class="card-title">Stage</h3>
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                      <button type="button" class="btn btn-tool delete_stage"><i class="fas fa-trash"></i></button>
                    </div>
                  </div>
                
                  <div class="card-body">
                    <div class="row">
                      <div class="col-md-12">

                    <div class="row">

                      <div class="col-md-6">
                        <div class="form-group">
                          <label for="stage_name">Stage name</label>
                          <input class="stage_id" type="hidden" name="stage_id" value="{{ $stageVal['id'] }}">
                          <input type="text" class="form-control stage_name" name="stage_name" required placeholder="Enter stage name" value="{{ old('name', $stageVal['name']) }}">
                        </div>
                      </div>

                      <div class="col-md-6">
                        <div class="form-group">
                          <label for=".est_duration">Estimated Duration</label>
                          <input type="text" name="stage_duration" class="form-control est_duration" value="{{ old('estimated_duration', $stageVal['estimated_duration']) }}">
                          {{-- <input type="number" class="form-control" id="est_duration" name="est_duration" required placeholder="Enter Estimated Duration" value="{{ old('question', $questionnaire['question']) }}"> --}}
                        </div>
                      </div>
                      
                    </div>

                    <div class="col-md-6">
                      <div class="form-group">
                        <label for=".description">Description</label>
                        <input type="text" class="form-control description" name="stage_desc" required placeholder="Enter description" value="{{ old('description', $stageVal['description']) }}">
                      </div>
                    </div>
                    
                      <div class="answer_container ">
                        <div class="form-group">
                            <input type="button" class="btn btn-success add_sub_stage" value="+ Add Sub stage">
                        </div>
                        @if(isset($stageVal['substages']) && $stageVal['substages'])
                          @foreach($stageVal['substages'] as $key => $val)
                          <div class="col-md-6 sub_stage_box">
                            
                            <div class="row">
                                
                              <div class="col-md-6">
                                <div class="form-group">
                                  <input type="hidden" class="form-control" name="sub_stage_parent" value="{{ $stageVal['id'] }}">
                                  <input type="hidden" class="form-control sub_stage_id" name="sub_stage_id" value="{{$val->id}}">
                                  <input type="text" class="form-control sub_stage_name" name="sub_stage_name" value="{{$val->name}}" required placeholder="Enter Sub stage name">
                                </div>
                              </div>
                              
                              <div class="col-md-3">
                                <div class="form-group">
                                  <input type="button" class="btn btn-danger delete_sub_stage" value="Delete">
                                </div>
                              </div>
                              
                            </div>
                          
                          </div>{{-- Sub Stage Box END --}}
                          @endforeach
                        @endif


                      
                    </div>
                  

                </div>
                </div>
                </div>
                </div>
                @endforeach
              @endif
              </div>
              <!-- STAGE BOX END -->
              <div class="form-group">
                  <input type="button" class="btn btn-success" id="add_stage" value="+ Add stage">
              </div>

              </div>
                <div class="card-footer">
                  <input type="hidden" value="" name="journey_data" id="journey_data">
                  <button type="submit" class="btn btn-primary submitForm">Submit</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
  @endsection
  
@section('script')
<script>
  
  $('.est_duration').durationPicker({
    showSeconds: false
  });

  $(document).on('click', '.submitForm', function(e){
    e.preventDefault();
    journey.collect_data(function(data){
      $('#journey_data').val(JSON.stringify(data));
      $('#journey_form').submit();
    });
  });

  $(document).on('click', '.delete_stage', function(){
      var $this = $(this);
      var stage_id = $this.parents('.stage_box:first').find('.stage_id:first').val();
      if(confirm('are sure you want to remove this stage?')){
        if(stage_id){
          $.ajax({
            type: 'POST',
            url: base_path + "admin/journey-templates/remove-stage",
            data: {'stage_id': stage_id},
            success: function (response) {
                if(response.status == 'success'){
                  $this.parents('.stage_box:first').remove();
                }else if(response.status == 'error'){
                  alert('Unable to remove');
                }
            }
          });
        }else{
          $this.parents('.stage_box:first').remove();
        }
      }
    });

</script>
  
@endsection