@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">Users</li>
          <li class="breadcrumb-item active">VC Funds</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 VC Funds</h5>
                <a href="{!! route('admin.users.vc_fund_assign') !!}" 
                  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="vc_fund_assign_form" 
                    action="{{ route('admin.users.vc_fund_assign.assign_store') }}" 
                    method="post">
                <div class="row mt-3">
                  <div class="col-md-5 control-group">
                    <label for="users_id" class="form-label">VC Fund Users</label>
                    <select id="users_id" name="users_id" data-placeholder="Select User" class="select2 form-select">
                      <option value=""></option>
                      @foreach($users_list as $_user)
                        <option value="{{ $_user['id'] }}">
                          {{ $_user['full_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="vc_fund_assign_form_submit"  
                            form="vc_fund_assign_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>
        </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");
          }
        }

        //jquery events
        $('#startup_launch_id,#users_id').change(function(){
          let user_id = $('#users_id').val();
          let startup_launch_id = $('#startup_launch_id').val();
          if(user_id != "" && startup_launch_id != "")
          {
            $.ajax({
              type: "post",
              url:"{{route('admin.users.vc_fund_assign.get_startups')}}",
              data: {"_token": "{{ csrf_token() }}",'startup_launch_id':startup_launch_id,'user_id':user_id},
              success:function(tableRowData)
              {
                //console.log(tableRowData);
                $('#assign_table_row').html(tableRowData);
              },
              error:function(){
                $('#assign_table_row').html("");
              }
            });
          }
        });

        $(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/users/assign_vc_fund.js') }}"></script>
@endsection
<!--/ END PAGE CONTENT -->