@extends('voyager::master')

@section('page_title', __('voyager::generic.' . (isset($dataTypeContent->id) ? 'edit' : 'add')) . ' ' . $dataType->getTranslatedAttribute('display_name_singular'))

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@stop


@section('page_header')
    <div class="d-flex header-title">
        <img src="{{ voyager_asset('images/iconos/user.webp') }}" alt="">
        <h1 class="page-title">
            {{ isset($dataTypeContent->id) ? __('Editando usuario') : __('Creando usuario') }}
        </h1>
    </div>

    <style> 
        #cliente_id_list {
            background-color: #f9f9f9;
        }

        #cliente_id_list .client-list-item {
            border: 1px solid #ddd;
            padding-inline: 2px;
            border-radius: 4px;
            cursor: pointer;
            background-color: #fff;
            transition: background-color 0.3s, transform 0.3s;
        }

        #cliente_id_list .client-list-item:hover {
            background-color: #e0f7fa;
            transform: scale(1.01);
        }

        #cliente_id_list .client-list-item:nth-child(odd) {
            background-color: #eaf2f8; /* Azul claro para elementos impares */
        }

        #cliente_id_list .client-list-item:nth-child(even) {
            background-color: #fff; /* Amarillo claro para elementos pares */
        }


    </style>
@stop

@section('content')
    <div class="page-content container-fluid">
        <form class="form-edit-add" role="form"
            action="@if (!is_null($dataTypeContent->getKey())) {{ route('voyager.' . $dataType->slug . '.update', $dataTypeContent->getKey()) }}@else{{ route('voyager.' . $dataType->slug . '.store') }} @endif"
            method="POST" enctype="multipart/form-data" autocomplete="off">
            <!-- PUT Method if we are editing -->
            @if (isset($dataTypeContent->id))
                {{ method_field('PUT') }}
            @endif
            {{ csrf_field() }}

            <div class="row">
                <div class="col-md-8">
                    <div class="panel panel-bordered">
                        @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="panel-body">
                            <div class="form-group">
                                <label for="name">{{ __('voyager::generic.name') }}</label>
                                <input type="text" class="form-control" id="name" name="name"
                                    placeholder="{{ __('voyager::generic.name') }}"
                                    value="{{ old('name', $dataTypeContent->name ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label for="email">{{ __('voyager::generic.email') }}</label>
                                <input type="email" class="form-control" id="email" name="email"
                                    placeholder="{{ __('voyager::generic.email') }}"
                                    value="{{ old('email', $dataTypeContent->email ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label for="telefono">Telefono</label>
                                <input type="telefono" class="form-control" id="telefono" name="telefono"
                                    placeholder="Telefono"
                                    value="{{ old('telefono', $dataTypeContent->telefono ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label for="cliente_id">Cliente Asignado</label>
                                <input type="text" id="cliente_name" name="cliente_name" class="form-control" placeholder="Buscar cliente" 
                                    value="{{ $dataTypeContent->cliente_id ? $clientes->firstWhere('id', $dataTypeContent->cliente_id)->name : '' }}">
                                <input type="hidden" id="cliente_id_hidden" name="cliente_id" value="{{ $dataTypeContent->cliente_id ?? '' }}">
                                <div id="cliente_id_list"></div>
                            </div>



                            <div class="form-group">
                                <label for="password">{{ __('voyager::generic.password') }}</label>
                                
                                {{-- Mostrar solo si estamos creando un nuevo registro --}}
                                @if (!isset($dataTypeContent->id))
                                    <input type="password" class="form-control" id="password" name="password" placeholder="{{ __('voyager::generic.password') }}" autocomplete="new-password">
                                @else
                                    {{-- Mostrar solo si estamos editando y el usuario tiene una contraseña --}}
                                    @if (isset($dataTypeContent->password))
                                        <br>
                                        <small>
                                            <a href="{{ route('voyager.usuarios.cambiarPassword', ['userId' => $dataTypeContent->id]) }}">Editar Password</a>
                                        </small>
                                        <br>
                                    @endif

                                    {{-- Campo de contraseña oculto sin el atributo name para que no se envíe en la petición --}}
                                    <input type="password" class="form-control" id="password" value="{{ old('password', $dataTypeContent->password) }}" autocomplete="new-password" style="display: none;">

                                    @if (isset($dataTypeContent->password))
                                        {{-- Campo de contraseña visible en solo lectura --}}
                                        <input type="text" class="form-control" id="password-plain" value="{{ $dataTypeContent->password }}" style="display: none;" readonly>

                                        {{-- Botón para mostrar/ocultar la contraseña --}}
                                        <button type="button" onclick="togglePasswordVisibility()">Mostrar Contraseña</button>
                                    @endif
                                @endif
                            </div>


                            <div class="form-group">
                                <label for="default_role">{{ __('Tipo de Acceso') }}</label>
                                <select class="form-control" id="default_role" name="default_role">
                                    <option value="" {{ !isset($dataTypeContent->role_id) ? 'selected' : '' }}>Seleccionar</option>
                                    @foreach ($roles as $role)
                                        <option value="{{ $role['id'] }}" 
                                            {{ isset($dataTypeContent->role_id) && $dataTypeContent->role_id == $role['id'] ? 'selected' : '' }}>
                                            {{ $role['name'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>


                            <div class="form-group">
                                <label for="status">Estado</label>
                                <select class="form-control" id="status" name="status">
                                    <!-- Mostrar 'Seleccionar' si no hay estado previamente establecido -->
                                    <option value="" {{ is_null($dataTypeContent->status) ? 'selected' : '' }}>Seleccionar</option>
                                    <option value="1" {{ $dataTypeContent->status == 1 ? 'selected' : '' }}>Activo</option>
                                    <option value="2" {{ $dataTypeContent->status == 2 ? 'selected' : '' }}>Pendiente - Autorización</option>
                                    <option value="0" {{ $dataTypeContent->status != 1 && $dataTypeContent->status != 2 ? 'selected' : '' }}>Inactivo</option>
                                </select>
                            </div>


                        </div>
                    </div>
                </div>

            </div>

            <div style="display: flex;">
                <button type="submit" class="btn btn-primary pull-right save">
                    {{ __('voyager::generic.save') }}
                </button>
            </div>
        </form>
        <div style="display:none">
            <input type="hidden" id="upload_url" value="{{ route('voyager.upload') }}">
            <input type="hidden" id="upload_type_slug" value="{{ $dataType->slug }}">
        </div>
    </div>
@stop

@section('javascript')
    <script>
        $('document').ready(function() {
            $('.toggleswitch').bootstrapToggle();
        });
    </script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    
    const clienteInput = document.getElementById('cliente_name');
    const clienteList = document.getElementById('cliente_id_list');
    const clienteHiddenInput = document.getElementById('cliente_id_hidden');

    clienteInput.addEventListener('input', function() {
        let query = clienteInput.value;
        if (query.length > 2) {
            fetch(`/admin/search-clients?query=${query}`)
                .then(response => response.json())
                .then(data => {
                    clienteList.innerHTML = data.html; 
                })
                .catch(error => console.error('Error:', error));
        } else {
            clienteList.innerHTML = ''; 
        }
    });

    clienteList.addEventListener('click', function(event) {
        if (event.target.classList.contains('client-list-item')) {
            let clientId = event.target.getAttribute('data-id');
            let clientName = event.target.textContent;
            clienteInput.value = clientName; 
            clienteHiddenInput.value = clientId; 
            clienteList.innerHTML = ''; 
        }
    });
});




function togglePasswordVisibility() {
        const passwordField = document.getElementById('password-plain');
        const button = event.target;

        if (passwordField.style.display === 'none') {
            passwordField.style.display = 'block';
            button.innerText = 'Ocultar Contraseña';
        } else {
            passwordField.style.display = 'none';
            button.innerText = 'Mostrar Contraseña';
        }
    }

</script>
@stop