@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="row">
      <!-- breadcrumb start -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">User Management</li>
          <li class="breadcrumb-item"><a href="{!! route('admin.users.allot_mentor_to_startup') !!}">Allot Mentor To StartUps</a></li>
          <li class="breadcrumb-item active">Alot</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">Allot StartUps</h5>
                <a href="{!! route('admin.users.allot_mentor_to_startup') !!}" 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="alot_mentors_form" action="{{ route('admin.users.allot_mentor_to_startup.alotstore') }}" onsubmit="return validateAlotMentors();" method="post">
                @csrf
                <div class="row mt-3">
                  <div class="col-md-5 control-group">
                    <label for="session_master_id" class="form-label">Cohart</label>
                    <select id="session_master_id" name="session_master_id" data-placeholder="Select Cohart" class="select2 form-select">
                      <option value=""></option>
                      @foreach($session_master as $_session_master)
                        <option value="{{ $_session_master['id'] }}">
                         {{ $_session_master['batch_caption'] }}
                        </option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-md-2 my-auto">
                    <button type="submit" id="alot_startups_form_submit" form="alot_mentors_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" id="alot_mentors_table">
                      <thead>
                        <tr>
                          <th class="resp_sm_td_padding">
                            <div class="form-check form-check-success">
                              <input class="form-check-input" type="checkbox" onclick="checkAll(this)" data-target_cb_clss="users" />
                            </div>
                          </th>
                          <th class="text_nowrap">Mentor Name</th>
                          <th class="text_nowrap">Roles</th>
                          <th class="text_nowrap">Startup Categories</th>
                        </tr>
                      </thead>
                      <tbody id="alot_table_row"></tbody>
                    </table>
                  </div>
                </div>
                <!--  -->
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /Sticky Actions -->
@endsection
@section('modals')
  @parent
  <!-- Modal -->
  <div class="modal fade" id="viewMoreCategoryModal" tabindex="-1" aria-labelledby="viewMoreCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="viewMoreCategoryModalLabel">
            View More
            <span class="full_name"></span>
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
            </button>
        </div>
        <div class="modal-body">
         
        </div>
      </div>
    </div>
  </div>
@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");
        }
      }
      
      validateAlotMentors = function()
      {
        let session_master_id = $('#session_master_id').val();
       // let checked_users_length = $("input[type='checkbox'][class~='users']:checked").length;
        if(!Boolean(session_master_id))
        {
          showMessage('select session','error');
          return false;
        } 
        return true;
      }

      checkAll = function(_this){
        let target_cb_clss = $(_this).attr('data-target_cb_clss');
        if($(_this).prop('checked'))
        {
          $(`.${target_cb_clss}`).prop('checked',true);
        }
        else
        {
          $(`.${target_cb_clss}`).prop('checked',false);
        }
      }

      viewMoreCategory = function(_this){
        let startup_category_obj = JSON.parse($(_this).attr('data-startup_category')) ?? {};
        let full_name = $(_this).attr('data-full_name');
        let list_html = '<ul>';
        for(let [key,value] of Object.entries(startup_category_obj))
        {
          list_html = list_html + `
            <li>
              ${value}
            </li>
          `;
        }
        list_html = list_html + '</ul>';
        $('#viewMoreCategoryModal .modal-body').html(list_html);
        $('#viewMoreCategoryModal .modal-title .full_name').html(` (${full_name})`);
        $('#viewMoreCategoryModal').modal('show');
      } 

      $(document).on('change','#session_master_id',function(e){
        let session_master_id = $(this).val();
        $.ajax({
          type: 'POST',
          url: "{{ route('admin.users.allot_mentor_to_startup.get_mentors') }}",
          data:{
            '_token' : "{{ csrf_token() }}",
            'session_master_id' : session_master_id,
          },
          beforeSend:function(){

          },
          success:function(html){
            //console.log(html);
            $('#alot_table_row').html(html);
            $('[data-bs-toggle="tooltip"]').tooltip();
          },
          complete:function(){

          }
        });
      });

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