@php $title = __('Edit User'); @endphp

@extends('layouts.master', [
    'title' => $title
])

@section('content')

    <x-page-header
        :title="$title"
        :breadcrumbs="[
            ['name' => $title],
            ['name' => __('Users'), 'url' => route('settings.users-management.users.index')]
        ]"
    />

    <form id="form-users" method="POST" enctype="multipart/form-data">
        @csrf
        <x-card :header="false" >
            <x-row>
                <x-col size="3">
                    <x-form-label :label="__('Name')" for="name" :required="true" />
                    <x-form-input type="text" name="name" id="name" value="{{ $item['name'] ?? '' }}" />
                </x-col>
                <x-col size="3">
                    <x-form-label :label="__('Username')" for="username" :required="true" />
                    <x-form-input type="text" name="username" id="username" value="{{ $item['username'] ?? '' }}" />
                </x-col>
                <x-col size="3">
                    <x-form-label :label="__('Email')" for="email" :required="true" />
                    <x-form-input type="email" name="email" id="email" value="{{ $item['email'] ?? '' }}" />
                </x-col>
                <x-col size="3">
                    <x-form-label :label="__('Mobile')" for="mobile" :required="true" />
                    <x-form-input type="text" name="mobile" id="mobile" oninput="inputNumber(this)" value="{{ $item['mobile'] ?? '' }}" />
                </x-col>

                <x-col size="3">
                    <x-form-label :label="__('Password')" for="password" :description="__('If you do not change the password, the old one will remain.')" />
                    <x-form-input type="password" name="password" id="password" />
                </x-col>

                <x-col size="3" @class(['d-none' => $item['role'] === 'owner'])>
                    <x-form-label :label="__('Role')" for="role" :required="true" />
                    <x-form-select name="role" id="role" class="roles-select" />
                </x-col>

                <x-col size="3">
                    <x-form-label :label="__('Gender')" for="gender" />
                    <x-form-select name="gender" id="gender" class="gender-select"
                                   :options="config('data-select.gender')" :valueName="LOCALIZE_NAME"
                                   :selected="$item['gender'] ?? ''"
                    />
                </x-col>
                <x-col size="3">
                    <x-form-label :label="__('DOB')" for="birth_date" />
                    <x-form-input type="text" name="birth_date" class="flatpickr_date birth_date" id="birth_date" :value="$item['birth_date'] ?? ''" />
                </x-col>

                <x-col size="3">
                    <x-form-label :label="__('Region')" for="region_id" />
                    <x-form-select name="region_id" id="region_id" class="regions-select" />
                </x-col>
                <x-col size="3">
                    <x-form-label :label="__('City')" for="city_id" />
                    <x-form-select name="city_id" id="city_id" class="cities-select" />
                </x-col>
                <x-col size="6">
                    <x-form-label :label="__('Address')" for="address" />
                    <x-form-input type="text" name="address" id="address" />
                </x-col>

                <x-col size="3">
                    <x-form-label :label="__('Avatar')" for="avatar" :description="__('Accepts photos of the type') . ' .png, .jpg, .jpeg'" />
                    <x-form-input type="file" accept=".png, .jpg, .jpeg" name="avatar" id="avatar" />
                </x-col>
            </x-row>

            <x-slot:footer>
                <x-button type="submit" size="sm" class="btn-primary button-users"
                          data-form-url="{{ route('settings.users-management.users.update', [encrypt($item['id'])]) }}"
                          data-redirect-url="{{ route('settings.users-management.users.index') }}" data-label="{{ __('Save Data') }}">{{ __('Save Data') }}</x-button>
            </x-slot:footer>
        </x-card>
    </form>

@endsection

@section('scripts')
    <script>
        $(document).ready(() => {
            $('.button-users').on('click', function (e) {
                e.preventDefault();

                handleFormStoreSubmission($(this));
            });

            lazySelect2Ajax($('.roles-select'), `{{ route('ajax.get-roles') }}`, false, `{{ $item['role'] ?? null }}` || null);
            lazySelect2Ajax($('.regions-select'), `{{ route('ajax.get-regions') }}`, false, `{{ $item['region_id'] ?? null }}` || null);

            @if(!empty($item['region_id']))
            lazySelect2Ajax($('.cities-select'), `{{ route('ajax.get-cities') }}`, false, `{{ $item['city_id'] ?? null }}` || null, {
                region_id: `{{ $item['region_id'] ?? null }}` || null,
            });
            @endif

        });
    </script>
@endsection
