@extends('layouts.app')

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

    :root {
      --sticky_bg_color: #FFFFFF;
    }

    td:first-child + td, th:first-child + th 
    {
      position:sticky;
      left:0;
      z-index:2;
      background-color: var(--sticky_bg_color) !important;
      background-clip: padding-box;
    }

    td:last-child, th:last-child
    {
      position:sticky;
      right:0;
      z-index:2;
      background-color: var(--sticky_bg_color) !important;
      background-clip: padding-box;
    }

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

    .thead_zindex
    {
      z-index:3;
    }

    .user_table_height
    {
      max-height:35rem; overflow-y:auto;
    }
  </style>
@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')
  <!-- Content -->
  <div class="container-xxl flex-grow-1 container-p-y">
    <!-- breadcrumb start -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <!-- <li class="breadcrumb-item">
          <a href="#">Admin</a>
        </li> -->
        <li class="breadcrumb-item active">Users</li>
        <li class="breadcrumb-item active">VC Funds</li>
      </ol>
    </nav>
    <!-- breadcrumb end -->
    <!-- Basic Bootstrap Table -->
    <div class="card">
      <div class="d-flex">
        <h5 class="card-header">VC Funds</h5>
        <div class="mt-4">
          @if(@$has_rights['add'])
            <a href="{{ route('portal.users.add') }}" class="btn btn-sm btn-primary" type="button">Add</a>
          @endif
          @if(@$has_rights['assign'])
            <a href="{{ route('admin.users.vc_fund_assign.assign') }}" class="btn btn-sm btn-primary">Assign</a>
          @endif
        </div>
      </div>
      <div class="card-datatable table-responsive user_table_height">
        <table class="datatables-users table" idz="BasicDataTable">
          <thead>
            <tr>
              <th class="text-nowrap">S.No.</th>
              <th class="text-nowrap thead_zindex">Name</th>
              <th class="text-nowrap">Contact &amp; Links</th>
              <th class="text-nowrap">About</th>
              <th class="text-nowrap">Is Expiry</th>
              <th class="text-nowrap">Login Expiry Range</th>
              <th class="text-nowrap thead_zindex">Status</th>
            </tr>
          </thead>
          <tbody>
            @if($users)
              @foreach($users as $counter => $user)
                <tr>
                  @php
                    $full_name = @$user->first_name.' '.@$user->last_name;
                    $user_id = $user->id;
                  @endphp
                  <td class="text-nowrap">{{ $counter+1 }}</td>
                  <td class="text-nowrap">
                    <a href="javascript:void(0);" onclick="showAssignedStartups({{$user_id}})">
                      <span class="badge bg-label-primary">{!! @$full_name ? @$full_name : '--' !!}</span>
                    </a>
                  </td>
                  <td class="text-nowrap">
                    @if(@$user->mobile)
                      <a href="javascript:void(0);" class="text_copy_to_clipboard" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="{{ $user->mobile }}" data-contact_links="{{ $user->mobile }}">
                        <i class="fa fa-phone fa-lg me-1"></i>
                      </a>
                    @else
                      <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="Mobile No. doesn't Exist">
                        <i class="fa fa-phone fa-lg me-1" style="color: #7f7f7f;"></i>
                      </a>
                    @endif
                    
                    @if(@$user->email != '')
                      <a href="javascript:void(0);" class="text_copy_to_clipboard" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="{{ $user->email }}" data-contact_links="{{ $user->email }}">
                        <i class="fa fa-envelope fa-lg me-1"></i>
                      </a>
                    @else
                      <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="Email Id doesn't Exist">
                        <i class="fa fa-envelope fa-lg me-1" style="color: #7f7f7f;"></i>
                      </a>
                    @endif

                    @if(@$user->linkedin_profile != '')
                      <a href="javascript:void(0);" class="text_copy_to_clipboard" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="{{ $user->linkedin_profile }}" data-contact_links="{{ $user->linkedin_profile }}">
                        <i class="fab fa-linkedin fa-lg me-1"></i>
                      </a>
                    @else
                      <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="Linkedin Profile doesn't Exist">
                        <i class="fab fa-linkedin fa-lg me-1" style="color: #7f7f7f;"></i>
                      </a>
                    @endif

                    @if(@$user->instagram_profile != '')
                      <a href="javascript:void(0);" class="text_copy_to_clipboard" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="{{ $user->instagram_profile }}" data-contact_links="{{ $user->instagram_profile }}">
                        <i class="fa-brands fa-square-instagram fa-lg me-1"></i>
                      </a>
                    @else
                      <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="Instagram Profile doesn't Exist">
                        <i class="fa-brands fa-square-instagram fa-lg me-1" style="color: #7f7f7f;"></i>
                      </a>
                    @endif
                  </td>
                  <td class="text-nowrap">
                    @if(@$user->about != '' && strlen(@$user->about) > 30)
                      {!! substr(@$user->about, 0, 30) !!}
                      <a href="javascript:void(0);" class="readMore" data-title="About" data-description="{{@$user->about}}">
                        <span class="badge bg-label-primary">Read More</span>
                      </a>
                    @else
                      {!! @$user->about ?? '--' !!}
                    @endif
                  </td>
                  <td class="text-nowrap text-center">{{ $user->is_expiry == "none" ? "--" : $user->is_expiry }}</td>
                  <td class="text-nowrap text-center">
                    @php
                      $user_login_expiry_range = "--";

                      if($user->is_expiry == 'Y')
                      {
                        $date_range_arr          = explode(" - ", $user->login_expiry_range);
                        $start_date              = date_format(date_create(@$date_range_arr[0]), 'd M y');
                        $end_date                = date_format(date_create(@$date_range_arr[1]), 'd M y');
                        $user_login_expiry_range = $start_date." to ".$end_date;
                      }
                    @endphp
                    {{ $user_login_expiry_range }}
                  </td>
                  <td class="text-nowrap">
                    @if($user->status == 1)
                      Active
                    @else
                      Disable
                    @endif
                  </td>
                </tr>
              @endforeach
            @else
              <tr><td colspan="6"><span class="text-danger">No Record Found</span></td></tr>
            @endif
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!--/ Content -->
@endsection

@section('modals')
  @parent
  <!--assigned startups start-->
  <div class="modal fade" id="assigned_startups_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
      <div class="modal-content" id="assigned_startups_modal_content">
    
      </div>
    </div>
  </div>
  <!--assigned startups end-->
@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 type="text/javascript">
    
    $(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");
        }
      }

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

      showAssignedStartups = function (users_id)
      {
        $.ajax(
        {
          type : "post",
          url  : "{{route('admin.users.vc_fund_assign.view_assigned_startups')}}",
          data : {"_token" : "{{ csrf_token() }}", 'users_id' : users_id},
          success:function(html)
          {
            document.getElementById("assigned_startups_modal_content").innerHTML = html;
          },
          error:function()
          {
            document.getElementById("assigned_startups_modal_content").innerHTML = "";
          },
          complete: function() 
          {
            $('#assigned_startups_modal').modal('show');  
          }
        });
      }
    });
  </script>
@endsection