@extends('layouts.app')

@section('page_css')
  @parent
  <style type="text/css">
    :root 
    {
      --tr_hover_bg_color: #d8d9f4;
    }
    .action_div_width
    {
      width:16rem;
    }

    tbody tr:hover
    {
      background: var(--tr_hover_bg_color) !important;
    }
  </style>
  <link rel="stylesheet" href="{{ asset('assets/vendor/libs/plyr/plyr.css') }}" />
@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('--tr_hover_bg_color', '#d8d9f4');
    }
    else
    {
      root.style.setProperty('--tr_hover_bg_color', '#484848');
    }
  </script>
@endsection

@section('content')
  <!-- Content -->
  <!-- breadcrumb start -->
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="javascript:void(0);">Admin</a></li>
      <li class="breadcrumb-item active">Downloads</li>
      <li class="breadcrumb-item active">Shared Startups</li>
    </ol>
  </nav>
  <!-- breadcrumb end -->
  <!-- Basic Bootstrap Table -->
  <div class="card">
    <div class="d-flex justify-content-between">
      <h5 class="card-header">Shared Startups</h5>
      <div class="mt-4 mx-5">
        @if(@$has_rights['add'])
          <a class="btn btn-sm btn-primary" href="{!! route('admin.downloads.shared_startups.add') !!}">Add New</a>
        @endif
      </div>
    </div>
    <div class="card-datatable table-responsive">
      <table class="datatables-users table" id="BasicDataTable">
        <thead>
          <tr>
            <th class="text-nowrap">Name</th>
            <th class="text-nowrap">Category</th>
            <th class="text-nowrap">Sub Category</th>
            <th class="text-nowrap">Assigned Programs</th>
            <th class="text-nowrap">Details</th>
            <th class="text-nowrap">Action</th>
          </tr>
        </thead>
        <tbody classs="table-border-bottom-0">
          @foreach($shared_startups as $_shared_startups)
            @php
              $doc_name    = $_shared_startups["name"]; 
              $field_type  = $_shared_startups["field_type"]; 
              $doc_type    = $_shared_startups["doc_type"];
              $url_type    = $_shared_startups["url_type"];
              $doc_details = $_shared_startups["details"] ? $_shared_startups["details"] : "--";
              $file_name   = $_shared_startups["file_name"] ? $_shared_startups["file_name"] : "";
              $programsArr = $_shared_startups["programs"] ?? [];
            @endphp
            <tr>
              <td class="text-nowrap">{{ $_shared_startups["name"] }}</td>
              <td class="text-nowrap">{{ $_shared_startups["cat_name"] }}</td>
              <td class="text-nowrap">{{ $_shared_startups["sub_cat_name"] }}</td>
              <td class="text-nowrap">
                <ul>  
                  @foreach($programsArr as $program_id => $program_name)
                    <li>
                      {{ $program_name }}
                    </li>
                  @endforeach
                </ul>
              </td>
              <td class="text-nowrap">
                @if( $doc_details != '' && strlen($doc_details) > 25)
                  {!! substr($doc_details,0,25)  !!}
                  <span class="ml-2"> 
                    <a href="javascript:void(0);" class="readMore" data-title="Details" data-description="{{$doc_details}}">
                      <span class="badge bg-label-primary">Read More</span>
                    </a>
                  </span>
                @else
                  {{$doc_details}}
                @endif
              </td> 
              <td>
                <div class="action_div_width">
                  @if(@$has_rights['edit'])
                    <a class="me-1" href="{!! tokenize_url(route('admin.downloads.shared_startups.edit'),['id' => $_shared_startups['id']]) !!}">
                      <i class="ti ti-edit ti-sm me-1"></i>
                    </a>
                  @endif
                  @if(@$has_rights['delete'])
                    <a class="me-1 delete_confirm" href="javascript:void(0);" data_url="{!! tokenize_url(route('admin.downloads.shared_startups.destroy'),['id' => @$_shared_startups['id']]) !!}">
                      <i class="ti ti-trash ti-sm me-1"></i>
                    </a>
                  @endif
                  @if(@$has_rights['view_detail'])
                    @if($field_type == 'file_upload')
                      @if($doc_type == 'video')  
                        <a class="me-1" href="javascript:void(0);" onclick="showVideoPlayer('{{ $file_name }}','{{ $doc_name }}')">
                          <i class="ti ti-player-play ti-sm me-1"></i>
                        </a>
                      @elseif($doc_type == 'other')
                        <a class="me-1" href="{!! tokenize_url(route('admin.downloads.shared_startups.download_file'),['file_name' => @$_shared_startups['file_name']]) !!}">
                          <i class="ti ti-download ti-sm me-1"></i>
                        </a>
                      @endif
                    @elseif($field_type == 'url') 
                      @php
                        $doc_url = "javascript:void(0);";
                        $target  = "" ; 
                        
                        if($_shared_startups["url"])
                        { 
                          $doc_url = $_shared_startups["url"];
                          $target  = "_blank";
                        }
                      @endphp
                      @if($url_type == 'youtube_link' )
                        <a class="me-1" href="javascript:void(0);" onclick="showVideoPlayerYT('{{ $doc_url }}','{{ $doc_name }}')">
                          <i class="ti ti-brand-youtube ti-sm me-1"></i>
                        </a>
                      @elseif($url_type == 'other') 
                        <a class="me-1" href="{{ $doc_url }}" target="{{ $target }}"><i class="ti ti-link ti-sm me-1"></i></a>
                      @endif
                    @endif
                  @endif
                </div>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
  <!--/ Content -->
@endsection

@section('modals')
  @parent
  <!-- Modal Video Player start-->
  <div class="modal fade" id="play_video_Modal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="play_video_Modal_title">Video Player</h5>
          <button type="button" class="btn-close play_video_Modal_close_btn" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col mb-3">
              <video class="w-100" poster="" id="doc_video_player" playsinline controls><source src="Default.mp4" type="video" /></video>
            </div>
          </div>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
  <!-- Modal Video Player end-->

  <!-- Modal Video Player YT start-->
  <div class="modal fade" id="play_video_yt_Modal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="play_video_yt_Modal_title">Youtube Video Player</h5>
          <button type="button" class="btn-close play_video_yt_Modal_close_btn" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col mb-3">
              <video id="doc_yt_video_player" playsinline controls poster=""><source src="Default.mp4" type="video" /></video>
              <!--  -->
            </div>
          </div>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
  <!-- Modal Video Player YT end-->
@endsection

@section('page_scripts')
  @parent
  <script type="text/javascript" src="{{ asset('assets/vendor/libs/plyr/plyr.js') }}"></script>
  <script type="text/javascript">
       
    $(document).ready(function()
    { 
      //initialization
      const videoPlayer   = new Plyr('#doc_video_player');
      const videoYTPlayer = new Plyr('#doc_yt_video_player');
      //notification
      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
      $('.delete_confirm').click(function()
      {
        var data_url = $(this).attr('data_url');
        $('#delete_confirm_modal_yes').attr('href', data_url);
        $("#delete_confirm_modal_preview").modal('show');
      });

      $('.readMore').click(function()
      {
        readMore($(this).data('title'), $(this).data('description'));
      });

      //video player
      showVideoPlayer = function(file_name="", doc_name="Video Player")
      {
        let video_full_path = "{{asset('uploads/shared_startups')}}"+"/"+file_name;
        //videoPlayer.media.src = video_full_path;
        
        videoPlayer.source = { type : 'video', sources : [{ src : video_full_path, },], };

        $("#play_video_Modal_title").text(doc_name);
        $("#play_video_Modal").modal('show');
      } 

      $(".play_video_Modal_close_btn").click(
      function()
      {
        videoPlayer.stop();
      });

      showVideoPlayerYT = function(yt_url_link="", doc_name="Video Player")
      {
        videoYTPlayer.source = { type : 'video', sources : [{ src : yt_url_link, provider : 'youtube', },],};
        $("#play_video_yt_Modal_title").text(doc_name);
        $("#play_video_yt_Modal").modal('show');
      } 

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