@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = '';
        if (Route::is('users.edit.profile')) {
            $page_title = __('Edit Profile');
        } else {
            $page_title = empty($user->id) ? __('Create new User') : __('Edit User');
        }
    @endphp

    @include('admin.partials.page_header')
@endsection

@section('content')
    <div class="container-fluid">
        <form id="user-form" method="post" enctype="multipart/form-data"
            action="{{ empty($user->id) ? route('users.store') : route('users.update', $user->id) }}" autocomplete="off">
            @if (!empty($user->id))
                @method('PATCH')
            @endif
            <input type="hidden" name="remove_signature_image" id="remove_signature_image" value="0">
            <div class="card">
                <!-- /.card-header -->
                <div class="card-body">
                    @if (!Route::is('users.edit.profile'))
                        @if (isBackOfficeUser(auth()->user()))
                            <div class="form-group" style="display: flex">
                                <div class="custom-control custom-radio" style="margin-right: 2rem; ">
                                    <input
                                        class="custom-control-input custom-control-input-danger custom-control-input-outline"
                                        type="radio" id="backoffice_user" name="user_type" value="backoffice"
                                        @if (empty($user->id) || isBackOfficeUser($user)) checked @endif>
                                    <label for="backoffice_user" class="custom-control-label"
                                        style="font-size:larger; font-weight: normal">Back
                                        Office</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input
                                        class="custom-control-input custom-control-input-danger custom-control-input-outline"
                                        type="radio" id="client_user" name="user_type" value="client"
                                        @if (!empty($user->id) && !isBackOfficeUser($user)) checked @endif>
                                    <label for="client_user" class="custom-control-label"
                                        style="font-size:larger; font-weight: normal">Client</label>
                                </div>
                            </div>
                            <hr class="separator">
                        @endif
                    @endif
                    <div class="form-group">
                        <label for="name">{{ __('Name') }}</label>
                        <div class="col-md-10">
                            <input class="form-control" id="name" name="name" value="{{ $user->name ?? '' }}">
                            <span id="name-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email">{{ __('Email') }}</label>
                        <div class="col-md-10">
                            <input type="email" class="form-control" id="email" type="email" name="email"
                                value="{{ $user->email ?? '' }}" placeholder="mail@example.com">
                            <span id="email-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email_signature">{{ __('Email Signature') }}</label>
                        <div class="col-md-10">
                            <textarea class="form-control" id="email_signature" name="email_signature" rows="7">{{ $user->email_signature ?? '' }}</textarea>
                            <span id="email_signature-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div style="margin-bottom: 5px;">
                            <label for="file_image" style="display: block;">{{ __('Image') }}</label>
                        </div>

                        <div id="imageContainer"
                            style="position: relative; display:  @if ($user->signature_image) inline-block; @else none @endif">
                            {{-- Stored image --}}
                            <img id="signature_image" alt="Image"
                                style="max-width: 400px; max-height: 400px; object-fit: contain; {{ !$user->signature_image ? 'display:none;' : '' }}"
                                @if ($user->signature_image) src="{{ asset('storage/signatures/' . $user->signature_image) }}" @endif>

                            {{-- Preview image --}}
                            <img id="fileThumbnail" src="" alt="Thumbnail"
                                style="max-width: 400px; max-height: 400px; height: auto; display: none; object-fit: contain;" />

                            <a href="javascript:deleteImage()"
                                style="
                                    position: absolute;
                                    top: -10px;
                                    right: -28px;
                                    padding: 6px;
                                ">
                                <i class="far fa-trash-alt"></i>
                            </a>
                        </div>

                        {{-- File input --}}
                        <div class="col-md-10 mt-3">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="file_image" name="file_image"
                                    accept="image/*">
                                <label class="custom-file-label" for="file_image">{{ __('Choose file') }}</label>
                            </div>
                            <span id="file_image-error" class="invalid-feedback" style="font-weight: bold; display: none;"
                                role="alert"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="phone">{{ __('Cell Phone') }}</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="phone" name="phone"
                                value="{{ $user->phone ?? '' }}" placeholder="(123) 456-7890">
                            <span id="phone-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    @if (isBackOfficeUser(auth()->user()))
                        <div class="form-group" id="client_section"
                            @if (empty($user->id) || isBackOfficeUser($user)) style="display:none" @endif>
                            <label for="client_id">{{ __('Client') }}</label>
                            <div class="col-md-10">
                                <select class="form-control" name="client_id" id="client_id"
                                    onChange="handleSelectChange('#user-form #client_id', 'roles', '#user-form #role_id', '{{ route('getRolesByClient') }}')">
                                    <option value="">{{ __('-- Select client --') }}</option>
                                    @foreach ($clients as $client)
                                        <option value="{{ $client->id }}"
                                            @if (!empty($user->id) && $user->client_id == $client->id) selected @endif>
                                            {{ $client->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <span id="client_id-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    @endif
                    @if (!Route::is('users.edit.profile'))
                        <div class="form-group" id="role_id_section">
                            <label for="role_id">{{ __('Role') }}</label>
                            <div class="col-md-10">
                                <select class="form-control" name="role_id" id="role_id">
                                    <option value="">{{ __('-- Select role --') }}</option>
                                    @foreach ($roles as $role)
                                        <option value="{{ $role->id }}"
                                            @if (!empty($user->id) && $user->hasActiveRole($role->id)) selected @endif>
                                            {{ $role->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <span id="role_id-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        {{-- update comisionista role id to 4 after database rebuild --}}
                        <div id="investor_section" @if (empty($user->id) || (!$user->hasActiveRole(3) && !$user->hasActiveRole(4))) style="display:none" @endif>
                            <div class="form-group">
                                <label for="share_pct">{{ __('Investor Share') }}</label>
                                <div class="col-md-10">
                                    <input type="number" class="form-control" name="share_pct" id="share_pct"
                                        value="{{ $user->hasActiveRole(3) ? $user->investment->share_pct ?? '' : ($user->hasActiveRole(4) ? $user->commission->share_pct ?? '' : '') }}">
                                    <span id="share_pct-error" class="invalid-feedback" style="font-weight:bold"
                                        role="alert"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="bank">{{ __('Bank') }}</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="bank" id="bank"
                                        value="{{ $user->hasActiveRole(3) ? $user->investment->bank ?? '' : ($user->hasActiveRole(4) ? $user->commission->bank ?? '' : '') }}">
                                    <span id="bank-error" class="invalid-feedback" style="font-weight:bold"
                                        role="alert"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="account_number">{{ __('Account Number') }}</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="account_number" id="account_number"
                                        value="{{ $user->hasActiveRole(3) ? $user->investment->account_number ?? '' : ($user->hasActiveRole(4) ? $user->commission->account_number ?? '' : '') }}">
                                    <span id="account_number-error" class="invalid-feedback" style="font-weight:bold"
                                        role="alert"></span>
                                </div>
                            </div>
                        </div>
                    @else
                        <input type="hidden" name="role_id"
                            value="@if (!empty($user->id)) {{ currentUserRoleId() }} @endif" />
                    @endif

                    @if (!Route::is('users.edit.profile'))
                        @can('activar usuarios')
                            <div class="form-group">
                                <label for="status">{{ __('Status') }}</label>
                                <div class="col-md-10">
                                    <input type="checkbox" id="status" name="status" data-bootstrap-switch
                                        data-on-text="Activo" data-off-text="Inactivo"
                                        {{ empty($user->id) || $user->status == 'Activo' ? 'checked' : '' }}>
                                    <span id="status-error" class="invalid-feedback" style="font-weight:bold"
                                        role="alert"></span>
                                </div>
                            </div>
                        @endcan
                    @else
                        @if ($user->status == 'Activo')
                            <input type="hidden" name="status" value="on" />
                        @endif
                    @endif

                    @if (!empty($user->id))
                        <div id="show_password" class="pb-4 pt-2 px-2">
                            <a href="javascript:void(0);" onclick="togglePasswordSection()"
                                class="inline-block bg-blue-500 font-semibold hover:bg-blue-600">
                                {{ __('Change Password') }}
                            </a>
                        </div>
                        {{-- <div id="hide_password" class="pb-4 pt-2 px-2" style="display:none">
                            <a href="javascript:void(0);" onclick="togglePasswordSection()"
                                class="inline-block bg-blue-500 font-semibold hover:bg-blue-600">
                                {{ __('Hide Password') }}
                            </a>
                        </div> --}}
                    @endif
                </div>
            </div>
            <div class="card" id="password_section">
                <div class="card-body">
                    <div>
                        @include('admin.partials.password')
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="form-group row" style="margin-bottom:0">
                        <a href="javascript:loadContent('{{ route('users.index') }}')" id="cancel" name="cancel"
                            class="btn btn-default custom-btn">{{ __('Cancel') }}</a>
                        <button type="submit"
                            class="btn btn-info custom-btn">{{ empty($user->id) ? __('Create') : __('Save') }}</button>
                    </div>
                </div>
            </div>

    </div>
    </form>
    <style>
        #imageContainer {
            position: relative;
            /* This is essential! */
            display: inline-block;
            /* or block, whatever you prefer */
        }

        Then your trash icon CSS can be: css Copy Edit #imageContainer a {
            position: absolute;
            top: -10px;
            /* Adjust as needed */
            right: -28px;
            /* Adjust as needed */
            cursor: pointer;
            font-size: 20px;
            color: red;
            display: block;
            /* make sure it's visible */
            z-index: 10;
            /* so it appears above the image */
        }
    </style>
    <script>
        // Bootstrap Switch
        $("input[data-bootstrap-switch]").each(function() {
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        });

        $('#email_signature').summernote({
            placeholder: '',
            tabsize: 2,
            height: 150,
            toolbar: [
                ['style', ['style']],
                ['font', ['fontname', 'bold', 'italic', 'underline', 'clear']],
                ['fontstyle', ['strikethrough', 'superscript', 'subscript']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
                ['view', ['codeview']]
            ],
        });

        var fileInput = document.getElementById("file_image");
        var fileLabel = document.querySelector(".custom-file-label");
        var fileThumbnail = document.getElementById("fileThumbnail");
        var existingImage = document.getElementById("signature_image");
        var errorSpan = document.getElementById("file_image-error");

        $('#file_image').on('change', function() {
            $('#remove_signature_image').val('0');

            const fileInput = this;
            const file = fileInput.files[0];
            const maxSizeKB = 150;

            const $imageContainer = $('#imageContainer');
            const $existingImage = $('#signature_image');
            const $fileThumbnail = $('#fileThumbnail');
            const $fileLabel = $('.custom-file-label');
            const $errorSpan = $('#file_image-error');

            if (file) {
                if (file.size / 1024 > maxSizeKB) {
                    $errorSpan.text('{{ __('The image should not exceed 150 KB.') }}').show();

                    fileInput.value = "";
                    $fileLabel.text('{{ __('Choose file') }}');
                    $fileThumbnail.hide();

                    if ($existingImage.length) $existingImage.show();
                    if ($imageContainer.length) $imageContainer.show();

                    return;
                } else {
                    $errorSpan.text('').hide();
                }

                $fileLabel.text(file.name);

                const reader = new FileReader();
                reader.onload = function(e) {
                    $fileThumbnail.attr('src', e.target.result).show();

                    if ($imageContainer.length) $imageContainer.show();
                    if ($existingImage.length) $existingImage.hide();
                };
                reader.readAsDataURL(file);
            } else {
                $fileLabel.text('{{ __('Choose file') }}');
                $fileThumbnail.hide();

                $errorSpan.text('').hide();

                if ($existingImage.length) $existingImage.show();
                if ($imageContainer.length) $imageContainer.show();
            }
        });

        @if (!empty($user->id))
            togglePasswordSection(false);
        @endif

        $('input[name="user_type"]').on('change', function() {

            var selectedValue = $('input[name="user_type"]:checked').val();

            if (selectedValue === 'client') {
                $('#client_id').val('');
                $('#client_section').show();
                $('#role_id_section').hide();
                $('#role_id').find('option:not(:first)').remove();
            } else {
                $('#client_section').hide();
                $('#role_id_section').show();
                handleSelectChange('#user-form #client_id', 'roles', '#user-form #role_id',
                    '{{ route('getRolesByClient') }}', '1');
            }
        });

        $('select[name="role_id"]').on('change', function() {
            var selectedValue = $(this).val();
            if (selectedValue == 3 || selectedValue == 4) { // update comisionista id
                $('#investor_section').show();
            } else {
                $('#investor_section').hide();
            }
        });

        function togglePasswordSection(show = null) {
            var $passwordSection = $('#password_section');
            var $show_password = $('#show_password');

            if ((show === null && $passwordSection.is(':hidden')) || show === true) {
                $passwordSection.show();
                $show_password.hide();
            } else if ((show === null && !$passwordSection.is(':hidden')) || show === false) {
                $passwordSection.find('input[type="password"]').val('');
                $passwordSection.hide();
                $show_password.show();
            }
        }

        function deleteImage() {
            $('#file_image').val('');
            $('.custom-file-label').text('{{ __('Choose file') }}');
            $('#imageContainer').hide();
            $('#file_image-error').hide().text('');
            $('#remove_signature_image').val('1');
        }

        $('#phone').mask('(000) 000-0000');
    </script>
@endsection