@extends('layouts.dashboard_layout')

@section('title', 'Nuevo usuario')

@section('body-class', 'acta-reunion')

@section('content')
<div class="container-fluid p-3 table-acta">
    <label class="text-align mb-4">Nuevo Miembro K2</label>
    <form action="{{ route('miembro.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-md-6 d-flex align-items-center justify-content-center">
                <img id="previewImage" src="{{ asset('img/Example.png') }}" alt="Imagen de perfil" style="width: 90px; height: 90px;">
            </div>
            <div class="col-md-6">
                <label class="form-label mb-3">Imagen de perfil</label>
                <input type="file" name="imagen_perfil" id="imagen_perfil" accept=".jpeg,.png,.jpg" class="form-control mb-3" onchange="previewFile()">            
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <label class="form-label mb-3">Nombre completo</label>
                <input type="text" name="nombre" value="{{ old('nombre')}}" class="form-control mb-2" placeholder="Nombre completo" required>
            </div>

            <div class="col-md-6">
                <label class="form-label mb-3">Rol asignado</label>
                <select name="id_rol" class="form-select mb-3" required>
                    <option hidden selected>Roles</option>
                    @foreach ($rol as $role)
                    <option value="{{ $role->id }}" {{ old('id_rol') == $role->id ? 'selected' : '' }}>{{ $role->nombre }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <label class="form-label mb-3">Cargo</label>
                <input type="text" name="cargo" value="{{ old('cargo')}}" class="form-control mb-3" placeholder="Cargo" required>
            </div>
            <div class="col-md-6">
                <label class="form-label mb-3">Correo electronico</label>
                <input type="email" name="email" value="{{ old('email')}}" class="form-control @error('email') is-invalid @enderror" placeholder="Correo electronico" required>
                @error('email')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <label class="form-label mt-md-0 mt-3 mb-3">Correo Corporativo</label>
                <input type="email" name="email_corporativo" value="{{ old('email_corporativo')}}" class="form-control mb-3" placeholder="Correo Corporativo">
            </div>
            <div class="col-md-6">
                <label class="form-label mb-3">Numero contacto</label>
                <input type="number" name="telefono" value="{{ old('telefono')}}" class="form-control mb-3" placeholder="+57 000 0000000" required>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <label class="form-label mb-3">Fecha de nacimiento</label>
                <input type="date" name="fecha_nacimiento" value="{{ old('fecha_nacimiento')}}" class="form-control mb-3 Inputdate">
            </div>
        </div>

        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button type="button" class="btn-previos" onclick="window.location.href='/miembros'">Cancelar</button>
            <button class="btnNext" type="submit">Guardar</button>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script src="{{ asset('js/constants/img.js') }}"></script>
@endsection