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

<script>
  function __alpine(){

    return {
      create_modal: false,
      modals: [],

      openModal(id){
        var _this = this;
        if(!_this.$event.target.classList.contains('app-un')){
            this.modals[id] = true;
        }
      },

      closeModal(id){
        this.modals[id] = false;
      },

      isShownModal(id){
        if(this.modals[id]){
            return true;
        }

        return false;
      },
    }
  }
</script>

<div class="h-full pb-16 pt-8 sm:pt-10" x-data="__alpine">
  <div class="flex h-32 items-center border-b border-gray-200">
    <div class="mx-auto w-full max-w-screen-xl px-5">
    
       <div class="mb-5 pb-5 pt-0">
        <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">{{ __('Domains') }}</h1>
        <div class="mt-3 flex items-center">
          <div class="z-menuc" data-max-width="400" data-placement="bottom-end" data-wire-updates="" data-appends-to=".--appended" wire:ignore.self="" data-handle=".--control">

            <a class="bg-primary overflow-hidden rounded-lg p-1 px-5 text-white --control cursor-pointer --control block">
                <div class="flex h-full items-center">
                    <div class="px-2 py-0.5 text-sm font-medium">{{ __('Create new') }}</div>
                </div>
            </a>
        
            <div class="--appended" wire:ignore=""></div>
      
            <div class="z-menuc-content-temp" wire:ignore.self="">
              <div class="p-5 w-80">
               
   
                <form action="{{ route('mix-admin-domains-post', 'create') }}" method="post" class="bg-white">
                  @csrf
                  <div class="mb-0 pb-5 pt-0">
                    <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">{{ __('Domain') }}</span>
                      <div class="border-b border-solid border-gray-300 w-full ml-2 flex"></div>
                    </div>
                    <h1 class="text-zinc-500 text-3xl mb-2 font-bold">{{ __('Create Domain') }}</h1>
                   </div>
    
    
                   <div class="custom-content-input border-dashed mb-5 px-1 m-0">
                      <label class="p-0">
                         <select name="protocol" class="text-sm border-0">
                            <option value="https">https://</option>
                            <option value="http">http://</option>
                         </select>
                      </label>
                      <input type="text" name="host" placeholder="{{ __('domain') }}" class="w-full">
                   </div>
                                        
    
                   <button class="sandy-button bg-black py-2 flex-grow w-full">
                      <div class="--sandy-button-container">
                         <span class="text-xs">{{ __('Save') }}</span>
                      </div>
                   </button>
                </form>
             </div>
            </div>
         </div>
        </div>
       </div>
    </div>
  </div>
  <div x-show="create_modal" x-cloak x-transition.opacity.duration.500ms="" class="alpine-dialog-modal">

    <div class="-alpine-modal-overflow" x-on:click="create_modal = false"></div>
    <div class="-alpine-dialog h-full w-full transform overflow-hidden bg-white text-left align-bottom shadow-xl sm:w-full sm:max-w-lg top-0 right-0 left-auto" x-show="create_modal !== false">
       <div>
          @includeIf('mix::admin.domains.new')
       </div>
    </div>
  </div>

  <div class="mx-auto w-full max-w-screen-xl px-2.5 pb-10 pt-8 ">
    <div class="page-trans">

      @if ($domains->isEmpty())
      
      <div>
        <p class="mt-2 text-xs text-gray-600 flex items-center gap-1"><i class="fi fi-rr-triangle-warning"></i> {{ __('No domain(s) found') }}</p>
      </div>
    
      @endif
  
      <div class="flex-table">
        <!--Table header-->
        <div class="flex-table-header">
          <span class="is-grow">{{ __('Domain') }}</span>
          <span>{{ __('Scheme') }}</span>
          <span class="cell-end">{{ __('Actions') }}</span>
        </div>
        @foreach ($domains as $domain)
        <div class="flex-table-item rounded-2xl overflow-x-auto shadow-none">
          <div class="flex-table-cell is-media is-grow" data-th="">
            @if ($user = \App\User::find($domain->user))
            <div class="h-avatar md is-video rounded-full remove-before remove-after h-12 w-12" style="background: {{ao($user->settings, 'avatar_color')}}">
              <img class="avatar is-squared lozad" data-src="{{ avatar($user->id) }}" alt="">
            </div>
            <div>
              <span class="item-name mb-2">{{ $user->name }}</span>
              <span class="item-meta">
                <span>{{ "$domain->host" }}</span>
              </span>
            </div>
            @else
            <div>
              <span class="item-name mb-2">{{ $domain->scheme }}</span>
              <span class="item-meta">
                <span>{{ "$domain->host" }}</span>
              </span>
            </div>
            @endif
          </div>
          <div class="flex-table-cell" data-th="{{ __('Scheme') }}">
            <div class="">
              <a class="text-sticker shadow-none bg-gray-100 font-normal m-0" href="{{ "$domain->scheme://$domain->host" }}" target="_blank">{{ "$domain->scheme://$domain->host" }}</a>
            </div>
          </div>
          <div class="flex-table-cell cell-end" data-th="{{ __('Actions') }}">
  
            <div class="flex items-center text-gray-500 ml-auto">
              <div class="flex z-menuc" data-wire-updates data-appends-to=".--appended" wire:ignore.self data-max-width="600" data-handle=".--control">
                <a class="--control cursor-pointer mr-4" wire:ignore aria-expanded="false">
                  <i class="fi fi-rr-attribution-pencil text-lg"></i>
                </a>
    
                <div class="--appended" wire:ignore></div>
    
                <div class="z-menuc-content-temp" wire:ignore.self>
                  <div class="p-5 w-80">
                 
     
                    <form action="{{ route('mix-admin-domains-post', 'edit') }}" method="post" class="bg-white">
                      @csrf
  
                      <input type="hidden" name="_id" value="{{ $domain->id }}">
  
                      <div class="mb-0 pb-5 pt-0">
                        <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">{{ __('Domain') }}</span>
                          <div class="border-b border-solid border-gray-300 w-full ml-2 flex"></div>
                        </div>
                        <h1 class="text-zinc-500 text-3xl mb-2 font-bold">{{ __('Edit Domain') }}</h1>
                       </div>
        
        
                       <div class="custom-content-input border-dashed mb-5 px-1 m-0">
                          <label class="p-0">
                             <select name="protocol" class="text-sm border-0">
                                <option value="https" {{ $domain->scheme == 'https' ? 'selected' : '' }}>https://</option>
                                <option value="http" {{ $domain->scheme == 'http' ? 'selected' : '' }}>http://</option>
                             </select>
                          </label>
                          <input type="text" name="host" placeholder="{{ __('domain') }}" class="w-full" value="{{ $domain->host }}">
                       </div>
                                            
        
                       <button class="sandy-button bg-black py-2 flex-grow w-full">
                          <div class="--sandy-button-container">
                             <span class="text-xs">{{ __('Save') }}</span>
                          </div>
                       </button>
                    </form>
                 </div>
                </div>
              </div>
            
              
              
              <x-parts.--delete>
                <x-slot name="content">{{ __('Are you sure you want to delete this? This action is irreversible.') }}</x-slot>
    
                <x-slot name="handle">
                  <a class="rounded-lg px-2 py-1 text-xs font-medium duration-200 bg-red-400 shadow-xl text-white flex items-center gap-1 --open-delete cursor-pointer">
                      <i class="fi fi-rr-trash"></i>
                      {{ __('Delete') }}
                  </a>
                </x-slot>
    
                <x-slot name="form">
                  <form action="{{ route('mix-admin-domains-post', 'delete') }}" method="post">
                    @csrf
                    <input type="hidden" name="_id" value="{{ $domain->id }}">
                    <button type="submit" class="first-letter: bg-red-500  text-white disabled:opacity-75 hover:bg-red-400
                           block appearance-none rounded-lg text-sm font-medium duration-100 focus:outline-transparent px-3 py-1.5">
                           <div class="relative flex items-center justify-center ">
                            <div class="duration-100">{{ __('Delete') }}</div>
                          </div>
                    </button>
                  </form>
                </x-slot>
              </x-parts.--delete>
           </div>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </div>
</div>
@endsection