@extends('layouts.app')

<script src="{{ asset('js/firma.js') }}" defer></script>
<script src="{{ asset('js/appmovil.js') }}" defer></script>

@php
  use Carbon\Carbon;

   
@endphp

@section('content')
<div class="container">

    <!-- Form wizard with icon tabs section start -->
    <section id="info-tabs-">

        <div class="row justify-content-center">
            <div class="col-md-10 col-sm-12">
                <div class="card icon-tab mt-2 shadow-sm">
                    <div class="card-header">
                        @if ($nomenu == 'no' )
                            
                            @if (Auth::user()->rol == 1 || Auth::user()->rol == 0)
                                <a class="" title="ir a Lista OT" href="{{ route('lista_ot') }}">
                                    <i class="fa fa-chevron-circle-left"></i>
                                </a>
                            @else
                            {{-- <button onclick="ocultarNavAzul('ocultar')">here</button> --}}
                                <a class="mr-2" title="ir a Lista OT" href="{{ route('lista_otecnico', Auth::user()->id) }}">
                                    <i class="fa fa-chevron-circle-left"></i>
                                </a>
                            @endif
                            
                        @endif
                        <button id="navazul" onclick="ocultarNavAzul('{{$nomenu}}')" style="display: none">nav</button>

                        
                        <strong> Orden de Trabajo N°{{$otinfo->id_ot}} </strong>
                        @if ($otinfo->estado_ot == "pendiente")
                        <span class="float-right">Estado: <strong class="text-primary"> {{$otinfo->estado_ot}} </strong></span>
                        @elseif($otinfo->estado_ot == "cancelada")
                        <span class="float-right">Estado: <strong class="text-danger"> {{$otinfo->estado_ot}} </strong></span>
                        @elseif($otinfo->estado_ot == "terminada")
                        <span class="float-right">Estado: <strong class="text-success"> {{$otinfo->estado_ot}} </strong></span>
                        @else
                        <span class="float-right">Estado: <strong class="text-warning"> {{$otinfo->estado_ot}} </strong></span>
                        @endif
                    </div>
                <div class="card-content mt-2">
                    <div class="card-body">
                        @if ($otinfo->estado_ot == "pendiente")
                            {{-- <form method="POST" action="{{ route('guardarot') }}"  id="GuardarOTForm" class="wizard-validation"> --}}
                                {{-- @csrf --}}
                                <!-- Step 1 -->
                                <h6>
                                <i class="step-icon"></i>
                                {{-- <span class="fonticon-wrap py-0">
                                    <i class="livicon-evo py-0"
                                    data-options="name:user.svg; style:lines; strokeColor:#4981BE;"></i>
                                </span> --}}
                                
                                {{-- <span class="titlespan">Datos Principales</span> --}}
                                </h6>
                                <!-- Step 1 end-->
                                <!-- body content of step 1 -->
                                <fieldset class="mt-0 pt-0">
                                
                                    <hr> 
                                    
                                    {{-- Informacion de cliente --}}
                                    <div class="row">
                                        <div class="col-12 mt-3 mb-3">
                                            <h4 class="py-50">
                                                <center> <strong> Información Cliente </strong> </center>
                                            </h4>
                                        </div>

                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="lead" for="nom_cliente_OT">Nombre Cliente</label>
                                                <input type="text" class="form-control" id="nom_cliente_OT" name="nom_cliente"
                                                    placeholder="Nombre y Apellidos" value="{{$otinfo->nombre}}" required readonly>

                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="lead" for="rut_cliente_OT">Rut Cliente</label>
                                                <input type="text" class="form-control" id="rut_cliente_OT" name="rut_cliente"
                                                    placeholder="Rut con codigo verificador" value="{{$otinfo->rut_cliente}}" required
                                                    readonly>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                
                                                <label class="lead" for="tel_cliente_OT">Telefono Contacto para Trabajo</label>
                                                <div class="input-group mb-3">
                                                <input type="text" class="form-control" id="tel_cliente_OT" name="tel_cliente"
                                                    placeholder="Numero Telefono o Celular" value="{{$otinfo->telefono_instalacion  == "" ? $otinfo->telefono : $otinfo->telefono_instalacion}}"
                                                    required readonly>
                                                    <div class="input-group-append" id="button-addon4">
                                                        <a href="tel:{{$otinfo->telefono_instalacion  == "" ? $otinfo->telefono : $otinfo->telefono_instalacion}}" class="btn btn-outline-secondary" type="button">
                                                            <center><i class="fa fa-phone mt-1"></i></center> 
                                                        </a>
                                                        <a href="https://api.whatsapp.com/send?phone={{$otinfo->telefono_instalacion  == "" ? $otinfo->telefono : $otinfo->telefono_instalacion}}" class="btn btn-success" type="button" target="blank">
                                                            <center><i class="fab fa-whatsapp mt-1"></i></center> 
                                                        </a>
                                                        
                                                      </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="lead" for="email_clienteN_OT">Email Contacto para Trabajo</label>
                                                <div class="input-group mb-3">
                                                    <input type="email" class="form-control" id="email_clienteN_OT" name="email_cliente"
                                                    placeholder="Email Valido" value="{{$otinfo->email_instalacion}}" required readonly>
                                                    <div class="input-group-append" id="button-addon4">
                                                        <a href="mailto:{{$otinfo->email_instalacion}}" class="btn btn-outline-secondary" type="button">
                                                            <center><i class="fa fa-envelope mt-1"></i></center> 
                                                        </a>
                                                       
                                                      </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="lead" for="dir_clienteN_OT">Direccion de Trabajo</label>
                                                <input type="text" class="form-control" id="dir_clienteN_OT" name="dir_cliente"
                                                    placeholder="Direccion" value="{{$otinfo->direccion_instalacion}}" required
                                                    readonly>
                                            </div>
                                        </div>

                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="lead" for="comuna_clienteN_OT">Comuna</label>
                                                <input type="text" class="form-control" id="comuna_clienteN_OT" name="comuna_cliente"
                                                    placeholder="Comuna" value="{{$otinfo->comuna_instalacion}}" required readonly>
                                            </div>
                                        </div>

                                    </div>
                                    {{-- Informacion de tecnico --}}
                                        {{-- <div class="row mb-4">
                                            <div class="col-12 mt-3 mb-3">
                                                <h4 class="py-50">
                                                    <center> <strong> Información Tecnico</strong> </center>
                                                </h4>
                                            </div>

                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="nom_instal" class="lead">Nombre Tecnico</label>
                                                    <input type="text" class="form-control" name="nom_instal_OT" id="nom_instal"
                                                        value="{{$otinfo->tec_nombre}}" readonly>

                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="rut_instal" class="lead">Rut Tecnico</label>
                                                    <input type="text" class="form-control" name="rut_instal_OT" id="rut_instal"
                                                        placeholder="Rut con codigo verificador" value="{{$otinfo->rut_tecnico}}" readonly
                                                        required>
                                                </div>
                                            </div>
                                        </div> --}}
                                        
                                    <hr>
                                
                                </fieldset>
                                <!-- body content of step 1 end-->
                                <!-- Step 2-->

                                {{-- <h6>
                                <i class="step-icon"></i>
                                <span class="fonticon-wrap py-0">
                                    <i class="livicon-evo"
                                    data-options="name:car.svg; size: 50px; style:lines; strokeColor:#4981BE"></i>
                                </span> 
                                </h6>--}}

                                <!-- Step 2 end-->
                                <!-- body content of step 2 -->
                                {{-- tabla de vehciculos --}}
                                {{-- <fieldset>
                                    
                                    
                                    <div class="container">

                                        <div class="row">
                                            <div class="col-md-12 col-sm-12">
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text" id="basic-addon1">Servicio</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="{{$otinfo->motivo ?? 'No Registrado'}}" style="text-transform: uppercase;" readonly>
    
                                                </div>
                                            </div>
                                            
                                        </div>
                                        
                                        <div class="row justify-content-center">
                                            <div class="col-12 mt-3 mb-3">
                                                <h4 class="py-50">
                                                    <center> <strong> Listado de Vehiculos </strong> </center>
                                                </h4>

                                            </div>

                                            <div class="table-responsive" id="">
                                                <table class="table table-bordered table-striped resp2" style="display:table;">
                                                    <thead>
                                                        <tr>
                                                            <th>
                                                                <center>Patente</center>
                                                            </th>
                                                            <th>
                                                                <center>Marca/Modelo</center>
                                                            </th>
                                                            
                                                            <th>
                                                                <center>Color</center>
                                                            </th>
                                                            <th>
                                                                <center>Estado Servicio</center>
                                                            </th>
                                                            <th>
                                                                <center>Servicio Realizado</center>
                                                            </th>
                                                            <th>
                                                                <center>N° Servicio</center>
                                                            </th>

                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($vehiculos as $vehi)
                                                        <tr>
                                                            <td style="text-transform: uppercase;">
                                                                <center>{{$vehi->patente}}</center>
                                                            </td>
                                                            <td style="text-transform: uppercase;">
                                                                <center>{{$vehi->marca}}/{{$vehi->modelo}}</center>
                                                            </td>
                                                            
                                                            @if ($vehi->color != null || $vehi->color != '')
                                                                <td style="text-transform: uppercase;">
                                                                    <center>{{$vehi->color}}</center>
                                                                </td>
                                                            @else
                                                                <td style="text-transform: uppercase;">
                                                                    <center>No Informado</center>
                                                                </td>
                                                            @endif
                                                            
                                                            @if($vehi->estado == "Correcto")
                                                                <td style="text-transform: uppercase;" class="text-success">
                                                                    <center>{{$vehi->estado}}</center>
                                                                </td>
                                                                <td style="text-transform: uppercase;">
                                                                    <center>{{$otinfo->motivo ?? $vehi->nom_act}}</center>
                                                                </td>
                                                                <td>
                                                                    <center>{{str_pad($vehi->id_servicio,8,"0",STR_PAD_LEFT)}}</center>
                                                                </td>
                                                            @elseif($vehi->estado == "Fallido")
                                                                <td style="text-transform: uppercase;" class="text-danger">
                                                                    <center>{{$vehi->estado}}</center>
                                                                </td>
                                                                <td style="text-transform: uppercase;">
                                                                    <center>No Realizado</center>
                                                                </td>
                                                                <td>
                                                                    <center>{{str_pad($vehi->id_servicio,8,"0",STR_PAD_LEFT)}}</center>
                                                                </td>
                                                            @elseif($vehi->estado == null)
                                                                <td class="text-primary" style="text-transform: uppercase;">
                                                                    <center>Pendiente</center>
                                                                </td>
                                                                <td style="text-transform: uppercase;">
                                                                    <center>Pendiente</center>
                                                                </td>
                                                            
                                                                <td>
                                                                    <center>
                                                                    <a href="{{route('tipotrabajo',[ $vehi->patente, $otinfo->idotNZ])}}" title="Realizar Trabajo en {{$vehi->patente}}">
                                                                        Realizar <i class="fa fa-car-side"></i></a>
                                                                    </center>
                                                                </td>
                                                            @else
                                                                <td class="text-info" style="text-transform: uppercase;">
                                                                    <center>En Curso</center>
                                                                </td>
                                                                <td class="text-primary" style="text-transform: uppercase;">
                                                                    <center>En curso</center>
                                                                </td>
                                                                <td>
                                                                    <center>
                                                                        <a href="{{route('verpatente',[ $vehi->patente, $otinfo->idotNZ])}}" 
                                                                            title="Realizar Trabajo en {{$vehi->patente}} Orden N° {{$otinfo->id_ot}}">
                                                                            {{str_pad($vehi->id_servicio,8,"0",STR_PAD_LEFT)}}
                                                                        </a>
                                                                    </center>
                                                                </td>
                                                            @endif
                                                            
                                                        </tr>
                                                        @endforeach

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <div class="checkbox">
                                            <input type="checkbox" name="bscheckbox" id="AutosCheckOT" onclick="javascript: return false;"  {{$pendi > 0 ? '' : 'checked'}} required>
                                            <label for="agree" class="text-success ml-2"><small>Todos los Trabajos Completados</small></label>
                                            </div>
                                        </div>
                                    </div>
                                
                                </fieldset> --}}

                                <!-- Step 3-->
                                {{-- <h6>
                                    <i class="step-icon"></i>
                                    <span class="fonticon-wrap py-0">
                                        <i class="livicon-evo"
                                        data-options="name:pen.svg; size: 50px; style:lines; strokeColor:#4981BE;"></i>
                                    </span>
                                </h6> --}}
                                <!-- Step 3 end-->
                                <!-- body content of step 3 -->

                                {{-- Informacion de Recibido --}}
                                {{-- <fieldset>
                                    
                                    <div class="row mx-0 mt-4">
                                        <div class="col-12 mt-2 mb-2">
                                            <h4 class="py-50">
                                                <center><strong> Información Recibido OT</strong> </center>
                                            </h4>
                                        </div>
                                        <div class="col-md-6 col-sm-12">
                                            <div class="row">
                                                <div class="form-group col-12">
                                                    <label class="lead" for="nom_contacto" >Nombre de quien firma Recibido</label>
                                                    <input type="text" class="form-control" name="nom_contacto" id="nom_contacto"
                                                    placeholder="Nombre y Apellido" value="" required  style="">

                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="form-group col-12">
                                                    <label class="lead" for="rut_contacto" >Rut</label>
                                                    <input type="text" maxlength="8" class="form-control" name="rut_contacto" id="rut_contacto"
                                                placeholder="Rut sin codigo verificador" onkeypress='return validaNumericos(event)' required>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="form-group col-12">
                                                    <label class="lead" for="email_contacto_firma">E-mail</label>
                                                    <input type="text" class="form-control" name="email_contacto_firma" id="email_contacto_firma"
                                                    placeholder="Email Contacto" value="{{$otinfo->email_instalacion}}" required>
                                                    <input type="text" name="otn" id="otnfirma" value="{{$otinfo->idotNZ}}" readonly hidden>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12">
                                            <div style="width: 95%">
                                                <label for="" class=""><strong>Firma Recibido</strong></label>
                                                <button type="button" class="btn btn-sm btn-success float-right" onclick="firmapad()">Firmar</button>
                                            </div>
                                            
                                            <div id="signature-pad" class="m-signature-pad" disabled>
                                                <div class="m-signature-pad--body">
                                                    <canvas style="border: 2px dashed #ccc;  width:95%; height:150;"></canvas>
                                                </div>
                                            
                                                <div class="m-signature-pad--footer mt-4">
                                                 
                                                <button type="button" class="btn btn-sm btn-secondary ml-1 mr-1" data-action="clear">Limpiar Trazado</button>
                                                <button type="button" class="btn btn-sm btn-primary ml-1 mr-1" data-action="save">Guardar Firma</button>
                                                </div>
                                            </div>
                                        </div>  
                                        <div class="alert alert-success alert-dismissible fade show col-12" role="alert" style="display: none" id="alertFirmSuccess">
                                            <strong>Datos de Recibo Guardados!</strong>
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        
                                        <div class="alert alert-danger alert-dismissible fade show col-12" role="alert" style="display: none" id="alertrutFailed">
                                            <strong>Numero de Rut invalido! </strong>
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div> 
                                        <div class="alert alert-danger alert-dismissible fade show col-12" role="alert" style="display: none" id="alertFirmFailed">
                                            <strong>Por favor Ingrese Una firma Primero! </strong>
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>  

                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                

                                                <div class="checkbox">
                                                <input type="checkbox" name="recibidocheckbox" id="firmaOT"  onchange="firmacheckOT()" onclick="javascript: return false;" required>
                                                <label for="agree" class="text-success ml-2"><small>Estoy seguro de que los Datos estan Correctos</small></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </fieldset> --}}

                                <!-- Step 4-->
                                {{-- <h6>
                                    <i class="step-icon"></i>
                                    <span class="fonticon-wrap py-0">
                                        <i class="livicon-evo"
                                        data-options="name:stopwatch.svg; size: 50px; style:lines; strokeColor:#4981BE;"></i>
                                    </span>
                               </h6> --}}
                                <!-- Step 4 end-->
                                <!-- body content of step 4 -->
                                
                                {{-- Finalizar OT --}}
                                {{-- <fieldset>
                                    
                                    <div class="row mx-0 mt-4 mb-4">
                                        <div class="col-12 mt-2 mb-2">
                                            <h4 class="py-50">
                                                <center> <strong> Finalizar Orden Trabajo</strong> </center>
                                            </h4>
                                        </div>
                                        <div class="col-md-8 col-sm-12">
                                            <div class="form-group">
                                                <label><small>Observaciones en Orden de Trabajo</small></label>
                                                <textarea type="text" class="form-control" name="obsot" id="obsot" cols="30" rows="5"></textarea>

                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-12">
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="form-group col-12">
                                                        <label class="lead" for="hora_llegada"><small><i class="far fa-clock mr-1">&nbsp;</i></small>Hora de Llegada</label>
                                                    <input type="text" class="form-control" name="hora_llegada" id="hora_llegada"  value="{{$otinfo->hora_llegada}}" required {{$otinfo->hora_llegada != null &&  $otinfo->hora_llegada != null ? 'readonly' : ''}}>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="form-group col-12">
                                                        <label class="lead" for="hora_salida" ><small><i class="far fa-clock mr-1">&nbsp;</i></small>Hora de Salida</label>
                                                        <div class="input-group mb-3">
                                                            <input type="text" class="form-control"  aria-describedby="button-addon2" name="hora_salida" id="hora_salida" readonly required>
                                                            <div class="input-group-append">
                                                              <button class="btn btn-outline-secondary" type="button" onclick="Hora('hora_salida')"><i class="fa fa-stopwatch"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                                                                
                                            </div>
                                        </div>
                                    </div>                                
                                </fieldset>
                            </form> --}}
                            <a href="{{route('formot',$otinfo->id_ot)}}" class="btn btn-button btn-primary float-right mb-3">Siguiente</a>
                            
                        @endif
                    </div>
                </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection