@section('title', __('Users'))
<div>

  <x-baseview title="{{ __('Users') }}" :showNew="true">
    <div class="my-4 flex items-center space-x-4">
      <div
        class="{{ $selectRole == '' ? 'text-white bg-gray-500' : 'text-black bg-gray-300' }} cursor-pointer rounded px-4 py-2"
        wire:click="sortList('')">{{ __('All') }}</div>
      <div class="pl-1"></div>
      @foreach ($roles as $role)
        <div
          class="{{ $selectRole == $role->name ? 'text-white bg-gray-500' : 'text-black bg-gray-300' }} cursor-pointer rounded px-4 py-2"
          wire:click="sortList('{{ $role->name }}')">{{ __(ucfirst($role->name)) }}</div>
      @endforeach
    </div>
    <livewire:tables.user-table />
  </x-baseview>

  <div x-data="{ open: @entangle('showCreate') }">
    <x-modal confirmText="{{ __('Save') }}" action="save">
      <p class="text-xl font-semibold">{{ __('Create User Account') }}</p>
      <x-input title="{{ __('Name') }}" name="name" placeholder="John" />
      <x-input title="{{ __('Email') }}" name="email" placeholder="info@mail.com" />
      <x-input title="{{ __('Phone') }}" name="phone" placeholder="" />
      {{-- @if ($mustHavePassword) --}}
      <x-input title="{{ __('Login Password') }}" name="password" type="password"
        placeholder="**********************" />
      {{-- @endif --}}
      <x-select title="{{ __('Role') }}" :options='$roles ?? []' name="role" :defer="false" />
      <x-input title="{{ __('Wallet Balance') }}" name="walletBalance" placeholder="" />
    </x-modal>
  </div>

  <div x-data="{ open: @entangle('showEdit') }">
    <x-modal confirmText="{{ __('Update') }}" action="update">

      <p class="text-xl font-semibold">{{ __('Edit User Account') }}</p>
      <x-input title="{{ __('Name') }}" name="name" placeholder="John" />
      <x-input title="{{ __('Email') }}" name="email" placeholder="info@mail.com" />
      <x-input title="{{ __('Phone') }}" name="phone" placeholder="" />
      {{-- @if ($mustHavePassword) --}}
      <x-input title="{{ __('Login Password') }}" name="password" type="password"
        placeholder="**********************" />
      {{-- @endif --}}
      <x-select title="{{ __('Role') }}" :options='$roles' name="updateRole"
        selected="{{ !empty($selectedModel) ? $selectedModel->role_id : '1' }}" :defer="false" />
      <x-input title="{{ __('Wallet Balance') }}" name="walletBalance" placeholder="" />
    </x-modal>
  </div>



  {{-- details modal --}}
  <div x-data="{ open: @entangle('showDetails') }">
    <x-modal>

      <p class="text-xl font-semibold">
        <!-- {{ $selectedModel != null ? $selectedModel->name . "'s" : '' }} -->
        {{ __('Details') }}
      </p>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <x-details.item title="{{ __('Name') }}" text="{{ $selectedModel->name ?? '' }}" />
        <x-details.item title="{{ __('Phone') }}" text="{{ $selectedModel->phone ?? '' }}" />
        <x-details.item title="{{ __('Email') }}" text="{{ $selectedModel->email ?? '' }}" />

        <x-details.item title="{{ __('Wallet') }}"
          text="{{ setting('currency', 'RS') }} {{ number_format($selectedModel->wallet->balance ?? 0.0, 2) }}" />
        <x-details.item title="{{ __('Role') }}" text="{{ __(ucfirst($selectedModel->role_name ?? '')) }}" />

        <div>
          <x-label title="{{ __('Status') }}" />
          <x-table.active :model="$selectedModel" />
        </div>
      </div>

    </x-modal>
  </div>
</div>