@extends('mix::layouts.master')
@section('title', __('Languages'))
@section('content')

<style>
  *{
    scrollbar-width: initial !important;
  }
</style>
<div class="h-full pb-16 pt-0 sm:pt-0">
  <div class="mx-auto w-full max-w-screen-xl px-5">
    
    <div class="mb-5 pb-5 border-b border-solid border-gray-300 pt-4">

     <div class="font-heading mb-2 px-2 font--12 font-extrabold uppercase tracking-wider text-zinc-400 flex items-center mb-2">
       <span class="whitespace-nowrap">{{ __('Super Admin') }}</span>
       <div class="border-b border-solid border-gray-300 w-full ml-2 flex"></div>
     </div>
     
     <h1 class="text-zinc-500 text-5xl mb-2 font-bold">{{ __('Translations') }}</h1>
    </div>
 </div>



  <!-- // -->
  <div class="mx-auto w-full max-w-screen-xl px-0 md:px-0 pb-10 pt-8 flex md:space-x-6 mb-10">
    <div class="hidden md:block">
      <div class="sticky top-0 shadow-xl bg-white rounded-lg p-5 w-15em">
        <div class="font-heading mb-6 px-2 font--12 font-extrabold uppercase tracking-wider text-zinc-400 flex items-center mb-2">
          <span class="whitespace-nowrap">{{ __('Languages') }}</span>
          <div class="border-b border-solid border-gray-300 w-full ml-2 flex"></div>
        </div>
        
        @if (count($languages) > 0)
        <div class="flex flex-col gap-2">
          @foreach ($languages as $item)
          @php
              $it = pathinfo($item);
          @endphp
          <a href="{{ route('mix-admin-languages-index', ['language' => ao($it, 'filename'), 'query' => request()->get('query')]) }}" class="relative cursor-pointer flex mb-[1px] items-center gap-3 rounded-md px-2 py-[5px] text-left text-sm font-medium text-zinc-600 duration-100 hover:bg-zinc-200/70 {{ $locale == ao($it, 'filename') ? 'bg-zinc-200/70' : '' }}">
            <label class="text-base font-bold cursor-pointer capitalize text-theme">
              {{ ao($info(ao($it, 'filename')), 'name') }}
            </label>
          </a>
          @endforeach
        </div>
        @else
        <div>
          <p class="mt-2 text-xs text-gray-600 flex items-center gap-1"><i class="fi fi-rr-triangle-warning"></i> {{ __('No language found') }}</p>
        </div>
        @endif

        <div class="mt-3 flex items-center w-full">
        
          <div class="flex z-menuc w-full" data-max-width="600" data-handle=".--control">
              <a class="bg-primary overflow-hidden rounded-lg p-1 px-5 text-white --control cursor-pointer w-full flex justify-center" aria-expanded="false">
                  <div class="flex h-full items-center justify-center">
                      <div class="px-2 py-0.5 text-sm font-medium">{{ __('Create Language') }}</div>
                  </div>
              </a>
  
              <div class="z-menuc-content-temp">
                  <ul class="z-menu-ul w-30em max-w-full shadow-lg border border-solid border-gray-200 rounded-xl">
                      <div class="p-6">
                          <div class="w-full">
                            <div class="flex w-full items-center justify-between">
                                <div class="flex-grow">
                                  <h4 class="text-lg font-medium">{{ __('Create Language') }}</h4>
                                </div>
                                <button type="button" class="-mt-1 rounded-md p-1 text-gray-500 hover:bg-zinc-50 z-menu-close" tabindex="0">
                                  <i class="fi fi-rr-cross"></i>
                                </button>
                            </div>
                          </div>
  
                          <div class="border-b border-solid border-gray-300 my-3"></div>
                          <form action="{{ route('mix-admin-languages-post', 'create') }}" method="POST">
                            @csrf
                            <div class="grid grid-cols-1 gap-4 mb-5">
                              <div class="form-input">
                                <label>{{ __('Select Locale:') }}</label>
                                <select name="locale">
                                  
                                    @foreach (Country::google_trans_lang() as $key => $item)
                                      <option value="{{ strtolower(ao($item, 'code')) }}">{{ ao($item, 'language') }}</option>
                                  @endforeach
                                </select>
                              </div>
                              <div class="form-input">
                                <label>{{ __('Language Name:') }}</label>
                                <input type="text" name="name">
                              </div>
                            </div>
                            
                            <button type="submit" class=" bg-primary focus:bg-primary-400 hover:bg-primary-400 block appearance-none rounded-md text-sm font-medium text-white duration-100 focus:outline-none disabled:opacity-75 px-4 py-2.5 w-full">
                              <div class="relative flex items-center justify-center ">
                                  <div class="duration-100">{{ __('Submit') }}</div>
                              </div>
                            </button>
                          </form>
                      </div>
                  </ul>
              </div>
          </div>
        </div>
     </div>
    </div>

    @if (is_array($language))
      @includeIf('mix::admin.translation.view')
    @endif

    @if (!is_array($language) && !$language)
        

      <div class="w-full">
        <div>
          <div class="p-10 shadow-xl rounded-xl mt-5">
            <p class="mt-2 text-xs text-gray-600 flex items-center gap-1"><i class="fi fi-rr-triangle-warning"></i> {{ __('No language found') }}</p>
          </div>
        </div>
      </div>
    @endif
  </div>

</div>
@endsection