{{-- @extends('layouts.app') --}}
@extends('layouts.sidebar')

@section('content')
    <!-- content -->

    {{-- {{ $repuestos }} --}}
    <style>
        .narrow-input {
            width: 30px;
            /* Puedes ajustar este valor según tus necesidades */
            text-align: center;

        }


        #modalDescuento {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0;
        }
    </style>
    <div class="titulos">
        <h2>Orden de trabajo Nº : {{ $numeroOt }}
            @if($ordenes_trabajos[0]->descripcionestado == "finalizada")
            -- FINALIZADA
            @endif
            <hr />

    </div>
    {{-- {{$servicios_ordenes}} --}}
    <div class="container">

        <form action="{{ route('ordendetrabajo.store') }}" method="POST">
            @csrf

            <input type="text" hidden name="id_cliente" value="{{ $idCliente ?? '' }}">
            <div class="row card">
                <div class="card-header">
                    Datos del cliente
                </div>
                {{-- datos personales --}}
                <div class="row">
                    <div class="mb-3 col-6">
                        <label for="razon_social" class="form-label">Razon Social</label>
                        <input type="text" required class="form-control" id="razon_social"
                            value="{{ $ordenes_trabajos[0]->razon_social ?? '' }}" disabled placeholder=""
                            name="razon_social">

                    </div>
                    <div class="mb-3 col-6">
                        <label for="" class="form-label">Rut</label>
                        <input type="text" value="{{ $ordenes_trabajos[0]->rut ?? '' }}" disabled required
                            class="form-control" id="" placeholder="" name="">

                    </div>
                    <div class="mb-3 col-6">
                        <label for="" class="form-label">Correo</label>
                        <input type="text" value="{{ $ordenes_trabajos[0]->correo ?? '' }}" disabled required
                            class="form-control" id="" placeholder="" name="">

                    </div>
                    <div class="mb-3 col-6">
                        <label for="" class="form-label">Telefono</label>
                        <input type="text" value="{{ $ordenes_trabajos[0]->telefono ?? '' }}" disabled required
                            class="form-control" id="" placeholder="" name="">

                    </div>
                    <hr>
                    <strong><label for="">Ejecutar orden</label></strong>
                    <hr>
                    <div class="mb-3 col-6">
                        <label for="" class="form-label">Operario encargado</label>
                        <input type="text" disabled class="form-control"
                            value="{{ $ordenes_trabajos[0]->nombre_completo ?? '' }}">

                    </div>


                    <div class="mb-3 col-6">
                        <label for="" class="form-label">Fecha entrega</label>
                        <input type="text" disabled class="form-control"
                            value="{{Carbon\Carbon::createFromDate($ordenes_trabajos[0]->fecha_entrega ?? '' )->format('d-m-Y')}}">

                    </div>
                    {{-- value="{{Carbon\Carbon::createFromDate($orden_trabajo[0]->fecha_entrega ?? '')->format('d-m-Y')}}" --}}
                    <div class="mb-3 col-13">
                        <label for="" class="form-label">Comentario</label>

                        <textarea name="comentario" disabled class="form-control" id="" cols="3" rows="3">{{ $ordenes_trabajos[0]->observacion }}</textarea>

                    </div>



                </div> {{-- fin del row --}}

            </div> {{-- fin del card --}}



            {{-- DATOS DE SERVICIOS         --}}
            <br>
            <div class="row card mb-3 ">
                <div class="card-header mb-3 ">
                    Servicios
                </div>
                <div class="row">

                    <div class="col-12 form-group">
                        <label for="">Servicio</label>
                        <input type="" class="form-control mayuscula" id="nombre_servicio" placeholder="Servicio"
                            name="" value="">
                    </div>
                    <div class="col-12 form-group" id="">
                        <table class="table table-hover">
                            <tbody id="tableservicios"></tbody>
                        </table>
                    </div>


                    <div>

                        <div>

                        </div>

                        @if (session('success_servicios'))
                            <div class="alert alert-success">
                                {{ session('success_servicios') }}
                            </div>
                        @endif
                        <table class="table table-hover">
                            <thead class="bg-light">
                                <th scope="col">Servicios</th>
                                <th scope="col">Tecnico Asignado</th>
                                <th scope="col">cantidad</th>
                                <th scope="col">Estado</th>
                                {{-- <th scope="col">Descuento</th> --}}
                                {{-- <th scope="col"></th> --}}

                                <th scope="col">Acciones</th>


                            </thead>

                            <tbody>

                                @if (!empty($servicios_ordenes))
                                    @foreach ($servicios_ordenes as $los_datos)
                                        <tr>
                                            <td class="td-val">
                                                {{ $los_datos->nombre_servicio }}<br>{{ $los_datos->descripcion }}
                                            </td>

                                            <td class="td-val">

                                                @if ($los_datos->tecnicos_id == 1)
                                                    No registrado
                                                @else
                                                    {{ \App\Models\User::datosTecnicoUser($los_datos->tecnicos_id) }}
                                                @endif

                                            </td>
                                            <td class="td-val">{{ $los_datos->cantidad }}</td>
                                            <td class="td-val">{{ $los_datos->estado_ejecucion }}</td>
                                            @if($ordenes_trabajos[0]->descripcionestado == "En proceso" || $ordenes_trabajos[0]->descripcionestado == "finalizada")
                                                    <td>


                                                        @if ($los_datos->tecnicos_id == 1)
                                                            <a title="Agregar Tecnico" style="cursor: pointer">
                                                                <span class="material-symbols-outlined">
                                                                    <span class="material-symbols-outlined"
                                                                        onclick="registrarTecnico({{ $los_datos->id_ejecucion_servicio }},{{ $los_datos->id_servicio_orden }})">
                                                                        add_circle

                                                                    </span>
                                                            </a>
                                                        @else
                                                            @if ($los_datos->estado_ejecucion == 'finalizado')
                                                            @else
                                                                {{-- validamos si ya esta iniciado o no  --}}

                                                                @if ($los_datos->estado_ejecucion == 'procesando')
                                                                    <a title="Finalizar Servicio" style="cursor: pointer"
                                                                        onclick="updateservicio({{ $los_datos->id_ejecucion_servicio }},{{ $los_datos->id_servicio_orden }},'finalizar')">
                                                                        <span class="material-symbols-outlined">
                                                                            close
                                                                        </span>
                                                                    </a>
                                                                @else
                                                                    <a title="Iniciar Servicio" style="cursor: pointer"
                                                                        onclick="updateservicio({{ $los_datos->id_ejecucion_servicio }},{{ $los_datos->id_servicio_orden }},'iniciar')">
                                                                        <span class="material-symbols-outlined">
                                                                            play_circle
                                                                        </span>
                                                                    </a>
                                                                @endif
                                                            @endif
                                                        @endif



                                                        <a>
                                                            <span class="material-symbols-outlined"
                                                                onclick="openhistorial({{ $los_datos->id_servicio_orden }})">
                                                                overview
                                                            </span>
                                                        </a>



                                                    </td>


                                            @endif  
                                            {{-- EN PROCESO SOLO MOSTRARA y fiinalizada --}}

                                        </tr>
                                    @endforeach
                                @endif

                            </tbody>
                        </table>
                        <input type="text" hidden id="arrayDatosTabla" name="arrayDatosTabla">
                    </div>

                </div>{{-- fin del row --}}
            </div>{{-- fin del card --}}



            {{-- DATOS DE REPUESTOS         --}}

            <div class="row card mb-3 ">
                <div class="card-header mb-3 ">
                    Repuestos
                </div>
                <div class="row">

                    <div class="col-12 form-group">
                        <label for="">Repuestos solicitados</label>
                        <input type="" class="form-control mayuscula" id="nombre_repuesto"
                            placeholder="Repuestos solicitados" name="" value="">
                    </div>
                    <div class="col-12 form-group" id="">
                        <table class="table table-hover">
                            <tbody id="tablerepuestos"></tbody>
                        </table>
                    </div>


                    <div>
                        <table class="table table-hover">
                            <thead class="bg-light">
                                <th scope="col">Repuesto</th>
                                <th scope="col">Categoria</th>
                                <th scope="col">cantidad</th>

                                <th scope="col">
                                    recibido
                                </th>

                                <th scope="col">Acciones</th>


                            </thead>
                            <tbody>

                                @if (!empty($repuestos_solicitados))
                                    @foreach ($repuestos_solicitados as $los_datos)
                                        <td class="td-val">
                                            {{ $los_datos->nombre }}
                                        </td>
                                        <td class="td-val">
                                            {{ $los_datos->categoria }}
                                        </td>
                                        <td class="td-val">
                                            {{ $los_datos->cantidad }}
                                        </td>
                                        <td class="td-val">
                                            {{ $los_datos->recibido }}
                                        </td>
                                        @if($ordenes_trabajos[0]->descripcionestado == "En proceso" || $ordenes_trabajos[0]->descripcionestado == "finalizada")

                                                <td>
                                                    @if ($los_datos->recibido == 'no')
                                                        <a title="Finalizar Servicio" style="cursor: pointer"
                                                            onclick="addRepuestos({{ $los_datos->idrepuestossolicitados }})">
                                                            <span class="material-symbols-outlined">
                                                                check_circle
                                                            </span>
                                                        </a>
                                                    @endif
                                                    <a title="Finalizar Servicio" style="cursor: pointer"
                                                        onclick="openModalRepuestos({{ $los_datos->idrepuestossolicitados }})">
                                                        <span class="material-symbols-outlined">
                                                            overview
                                                        </span>
                                                    </a>
                                                </td>
                                         @endif

                                        <tr>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                        {{-- <input type=""  id="arrayDatosTablaRepuestos" name="arrayDatosTablaRepuestos"> --}}
                    </div>

                </div>{{-- fin del row --}}
            </div>{{-- fin del card --}}





           


        </form>{{-- INICIO FORMULARIO --}}


        <div style="text-align: right">
          

            
            @if($ordenes_trabajos[0]->descripcionestado == "Activa")

            
                <form action="{{ route('ordendetrabajo.iniciar') }}" method="POST">
                    @csrf
                    <input type="text" value="{{$numeroOt}}" hidden name="idot">
                <button type="" class="btn btn-success">Iniciar OT</button>
            </form>
           @endif
           
           @if($ordenes_trabajos[0]->descripcionestado == "En proceso")

            
           <form action="{{ route('ordendetrabajo.finalizar') }}" method="POST">
               @csrf
               <input type="text" value="{{$numeroOt}}" hidden name="idot">
           <button type="" class="btn btn-success">Finalizar</button>
       </form>
      @endif
        </div>




    </div> {{-- FIN container --}}

    {{-- MODAL --}}



    <!-- Modal Tecnico -->
    <div class="modal" id="modalAddTecnico">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Seleccionar Tecnico</h4>

                </div>

                <!-- Modal body -->
                <div class="modal-body">

                    <form action="{{ route('update.updateservicioorden') }}" method="POST">
                        @csrf

                        <div class="m-2">

                            <select required name="tecnicoselecionado" class="form-control" id="">
                                <option value="">Seleccionar</option>
                                @if (!empty($tecnicos))
                                    @foreach ($tecnicos as $data)
                                        <option value="{{ $data->id_tecnico }}">
                                            {{ $data->nombre }}
                                            {{ $data->apellido }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>

                            <input type="text" hidden name="identificador_servicio_eje"
                                id="identificador_servicio_eje">
                            <input type="text" hidden name="id_servicio_orden" id="id_servicio_orden">




                        </div>
                        <div class="m-2" style="text-align: right">
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modalAddTecnico"
                                onclick="cerrarModal()">Cerrar</button>

                            <button type="submit" class="btn btn-success" data-bs-dismiss="modal" " >Aplicar</button>

                    </div>
                </form>
            </div>
          </div>
        </div>
      </div>
    {{-- MODAL Repuestos --}}
      <div class="modal" id="modalRepuestos">
        <div class="modal-dialog">
          <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title">Repuestos</h4>
              <button type="button" class="btn-close" onclick="cerrarmodal()"></button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
             <div class="m-2">
                <label for="">Entregado por el cliente</label>
                
                  
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="checkentregado">
                    <label class="form-check-label" for="checkentregado">
                      Si
                    </label>
                  </div>

             </div>
             <div class="m-2">
                <label for="">Comentario</label>
                <textarea name="" id="comentario_entrega" class="form-control" cols="30" rows="10"></textarea>

             </div>
             <div class="m-2" style="text-align: right">
                <button type="button" class="btn btn-success" data-bs-dismiss="modal" onclick="updaterepuestos();" >Aplicar</button>

             </div>
            </div>



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

    {{-- MODAL HSTORIAL --}}
    <div class="modal" id="modalHistorial">
        <div class="modal-dialog modal-md">
          <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title">Historial</h4>
              <button type="button" class="btn-close" onclick="cerrarmodalhistorial()"></button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
             <div class="m-2">
                <label for="">Historial</label>
                
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Fecha Ingresado</th>
                            <th>Descripción</th>
                            {{-- <th>Servicios Órdenes ID</th> --}}
                        </tr>
                    </thead>
                    <tbody id="tablaBody">
                    </tbody>
                </table>
             </div>
            
             <div class="m-2" style="text-align: right">
                <button type="button" class="btn btn-success" data-bs-dismiss="modal" onclick="cerrarmodalhistorial();" >Cerrar</button>

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

{{-- MODAL HISTORIAL REPUESTOS --}}
<div class="modal" id="modalHistorialRepustos">
    <div class="modal-dialog modal-md">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Historial</h4>
          <button type="button" class="btn-close" onclick="closedModalRepuestos()"></button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
         <div class="m-2">
            <label for="">Historial</label>
            
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Fecha Ingresado</th>
                        <th>Descripción</th>
                        {{-- <th>Servicios Órdenes ID</th> --}}
                    </tr>
                </thead>
                <tbody id="tablaBodyRepuestos">
                </tbody>
            </table>
         </div>
        
         <div class="m-2" style="text-align: right">
            <button type="button" class="btn btn-success" data-bs-dismiss="modal" onclick="closedModalRepuestos();" >Cerrar</button>

         </div>
        </div>
      </div>
    </div>
  </div>
      
        <script>
            //VARIABLES GLOBALES
            var resultadoServicios = "";
            var resultadoServiciosSeleccionados = [];
            var resultadoRepuestos = "";
            var resultadoRepuestosSeleccionados = [];
            var totalNetoCompra = 0;
            var TotalCompra = 0;
            var TotalPorcentajeCompra = 0;
            var TotalPorcentajeDescuento = 0;
            var totalAbono = 0;
            var metodoDePago = "";
            var repuestoServicioId = "";




            function openModalRepuestos(idRepuestosSolicitado) {
               

                $.ajax({

                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: 'GET',
                        url: "{{ route('historialrepuestos') }}",
                        data: {
                            'idrepuestossolicitados': idRepuestosSolicitado
                        },
                        success: function(data) {
                            //1 rut existe
                            console.log(data);

                            var tablaBody = $('#tablaBodyRepuestos');
                            tablaBody.empty();

                            // Recorrer los datos y agregar filas a la tabla
                            $.each(data, function(index, item) {
                                var fila = '<tr>' +
                                    '<td>' + item.id + '</td>' +
                                    '<td>' + item.fecha_ingresado + '</td>' +
                                    '<td>' + item.descripcion + '</td>' +
                                    // '<td>' + item.servicios_ordenes_id + '</td>' +
                                    '</tr>';
                                tablaBody.append(fila);
                            });

                            //alert("Operación Exitosa");
                            //  window.location.reload();
                            $('#modalHistorialRepustos').show();


                        },
                        error: function(xhr, status) {
                            alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');
                        }
                        });

                // tablaBodyRepuestos
            }
            function closedModalRepuestos() {
                $('#modalHistorialRepustos').hide();
            }

            // modalHistorial
            function openhistorial(idServicio) {


                $.ajax({

                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: 'GET',
                    url: "{{ route('historialservicios') }}",
                    data: {
                        'idServicio': idServicio
                    },
                    success: function(data) {
                        //1 rut existe
                        console.log(data);

                        var tablaBody = $('#tablaBody');
                        tablaBody.empty();

                        // Recorrer los datos y agregar filas a la tabla
                        $.each(data, function(index, item) {
                            var fila = '<tr>' +
                                '<td>' + item.id + '</td>' +
                                '<td>' + item.fecha_ingresado + '</td>' +
                                '<td>' + item.descripcion + '</td>' +
                                // '<td>' + item.servicios_ordenes_id + '</td>' +
                                '</tr>';
                            tablaBody.append(fila);
                        });

                        //alert("Operación Exitosa");
                        //  window.location.reload();
                        $('#modalHistorial').show();


                    },
                    error: function(xhr, status) {
                        alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');
                    }
                });

            }


            function cerrarmodalhistorial() {
                // alert(idRepuestosServicio);
                $('#modalHistorial').hide();

            }

            //   ....  
            function addRepuestos(idRepuestosServicio) {
                // alert(idRepuestosServicio);
                repuestoServicioId = idRepuestosServicio;
                $('#modalRepuestos').show();

            }

            function cerrarmodal(idRepuestosServicio) {
                // alert(idRepuestosServicio);
                $('#modalRepuestos').hide();

            }

            function updaterepuestos() {
                var entregado = "no";
                var comentario = $('#comentario_entrega').val();

                // Verificar si el checkbox está seleccionado
                if ($('#checkentregado').is(':checked')) {
                    // El checkbox está seleccionado
                    entregado = "si";
                } else {
                    // El checkbox no está seleccionado
                    entregado = "no";;
                }

                $.ajax({

                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: 'POST',
                    url: "{{ route('update.updaterepuestosorden') }}",
                    data: {
                        'repuestoServicioId': repuestoServicioId,
                        "entregado": entregado,
                        'comentario': comentario
                    },
                    success: function(data) {
                        //1 rut existe
                        console.log(data);
                        if (data == "ok") {
                            alert("Operación Exitosa");
                            window.location.reload();
                        }

                    },
                    error: function(xhr, status) {
                        alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');
                    }
                });
            }

            function updateservicio(id_ejecucion_servicio, id_servicio_orden, accion) {

                $.ajax({
                    //  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    //  type: 'post',
                    //  url: "{{ route('update.iniciarservicio') }}",
                    //  data: { 'idservicio': id_servicio_orden },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: 'POST',
                    url: "{{ route('update.iniciarservicio') }}",
                    data: {
                        'id_ejecucion_servicio': id_ejecucion_servicio,
                        "id_servicio_orden": id_servicio_orden,
                        'accion': accion
                    },
                    success: function(data) {
                        //1 rut existe
                        if (data == "ok") {
                            // alert("Operación Exitosa");
                            window.location.reload();
                        }
                        // console.log("data");
                        // console.log(data);
                    },
                    error: function(xhr, status) {
                        alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');
                    }
                });
            }


            function registrarTecnico(idServicioAsociado, id_servicio_orden) {


                $('#modalAddTecnico').show();
                $('#identificador_servicio_eje').val(idServicioAsociado);
                $('#id_servicio_orden').val(id_servicio_orden);




                // $.ajax({
                //     headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                //     type: 'GET',
                //     url: "{{ route('update.updateservicioorden') }}",
                //     data: { 'idservicio': idServicioAsociado },
                //     success: function(data) {
                //        //1 rut existe
                //        console.log("data");
                //        console.log(data);
                //     },
                //     error: function(xhr, status) {
                //         alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');
                //     }
                // });


            }

            function cerrarModal() {

                $('#modalAddTecnico').hide();

            }
        </script>
@endsection