@extends('adminlte::page')

@section('plugins.Sweetalert2', true)
@section('plugins.Select1', true)
@section('plugins.inputmask', true)

@section('title', 'Detalle del Usuario | Guiñez Ingeniería')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-6">

                <div class="card card-aspen">
                    <div class="card-header">
                        <h3 class="card-title">Detalle del Usuario </h3>
                    </div>

                    <form id="formularioDeUsuario">
                        @csrf
                        @method('put')

                        <div class="card-body">
                            <div class="form-group">
                                <label for="nombre">Nombre</label>
                                <input type="text" class="form-control" name="name" value="{{ old('name', $usuario->name) }}" disabled="true">
                            </div>

                            <div class="form-group">
                                <label for="correo">Correo</label>
                                <input type="text" class="form-control" name="email" value="{{ old('email', $usuario->email) }}" disabled="true">
                            </div>

                            <div class="form-group">
                                <label for="telefono">Teléfono</label>
                                <input type="text" class="form-control" name="telefono" value="{{ old('telefono', $usuario->telefono) }}" disabled="true">
                            </div>

                            @isset($usuario->empresa)
                                <div class="form-group">
                                    <label for="id_empresa">Empresa</label>
                                    <input type="text" class="form-control" name="id_empresa" value="{{ old('id_empresa', $usuario->empresa->nombre) }}" disabled="true">
                                </div>
                            @endisset

                            @isset($usuario->proyecto)
                                <div class="form-group">
                                    <label for="id_proyecto">Proyecto</label>
                                    <input type="text" class="form-control" name="id_proyecto" value="{{ old('id_proyecto', $usuario->proyecto->nombre) }}" disabled="true">
                                </div>
                            @endisset

                            <div class="form-group">
                                <label for="id_rol">Rol</label>
                                <input type="text" class="form-control" name="id_rol" value="{{ old('id_rol', implode(',', $listadoRoles)) }}" disabled="true">
                            </div>

                            <div class="form-group">
                                <label for="estado">Estado</label>
                                <input type="text" class="form-control" name="estado" value="{{ old('estado', $usuario->estado) }}" disabled="true">
                            </div>
                            
                            <div class="signature-section mb-2">
                                <div class="signature-container">
                                    <div class="signature-title">FIRMA DEL USUARIO</div>
                                    <div class="signature-img">
                                        @if (isset($usuario->firma))
                                            <img src="{{asset('storage/firma/'.$usuario->id.'/'.$usuario->firma)}}" alt="Firma del usuario">
                                        @else
                                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMjUwIDE1MCI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI1MCIgaGVpZ2h0PSIxNTAiIGZpbGw9IiNmNWY1ZjUiLz48cGF0aCBkPSJNNDAgNjBDNTAgNDUgODAgMzAgMTAwIDQwQzEyMCA1MCAxMzAgODAgMTEwIDEwMEM5MCAxMjAgNjAgMTMwIDQwIDExMEMyMCA5MCAzMCA2NSA0MCA2MFoiIGZpbGw9IiNlMWUxZTEiLz48dGV4dCB4PSI3MCIgeT0iODAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxOCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiM5OTk5OTkiPlNpbiBGaXJtYTwvdGV4dD48L3N2Zz4=" alt="Firma del usuario">
                                        @endif
                                    </div>
                                    <p>Firma autorizada para el control topografico</p>
                                </div>
                            </div>

                        </div>

                        <div class=" card-footer">
                            <a href="{{ route('usuario.index') }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                        </div>
                    </form>
                </div>

            </div>
        </div>

    </div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/generico.css') }}">
    <style>
        .signature-section {
            flex: 1;
            min-width: 300px;
            background: #f9f9f9;
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .signature-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            width: 100%;
            max-width: 300px;
            text-align: center;
        }
        
        .signature-title {
            font-weight: 600;
            color: #2575fc;
            margin-bottom: 15px;
        }
        
        .signature-img {
            width: 100%;
            height: 150px;
            background: #f1f1f1;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed #ccc;
            border-radius: 5px;
            margin-bottom: 15px;
            overflow: hidden;
        }
        
        .signature-img img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
@stop

@section('js')

@stop