@extends('layouts/contentLayoutMaster')

@section('title', 'Input')

@section('content')

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .input-container {
        position: relative;
    }

    .input-container::before {
        content: "$";
        position: absolute;
        left: 20px;
        top: 56%;
        transform: translateY(-50%);
    }

    .input-container>input {
        padding-left: 20px;
        /* Espacio para el símbolo del dólar */
    }

</style>
<!-- Basic Inputs start -->
<section id="basic-input">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Crear Profesión</h4>
                </div>
                <div class="card-body">
                    <div class="row">

                        <div class=" col-12 row">
                            <form method="POST" action="/dashboard/crear_profesion/guardar"
                                enctype="multipart/form-data" id="colaborador">
                                {!! csrf_field() !!}
                                <input type="hidden" name="id_profesion" value="{{ $id_profesion }}" />
                                <input type="hidden" name="id" value="0" />
                                <input type="hidden" accept="application/pdf" name="puntos" id="puntos"
                                class="form-control" placeholder="Name" />

                                <div class=" col-12 row">
                                    <div class="col-xl-3 col-md-3 col-12">
                                        <label class="form-check-label" for="">
                                            Educación
                                        </label>
                                        <div class="mb-1">
                                            <input type="checkbox" name="primaria" class="form-check-input"
                                                id="addSaveCard" />
                                            <label class="form-check-label" for="primaria">
                                                Primaria
                                            </label>
                                        </div>

                                        <div class="mb-1">
                                            <input type="checkbox" name="secundaria" class="form-check-input"
                                                id="secundaria" />
                                            <label class="form-check-label" for="secundaria">
                                                Secundaria
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-md-3">
                                        <label class="form-check-label">
                                            Turno Disponible para laborar
                                        </label>
                                        <div class="mb-1">
                                            <input type="checkbox" name="matutino" class="form-check-input"
                                                id="matutino" />
                                            <label class="form-check-label" for="matutino">
                                                Matutino
                                            </label>
                                        </div>


                                        <div class="mb-1">
                                            <input type="checkbox" name="vespertino" class="form-check-input"
                                                id="vespertino" />
                                            <label class="form-check-label" for="vespertino">
                                                Vespertino
                                            </label>
                                        </div>
                                        <div class="mb-1">
                                            <input type="checkbox" name="nocturno" class="form-check-input"
                                                id="nocturno" />
                                            <label class="form-check-label" for="nocturno">
                                                Nocturno
                                            </label>
                                        </div>
                                        <div class="mb-1">
                                            <input type="checkbox" name="rotativo" class="form-check-input"
                                                id="rotativo" />
                                            <label class="form-check-label" for="rotativo">
                                                Rotativo
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-xl-3 col-md-3 col-12">
                                        <label class="form-check-label" for="">
                                            Licencia de Conducir
                                        </label>
                                        <div class="row">
                                        <div class="col-6">

                                        <div class="mb-1">
                                            <input type="checkbox" name="b" class="form-check-input"
                                                id="b" />
                                            <label class="form-check-label" for="b">
                                                B
                                            </label>
                                        </div>
                                        <div class="mb-1">
                                            <input type="checkbox" name="c" class="form-check-input"
                                                id="c" />
                                            <label class="form-check-label" for="c">
                                                C
                                            </label>
                                        </div>
                                        <div class="mb-1">
                                            <input type="checkbox" name="d" class="form-check-input"
                                                id="d" />
                                            <label class="form-check-label" for="d">
                                                D
                                            </label>
                                        </div>
                                        <div class="mb-1">
                                            <input type="checkbox" name="e" class="form-check-input"
                                                id="e" />
                                            <label class="form-check-label" for="e">
                                                E1
                                            </label>
                                        </div>

                                        <div class="mb-1">
                                            <input type="checkbox" name="e" class="form-check-input"
                                                id="e" />
                                            <label class="form-check-label" for="e">
                                                E2
                                            </label>
                                        </div>
                                        </div>
                                        <div class="col-6">
                                        <div class="mb-1">
                                            <input type="checkbox" name="e" class="form-check-input"
                                                id="e" />
                                            <label class="form-check-label" for="e">
                                                E3
                                            </label>
                                        </div>
                                        <div class="mb-1">
                                            <input type="checkbox" name="f" class="form-check-input"
                                                id="f" />
                                            <label class="form-check-label" for="f">
                                                F
                                            </label>
                                        </div>
                                        <div class="mb-1">
                                            <input type="checkbox" name="g" class="form-check-input"
                                                id="g" />
                                            <label class="form-check-label" for="g">
                                                G
                                            </label>
                                        </div>

                                        <div class="mb-1">
                                            <input type="checkbox" name="h" class="form-check-input"
                                                id="h" />
                                            <label class="form-check-label" for="h">
                                                H
                                            </label>
                                        </div>
                                        <div class="mb-1">
                                            <input type="checkbox" name="i" class="form-check-input"
                                                id="i" />
                                            <label class="form-check-label" for="i">
                                                I
                                            </label>
                                        </div>
                                        <div class="mb-1">
                                            <input type="checkbox" name="a" class="form-check-input"
                                                id="a" />
                                            <label class="form-check-label" for="a">
                                            J
                                            </label>
                                        </div>
                                        <div>
                                        </div>
                                            </div>
                                    </div>
                                    </div>
                                    <div class="col-xl-3 col-md-3 col-12">
                                        <h1 id="points"><strong style="font-size: 100px;">
                                            0</strong> Ptos.</h1>
                                    </div>


                                    <div class="mb-1">
                                        <label class="form-label" for="helperText">Habilidades</label>
                                        <select class="js-example-basic-multiple" name="habilidades_seleccionadas[]" multiple="multiple">
                                           @foreach ($habilidades as $item)
                                                <option value="{{$item->id}}" >{{$item->nombre}}</option>
                                           @endforeach
                                          </select>
                                    </div>

                                    <div class="mb-1">
                                        <label class="form-label" for="helperText">Descripción Personal</label>
                                    <textarea
                                        class="form-control"
                                        id="descripcion"
                                        rows="3"
                                        placeholder="Textarea"
                                        name="descripcion"></textarea>
                                    </div>



                                    <div class="mb-1">
                                        <label class="form-label" for="helperText">Universidad</label>
                                        <input type="file" accept="application/pdf" name="universidad" id="contrato"
                                            class="form-control" placeholder="Name" />
                                        <!-- <p><small class="text-muted">Find helper text here for given textbox.</small></p>-->
                                    </div>
                                    <div class="mb-1">
                                        <label class="form-label" for="helperText">Idoneidad</label>
                                        <input type="file" accept="application/pdf" name="idoneidad" id="contrato"
                                            class="form-control" placeholder="Name" />
                                        <!-- <p><small class="text-muted">Find helper text here for given textbox.</small></p>-->
                                    </div>
                                    <div class="mb-1">
                                        <label class="form-label" for="helperText">Curso</label>
                                        <input type="file" accept="application/pdf" name="cursos" id="contrato"
                                            class="form-control" placeholder="Name" />
                                        <!-- <p><small class="text-muted">Find helper text here for given textbox.</small></p>-->
                                    </div>

                                    <div class="mb-1">
                                        <label class="form-label" for="helperText">Carnet de Salud (Vigente)</label>
                                        <input type="file" accept="application/pdf" name="salud" id="contrato"
                                            class="form-control" placeholder="Name" />
                                        <!-- <p><small class="text-muted">Find helper text here for given textbox.</small></p>-->
                                    </div>

                                    <div class="mb-1">
                                        <label class="form-label" for="helperText">Licencia de Conducir (Vigente) </label>
                                        <input type="file" accept="application/pdf" name="licencia" id="contrato"
                                            class="form-control" placeholder="Name" />
                                        <!-- <p><small class="text-muted">Find helper text here for given textbox.</small></p>-->
                                    </div>

                                </div>

                                <p>Toda documentación falsificada puede ser causa de proceso judicial o
                                demanda por la parte afectada. ENREGLAS INTERNATIONAL CORP, Tiene
                                convenios con instituciones y entidades para validar la veracidad de cada
                                documento.<br><br>
                                ¿Desea seguir con el formulario? Si hace clic en Guardar Ud. Hace la salvedad que
                                esta consciente de esta advertencia. </p>
                                <button style="margin-bottom:5px; color:#28c76f"
                                    class="btn btn-outline-success  form-control">Guardar</button>

                            </form>





                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="basic-input">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Archivos Aportados</h4>
                </div>
                <div class="card-body">
                    <table id="example" class="table">
                        <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Tipo</th>
                                <th>Puntos</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>

                            {{--   @foreach($empleados as $empleado)
              <tr>
                  <td>{{ $empleado->nombre }}</td>
                            <td>{{ $empleado->cedula }}</td>
                            <td>{{ $empleado->sexo }}</td>
                            <td>
                                <a class="btn btn-outline-primary"
                                    href="/dashboard/editar/empleado/{{ $empleado->id }}">Editar y calificar</a>
                                <a class="btn btn-outline-warning"
                                    href="/dashboard/editar/empleadoH/{{ $empleado->id }}">Ver Historial</a>
                            </td>
                            </tr>
                            @endforeach--}}

                        </tbody>
                        <tfoot>
                            <tr>
                                <th>Nombre</th>
                                <th>Tipo</th>
                                <th>Puntos</th>
                                <th>Acciones</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

</section>
<!-- Basic Inputs end -->


<!-- Tooltip validations end -->
@endsection

@section('page-script')
<!-- Page js files -->
<script src="{{ asset(mix('js/scripts/forms/form-tooltip-valid.js')) }}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Obtén referencias a las casillas de verificación
        const primariaCheckbox = document.getElementById('checkbox');
        const secundariaCheckbox = document.getElementById('secundaria');

        // Agrega un event listener a la casilla de "Secundaria"
        secundariaCheckbox.addEventListener('change', function() {
            // Si la casilla de "Secundaria" está marcada, marca también la casilla de "Primaria"
            primariaCheckbox.checked = secundariaCheckbox.checked;
        });
    });
</script>
<script>

    var archivos = {{$puntos_archivo}};

    document.addEventListener('DOMContentLoaded', function() {
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        const puntosElement = document.getElementById('points');

        function updatePoints() {
            let totalPoints = 0;
            let eGroupChecked = false;

            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    if (checkbox.name === 'e') {
                        eGroupChecked = true; // At least one 'e' checkbox is checked
                    } else if (checkbox.closest('.col-6')) {
                        totalPoints += 1; // Add 1 point for other checkboxes under 'col-6'
                    } else {
                        totalPoints += 5; // Add 5 points for checkboxes outside 'col-6'
                    }
                }
            });

            // If the 'e' group is checked, add 1 point
            if (eGroupChecked) {
                totalPoints += 1;
            }


            totalPoints += archivos;
            document.getElementById("puntos").value = totalPoints;
            puntosElement.innerHTML = `<strong style="font-size: 100px;">${totalPoints}</strong> Ptos.`;
        }

        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', updatePoints);
        });

        // Call it once to initialize in case there are any checkboxes pre-checked
        updatePoints();
    });


    $(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});

    </script>

@endsection