@extends('home')
@section('css')
    <!-- Plugins css -->

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <link rel="stylesheet" href="{{ asset('css/select2-bootstrap-5-theme.min.css') }}" />
@endsection

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

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <h4 class="page-title text-center">Mis Datos Personales</h4>


                </div>
            </div>
        </div>
        <!-- end page title -->
        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <div class="row">
                        <div class="col-md-4 mb-2">
                            <label for="nombre" class="control-label">Nombre<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="nombre"
                                value="{{ Auth::user()->empleado->nombre }}" disabled >
                        </div>
                        <div class="col-md-4 mb-2">
                            <label for="paterno" class="control-label">Apellido paterno<span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="paterno"
                                value="{{ Auth::user()->empleado->paterno }}" disabled>
                        </div>
                        <div class="col-md-4 mb-2">
                            <label for="materno" class="control-label">Apellido materno<span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="materno"
                                value="{{ Auth::user()->empleado->materno }}" disabled>
                        </div>
                        <div class="col-md-4 mb-2">
                            <label for="dni" class="control-label">DNI<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="dni"
                                value="{{ Auth::user()->empleado->documento }}" disabled>
                        </div>

                        <div class="col-md-4 mb-2">
                            <label for="celular" class="control-label">Celular<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="celular"
                                value="{{ Auth::user()->empleado->celular }}">
                        </div>
                        <div class="col-md-4 mb-2">
                            <label for="correo" class="control-label">Correo electrónico<span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="correo"
                                value="{{ Auth::user()->empleado->correo }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="direccion" class="control-label">Direccion<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="direccion"
                                value="{{ Auth::user()->empleado->direccion }}">
                        </div>


                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <button id="editar" class="btn btn-success">Guardar cambios</button>

                        </div>
                    </div>
                </div> <!-- end card-box-->
            </div> <!-- end col -->
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card-box">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="firma_img" class="control-label">Firma (PNG o JPG)<span class="text-danger">*</span></label>
                            <input type="file" class="form-control" id="firma_img" accept="image/*">
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <button id="user_imgs" class="btn btn-success">Guardar cambios</button>

                        </div>
                    </div>
                </div> <!-- end card-box-->
            </div> <!-- end col -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="card-widgets">
                            <a href="javascript: void(0);" data-toggle="reload"><i class="mdi mdi-refresh"></i></a>
                            <a data-toggle="collapse" href="#cardCollpase3" role="button" aria-expanded="false" aria-controls="cardCollpase3"><i class="mdi mdi-minus"></i></a>
                            <a href="javascript: void(0);" data-toggle="remove"><i class="mdi mdi-close"></i></a>
                        </div>
                        <h4 class="header-title mb-0">Firma Electrónica</h4>
                        <div id="cardCollpase3" class="col-md-12 collapse show d-flex justify-content-center">
                            <img src="{{Auth::user()->empleado->path_firma}}" alt="" width="300px">
                        </div>

                        
                    </div> <!-- end card-body -->
                </div>
            </div>
        </div>


    </div>
@endsection

@section('js')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script src="{{ asset('js/micuenta.js') }}"></script>
@endsection