@extends('layouts.app')
@section('title', isset($user) ? __('labels.edit_user') : __('labels.create_user'))
@push('pageTitle')
    {{ __('labels.users') }}
@endpush
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    const groups= @if(isset($groups) && count($groups) > 0) {{ Js::from($groups) }}  @else [] @endif;
    const totalGroupsCount = {{ (isset($groups) && count($groups)) ? count($groups) : 0 }};

    $(document).ready(function() {
        $('#admin-role-select').select2();
    });
	function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#imagePreview').css('background-image', 'url('+e.target.result +')');
                $('#imagePreview').hide();
                $('#imagePreview').fadeIn(650);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#imageUpload").change(function() {
        readURL(this);
    });
	$('.remove-img').on('click', function() {
		var imageUrl = "{{ asset('assets/images/no-img-avatar.png') }}";
		$('.avatar-preview, #imagePreview').removeAttr('style');
		$('#imagePreview').css('background-image', 'url(' + imageUrl + ')');
	});

</script>
<script src="{{ asset('assets/custom/js/users/select-groups.js') }}"></script>
@endsection
@section('content')
    @include('components.common.page-header',[
        'pageTitle' => isset($user) && isset($readonly) && $readonly ? __('labels.view_user') : (isset($user) ? __('labels.edit_user') : __('labels.create_user')),
        'actionButton' => [
            'url' => route('users.index'),
            'text' => __('labels.back_to_users')
        ]
    ])

    @include('components.common.flush-message')
    @include('components.common.validation-errors')

    <form 
        @if(!isset($readonly) || (isset($readonly) && !$readonly))
           action="{{ isset($user) ? route('users.update', $user->id) : route('users.store') }}"         
           method="POST"
           enctype="multipart/form-data"
        @endif
        autocomplete="off"
        >
        @csrf
        @if(isset($user))
            @method('PUT')
        @endif
        <input type="hidden" name="id" value="{{ $user->id ?? '' }}" />
        <div class="card">
            <div class="card-body">                
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="mb-3">
                            <label class="form-label text-primary">Photo</label>
                            <div class="avatar-upload">
                                <div class="avatar-preview">
                                    <div id="imagePreview" style="background-image: url('{{ $user->profile_image ?? asset('assets/images/no-img-avatar.png') }}');">
                                    </div>
                                </div>
                                @if(!(isset($readonly) && $readonly))
                                <div class="change-btn mt-2 mb-lg-0 mb-3">
                                    <input type="file" name="profile_image" class="form-control d-none" id="imageUpload" accept=".png, .jpg, .jpeg">
                                    <label for="imageUpload" class="dlab-upload mb-0 btn btn-primary btn-sm">{{ __('labels.choose_file') }}</label>
                                    <a href="javascript:void" class="btn btn-danger light remove-img ms-2 btn-sm">{{  __('labels.remove') }}</a>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="name" class="form-label">{{ __('labels.name') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name"
                                name="name" {{ isset($readonly) && $readonly ? "readonly" : "" }} value="{{ old('name', $user->name ?? '') }}" >
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="email" class="form-label">{{ __('labels.email') }} <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                                name="email" {{ isset($readonly) && $readonly ? "readonly" : "" }} value="{{ old('email', $user->email ?? '') }}" >
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="phone" class="form-label">{{ __('labels.phone') }}</label>
                            <input type="text" class="form-control @error('phone') is-invalid @enderror" name="phone"
                            {{ isset($readonly) && $readonly ? "readonly" : "" }} value="{{ old('phone', $user->phone ?? '') }}" >
                        </div>
                        @error('phone')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                </div>

                @include('components.form.author-name', [
                    'readonly' => isset($readonly) && $readonly ? 1 : 0,
                    'authorName' => old('author_name', isset($user->author_name) && $user->author_name ? $user->author_name : auth()->user()->name),
                ])

                @if(!isset($readonly) || (isset($readonly) && !$readonly))
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="password" class="form-label">{{ __('labels.password') }} 
                                @if(!isset($user->id)) <span class="text-danger">*</span> @endif
                            </label>
                                <div class="input-group" id="password">
                                    <input type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Enter password" 
                                       @if(!isset($user)) required="true" @endif
                                       autocomplete="off">
                                    <button class="btn btn-light" type="button" onclick="showPassword('password')">
                                            <i class="mdi mdi-eye-outline"></i>
                                    </button>
                                </div>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="password_confirmation" class="form-label">{{ __('labels.confirm_password') }}
                                @if(!isset($user->id)) <span class="text-danger">*</span> @endif
                            </label>
                            <div class="input-group" id="password_confirmation">
                                <input type="password" class="form-control @error('password') is-invalid @enderror" name="password_confirmation" placeholder="Enter password" 
                                   @if(!isset($user)) required="true" @endif
                                   autocomplete="off">
                                <button class="btn btn-light" type="button" onclick="showPassword('password_confirmation')">
                                        <i class="mdi mdi-eye-outline"></i>
                                </button>
                            </div>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                @endif

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" name="is_premium" type="checkbox" value="1" @checked(old('is_premium',
                                    $user->is_premium ?? false))
                                    {{ isset($readonly) && $readonly ? "disabled" : "" }}
                                id="checkDefault">
                                <label class="form-check-label" for="checkDefault">
                                    {{ __('labels.premium') }}
                                </label>
                            </div>
                        </div>
                        @error('is_premium')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        @include('pages.users.templates.address')

        @if(auth()->user()->isSuperAdmin())
            @include('pages.users.templates.select-admin-roles',[
                'readonly' => ((isset($user) && $user->id == auth()->user()->id) || (isset($readonly) && $readonly)) ? 1 : 0,
                'selectedGroups' => $selectedGroups ?? [],
                'selectedAdminRoles' => old('admin_roles', isset($selectedAdminRoles) && count($selectedAdminRoles) ? $selectedAdminRoles : null),
            ])
        @endif

        @include('pages.users.templates.select-group',[
            'readonly' => isset($readonly) && $readonly ? 1 : 0,
            'groups' => $groups ?? [],
            'selectedGroups' => old('groups', isset($selectedGroups) && count($selectedGroups) ? $selectedGroups : null),
        ])

        @if(!isset($readonly) || (isset($readonly) && !$readonly))
            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <button type="submit" class="btn btn-primary">{{ __('labels.save') }}</button>
                <a href="{{ url()->previous() }}" class="btn btn-secondary">{{ __('labels.cancel') }}</a>
            </div>
        @endif
    </form>
@endsection