@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">
    @include('parciales.modal_cargando')
    @yield('ModalcargaEnvioCorreo')
    <!-- 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">

                        <a class="mr-2" title="ir a Cabecera de OT" href="{{ route('realizarot', $otinfo->id_ot) }}">
                            <i class="fa fa-chevron-circle-left"></i>
                        </a>
                        {{-- @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
                                <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>
                                
                                </h6> --}}
                                <!-- Step 1 end-->
                                <!-- body content of step 1 -->
                                {{-- <fieldset class="mt-0 pt-0">
                                
                                    <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> --}}
                                {{-- <span class="titlespan">Datos Vehículos</span> --}}
                                </h6>
                                <!-- Step 2 end-->
                                <!-- body content of step 2 -->
                                <fieldset>
                                    <div class="row" hidden>
                                        <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>
                                                <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>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="lead" for="email_clienteN_OT">Email Contacto para Trabajo</label>
                                                <input type="email" class="form-control" id="email_clienteN_OT" name="email_cliente"
                                                    placeholder="Email Valido" value="{{$otinfo->email_instalacion}}" required readonly>
                                            </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>
                                        
                                    <hr>
                                    
                                    {{-- tabla de vehciculos --}}
                                    <div class="container">
                                        <div class="row justify-content-center">
                                            <div class="col-12 mt-3 mb-3">
                                                <h4 class="py-50">
                                                    <center> <strong> Servicio a Realizar </strong> </center>
                                                </h4>

                                            </div>
                                        </div>
                                        <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 Vehículos </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</center>
                                                            </th>
                                                            <th>
                                                                <center>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; padding-bottom:15px; ">
                                                                <span style="float:right; position:relative; top:5px;" >{{$vehi->patente}}</span>
                                                            </td>
                                                            <td style="text-transform: uppercase; padding-bottom:15px;">
                                                               <span style="float:right; position:relative; top:5px;">{{$vehi->marca}}</span>
                                                            </td>
                                                            <td style="text-transform: uppercase; padding-bottom:15px;">
                                                                <span style="float:right; position:relative; top:5px;">{{$vehi->modelo}}</span>
                                                            </td>
                                                            
                                                            @if ($vehi->color != null || $vehi->color != '')
                                                                <td style="text-transform: uppercase; padding-bottom:15px;">
                                                                    <span style="float:right; position:relative; top:5px;" >{{$vehi->color}}</span>
                                                                </td>
                                                            @else
                                                                <td style="text-transform: uppercase; padding-bottom:15px;">
                                                                    <span style="float:right; position:relative; top:5px;">No Informado</span>
                                                                </td>
                                                            @endif
                                                            
                                                            @if($vehi->estado == "Correcto")
                                                                <td style="text-transform: uppercase; padding-bottom:15px;" class="text-success">
                                                                    <span style="float:right; position:relative; top:5px;">{{$vehi->estado}}</span>
                                                                </td>
                                                                <td style="text-transform: uppercase; padding-bottom:15px;">
                                                                    <span style="float:right; position:relative; top:5px;">{{$otinfo->motivo ?? $vehi->nom_act}}</span>
                                                                </td>
                                                                <td style="text-transform: uppercase; padding-bottom:15px;">
                                                                    <span style="float:right; position:relative; top:5px;">{{str_pad($vehi->id_servicio,8,"0",STR_PAD_LEFT)}}</span>
                                                                </td>
                                                            @elseif($vehi->estado == "Fallido")
                                                                <td style="text-transform: uppercase; padding-bottom:15px;" class="text-danger">
                                                                    <span style="float:right; position:relative; top:5px;">{{$vehi->estado}}</center></span>
                                                                </td>
                                                                <td style="text-transform: uppercase; padding-bottom:15px;">
                                                                    <span style="float:right; position:relative; top:5px;">No Realizado</span>
                                                                </td>
                                                                <td style="text-transform: uppercase; padding-bottom:15px;">
                                                                    <span style="float:right; position:relative; top:5px;">{{str_pad($vehi->id_servicio,8,"0",STR_PAD_LEFT)}}</span>
                                                                </td>
                                                            @elseif($vehi->estado == null)
                                                                <td class="text-primary" style="text-transform: uppercase; padding-bottom:15px;">
                                                                    <span style="float:right; position:relative; top:5px;">Pendiente</span>
                                                                </td>
                                                                <td style="text-transform: uppercase; padding-bottom:15px;">
                                                                    <span style="float:right; position:relative; top:5px;" >Pendiente</span>
                                                                </td>
                                                            
                                                                <td style=" padding-bottom:25px; ">
                                                                    <span style="float:right; position:relative; top:5px;">
                                                                    <a href="{{route('tipotrabajo',[ $vehi->patente, $otinfo->idotNZ])}}" title="Realizar Trabajo en {{$vehi->patente}}">
                                                                        Realizar <i class="fa fa-car-side"></i></a>
                                                                    </span>
                                                                </td>
                                                            @else
                                                                <td class="text-info" style="text-transform: uppercase; position:relative; top:5px;">
                                                                    <span style="float:right; position:relative; top:5px;">En Curso</span>
                                                                </td>
                                                                <td class="text-primary" style="text-transform: uppercase; position:relative; top:5px;">
                                                                    <span style="float:right; position:relative; top:5px;">En curso</span>
                                                                </td>
                                                                <td style=" padding-bottom:5px; " >
                                                                    <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> --}}
                                    {{-- <span class="titlespan">Recibido Cliente</span> --}}
                                </h6>
                                <!-- Step 3 end-->
                                <!-- body content of step 3 -->
                                <fieldset>
                                    {{-- Informacion de Recibido --}}
                                    <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> --}}
                                    {{-- <span class="titlespan">OT Completa</span> --}}
                                </h6>
                                <!-- Step 4 end-->
                                <!-- body content of step 4 -->
                                <fieldset>
                                    {{-- Finalizar OT --}}
                                    <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>
                                                        {{-- <input type="text" class="form-control" name="hora_salida" id="hora_salida" required value="{{  $date = Carbon::now()->format("H:i") }}"> --}}
                                                    </div>
                                                </div>
                                                {{-- <label class=""> Estado Orden de Trabajo</label>
                                                <div class="col-md-12 text-center">
                                                    <div class="form-check px-3" >
                                                        <input class="form-check-input" type="radio" name="otradioestado" id="otradioestado1" value="option1" checked>
                                                        <label class="form-check-label" for="otradioestado1">
                                                        Terminada
                                                        </label>
                                                    </div>
                                                    <div class="form-check px-3">
                                                        <input class="form-check-input" type="radio" name="otradioestado" id="otradioestado2" value="option2">
                                                        <label class="form-check-label" for="otradioestado2">
                                                        Pendiente
                                                        </label>
                                                    </div>
                                                </div> --}}
                                                
                                            </div>
                                        </div>
                                    </div>                                
                                </fieldset>
                            
                            </form>
                        @endif
                    </div>
                </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection