@extends('layouts.backend.app')

@section('title','Users')

@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-users icon-gradient bg-mean-fruit">
                    </i>
                </div>
                <div>{{ __(($user->id ? 'Edit' : 'Create New') . ' User') }}</div>
            </div>
            <div class="page-title-actions">
                <div class="d-inline-block dropdown">
                    <a href="{{ route('app.users.index') }}" class="btn-shadow btn btn-danger">
                        <span class="btn-icon-wrapper pr-2 opacity-7">
                            <i class="fas fa-arrow-circle-left fa-w-20"></i>
                        </span>
                        {{ __('Back to List') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <!-- form start -->
            <form role="form" id="userFrom" method="POST"
                  action="{{ $user->id ? route('app.users.update',$user->id) : route('app.users.store') }}"
                  enctype="multipart/form-data">
                @csrf
                @if ($user->id)
                    @method('PUT')
                @endif
                <div class="row">
                    <div class="col-md-8">
                        <div class="main-card mb-3 card">
                            <div class="card-body">
                                <h5 class="card-title">User Info</h5>

                                <x-forms.textbox label="First Name"
                                                 name="first_name"
                                                 value="{{ old('first_name', $user->first_name)  }}"
                                                 field-attributes="required">
                                </x-forms.textbox>

                                <x-forms.textbox label="Last Name"
                                                 name="last_name"
                                                 value="{{ old('last_name', $user->last_name)  }}">
                                </x-forms.textbox>

                                <x-forms.textbox label="Username"
                                                 name="username"
                                                 autocomplete="UserName"
                                                 value="{{ old('username', $user->username)  }}" />

                                <x-forms.textbox type="email"
                                                 label="Email"
                                                 name="email"
                                                 autocomplete="Email"
                                                 value="{{ old('email', $user->email)  }}" />

                                <x-forms.textbox type="password"
                                                 label="Password"
                                                 name="password"
                                                 placeholder="******" />
                                
                                <label for="toggleShow" class="d-flex align-items-center">
                                    <input id="toggleShow"
                                    style="width: 20px;height: 20px; margin-right: 10px;"
                                    type="checkbox" 
                                    onclick="AppHelper.toggleShowPassword()">Show Password
                                </label>
                                
                                {{--<x-forms.textbox type="password"
                                                 label="Confirm Password"
                                                 name="password_confirmation"
                                                 placeholder="******" />--}}

                                <div class="form-group">
                                    <label class="form-label" for="categories">Site Scope</label>
                                    <select id="site-scope"
                                            multiple
                                            aria-hidden="true"
                                            class="select form-control @error('site_scope') is-invalid @enderror"
                                            name="site_scope[]"
                                    >
                                        @foreach(division_list() as $key => $site)
                                            <option value="{{ $site['id'] }}" @if($user->site_scope & $site['id']) selected @endif>{{ $site['name'] }}</option>
                                        @endforeach

                                    </select>
                                    <span>It is able to access all website if leave it empty</span>
                                    @error('site_scope')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <div class="col-md-4">
                        <div class="main-card mb-3 card">
                            <div class="card-body">
                                @if(!$user->hasRole(\App\Models\Role::ROLE_SUPER_ADMIN))
                                <h5 class="card-title">Select Role and Status</h5>

                                <x-forms.select label="Select Role"
                                                name="role"
                                                class="select js-example-basic-single">
                                    @foreach($roles as $key => $role)
                                    <option value="{{ $role->name }}" @if(old('role', $user->getRoleNames()->first()) === $role->name) selected @endif>{{ $role->name }}</option>
                                        {{--@php
                                            $current = $user->id ? $user->getRoleNames()->implode(', ') : null;
                                        @endphp

                                        <x-forms.select-item :value="$role->name" :label="$role->name" 
                                            :selected="$current"/>--}}
                                    @endforeach
                                </x-forms.select>
                                @endif
                                <x-forms.dropify label="Avatar (Only Image are allowed)"
                                                 name="avatar"
                                                 value="{{ $user->id ? $user->getFirstMediaUrl('avatar','thumb') : ''  }}"/>

                                <x-forms.checkbox label="Active & Inactive"
                                                  name="status"
                                                  class="custom-switch"
                                                  :value="$user->status ?? null" />


                                <x-forms.button label="Reset" class="btn-danger" icon-class="fas fa-redo" on-click="resetForm('userFrom')"/>


                                @if($user->id)
                                    <x-forms.button type="submit" label="Update" icon-class="fas fa-arrow-circle-up"/>
                                @else
                                    <x-forms.button type="submit" label="Create" icon-class="fas fa-plus-circle"/>
                                @endif
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection