@extends('layouts.app')
@section('title', isset($user) ? __('labels.edit_Profile & Company Data') : __('labels.create_Profile & Company Data'))
@push('pageTitle')
    {{ __('labels.user_profile_and_company_data') }}
@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 + ')');
        });

        // Function to check selection and call actionSelectAdminRole
        function checkAdminRoleSelection() {
            var selectedValues = $('#admin-role-select').val();
            var hasSelected = selectedValues && selectedValues.length > 0;

            // Call the action function with the selection status
            actionSelectAdminRole(hasSelected);
        }

        // Initial check on page load
        checkAdminRoleSelection();

        // Listen for Select2 change events
        $('#admin-role-select').on('change', function() {
            checkAdminRoleSelection();
        });

        // Alternative: Listen for Select2 specific events
        $('#admin-role-select').on('select2:select select2:unselect', function() {
            checkAdminRoleSelection();
        });

        function actionSelectAdminRole(isSelected = null) {
            if (isSelected) {
                $('#membership-admin').removeClass('d-none').addClass('d-block');
                $('#membership-user').removeClass('d-block').addClass('d-none');
            } else {
                $('#membership-admin').removeClass('d-block').addClass('d-none');
                $('#membership-user').removeClass('d-none').addClass('d-block');
            }
        }
    </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.user_profile_company_data')
                : (isset($user)
                    ? __('labels.edit_user_profile')
                    : __('labels.add_new_profile')),
        'actionButton' => [
            'url' => route('users.index'),
            'text' => __('labels.back_to_list'),
        ],
    ])

    @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">{{ __('labels.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>
                @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

                @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),
                ])

                <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.company-data')

        @if (auth()->user()->isSuperAdmin())
            @include('pages.users.templates.membership-data')
            @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