@php
use App\Models\User;
@endphp
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Users') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <div class="py-8">
                        @if (Auth::user()->isAdmin())
                            <div class="flex items-center justify-end mb-4">
                                <a href="{{route('users.new')}}" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150">
                                    {{ __('New') }}
                                </a>
                            </div>
                            <hr />
                        @endif
                        <form method="GET" action="{{ route('users') }}" class="mt-4">
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div class="my-2 flex sm:flex-row flex-col">
                                <div class="flex flex-row mb-1 sm:mb-0">
                                    <div class="relative">
                                        <span class="h-full absolute inset-y-0 left-0 flex items-center pl-2">
                                            <svg viewBox="0 0 24 24" class="h-4 w-4 fill-current text-gray-500">
                                                <path
                                                    d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z">
                                                </path>
                                            </svg>
                                        </span>
                                        <input placeholder="Search"
                                            name="search"
                                            value="{{$search}}"
                                            class="appearance-none rounded-r rounded-l border border-gray-400 border-b block pl-8 pr-6 py-2 w-full bg-white text-sm placeholder-gray-400 text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none" />
                                    </div>
                                </div>
                                <div class="block relative hidden space-x-0.5 sm:-my-px sm:ml-5 sm:flex">
                                    <select
                                        name="user_type"
                                        class="appearance-none h-full rounded-l rounded-r border-t border-r border-b block appearance-none w-full bg-white border-gray-400 text-gray-700 py-2 px-4 pr-8 leading-tight focus:outline-none focus:border-l focus:border-r focus:bg-white focus:border-gray-500"
                                        onchange="this.form.submit();">
                                        <option value="">- User Type -</option>
                                        <option value="{{User::USER_TYPE_ADMIN}}" @if ($userType === User::USER_TYPE_ADMIN)selected="selected"@endif>{{ __('core.USER_TYPE_'.User::USER_TYPE_ADMIN) }}</option>
                                        <option value="{{User::USER_TYPE_AO}}" @if ($userType === User::USER_TYPE_AO)selected="selected"@endif>{{ __('core.USER_TYPE_'.User::USER_TYPE_AO) }}</option>
                                        <option value="{{User::USER_TYPE_CASHIER}}" @if ($userType === User::USER_TYPE_CASHIER)selected="selected"@endif>{{ __('core.USER_TYPE_'.User::USER_TYPE_CASHIER) }}</option>
                                        <option value="{{User::USER_TYPE_DEALING_ASSISTANT}}" @if ($userType === User::USER_TYPE_DEALING_ASSISTANT)selected="selected"@endif>{{ __('core.USER_TYPE_'.User::USER_TYPE_DEALING_ASSISTANT) }}</option>
                                        <option value="{{User::USER_TYPE_ACCOUNTANT}}" @if ($userType === User::USER_TYPE_ACCOUNTANT)selected="selected"@endif>{{ __('core.USER_TYPE_'.User::USER_TYPE_ACCOUNTANT) }}</option>
                                    </select>
                                    <div
                                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                    </div>
                                </div>
                            </div>
                            <div class="my-2 flex sm:flex-row flex-col">
                                <div class="flex flex-row mb-1 sm:mb-0">
                                    <div class="relative">
                                        <select
                                            name="sortBy"
                                            class="appearance-none h-full rounded-r rounded-l border block appearance-none w-full bg-white border-gray-400 text-gray-700 py-2 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                                            onchange="this.form.submit();">
                                            <option value="">- Sort By -</option>
                                            <option value="name asc" @if($sortBy=='name asc')selected="selected"@endif>Name ascending</option>
                                            <option value="name desc" @if($sortBy=='name desc')selected="selected"@endif>Name descending</option>
                                        </select>
                                        <div
                                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                        </div>
                                    </div>
                                </div>
                                <div class="block relative hidden space-x-0.5 sm:-my-px sm:ml-5 sm:flex">
                                    <select
                                        name="limit"
                                        class="appearance-none h-full rounded-r rounded-l border block appearance-none w-full bg-white border-gray-400 text-gray-700 py-2 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                                        onchange="this.form.submit();">
                                        <option value="10" @if($limit==10)selected="selected"@endif>10</option>
                                        <option value="20" @if($limit==20)selected="selected"@endif>20</option>
                                        <option value="50" @if($limit==50)selected="selected"@endif>50</option>
                                        <option value="100" @if($limit==100)selected="selected"@endif>100</option>
                                    </select>
                                    <div
                                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                    </div>
                                </div>
                            </div>
                        </div>
                        </form>
                        <div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
                            <div class="inline-block min-w-full shadow rounded-lg overflow-hidden">
                                <x-table>
                                    <x-slot name="header">
                                        <x-table-header-column>
                                            <span class="block relative">Name
                                                @if ($sortByColumn == 'name')
                                                    <span 
                                                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                                        @if ($ordering == 'desc')
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 17l-4 4m0 0l-4-4m4 4V3" />
                                                            </svg>
                                                        @else
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7l4-4m0 0l4 4m-4-4v18" />
                                                            </svg>
                                                        @endif
                                                    </span>
                                                @endif
                                            </span>
                                        </x-table-header-column>
                                        <x-table-header-column>
                                            <span class="block relative">Email
                                                @if ($sortByColumn == 'email')
                                                    <span 
                                                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                                        @if ($ordering == 'desc')
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 17l-4 4m0 0l-4-4m4 4V3" />
                                                            </svg>
                                                        @else
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7l4-4m0 0l4 4m-4-4v18" />
                                                            </svg>
                                                        @endif
                                                    </span>
                                                @endif
                                            </span>
                                        </x-table-header-column>
                                        <x-table-header-column>Username</x-table-header-column>
                                        <x-table-header-column>Emp. code</x-table-header-column>
                                        <x-table-header-column>User Type</x-table-header-column>
                                        @if (Auth::user()->isAdmin())
                                            <x-table-header-column>Actions</x-table-header-column>
                                        @endif
                                    </x-slot>
                                    
                                    @foreach($users as $user)
                                    <tr>
                                        <x-table-column>
                                            {{$user->name}}
                                            @if (!empty($user->createdBy))<br><small>Created By: <u><a href="{{route('users')}}?search={{urlencode($user->createdBy->email)}}" target="_blank">{{$user->createdBy->name}}</a></u></small>@endif
                                        </x-table-column>
                                        <x-table-column>
                                            <div class="flex items-center">
                                                <p class="text-gray-900 whitespace-no-wrap">
                                                    {{$user->email}}
                                                </p>
                                            </div>
                                        </x-table-column>
                                        <x-table-column>
                                            <div class="flex items-center">
                                                <p class="text-gray-900 whitespace-no-wrap">
                                                    {{$user->username}}
                                                </p>
                                            </div>
                                        </x-table-column>
                                        <x-table-column>
                                            <div class="flex items-center">
                                                <p class="text-gray-900 whitespace-no-wrap">
                                                    {{$user->emp_code}}
                                                </p>
                                            </div>
                                        </x-table-column>
                                        <x-table-column>
                                            <div class="flex items-center">
                                                <p class="text-gray-900 whitespace-no-wrap">
                                                    {{__('core.USER_TYPE_'.$user->user_type)}}
                                                </p>
                                            </div>
                                        </x-table-column>
                                        @if (Auth::user()->isAdmin())
                                            <x-table-column>
                                                <div class="grid grid-cols-2 gap-2">
                                                    <div>
                                                    <a href="{{route('user.edit', [$user->id])}}">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                                        </svg>
                                                    </a>
                                                    </div>
                                                    @if (Auth::user()->id != $user->id)
                                                    <div>
                                                        <form method="POST" action="{{route('user.delete', [$user->id])}}">
                                                            {{ csrf_field() }}
                                                            {{ method_field('DELETE') }}
                                                                <button type="submit" class="btn btn-danger delete-user" value="Delete user">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                                    </svg>
                                                                </button>
                                                        </form>
                                                    </div>
                                                    @endif
                                                </div>
                                            </x-table-column>
                                        @endif
                                    </tr>
                                    @endforeach
                                </x-table>
                                <div
                                    class="px-5 py-5 bg-white border-t flex flex-col xs:flex-row ">
                                    <div class="mt-6">
                                        {{ $users->appends(['limit' => $limit, 'search' => $search, 'user_type' => $userType])->links() }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>