@php
$VerEditor =  auth()->user()->can('Empleados - Visor') || auth()->user()->can('Empleados - Editor')
@endphp
@if($VerEditor)
@extends('layouts/app')
@section('tituloModulo', 'DATOS DEL EMPLEADO')
@section('contenido')
<div class="card">
    <div class="card-body">
        <form action="{{ route('empleados.update', $datos->codigo_empr) }}" method="POST" enctype="multipart/form-data">
            @csrf
        <div class="row">
            <div class="col-md-12 col-12">
                <h4 class="card-title">Datos Generales</h4>
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label is-required">Nombre de usuario</label>
                <input class="form-control" type="text" name="nombre"  value="{{ $datos->name }}">
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label">Correo electrónico</label>
                <input class="form-control" type="text"  value="{{ $datos->email }}" disabled>
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label is-required">Teléfono</label>
                <input class="form-control" type="text" name="telefono"  value="{{ $datos->telefono_empr }}">
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label is-required">WhatsApp</label>
                <input class="form-control" type="text" name="whatsapp"  value="{{ $datos->whatsapp_empr }}">
            </div>
            <div class="col-md-12 col-12">
                <label class="control-label is-required">Puesto</label>
                <input class="form-control" type="text" name="puesto"  value="{{ $datos->puesto_empr }}">
            </div>
            <div class="col-md-12 col-12">
                <label class="control-label is-required">Dirección</label>
                <input class="form-control" type="text" name="direccion"  value="{{ $datos->direccion_empr }}">
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label is-required">País</label>
                <select class="form-select" aria-label="Default select example" name="pais" id="pais" required>
                    @if ($datos->pais_empr)
                    <option value="{{ $datos->pais_empr }}">{{ $datos->nombre_pais }}</option>
                    @else
                    <option value="">Selecciona el país</option>
                    @endif
                    @foreach ($paises as $pais)
                        <option value="{{ $pais->id }}">{{$pais->nombre_pais}}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label is-required">Estado</label>
                <select class="form-select inputCs modulo" aria-label="Default select example" name="estado" id="estado" required>
                    @if ($datos->estado_empr)
                    <option value="{{ $datos->estado_empr }}">{{ $datos->nombre_estado }}</option>
                    @else
                    <option value="">Selecciona el estado</option>
                    @endif
                </select>
            </div>
            <div class="col-md-12 col-12">
                @can('Empleados - Editor')
                <button type="submit" class="btn btn-outline-success mt-2"><i class="bx bx-save"></i> Guardar</button>
                @endcan
                <a href="{{ route('empleados.index')}}" class="btn btn-outline-danger mt-2">
                    <i class="bx bxs-arrow-from-right"></i><span> Regresar</span>
                </a>
            </div>
        </div>
        </form>
    </div>
</div>
<script>
    $(document).ready(function() {
        $(function(){
            $('#pais').off('change'); // Desvincular eventos 'change' anteriores
            $('#pais').on('change', onSelectPais);
        });
        function onSelectPais(){
            var id = $(this).val();
            $.get('{{Request::root()}}/estados/'+id+'', function(data){
                var html_select = '';
                for(var i=0; i<data.length; ++i)
                html_select += '<option value="'+data[i].id+'">'+data[i].nombre_estado+'</option>';
                $('#estado').html(html_select);
            });
        }
    });
</script>
@endsection
@endif