@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 ] | FEATURSS')

@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">Features</h1>
    </div>

   @if(count($features)>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 ({{ $features->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="getSort()">
          Filter
        </div>
       </div>

       <div class="text-sm">
         ({{ $features->count() }}) Items
       </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>Feature</th>
          <th colspan="2">Action</th>
        </tr>   
       </thead>
       <tbody>
        @foreach($features as $feature)  
         <tr class="capitalize text-sm">
           <td>{{ $features->firstItem() + $loop->index }}</td>
           <td class="text-left">
             <div class="flex space-x-2 items-center">
              <div class="h-12 w-14">
                <img class="h-full w-full rounded-sm" src="{{ asset('assets/images/'.$feature->image) }}">
              </div>
              <div class="grow space-y-3 font-opensans-bold">
                {{ $feature->name }}
              </div> 
             </div>
           </td>
           <td>
            <div class="border border-red-500 rounded-md hover:text-white hover:bg-red-500 w-20">
               <a href="/Admin/Features/Delete-Feature/{{ $feature->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-feature={{$feature->id}}" class="block py-1 px-2 text-center">
                Edit
               </a>
             </div>
           </td>
         </tr>
        @endforeach 
       </tbody>
      </table>
     </div>

     {{ $features->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-feature']))
    <div class="md:flex-1">
      <form action="/Admin/Features/Edit-Feature/{{ $edit_feature->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 Feature</h1>
        </div>

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

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

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

            @error('feature_category')
                <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="imgupload" name="image" class="hidden" oninput="profile.src=window.URL.createObjectURL(this.files[0])">
             <span class="hover:underline hover:cursor-pointer" id="OpenImgUpload">
               + Select An Image
             </span> 
           </div>

           <div class="w-full h-36 shadow-md">
             <img id="profile" class="h-full w-full rounded-sm" src="{{ asset('assets/images/'.$edit_feature->image) }}">
           </div>
          </div> 

        <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="{{ route('Admin-Features') }}" class="text-sm cursor-pointer hover:underline hover:text-lime-500 ">
            Add New Feature
         </a>
        </div>
       </div> 
      </form>
    </div>
   @else 
    <div class="md:flex-1">
      <form action="/Admin/Features/Add-Feature" 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 Feature</h1>
        </div>

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

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

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

            @error('feature_category')
                <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="imgupload" name="image" class="hidden" oninput="profile.src=window.URL.createObjectURL(this.files[0])">
           <span class="hover:underline hover:cursor-pointer" id="OpenImgUpload">
             + Select An Image
           </span> 
         </div>

         <div class="w-full h-36 shadow-md">
           <img id="profile" class="h-full w-full rounded-sm" src="{{ asset('assets/images/default_image.png') }}">
         </div>
        </div> 

        @error('image')
          <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>

  // 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 getSort() {
        params.delete('Sort');
        params.append('Sort', document.getElementById("sort").value);
        document.location.href = "?" + params.toString();
    }

  //Image upload
  $('#OpenImgUpload').click(function() {
    $('#imgupload').trigger('click');
  });

 </script>

@endsection