@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Perfil";
        $modulo = "Usuario";
        $vista="Perfil";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>
@endsection

@section("contenido")
    <div class="row g-5 g-xxl-12">
        <div class="col-xl-12">
            <div class="card mb-5 mb-xxl-12">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <h4>El registro tiene los siguientes errores.</h4>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>{{ session('success') }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                <div class="card-body pb-0">
                        <div class="row mb-4">
                            <div class="col-md-3">
                                <label class="form-label required" for="tipo_identificación_id">Tipo de identificación</label>
                                <label class="text-info">Solo soporte </label>
                                <select class="form-select form-select-lg mt-1" data-control="select2" disabled>
                                    @foreach($tiposIdentificaciones as $tipoIdentificacion)
                                        <option value="{{$tipoIdentificacion->id}}"
                                                @if($tipoIdentificacion->id==$user->tipo_identificacion_id) selected @endif >
                                            {{$tipoIdentificacion->tipo_identificacion}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="identificacion" class="form-label  required">Numero de identificación</label>
                                <label class="text-info">Solo administración </label>
                                <input type="text" class="form-control form-control-lg" value="{{ $user->identificacion}}" disabled />
                            </div>
                            <div class="col-md-4">
                               <button type="button" class="btn btn-warning btn-sm  mt-10" id="btnCambiarPass">Cambiar contraseña</button>
                            </div>
                        </div>
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label for="nombre" class="form-label  required">Nombre(s)</label>
                                <label class="text-info">Solo administración </label>
                                <input type="text" class="form-control form-control-lg" value="{{ $user->nombre}}" disabled/>
                            </div>
                            <div class="col-md-4">
                                <label for="primer_apellido" class="form-label  required">Primer apellido</label>
                                <label class="text-info">Solo administración </label>
                                <input type="text" class="form-control form-control-lg" value="{{ $user->primer_apellido}}" disabled/>
                            </div>
                            <div class="col-md-4">
                                <label for="segundo_apellido" class="form-label ">Segundo apellido</label>
                                <label class="text-info">Solo administración </label>
                                <input type="text" class="form-control form-control-lg"  value="{{ $user->segundo_apellido }}" disabled/>
                            </div>
                        </div>
                        <div class="row mb-4">
                            <div class="col-md-2">
                                <label for="puesto" class="form-label">Puesto</label>
                                <label class="text-info">Solo administración </label>
                                <input type="text" id="puesto" class="form-control form-control-lg" readonly value="{{$user->puesto}}"  disabled />
                            </div>
                            <div class="col-md-3">
                                <label for="celular" class="form-label required" inputmode="numeric"> Celular</label>
                                <label class="text-info">Solo administración </label>
                                <input type="tel" maxlength="8" class="form-control form-control-lg input-telefono"  id="celular" value="{{$user->celular }}" disabled  />
                            </div>
                            <div class="col-md-6">
                                <label for="correo" class="form-label required ">Correo</label>
                                <label class="text-info">Solo administración </label>
                                <input type="email" class="form-control form-control-lg"  id="correo" value="{{$user->correo }}" disabled />
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalCambioPass" tabindex="-1" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg modal-dialog-centered ">
            <div class="modal-content p-3 p-md-5">
                <button type="button" class="btn-close  btn-pinned" data-bs-dismiss="modal" aria-label="Close"></button>
                <form  method="post" id="frmCambiarPassword" action="{{route("admin::usuario.cambiarPass")}}">
                    @csrf
                    <div class="modal-body">
                        <div class="text-center mb-4">
                            <h3 class="role-title mb-2 ">Cambiar<b class="text-danger"> contraseña</b></h3>
                        </div>
                        <div class="col-12">
                            <div class="col-12 mb-2">
                                <div class="row g-3">
                                    <div class="col-md-12">
                                        <label class="form-label" for="password_actual">Contraseña actual <span class="text-danger">*</span></label>
                                        <input type="password" id="current_password" name="current_password" class="form-control" spellcheck="false" data-ms-editor="false" required>
                                    </div>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-12">
                                        <label class="form-label" for="password">Nueva contraseña <span class="text-danger">*</span></label>
                                        <input type="password" id="password" name="password" class="form-control" spellcheck="false" data-ms-editor="false" required>
                                    </div>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-12">
                                        <label class="form-label" for="password_confirmation">Confirme nueva contraseña <span class="text-danger">*</span></label>
                                        <input type="password" id="password_confirmation" name="password_confirmation" class="form-control" spellcheck="false" data-ms-editor="false" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-success btn-lg me-sm-3 me-1 waves-effect waves-light"> <i class="fas fa-save pe-2"></i> Guardar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@section("scripts")
    @vite(['resources/js/global/validaciones.js'])
    <script>
        $(document).ready(function () {
            $("#btnCambiarPass").click(function () {
                $("#modalCambioPass").modal({backdrop: 'static', keyboard: false}).modal('show');
            });

            $("#frmCambiarPassword").submit(function (e) {
                var password = $("#password").val();
                var confirmPassword = $("#password_confirmation").val();

                if (password !== confirmPassword) {
                    e.preventDefault(); // Evitar que el formulario se envíe
                    Swal.fire ({title: 'Error', text: 'Las contraseñas no coinciden', icon: 'error', confirmButtonText: 'Aceptar'});
                }
            });
        });
    </script>
@endsection