@extends('layouts.app')
@section('script_header')

<script type="text/javascript">


    function cargar_tipos()
    {
//        se obtiene la cantidad de tipos ya mostrados
        var x = document.getElementsByName("contador_tipos")[0].value;

        var tipo = document.getElementsByName("tipo_ant")[0].value;
        var fecha = document.getElementsByName("fecha_ant")[0].value;

        //lineas dinamicas de servicios
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        var fieldHTML = "<div><label for='servicio' class='col-md-2 col-form-label text-md-right'>{{ __('Servicio') }}</label>";
        fieldHTML += "<select name='servicio[]' id='servicio' required class='linea_servicio'>";

        var sel = document.getElementById("servicio");
        for (var i = 0; i < sel.length; i++) {
            //  Aca haces referencia al "option" actual
            var opt = sel[i];
            if (opt.value == tipo)
                fieldHTML += "<option selected value='" + opt.value + "'>" + opt.text + "</option>";
            else
                fieldHTML += "<option value='" + opt.value + "'>" + opt.text + "</option>";

        }

        fieldHTML += "</select>";


        fieldHTML += "<label for='fecha' class='col-md-2 col-form-label text-md-right'>{{ __('Fecha') }}</label>";
        fieldHTML += "<input type='date' name='fecha[]' id='fecha' value='" + fecha + "'";
        fieldHTML += " required class='linea_servicio'/>";
        fieldHTML += "<a href='javascript:void(0);' class='remove_button linea_servicio' title='Eliminar este servicio'>";
        fieldHTML += "<img src='https://img.icons8.com/doodle/48/000000/recycle-bin.png'></a></div>";


        if (x < maxField) { //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
        }
        $("#contador_tipos").val('30');
        set_contador_tipos();

    }
</script>
@endsection

@section('content')



<div>


    <div class="row justify-content-center">
        <div class="col-md-8">

            @include('includes.message')

            <form method="POST" action="{{route('servicio.update', ['servicio'=> $servicio ? $servicio : '' ])}}" enctype="multipart/form-data" 
                  aria-label="{{ __('Nuevo Servicio') }}">
                @csrf
                <div class="card">
                    <div class="card-header">Nuevo Servicio</div>

                    <div class="card-body">

                        <div class="form-group row">
                            <label for="empresa" class="col-md-4 col-form-label text-md-right">
                                {{ __('Empresa') }}
                            </label>

                            <!--se almacena el id del servicio y el id de la empresa 
                            y el id de la planta si se esta modificando un servicio-->
                            <input type='hidden' name='id' 
                                   value="{{$servicio->id ? $servicio->id : ''}}">
                            <input type='hidden' name='empresa_id' 
                                   value="{{$empresa_ant->id ? $empresa_ant->id : ''}}">
                            <input type='hidden' name='planta' 
                                   value="{{$planta_ant->id ? $planta_ant->id : ''}}">

                            <div class="col-md-6">

                                <!--si es un servicio existente no se puede modificar la empresa-->
                                @if($empresa_ant->id == '')
                                <select name="empresa" id="empresa" required>
                                    <option value="">Seleccione una Empresa</option>
                                    @foreach($empresas as $empresa)
                                    <option value="{{$empresa->id}}">{{$empresa->razon_social}}</option>
                                    @endforeach
                                </select>
                                @else
                                <!--se muestra la empresa del servicio ya existente-->
                                <input type='text' name="empresa" 
                                       value='{{$empresa_ant->razon_social}}' disabled>
                                @endif

                            </div>
                        </div>


                        <!--Si se está modificando el servicio no se permite cambiar de planta-->
                        <div class="form-group row">
                            <label for="planta" class="col-md-4 col-form-label text-md-right">
                                {{ __('Planta') }}
                            </label>
                            <div class="col-md-6">
                                @if($planta_ant->id == '')
                                <select name="planta" id="planta" required>
                                    <option value=""></option>
                                </select>
                                @else
                                <input type='text'
                                       value='{{$planta_ant->nombre}}' disabled>
                                @endif
                            </div>
                        </div>


                        <div class="card">
                            <div class="card-header">Cargue los tipos de servicios realizados</div>
                            <input type='hidden' name='contador_tipos' 
                                   id="contador_tipos" value='1' disabled="">
                            <div class="card-body">


                                <div class="form-group row">

                                    <div class="col-md-12">
                                        <div class="field_wrapper">

                                            <!--tabla dinamica con los servicios-->
                                            <table>
                                                <tr>
                                                    <th>Header</th>
                                                    <th>Header2</th>
                                                </tr>
                                                <div id="listado"></div>

                                            </table>
                                                    

                                           
                                            @if($empresa_ant->id == '')
                                            <!--si es un nuevo servicio-->
                                            <label for="servicio" class="col-md-2 col-form-label text-md-right">
                                                {{ __('Servicio') }}
                                            </label>
                                            <select name="servicio[]" id="servicio" 
                                                    required class="linea_servicio">
                                                <option value="">Seleccione un servicio</option>
                                                @foreach($tipos as $tipo)
                                                <option value="{{$tipo->id}}">{{$tipo->nombre}}</option>
                                                @endforeach
                                            </select>
                                            <label for="fecha" class="col-md-2 col-form-label text-md-right">{{ __('Fecha') }}</label>
                                            <input type='date' name='fecha[]' id='fecha' 
                                                   required class="linea_servicio"/>  

                                            <a href="javascript:void(0);" onClick="agregarServicio();"
                                               class="linea_servicio" 
                                               title="Agregar otro servicio">
                                                <img src="https://img.icons8.com/doodle/48/000000/hospital--v2.png">
                                            </a>

                                            @else
                                                                                        <!--si el servicio existe se muestran los tipos de servicios cargados-->
                                            @foreach($servicio->servicios as $tipo_ant)
                                            @if($cont == 0)
                                            <label for="servicio" class="col-md-2 col-form-label text-md-right">
                                                {{ __('Servicio') }}
                                            </label>
                                            <select name="servicio[]" id="servicio" 
                                                    required class="linea_servicio">
                                                @foreach($tipos as $tipo)
                                                @if($tipo->id == $tipo_ant->tf_id)
                                                <option selected value="{{$tipo->id}}">{{$tipo->nombre}}</option>
                                                @else
                                                <option value="{{$tipo->id}}">{{$tipo->nombre}}</option>
                                                @endif
                                                @endforeach

                                            </select>

                                            <label for="fecha" class="col-md-2 col-form-label text-md-right">{{ __('Fecha') }}</label>
                                            <input type='date' name='fecha[]' id='fecha'
                                                   value="1970-01-01"
                                                   required class="linea_servicio"/>  



                                            <a href="javascript:void(0);" class="add_button linea_servicio" 
                                               title="Agregar otro servicio">
                                                <img src="https://img.icons8.com/doodle/48/000000/hospital--v2.png">
                                            </a>

                                            
                                            @else
                                            <input type='hidden' name='tipo_ant' value='{{$tipo_ant->tf_id}}' disabled="">
                                            <input type='hidden' name='fecha_ant' value='{{$tipo_ant->fecha}}' disabled="">

                                            <!--se carga dinamicamnete a partir del segundo registro-->
                                            <script languaje="javascript">
                                                cargar_tipos();
//                                                 document.getElementByName('fecha[1]').value=2019+"-"+10+"-"+19;
                                            </script>

                                            @endif
                                            @endforeach
                                            @endif

                                            <div>

                                            </div>
                                        </div>

                                    </div>
                                </div>



                            </div>

                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="observaciones" class="col-md-2 col-form-label text-md-right">{{ __('Observaciones') }}</label>
                        <div class="col-md-8">
                            <textarea class="form-control" name="observaciones" rows="4" >
                                {{$servicio->observaciones ? $servicio->observaciones : ''}}
                            </textarea>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="venenos" class="col-md-2 col-form-label text-md-right">{{ __('Venenos usados') }}</label>
                        <div class="col-md-8">
                            <textarea class="form-control" name="venenos" rows="3" >
                                {{$servicio->venenos ? $servicio->venenos : ''}}
                            </textarea>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="form-group row mb-0">
                        <div class="col-md-6 offset-md-4">
                            <button type="submit" class="btn btn-primary btn-center" name="b2">
                                Guardar
                            </button>
                        </div>
                    </div>


                </div>

            </form>
        </div>

        @endsection

        @section('script')
        <script type="text/javascript">
            $(document).ready(function () {



                //cuando se selecciona una empresa se carga el rango de plantas
                $('#empresa').on('change', function () {
                    var empresa_id = $(this).val();
                    if ($.trim(empresa_id) != '') {
                        $.get('plantas', {empresa_id: empresa_id}, function (plantas) {
                            $('#planta').empty();
                            $('#planta').append("<option value=''>Seleccione una Planta</option>");
                            $.each(plantas, function (index, value) {
                                $('#planta').append("<option value='" + index + "'>" + value + "</option>");
                            });
                        });
                    }
                });



                //lineas dinamicas de servicios
                var maxField = 10; //Input fields increment limitation
                var addButton = $('.add_button'); //Add button selector
                var wrapper = $('.field_wrapper'); //Input field wrapper
//                var fieldHTML = "<div><label for='servicio' class='col-md-2 col-form-label text-md-right'>{{ __('Servicio') }}</label>";
//                fieldHTML += "<select name='servicio[]' id='servicio' required class='linea_servicio'>";
//
//                var sel = document.getElementById("servicio");
//                var cod = document.getElementById("servicio").value;
//                for (var i = 0; i < sel.length; i++) {
//                    //  Aca haces referencia al "option" actual
//                    var opt = sel[i];
//                    fieldHTML += "<option value='" + opt.value;
//                    if (opt.value == cod)
//                        fieldHTML += " selected ";
//                    fieldHTML += "'>" + opt.text + "</option>";
//
//                }
//                fieldHTML += "</select>";
//                fieldHTML += "<label for='fecha' class='col-md-2 col-form-label text-md-right'>{{ __('Fecha') }}</label>";
//                fieldHTML += "<input type='date' name='fecha[]' id='fecha' required class='linea_servicio'/>";
//                fieldHTML += "<a href='javascript:void(0);' class='remove_button linea_servicio' title='Eliminar este servicio'>";
//                fieldHTML += "<img src='https://img.icons8.com/doodle/48/000000/recycle-bin.png'></a></div>";
                var x = 1; //Initial field counter is 1
                $(addButton).click(function () { //Once add button is clicked
                    if (x < maxField) { //Check maximum number of input fields

                        var fieldHTML = "<div><label for='servicio' class='col-md-2 col-form-label text-md-right'>{{ __('Servicio') }}</label>";
                        fieldHTML += "<select name='servicio[]' id='servicio' class='linea_servicio'>";

                        var fecha = document.getElementById("fecha").value;
                        var sel = document.getElementById("servicio");
                        var cod = document.getElementById("servicio").value;
                        for (var i = 0; i < sel.length; i++) {
                            var opt = sel[i];
                            fieldHTML += "<option value='" + opt.value + "'";
                            if (opt.value == cod) {
                                fieldHTML += " selected ";
                                alert(fecha);
                            }
                            fieldHTML += "disabled>" + opt.text + "</option>";

                        }
                        fieldHTML += "</select>";
                        fieldHTML += "<label for='fecha' class='col-md-2 col-form-label text-md-right'>{{ __('Fecha') }}</label>";
                        fieldHTML += "<input type='date' name='fecha[]' id='fecha' disabled class='linea_servicio'";
                        fieldHTML += " value='" + fecha + "'/>";
                        fieldHTML += "<a href='javascript:void(0);' class='remove_button linea_servicio' title='Eliminar este servicio'>";
                        fieldHTML += "<img src='https://img.icons8.com/doodle/48/000000/recycle-bin.png'></a></div>";


                        x++; //Increment field counter
                        $(wrapper).append(fieldHTML); // Add field html
                    }



                });
                $(wrapper).on('click', '.remove_button', function (e) { //Once remove button is clicked
                    e.preventDefault();
                    $(this).parent('div').remove(); //Remove field html
                    x--; //Decrement field counter
                });



            });

            function set_contador_tipos() {
                $("#contador_tipos").val('30');
            }

//            se agreag el servicio ingresado a la lista
            function agregarServicio() {
                var fecha = document.getElementById("fecha").value;
                var sel = document.getElementById("servicio");
                var cod = document.getElementById("servicio").value;
                var contenedor = document.getElementById("listado");


  var body = document.getElementById("listado");
 
  // Crea un elemento <table> y un elemento <tbody>
  var tabla   = document.createElement("table");
  var tblBody = document.createElement("tbody");
 
  // Crea las celdas
  for (var i = 0; i < 2; i++) {
    // Crea las hileras de la tabla
    var hilera = document.createElement("tr");
 
    for (var j = 0; j < 2; j++) {
      // Crea un elemento <td> y un nodo de texto, haz que el nodo de
      // texto sea el contenido de <td>, ubica el elemento <td> al final
      // de la hilera de la tabla
      var celda = document.createElement("td");
      var textoCelda = document.createTextNode("celda en la hilera "+i+", columna "+j);
      celda.appendChild(textoCelda);
      hilera.appendChild(celda);
    }
 
    // agrega la hilera al final de la tabla (al final del elemento tblbody)
    tblBody.appendChild(hilera);
  }
 
  // posiciona el <tbody> debajo del elemento <table>
  tabla.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tabla);
  // modifica el atributo "border" de la tabla y lo fija a "2";
  tabla.setAttribute("border", "2");

            }

        </script>
        @endsection