@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/jquery-tags-input/jquery.tagsinput.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/dropzone/dropzone.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/dropify/css/dropify.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/pickr/themes/classic.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/easymde/easymde.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/recommended_initiatives">Recommended Initiatives</a></li>
    <li class="breadcrumb-item active" aria-current="page">Create</li>
  </ol>
</nav>

<div class="row">
  <div class="col-lg-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        
        <form enctype="multipart/form-data" class="forms-sample" action="{{ route('recommended_initiatives.store')}}" method="post">
          @csrf
          <div class="row">
            <div class="mb-3 col-md-6">
              <label for="tenant" class="form-label">Tenant</label>
              <select id="tenant" name="create_tenant" class="js-example-basic-multiple form-select" data-width="100%">
                @foreach($tenants as $tenant)
                  <option value="{{$tenant->id}}">{{$tenant->title}}</option>
                @endforeach
                </select>
            </div>
            <table class="table">
              <thead>
              <tr>
                  <th>Initiative</th>
                  <th>Impact</th>
                  <th>Cost of Implementaition</th>
                  <th>Partner Services</th>
                  <th></th>
              </tr>
              </thead>
              <tbody id="table_body">
                  <tr>
                      <td>
                        <div class="mb-3 col-md-6">
                          <select required name="create_initiatives[]" class="js-example-basic-single form-select" data-width="100%">
                            @foreach($initiatives as $initiative)
                              <option value="{{$initiative->id}}">{{$initiative->title}}</option>
                            @endforeach
                            </select>
                        </div>
                      </td>
                      <td>
                        <div class="mb-3 col-md-6">
                          <select required class="js-example-basic-single form-select" name="create_impact[]">
                            <option value="low">Low</option>
                            <option value="moderate">Moderate</option>
                            <option value="large">Large</option>
                          </select>
                        </div>
                      </td>
                      <td>
                        <div class="mb-3 col-md-6">
                          <select required class="js-example-basic-single form-select" name="create_cost_of_implementation[]">
                            <option value="low">Low</option>
                            <option value="medium">Medium</option>
                            <option value="high">High</option>
                          </select>
                        </div>
                      </td>
                      <td>
                        <div class="mb-3 col-md-6">
                          <select class="js-example-basic-multiple form-select" name="create_partner_services0[]" multiple="multiple">
                            @foreach($partner_services as $partner_service)
                              <option value="{{$partner_service->id}}">{{$partner_service->title}}</option>
                            @endforeach
                          </select>
                        </div>
                      </td>
                  </tr>
              </tbody>
          </table>
          
            
          <div class="submit-button-wrapper">
            <button type="submit" class="btn btn-primary me-2">Create</button>
          </div>
        </form>
        <button id="add_more" type="button">Add more</button>
      </div>
    </div>
  </div>
</div>
@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/inputmask/jquery.inputmask.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/typeahead-js/typeahead.bundle.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/jquery-tags-input/jquery.tagsinput.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/dropzone/dropzone.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/dropify/js/dropify.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/pickr/pickr.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/flatpickr/flatpickr.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/tinymce/tinymce.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/easymde/easymde.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/ace-builds/ace.js') }}"></script>
  <script src="{{ asset('assets/plugins/ace-builds/theme-chaos.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/form-validation.js') }}"></script>
  <script src="{{ asset('assets/js/bootstrap-maxlength.js') }}"></script>
  <script src="{{ asset('assets/js/inputmask.js') }}"></script>
  <script src="{{ asset('assets/js/select2.js') }}"></script>
  <script src="{{ asset('assets/js/typeahead.js') }}"></script>
  <script src="{{ asset('assets/js/tags-input.js') }}"></script>
  <script src="{{ asset('assets/js/dropzone.js') }}"></script>
  <script src="{{ asset('assets/js/dropify.js') }}"></script>
  <script src="{{ asset('assets/js/pickr.js') }}"></script>
  <script src="{{ asset('assets/js/flatpickr.js') }}"></script>
  <script src="{{ asset('assets/js/tinymce.js') }}"></script>
  <script src="{{ asset('assets/js/easymde.js') }}"></script>
  <script src="{{ asset('assets/js/ace.js') }}"></script>
@endpush
<script>
  var initiatives = {!! json_encode($initiatives->toArray()) !!};
  var partner_services = {!! json_encode($partner_services->toArray()) !!};
  
  $(document).ready(function () {
    var count = 1;
    var table_html = $('#table_body tr').html();
    $(document).on('click','#add_more',function (e) { 
      e.preventDefault();
      var html = `<tr class="appended_row" id="tr_${count}">`;
      html += '<td>';
      html += '<div class="mb-3 col-md-6">';
      html += '<select required name="create_initiatives[]" class="js-example-basic-single form-select" data-width="100%">';
      initiatives.forEach(element => {
        html += `<option value="${element.id}">${element.title}</option>`
      });
      html += '</select></div></td>';
      html += '<td><div class="mb-3 col-md-6"><select  required class="js-example-basic-single form-select" name="create_impact[]"><option value="low">Low</option><option value="moderate">Moderate</option><option value="large">Large</option></select></div></td>';
      html += '<td><div class="mb-3 col-md-6"><select  required class="js-example-basic-single form-select" name="create_cost_of_implementation[]"><option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option></select></div></td>';
      html += '<td>';
      html += '<div class="mb-3 col-md-6">';
      html += `<select required name="create_partner_services${count}[]" class="js-example-basic-multiple form-select"  multiple="multiple">`;
        partner_services.forEach(element => {
        html += `<option value="${element.id}">${element.title}</option>`
      });
      html += '</select></div></td>';
      html += `<td><div class="mb-3 col-md-6"><button id="delete_${count}">Delete</button></div></td>`;
      $('#table_body').append(html);

      var but_id = `#delete_${count}`;
      var tr_id = `#tr_${count}`;


      $(function() {

        if ($(".js-example-basic-single").length) {
          $(".js-example-basic-single").select2();
        }
        if ($(".js-example-basic-multiple").length) {
          $(".js-example-basic-multiple").select2();
        }
      });
       
      $(but_id).click(function (e) { 
      e.preventDefault();
      $(tr_id).remove();
      });
      count++;
    });
  });

</script>

@endsection