@extends('layouts/admin/masters.master')

@section('opengraph')
<!-- Search Engine Optimization by Rank Math - http://s.rankmath.com/home -->
@endsection

@section('tittle','VOICES AND BEATS [ EVENTS MANAGEMENT ] | VIDEO - ADVERT')

@section('content')
<div class="flex flex-col-reverse md:flex-row space-y-reverse space-y-2 md:space-y-0 space-x-0 md:space-x-5">
   <div class="md:flex-2 space-y-2">
    <div>
     <h1 class="text-xl font-opensans-bold">Video Adverts</h1>
    </div>

   @if(count($video_adverts)>0)
    <div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:items-end sm:justify-between">
      <div class=" text-sm">
        Available Features ({{ $video_adverts->total() }})
      </div>

      <div>
        <div class="space-x-2 flex">
         <div class="grow">
          <input type="text" id="search_term" name="search" class="w-full sm:w-40 rounded-sm p-1 focus:outline-none border border-lime-500" value="{{request()->Term}}"> 
         </div>
         <div class="flex items-center rounded-sm border border-lime-500 px-2 py-1 font-opensans-bold text-sm hover:bg-lime-500 hover:text-white cursor-pointer" onclick="getTerm()">
          Search
         </div>
        </div>  
      </div>
     </div>

     <div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:items-end sm:justify-between">
       <div class="flex flex-col sm:flex-row sm:space-x-2 space-y-3 sm:space-y-0">
        <div class="">
         <select id="sort" class="w-full sm:w-40 rounded-sm p-1 focus:outline-none border border-lime-500 text-gray-500">
            <option value="">Sort</option>
            <option value="A-Z" {{ request()->Sort == "A-Z"  ? "selected" : "" }}>A - Z</option>
            <option value="Z-A" {{ request()->Sort == "Z-A"  ? "selected" : "" }}>Z - A</option>
            <option value="Random" {{ request()->Sort == "Random"  ? "selected" : "" }}>Random</option>
          </select>
        </div>

        <div class="flex items-center justify-center rounded-sm border border-lime-500 px-2 py-1 font-opensans-bold hover:bg-lime-500 hover:text-white cursor-pointer" onclick="getFilter()">
          Filter
        </div>
       </div>

       <div class="text-sm">
         ({{ $video_adverts->count() }}) Items
       </div>
    </div>

    <div class="flex items-center space-x-5 text-sm md:text-base">
      <div>
       <h1 class="font-opensans-bold text-red-500">RUNNING ADVERT</h1>
      </div>

      <div class="font-opensans-bold">
       <i class="fa fa-chevron-right"></i>
      </div>

      <div>
       <div class="flex space-x-2 justify-center">
           <div class="font-opensans-bold">
            @if($running_advert)
             {{ $running_advert->tittle }}
            @else
             NO RUNNING ADS
            @endif 
           </div>
           <div class="editTrigger text-green-500 cursor-pointer">
             <i class="fas fa-edit fa-md"></i>
           </div>
         </div>
         <div class="flex space-x-2 hidden justify-center">
          <div>
           <form action="/Admin/Events/Video-Advert/Update-Running-Advert" method="post"> 
             @csrf

             @if($running_advert)
              <input type="" name="current" value="{{$running_advert->id}}" hidden>
               <select name="video_advert" class="w-40 rounded-sm p-1 focus:outline-none border border-lime-500 capitalize" onchange='if(this.value != 0) { this.form.submit();}'>
                 <option value="" selected>Select Ad</option> 
                 @foreach($video_adverts as $key => $value)
                  @if(old('video_advert',$running_advert->id) == $value->id)
                      <option value="{{ $value->id}}" selected>{{ $value->tittle }}</option> 
                  @else
                      <option value="{{ $value->id}}">{{ $value->tittle }}</option> 
                  @endif
                 @endforeach
                </select>
             @else
               <select name="video_advert" class="w-40 rounded-sm p-1 focus:outline-none border border-lime-500 capitalize" onchange='if(this.value != 0) { this.form.submit();}'>
                 <option value="" selected>Select Ad</option> 
                 @foreach($video_adverts as $key => $value)
                  @if(old('video_advert') == $value->id)
                      <option value="{{ $value->id}}" selected>{{ $value->tittle }}</option> 
                  @else
                      <option value="{{ $value->id}}">{{ $value->tittle }}</option> 
                  @endif
                 @endforeach
                </select>
             @endif   
            </form> 
           </div>

           <div class="cancelTrigger text-sm border border-lime-500 hover:bg-lime-500 hover:text-white rounded-sm py-1 px-2 fit-content cursor-pointer">
             Cancel
           </div>  
         </div>
      </div>
    </div>  

    @if(Session::has('success'))
      <div class="capitalize border border-green-600 rounded-sm p-2 text-center text-green-600 text-sm font-opensans-bold">
        {{ Session::get('success') }}
      </div>
    @endif

    <div class="admin overflow-x-auto rounded-md bg-white">
     <table class="w-full border-collapse">
       <thead>
        <tr class="font-opensans-bold text-white bg-lime-500">
          <th>SN</th>
          <th>Advert</th>
          <th colspan="2">Action</th>
        </tr>   
       </thead>
       <tbody>
        @foreach($video_adverts as $video_advert) 
         <tr class="capitalize text-sm">
           <td>{{ $video_adverts->firstItem() + $loop->index }}</td>
           <td class="text-left">
              <div class="grow space-y-3 font-opensans-bold">
                {{ $video_advert->tittle }}
              </div> 
           </td>
           <td>
            <div class="border border-red-500 rounded-md hover:text-white hover:bg-red-500 w-20">
               <a href="/Admin/Events/Video-Advert/Delete-Video-Advert/{{ $video_advert->id }}" class="block py-1 px-2 text-center">
                Delete 
               </a>
             </div>
           </td>
   
           <td>
             <div class="border border-green-500 rounded-md hover:text-white hover:bg-green-500 w-20">
               <a href="?Edit-Video-Advert={{$video_advert->id}}" class="block py-1 px-2 text-center">
                Edit
               </a>
             </div>
           </td>
         </tr>
        @endforeach  
       </tbody>
      </table>
     </div>
    {{ $video_adverts->appends($_GET)->links('layouts/guest/includes.pagination') }}

    @else
      <div class="w-full p-3 bg-white rounded-lg">
        NO RESULTS FOUND
      </div>
    @endif 
   </div>

   @if(isset($_GET['Edit-Video-Advert']))
    <div class="md:flex-1">
      <form action="/Admin/Events/Video-Advert/Edit-Video-Advert/{{$edit_video_advert->id}}" method="post" class="border border-gray-300 rounded-lg bg-white" enctype="multipart/form-data">
        @csrf
       <div class="space-y-2 md:space-y-5 p-2 md:p-5">
        <div class="text-center">
          <h1 class="text-xl font-opensans-bold text-lime-500">Edit Video Advert</h1>
        </div>

         <div>
          <input type="text" name="tittle" class="focus:outline-none w-full p-2 rounded-sm border border-lime-500 @error('tittle') !border-red-500 @enderror" value="{{old('tittle') ?? $edit_video_advert->tittle }}">
         </div>

          @error('tittle')
              <div class="text-red-500 text-sm font-bold">
                  {{$message}}
              </div>
          @enderror

          <div class="space-y-2 md:space-y-5">
           <div>
            <select name="event" class="focus:outline-none w-full p-2 rounded-sm border border-lime-500 @error('name') !border-red-500 @enderror">
              <option>Select Event</option>
               @foreach($events as $key => $value)
                @if(old('event',$edit_video_advert->event_id) == $value->id)
                    <option value="{{ $value->id}}" selected>{{ $value->tittle }}</option> 
                @else
                    <option value="{{ $value->id}}">{{ $value->tittle }}</option> 
                @endif
              @endforeach
            </select> 
           </div>

            @error('name')
                <div class="text-red-500 text-sm font-bold">
                    {{$message}}
                </div>
            @enderror
         </div>
  
          <div class="space-y-2">
           <div class="font-opensans-bold text-sm text-green-700 text-left">
            <input type="file" id="videoupload" name="video" class="hidden" oninput="profile.src=window.URL.createObjectURL(this.files[0])">
             <span class="hover:underline hover:cursor-pointer" id="OpenVideoUpload">
               + Select A Video
             </span> 
           </div>

           <div class="h-36 w-full">
         <video id="video" class="h-full w-full object-cover" loop muted autoplay>
            <source src="{{asset('assets/videos/'.$edit_video_advert->video)}}" type="video/mp4">
           </video> 
         </div>
          </div> 

          @error('video')
            <div class="text-red-500 text-sm font-bold">
             {{$message}}
            </div>
          @enderror 

        <div>
         <button type="submit" class="bg-lime-500 text-white p-2 w-full cursor-pointer rounded-sm">
            Submit
         </button>
        </div>

        <div class="text-center">
         <a href="#" class="text-sm cursor-pointer hover:underline hover:text-lime-500">
            Add New Video Advert
         </a>
        </div>
       </div> 
      </form>
    </div>
   @else 
    <div class="md:flex-1">
      <form action="/Admin/Events/Video-Advert/Add-Video-Advert" method="post" class="border border-gray-300 rounded-lg bg-white" enctype="multipart/form-data">
        @csrf
       <div class="space-y-2 md:space-y-5 p-2 md:p-5">
        <div class="text-center">
          <h1 class="text-xl font-opensans-bold text-lime-500">Add Video Advert</h1>
        </div>

        <div>
          <input type="text" name="tittle" class="focus:outline-none w-full p-2 rounded-sm border border-lime-500 @error('tittle') !border-red-500 @enderror" value="{{ old('tittle') }}">
        </div>

        @error('tittle')
            <div class="text-red-500 text-sm font-bold">
                {{$message}}
            </div>
        @enderror

        <div class="space-y-2 md:space-y-5">
           <div>
            <select name="event" class="focus:outline-none w-full p-2 rounded-sm border border-lime-500 @error('event') !border-red-500 @enderror">
              <option value="">Select Event</option>
              @foreach($events as $key => $value)
                @if(old('event') == $value->id)     
                    <option value="{{ $value->id}}" selected>{{ $value->tittle }}</option> 
                @else
                    <option value="{{ $value->id}}">{{ $value->tittle }}</option> 
                @endif
              @endforeach
            </select> 
           </div>

            @error('event')
                <div class="text-red-500 text-sm font-bold">
                    {{$message}}
                </div>
            @enderror
         </div>
  
        <div class="space-y-2">
         <div class="font-opensans-bold text-sm text-green-700 text-left">
          <input type="file" id="videoupload" name="video" class="hidden" oninput="profile.src=window.URL.createObjectURL(this.files[0])">
           <span class="hover:underline hover:cursor-pointer" id="OpenVideoUpload">
             + Select A Video
           </span> 
         </div>

         <div class="h-36 w-full">
       <video id="video" class="h-full w-full object-cover" loop muted autoplay>
          <source src="{{asset('assets/videos/p.mp4')}}" type="video/mp4">
         </video> 
       </div>
        </div> 

        @error('video')
          <div class="text-red-500 text-sm font-bold">
           {{$message}}
          </div>
        @enderror

        <div>
         <button type="submit" class="bg-lime-500 text-white p-2 w-full cursor-pointer rounded-sm">
            Submit
         </button>
        </div>
       </div> 
      </form>
    </div>
   @endif
</div>
@endsection 

@section('script')

 <script>

   var editTrigger = document.getElementsByClassName("editTrigger");
  var cancelTrigger = document.getElementsByClassName("cancelTrigger");


  for (var i = 0; i < editTrigger.length; i++) {
     editTrigger[i].addEventListener("click", function () {
       
        var closeStatus = this.parentElement;
        var openEditStatus = this.parentElement.nextElementSibling;
        

        closeStatus.style.display = "none";
        openEditStatus.style.display = "flex";

     });
  }

  for (var i = 0; i < cancelTrigger.length; i++) {
     cancelTrigger[i].addEventListener("click", function () {

      var closeEditStatus = this.parentElement;
      var openStatus = this.parentElement.previousElementSibling;
      
      closeEditStatus.style.display = "none";
      openStatus.style.display = "flex";

     });
  }

 // url parameters
  let queryString = window.location.search;  // get url parameters
  let params = new URLSearchParams(queryString);  // create url search params object

   function getTerm() {
        params.delete('Term');
        params.append('Term', document.getElementById("search_term").value);
        document.location.href = "?" + params.toString();
    }


   function getFilter() {
        params.delete('Sort');
        params.append('Sort', document.getElementById("sort").value);
        document.location.href = "?" + params.toString();
    }

  //Video upload
  $('#OpenVideoUpload').click(function() {
    $('#videoupload').trigger('click');
  });

 </script>

@endsection