@extends('layouts.app')
@section('page_css')
  @parent
  <style type="text/css">

    :root {
      --sticky_bg_color: #FFFFFF;
    }

    thead tr th 
    {
      position:sticky;
      top:0;
      z-index:1;
      background-color: var(--sticky_bg_color) !important;
      background-clip: padding-box;
    }

    td.full_name
    {
      max-width: 20ch;
      text-overflow: ellipsis;
      overflow: clip;
    }

    .thead_zindex
    {
      z-index:3;
    }

    .user_table_height
    {
      max-height:35rem;
      overflow-y:auto;
    }

    div.pagination nav ul
    {
      margin: 14px 0px;
    }
  </style>
  <!--begin allot edit -->
  <style>
    #alotEditModal thead th{
      position: sticky;
      top: 0;
      background-color: #666ee8 !important;
      color:white;
    }

    #alotEditModal .user_table_height
    {
      max-height:65vh;
      overflow-y:auto;
    }

    #viewAllotedMentorsModal thead th{
      position: sticky;
      top: 0;
      background-color: #666ee8 !important;
      color:white;
    }

    #viewAllotedMentorsModal .user_table_height
    {
      max-height:65vh;
      overflow-y:auto;
    }
  </style>
  <!--end allot edit -->
@endsection

@section('header_scripts')
  @parent
  <script type="text/javascript">
    let root = document.querySelector(':root');
    let root_style = getComputedStyle(root);
    let theme_style = window.templateCustomizer.settings.style;//light,dark
    if(theme_style=='light')
    {
      root.style.setProperty('--sticky_bg_color', '#FFFFFF');
    }
    else
    {
      root.style.setProperty('--sticky_bg_color', '#2F3349');
    }
  </script>
@endsection

@section('content')
@php
  //dd($has_rights);
@endphp
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item">User Management</li>
      <li class="breadcrumb-item active">{{ $page_title }}</li>
    </ol>
  </nav>
  <!-- breadcrumb end -->
  <!-- Basic Bootstrap Table -->
  @if(@$has_rights['list'])
    <div class="row">
      <div class="card">
        <div class="d-flex">
          <h5 class="card-header">{{ $page_title }}</h5>
          <div class="mt-4">
            @if($has_rights['add_user'])
              <a href="{{ route('portal.users.add') }}" class="btn btn-sm btn-primary" type="button">Add</a>
            @endif  
            @if($has_rights['alot'])  
              <a href="{{ route('admin.users.allot_mentor_to_startup.alot') }}" class="btn btn-sm btn-primary">Allot Mentors</a>
            @endif
          </div>
        </div>
        <div class="card-datatable table-responsive user_table_height pb-0">
          <table class="datatables-users table" idz="BasicDataTable">
            <thead>
              <tr>
                <th class="text-nowrap">S.No.</th>
                <th class="text-nowrap thead_zindex">Batch</th>
                <th class="text-nowrap">Action</th>
              </tr>
            </thead>
            <tbody>
              @if(@$records)
                @foreach($records as $record)
                  @php
                    $session_master_id = $record->session_master_id;
                  @endphp
                  <tr>
                    <td class="text-nowrap">
                      {{ @$records->firstItem() + $loop->index  }}
                    </td>
                    <td class="text-nowrap full_name">
                      <span title="{{ $record['full_name'] }}">
                        {{ $record->batch_caption }}
                      </span>
                    </td>
                    <td>
                      <div class="d-flex gap-2">
                        @if(@$has_rights['view_details'])
                          <a href="javascript:void(0);" data-url="{{ tokenize_url(route('admin.users.allot_mentor_to_startup.view_alloted_mentors'),['session_master_id'=>$session_master_id]) }}" onclick="viewAllotedMentors(this)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-primary" title="View Mentors">
                            <i class="fa fa-eye fa-lg"></i>
                          </a>
                        @endif

                        @if(@$has_rights['edit'])
                          <a href="javascript:void(0);" data-url = "{{ tokenize_url(route('admin.users.allot_mentor_to_startup.alot_edit'),['session_master_id'=>$session_master_id]) }}" onclick="alotEdit(this)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-primary" title="Alot Mentors">
                            <i class="fa fa-edit fa-lg"></i>
                          </a>
                        @endif
                      </div>
                    </td>
                  </tr>
                @endforeach
              @else
                <tr><td colspan="5"><span class="text-danger">No Record Found</span></td></tr>
              @endif
            </tbody>
          </table>
        </div>
        @if(@$records->count()>0)
        <div class="row mt-3">
            <div class="col-12 my-1">
                showing {{ @$records->firstItem() }} to {{ @$records->lastItem() }} of {{ @$records->total() }}
            </div>
            <div class="col-12 my-1">
              {!! @$records->appends(request()->except(['page']))->links() !!}
            </div>
        </div>
        @endif
      </div>
    </div>
  @endif
@endsection

@section('modals')
  @parent
<!--Begin alotEditModal -->
<div class="modal fade" id="alotEditModal" tabindex="-1" aria-labelledby="alotEditModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <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>
<!-- End alotEditModal -->

<!-- Modal -->
<div class="modal fade" id="viewAllotedMentorsModal" tabindex="-1" aria-labelledby="viewAllotedMentorsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    
  </div>
</div>

<!--Begin viewMoreCategoryModal -->
<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>
<!--End viewMoreCategoryModal  -->

@endsection

@section('page_scripts')
  @parent
<script src="{{ url('plugins/jquery-validation/dist/jquery.validate.js') }}"></script>
<script 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>
  $(document).ready(function(){ 
    //notification toaster
    let message=@JSON(session()->get('message'));
    if(message)
    {
      if(message.type=='success')
      {
        showMessage(message.message);
      }
      else if(message.type=='error')
      {
        showMessage(message.message,"error");
      }
    }

    //function def
    alotEdit = function(_this){
      let _url = $(_this).attr("data-url");
      if(_url)
      {  
        $.ajax({
          type:"POST",
          url:_url,
          data:{
            '_token':$('meta[name="csrf-token"]').attr('content'),
          },
          beforeSend:function(){
            $('#alotEditModal .modal-dialog').html("");
          },
          success:function(res_html){
            $('#alotEditModal .modal-dialog').html(res_html);
            // console.log(res_html);
          },
          complete:function(){
            $('#alotEditModal').modal('show');
          }
        });
      }
    }

    alotEditStore = function(_this){
      let form_id = $(_this).attr('form');
      let _url = $(`#${form_id}`).attr('action');
      $.ajax({
        type:"POST",
        url:_url,
        data:$(`#${form_id}`).serialize(),
        beforeSend:function(){

        },
        success:function(response){
          // console.log(response);
          if(response)
          {
            showMessage(response.message,response.type);
          }
        },
        complete:function(){
          $('#alotEditModal').modal('hide');
        },
      })
      // console.log(_this);
    }

    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');
    } 

    viewAllotedMentors =function(_this){
      let _url = $(_this).attr("data-url");
      $.ajax({
        type:"POST",
        url:_url,
        data:{
          '_token' : $('meta[name="csrf-token"]').attr('content'),
        },
        beforeSend:function(){
          $("#viewAllotedMentorsModal .modal-dialog").html("");
        },
        success:function(res_html){
          $("#viewAllotedMentorsModal .modal-dialog").html(res_html);
        },
        complete:function(){
          $("#viewAllotedMentorsModal").modal('show');
        },
      });
    }

    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);
      }
    }
    //jquery events
    $('.readMore').click(function()
    {
      readMore($(this).data('title'), $(this).data('description'));
    }); 

    $('.text_copy_to_clipboard').click(function()
    {
      var temp = $("<input>");

      $("body").append(temp);
      temp.val($(this).data('contact_links')).select();
      document.execCommand("copy");
      temp.remove();
    
      showMessage("copied");
    });

    //functions definitions
    function readMore(title="",description="")
    {
      $("#readMoreModalTitle").text(title);
      $("#readMoreModalContent").text(description);
      $("#readMoreModal").modal('show');
    }
  });
</script>
@endsection