@extends('layouts.head')

@section('content')
<style>
    canvas {
        background: #ffffff;
        border: 2px solid #333;
        border-radius: 8px;
    }
</style>
<div class="content-wrapper">
    <section class="content" id='div_lista'>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-color">
                        <div class="card-header">
                            <h3 style="color:white" class="card-title">
                                <b>CONSULTA DE ORDENES 
                                    @if(auth()->user()['tipo']!='AD') 
                                        | <small>{{session('descripcion_local')}}</small> 
                                    @endif
                                </b>
                            </h3>
                        </div>
                        <div id='div_form'>
                            <form id="form_orden" style='font-size:12px' method="POST" enctype="multipart/form-data">
                                {{ csrf_field() }}
                                <div class="card-body">
                                    @if(auth()->user()['tipo']=='AD')
                                    <div class="form-group row">
                                        <label for="local" class="col-md-2 col-form-label">Local:</label>
                                        <div class="col-md-6">
                                            <select name="local" id="local" class="form-control chosen-select">
                                                @if(isset($locales))
                                                    <option class="optionlocal" value="T">Todos</option>
                                                    @foreach($locales as $value)
                                                        <option class="optionlocal" value="{{encrypt($value['id'])}}">
                                                            {{$value['descripcion']}} - {{$value['direccion']}}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <hr>
                                    @endif
                                    
                                    <div class="form-group row">
                                        <label for="filtro" class="col-md-2 col-form-label">Filtra por:</label>
                                        <div class="col-md-6">
                                            <select name="filtro" id="filtro" class="form-control">
                                                <option class="optionfiltro" value="O">Por orden</option>
                                                <option class="optionfiltro" value="C">Cliente</option>
                                                <option class="optionfiltro" value="T">Todos</option>
                                            </select>
                                        </div>
                                    </div>
                                    <hr>
                                    
                                    <div class="form-group row" id='div_orden'>
                                        <label for="codigo" class="col-md-2 col-form-label">Código de orden:</label>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" id="codigo" name="codigo" placeholder="Ingrese código de orden">
                                        </div>
                                    </div>
                                    
                                    <div class="form-group row" id='div_nombres' style='display:none'>
                                        <label for="cedula_nombres" class="col-md-2 col-form-label">Cédula o nombres:</label>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" id="cedula_nombres" name="cedula_nombres" placeholder="Ingrese cédula o nombres">
                                        </div>
                                    </div>
                                    
                                    <div class="form-group row">
                                        <label class="col-md-2 col-form-label">Filtrar por fechas:</label>
                                        <div class="col-md-6">
                                            <input style="font-size:12px !important; width: 17px; height: 17px; cursor:pointer" type="checkbox" class=" form-control" id="filtro_fecha" name="filtro_fecha">
                                        </div>
                                    </div>

                                    <div class="form-group row" id='div_fecha' style='display:none'>
                                        <label class="col-md-2 col-form-label">Desde:</label>
                                        <div class="col-md-4">
                                            <input type="date" value="2025-09-01"  class="form-control" id="fecha_desde" name="fecha_desde">
                                        </div>
                                        <label class="col-md-2 col-form-label">Hasta:</label>
                                        <div class="col-md-4">
                                            <input type="date" value="2025-12-01"  class="form-control" id="fecha_hasta" name="fecha_hasta">
                                        </div>
                                    </div>
                                    <hr>

                                    <div class="form-group row">
                                        <label class="col-md-2 col-form-label">Estado</label>
                                        <div class="col-md-10">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="estado" id="todos" value="1" checked>
                                                <label class="form-check-label" for="todos">Todos</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="estado" id="sin_asignar" value="I">
                                                <label class="form-check-label" for="sin_asignar">Sin asignar</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="estado" id="asignadas" value="A">
                                                <label class="form-check-label" for="asignadas">Asignadas</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="estado" id="atendidas" value="T">
                                                <label class="form-check-label" for="atendidas">Atendidas</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="estado" id="entregadas" value="F">
                                                <label class="form-check-label" for="entregadas">Entregadas</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="estado" id="anuladas" value="D">
                                                <label class="form-check-label" for="anuladas">Anuladas</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="card-footer text-center">
                                    <button type="submit" class="btn btn-color">
                                        <i class="fa fa-search"></i> Buscar
                                    </button>
                                </div>
                            </form>
                        </div>

                       
                    </div>
                </div>
            </div>
            <div class="row " id='div_tabla_buscar' style='display:none'>
                <div class="col-md-12">
                    <div class="card card-color ">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table id="table_ordenes" class="table table-striped table-bordered dataTable no-footer" style="width:100%">
                                            <thead>
                                                <tr align="center"> 
                                            
                                                    @if(auth()->user()['tipo']=='AD')<th>Local</th>@endif
                                                    <th>Fecha</th>
                                                    <th>Código</th>
                                                    <th>Cliente</th>
                                                    <th>Estado</th>
                                                    <th >Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody id="body_ordenes">
                                                
                                                                                    
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="div_detalle" style='display:none' class="content">
        <div class="container-fluid">
            <div class="row ">
                <div class="col-md-12">
                    <div class="card card-color row">
                            <div class="card-header" >
                                <h3 style="color:white" id="title_head" class="card-title"><b>DETALLES </b> </h3>
                            </div>
                            <form>
                                <div class="card-body">
                                    <div id="dato_plan">
                                        <div class="form-group">
                                            
                                            <div class="row" style='font-size:12px'>
                                                <div class="col-md-2">
                                                    <label >Código:  </label> <i id="codigo_detalle"></i> 
                                                </div>
                                                <div class="col-md-3">
                                                    <label >Fecha recibe:  </label> <i id="fecha_detalle"></i> 
                                                </div>
                                                <div class="col-md-2">
                                                    <label >Estado:  </label> <i id="estado_detalle"></i> 
                                                </div>
                                                <div class="col-md-3">
                                                    <label >Tipo diagnóstico:  </label> <i id="tipod_detalle"></i> 
                                                </div>
                                                <div class="col-md-2">
                                                    <label >Garantía:  </label> <i id="garantia_detalle"></i> 
                                                </div>
                                            </div>
                                            <div class="row" id='div_asignacion' style='font-size:12px'>
                                                
                                            </div>
                                            
                                            <hr>
                                                <b style='color:blue'>Información cliente</b>
                                            <hr>
                                            <div class="row" style='font-size:12px'>
                                                <div class="col-md-3">
                                                    <label >Cédula:  </label> <i id="cedula_detalle"></i> 
                                                </div>
                                                <div class="col-md-5">
                                                    <label >Nombres:  </label> <i id="nombres_detalle"></i> 
                                                </div>
                                                <div class="col-md-4">
                                                    <label >Dirección:  </label> <i id="direccion_detalle"></i> 
                                                </div>
                                            </div>
                                            <div class="row" style='font-size:12px'>
                                                
                                                <div class="col-md-3">
                                                    <label >Celular:  </label> <i id="celular_detalle"></i> 
                                                </div>
                                                <div class="col-md-5">
                                                    <label >Email:  </label> <i id="email_detalle"></i> 
                                                </div>
                                            </div>
                                            <hr>
                                                <b style='color:blue' >Información del equipo</b>
                                            <hr>
                                            <div class="row" style='font-size:12px'>
                                                <div class="col-md-3">
                                                    <label >Modelo:  </label> <i id="modelo_detalle"></i> 
                                                </div>
                                                <div class="col-md-3">
                                                    <label >IMEI:  </label> <i id="imei_detalle"></i> 
                                                </div>
                                                <div class="col-md-3">
                                                    <label >Estado:  </label> <i id="estadomovil_detalle"></i> 
                                                </div>
                                                <div class="col-md-3">
                                                    <label >Encendido:  </label> <i id="encendido_detalle"></i> 
                                                </div>
                                            </div>
                                            <div class="row" style='font-size:12px'>
                                                <div class="col-md-3">
                                                    <label >Accesorios:  </label> <i id="accesorios_detalle"></i> 
                                                </div>
                                                <div class="col-md-3">
                                                    <label >PIN:  </label> <i id="pin_detalle"></i> 
                                                </div>
                                                <div class="col-md-3" id='div_patron'>
                                                    <label >Patrón:  </label> <i id="patron_detalle"></i> 
                                                </div>
                                                
                                            </div>
                                            <hr>
                                            <div class="row" style='font-size:12px'>
                                                <div class="col-md-6">
                                                    <label >Observación general:  </label> <i id="obsgeneral_detalle"></i> 
                                                </div>
                                                <div class="col-md-6">
                                                    <label >Observación para técnico:  </label> <i id="obstecnico_detalle"></i> 
                                                </div>
                                            </div>
                                            <hr>
                                            
                                            <div class="row" style='font-size:12px'>
                                                <div class="col-md-12" id='div_cliente_confirmacion'>
                                                </div>
                                            </div>
                                            <div class="row" id='div_anulacion' style='font-size:12px'>
                                                
                                            </div>
                                            <hr>
                                            <div class="row" style='font-size:12px' >
                                                <div class="col-md-6" id='div_entrega'>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    
                                    <div id='btn_detalle'>

                                    </div>
                                    
                                    <hr>
                                    <div class="form-group">
                                        <div class="row" style='font-size:12px'>
                                            <div class="col-md-12">
                                                <div id='tittle_imagenes'></div>
                                                <div  id='div_imagenes'  style="display: flex; flex-wrap: wrap; gap: 10px;"></div>
                                            </div>
                                        </div>
                                        <div class="row" style='font-size:12px'>
                                            <div class="col-md-12">
                                                <div id='tittle_imagenes_tecnico'></div>
                                                <div id='div_imagenes_tecnico'  style="display: flex; flex-wrap: wrap; gap: 10px;"></div>
                                            </div>
                                        </div>
                                        <div class="row" style='font-size:12px'>
                                            <div class="col-md-12">
                                                <div id='tittle_imagenes_entrega'></div>
                                                <div id='div_imagenes_entrega'  style="display: flex; flex-wrap: wrap; gap: 10px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

       <!-- Modal detalle atencion -->
       <div class="modal fade" id="modal_detalle_atencion" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" >
        <div class="modal-dialog modal-dialog modal-dialog-scrollable modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="title_detalle_atencion"><i class='fa fa-file'></i> Detalle atención</h5>
                    <button type="button" class="close cerrar_modal" >
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form  style='font-size:12px'  method="POST" enctype="multipart/form-data" id='div_form_atencion'>
                        
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default cerrar_modal"> <i class="fa fa-times"></i> Cerrar</button>
                </div>
            </div>
        </div>
    </div>
</div>
    <!-- Modal qr -->
    <div class="modal fade" id="modal_qr" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" >
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="title_qr">Qr Imagenes</h5>
                    <button type="button" class="close cerrar_modal" >
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="div_qr" align='center'>

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

    <div class="modal fade" id="modal_incidencia" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" >
        <div class="modal-dialog modal-dialog modal-dialog-scrollable modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="title_incidencias"><i class='fa fa-bell'></i> Historial de incidencias</h5>
                    <button type="button" class="close cerrar_modal" >
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label for="">Historial</label>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table id="table_historial_incidencias" class="table table-striped table-bordered dataTable no-footer" style="width:100%">
                                    <thead>
                                        <tr align="center"> 
                                            <th>#</th>
                                            <th>Fecha</th>
                                            <th>Usuario</th>
                                            <th>Descripción</th>
                                        </tr>
                                    </thead>
                                    <tbody id="body_historial_incidencias">
                                        
                                                                            
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default cerrar_modal"> <i class="fa fa-times"></i> Cerrar</button>
                </div>
            </div>
        </div>
    </div>
<script src="{{asset('js/gestiones/ordenes/buscar.js?v='.rand())}}"></script>
@endsection