@extends('layouts.app')

@section('page_css')
  @parent
  <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
  <link rel="stylesheet" href="{{ asset('assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css') }}" />
  <link rel="stylesheet" href="{{ asset('assets/vendor/libs/flatpickr/flatpickr.css') }}" />
  <link rel="stylesheet" href="{{ asset('assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.css') }}" />
  <link rel="stylesheet" href="{{ asset('assets/vendor/libs/jquery-timepicker/jquery-timepicker.css') }}" />
  <link rel="stylesheet" href="{{ asset('assets/vendor/libs/pickr/pickr-themes.css') }}" />
  <link rel="stylesheet" href="{{ asset('assets/vendor/libs/dropzone/dropzone.css') }}" /> 
  <style>
    thead {
      background-color: #666ee8;
      position: sticky ;
      top:0 ;
    }
    thead th{
      color:white !important;
    }
    .user_table_height
    {
      max-height: 25rem;
      overflow-y: auto;
    }
  </style>
@endsection

@section('content')
  <div class="container-xxl flex-grow-1 container-p-y">
    <div class="row">
      <!-- breadcrumb start -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item active">Startups</li>
          <li class="breadcrumb-item active">Incubators</li>
          <li class="breadcrumb-item active">Assign</li>
        </ol>
      </nav>
      <!-- breadcrumb end -->
    </div>
    <!-- Sticky Actions -->
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header border-bottom">
            <div class="row">
              <div class="d-flex justify-content-between">
                <h5 class="card-title mb-sm-0 me-2">Assign Incubators</h5>
                <a href="{!! route('admin.startups.incubators') !!}" 
                  class="btn btn-sm btn-label-primary me-3">
                  <span class="align-middle">
                      Back to Listing
                  </span>
                </a>
              </div>
            </div>
            <div class="row">
              <form id="assign_incubators_form" 
                    action="{{ route('admin.startups.incubators.assign.store') }}" 
                    method="post">
                <div class="row mt-3">
                  <div class="col-md-5 control-group">
                    <label for="incubators_id" class="form-label">Incubators</label>
                    <select id="incubators_id" name="incubators_id" data-placeholder="Select Incubator" class="select2 form-select">
                      <option value=""></option>
                      @foreach($incubators as $_incubators)
                        <option value="{{ $_incubators['id'] }}">
                          {{ $_incubators['name'] }}
                        </option>
                      @endforeach
                    </select>  
                  </div>
                  <div class="col-md-5 control-group">
                    <label for="startup_launch_id" class="form-label">Cohart</label>
                    <select id="startup_launch_id" name="startup_launch_id" data-placeholder="Select Cohart" class="select2 form-select">
                      <option value=""></option>
                      @foreach($startup_launch as $_startup_launch)
                        <option value="{{ $_startup_launch['id'] }}">
                          {{ $_startup_launch['title'] }} ({{ $_startup_launch['batch_caption'] }})
                        </option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-md-2 my-auto">
                    <button type="submit" 
                            id="assign_incubators_form_submit"  
                            form="assign_incubators_form"
                            class="btn btn-sm btn-primary mt-4"
                    >
                      Save
                    </button>
                  </div>
                </div>
                <!--  -->
                <div class="row mt-3">
                  <div class="card-datatable table-responsive user_table_height">
                    <table class="datatables-users table" >
                      <thead>
                        <tr>
                          <th class="resp_sm_td_padding">Assign</th>
                          <th class="plus_icon text_nowrap">Startup Name</th>
                          <th class="plus_icon text_nowrap">Founder Name</th>
                          <th class="plus_icon text_nowrap">Social Links</th>
                          <th class="plus_icon text_nowrap">State</th>
                        </tr>
                      </thead>
                      <tbody id="assign_table_row">
                        
                      </tbody>
                    </table>
                  </div>
                </div>
                <!--  -->
              </form>
            </div>
            {{--
            <div class="row mt-3">
              <div class="col-12">
                  <button type="submit" 
                          id="assign_incubators_form_submit"  
                          form="assign_incubators_form"
                          class="btn btn-sm btn-primary"
                  >
                    Save
                  </button>
              </div>
            </div>
            --}}
          </div>
        </div>
      </div>
    </div>
    <!-- /Sticky Actions -->
  </div>
  <!-- / Content -->
@endsection

@section('page_scripts')
  @parent
  <script type="text/javascript" src="{{ asset('assets/js/form-layouts.js') }}"></script>
  <script type="text/javascript" src="{{ asset('assets/vendor/libs/moment/moment.js') }}"></script>
  <script type="text/javascript" src="{{ asset('assets/vendor/libs/jquery-sticky/jquery-sticky.js') }}"></script>
  <script type="text/javascript" src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
  <script type="text/javascript" src="{{ asset('assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js') }}"></script>
  <script type="text/javascript" src="{{ asset('assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
  <script type="text/javascript" src="{{ asset('assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js') }}"></script>
  <script type="text/javascript" src="{{ asset('assets/vendor/libs/jquery-timepicker/jquery-timepicker.js') }}"></script>
  <script type="text/javascript" src="{{ asset('assets/vendor/libs/pickr/pickr.js') }}"></script>
  <script type="text/javascript" src="{{ url('plugins/jquery-validation/dist/jquery.validate.js') }}"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js" integrity="sha512-XZEy8UQ9rngkxQVugAdOuBRDmJ5N4vCuNXCh8KlniZgDKTvf7zl75QBtaVG1lEhMFe2a2DuA22nZYY+qsI2/xA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script type="text/javascript">  
    $(document).ready(function()
    { 
        let message=@JSON(session()->get('message'));
        if(message)
        {
          if(message.type=='success')
          {
            showMessage(message.message);
          }
          else if(message.type=='error')
          {
            showMessage(message.message,"error");
          }
        }

        //
        $(document).on('click',"#assign_incubators_form_submit",function(){
          Incubators.handleAssignIncubatorsFormValidation();
        });

        //jquery events
        $('#startup_launch_id,#incubators_id').change(function(){
          let incubators_id = $('#incubators_id').val();
          let startup_launch_id = $('#startup_launch_id').val();
          if(incubators_id != "" && startup_launch_id != "")
          {
            $.ajax({
              type: "post",
              url:"{{route('admin.startups.incubators.get_startups')}}",
              data: {"_token": "{{ csrf_token() }}",'startup_launch_id':startup_launch_id,'incubators_id':incubators_id},
              success:function(tableRowData)
              {
                //console.log(tableRowData);
                $('#assign_table_row').html(tableRowData);
                $('[data-bs-toggle="tooltip"]').tooltip();
              }
            });
          }
        });

        $(document).on('click','.text_copy_to_clipboard',function(){
          console.time('time1'); 
          var temp = $("<input>");
          $("body").append(temp);
          temp.val($(this).data('company_website')).select();
          document.execCommand("copy");
          temp.remove();
          console.timeEnd('time1');
          showMessage("copied");
        });
    });
  </script>
  <script src="{{ asset('dist/js/startups/incubators/incubators.js') }}"></script>
@endsection
<!--/ END PAGE CONTENT -->