@extends('layouts.app')

@section('content')



<div>


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

            @include('includes.message')

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

                    <!--encabezado-->
                    @if($empresa_ant->id == '')
                    <div class="card-header">
                        <div class="form-group row">
                            <div class="col-md-10">
                                Nuevo Servicio
                            </div>
                            <!--si cancela vuelve a la lista de servicios-->
                            <a href="{{ route('servicios')}}" 
                               class="btn btn-outline-primary">
                                Cancelar
                            </a>
                        </div>
                    </div>
                    @else
                    <div class="card-header">
                        <div class="form-group row">
                            <div class="col-md-10">
                                Modificar Servicio
                            </div>
                            <div class="btn-nuevo">
                                <a href="{{ route('servicio.servicio', ['servicio'=>$servicio->id])}}" 
                                   class="btn btn-outline-primary">
                                    Cancelar
                                </a>
                            </div>
                        </div>
                    </div>
                    @endif

                    <div class="card-body">

                        <!--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' id='empresa_id'
                               value="{{$empresa_ant->id ? $empresa_ant->id : ''}}">
                        <input type='hidden' name='planta' 
                               value="{{$planta_ant->id ? $planta_ant->id : ''}}">

                        <div class="form-group row">



                            <!--si es un servicio existente no se puede modificar la empresa-->
                            @if($empresa_ant->id == '')

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

                            <div class="col-md-6">
                                <select name="empresa" id="empresa" required class="form-control">
                                    <option value="">Seleccione una Empresa</option>
                                    @foreach($empresas as $empresa)
                                    <option value="{{$empresa->id}}">{{$empresa->razon_social}}</option>
                                    @endforeach
                                </select>
                                <br>
                            </div>


                            <label for="planta" class="col-md-4 col-form-label text-md-right">
                                {{ __('Planta') }}
                            </label>
                            <div class="col-md-6">
                                <select name="planta" id="planta" required class="form-control">
                                    <option value=""></option>
                                </select>
                            </div>
                            @else
                            <!--se muestra la empresa del servicio ya existente-->
                            <label for="empresa" class="col-md-4 text-md-right">
                                {{ __('Empresa') }}
                            </label>

                            <div class="col-md-6">
                                <strong>{{$empresa_ant->razon_social}}</strong>
                            </div>
                            <label for="planta" class="col-md-4 text-md-right">
                                {{ __('Planta') }}
                            </label>
                            <div class="col-md-6">
                                <strong>{{$planta_ant->nombre}}</strong>
                            </div>
                            @endif

                        </div>

                        <div class="card">

                            <div class="card-header">
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <select id="select_servicio" class="form-control">
                                            <option value="">Seleccione un servicio</option>
                                            @foreach($tipos as $tipo)
                                                                                        @foreach($servicio->servicios as $tipo_ant)
                                            @if($tipo_ant->tipoServicio->id == $tipo->id)
                                                                                        @endif
                                            @endforeach
                                            @if($cargado == '')
                                            <option value="{{$tipo->id}}">{{$tipo->nombre}}</option>
                                            @endif
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="btn btn-success" id="btnNuevoServicio">Agregar</div>
                                    </div>
                                </div>
                            </div>


                            <input type='hidden' name='contador_tipos' 
                                   id="contador_tipos" value='1' disabled="">
                            <div class="card-body">


                                <div class="form-group row">


                                    <table class="table table-border table-hover" id="tablaServicios">
                                        <tr>
                                            <th class="text-center" style="color: black">Servicio</th>
                                            <th class="text-center" style="color: black">Fecha</th>
                                            <th></th>
                                            <th></th>
                                        </tr>

                                        <!--servicios ya cargados-->
                                                                                @foreach($servicio->servicios as $tipo_ant)
                                                                                <tr>
                                            <td>
                                                <input type='text' disabled required id='text_serv' class='form-control' value='{{$tipo_ant->tipoServicio->nombre}}'/>"
                                            </td>
                                            <td>
                                                <input type='date' required name='fecha[]' id='fecha'
                                                       class='form-control' value='{{$tipo_ant->fecha}}'/>
                                            </td>
                                            <td>
                                                <div class='btn btn-danger'>Eliminar</div>
                                            </td>
                                            <td>
                                                <input hidden name='servicio[]' id='servicio' 
                                                       value='{{$tipo_ant->tipoServicio->id}}'/>
                                            </td>

                                        </tr>
                                        @endforeach


                                    </table>


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

                                            <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 text-area">
                            <textarea class="form-control" name="observaciones" rows="10" >{{$servicio->observaciones ? $servicio->observaciones : ''}}
                            </textarea>
                        </div>
                    </div>
                 
                    <!--selección de los venenos-->
                    <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-6">
                            <select name="venenos[]" id="venenos" 
                                    class="form-control" multiple>
                                <option value=""></option>
                                @foreach($venenos as $veneno)
                                <option value="{{$veneno->nombre}}">{{$veneno->nombre}}</option>
                                @endforeach
                            </select>
                            <br>
                        </div>    
                    </div>

                    <div class="clearfix"></div>
                    <input type="hidden" id="cont_servicios" value="{{$cont_servicios}}"/>
                    <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" id="btnGuardar">
                                Guardar
                            </button>
                        </div>
                    </div>


                </div>

            </form>
        </div>

        @endsection



        @section('script')
        <script type="text/javascript">


            //cuando el documento está listo
            $(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>");
                            });
                        });
                    }
                });



                $("#btnNuevoServicio").on('click', funcNuevoServicio);
                $("body").on('click', ".btn-danger", funcEliminarServicio);

                botonGuardar();

            });

            //se elimina el servicio de la pantalla
            function funcEliminarServicio() {

                var tr = $(this).parent().parent();
                var cod_servicio = tr.children().last().html();
                var index = cod_servicio.indexOf("value") + 7;
                cod_servicio = cod_servicio.slice(index, -2);

//obtengo el nombre del servicio que se esta eliminando
                var texto_servicio = "";
                var text_servicio = tr.children().first();
                texto_servicio = text_servicio.children().first().val();

                var x = document.getElementById("select_servicio");
                var option = document.createElement("option");
                option.text = texto_servicio;
                option.value = cod_servicio;
                x.add(option);
                console.log(cod_servicio);
                console.log(texto_servicio);
                tr.remove();

                var cont_servicios = document.getElementById("cont_servicios").value;
                cont_servicios--;
                document.getElementById("cont_servicios").value = cont_servicios;
                console.log(cont_servicios);

                botonGuardar();

            }


//            función que agrega un nuevo registro a la tabla para ingresar otro servicio
            function funcNuevoServicio() {
                var tabla = document.getElementById("tablaServicios");
                tabla = tabla.children;
                console.log(tabla);
                //var fecha = document.getElementById("fecha").value;
                var sel = document.getElementById("select_servicio");
                var cod = document.getElementById("select_servicio").value;

                if (cod) {
                    var text = "";
                    for (var i = 0; i < sel.length; i++) {
                        var opt = sel[i];
                        if (cod == opt.value)
                            text = opt.text;
                    }
                    sel.remove(sel.selectedIndex);

                    var cont_servicios = document.getElementById("cont_servicios").value;
                    cont_servicios++;
                    document.getElementById("cont_servicios").value = cont_servicios;
                    console.log(cont_servicios);

                    botonGuardar();

                    $("#tablaServicios").append
                            (
                                    $('<tr>').append
                                    (
                                            $('<td>').append
                                            (//campo Fumigación
                                                    "<input type='text' disabled required id='text_serv' class='form-control' value='" + text + "'/>"

                                                    )

                                            ).append
                                    (
                                            $('<td>').append
                                            (//campo Fecha
                                                    $('<input>').attr('type', 'date').attr('required', 'required').attr('name', 'fecha[]').attr('id', 'fecha').addClass('form-control')
                                                    )
                                            ).append
                                    (
                                            $('<td>').append
                                            (
                                                    $('<div>').addClass('btn btn-danger').text('Eliminar')
                                                    )
                                            ).append
                                    (
                                            $('<td>').append
                                            (
                                                    "<input hidden name='servicio[]' id='servicio' value='" + cod + "'/>"
                                                    )
                                            )
                                    );

                }
            }


            function botonGuardar() {

                var cont_servicios = document.getElementById("cont_servicios").value;
                if (cont_servicios == 0)
                    document.getElementById('btnGuardar').style.display = 'none';
                else
                    document.getElementById('btnGuardar').style.display = 'block';
            }

        </script>
        @endsection