@extends('templete.layout')

@section('contenido')
<div class="col-12">
  
   
  <!-- Header -->
  <div class="header" style="margin-bottom: 10px;">
    <div class="header-body">
      <div class="row align-items-center">
        <div class="col">

          <!-- Pretitle -->
          <h6 class="header-pretitle">
            Sysme
          </h6>

          <!-- Title -->
          <h1 class="header-title text-truncate">
            Reporte
          </h1>

        </div>
        <div class="col-auto">
 
        </div>
      </div> <!-- / .row -->
      <div class="row align-items-center">
        <div class="col">

          <!-- Nav -->
          <ul class="nav nav-tabs nav-overflow header-tabs">
            <li class="nav-item">
              <a href="#!" class="nav-link text-nowrap active">
                Todos Servicios  
                <button   class="btn btn-sm btn-warning" onclick="sys.servicio.RefrestReporte(this)">
                  Limpiar filtros
                </button>
              </a>
            </li> 
          </ul>

        </div>
      </div>
    </div>
  </div>
  <div class="mb-3">
    <div class="row">
      <div class="col card">
        <form name="buscar" novalidate="novalidate">
                  
          <div class="row m-2 p-2">
            <div class="col-md-3">
              <div class="form-group mb-2">
                <label for="fecha" class="form-label">Fecha Inicio</label>
                <input type="text" class="form-control datepicker" name="fechai" id="fechai" autocomplete="off" value="{{$fechai}}">
              </div>
            </div> 
            
            <div class="col-md-3">
              <div class="form-group mb-2">
                <label for="fecha" class="form-label">Fecha Fin</label>
                <input type="text" class="form-control datepicker" name="fechaf" id="fechaf" autocomplete="off"  value="{{$fechaf}}">
              </div>
            </div> 
            <div class="col-md-3">
              <div class="form-group mb-2">  
                <select class="form-control  mt-4" id="ptto" name="ptto" placeholder="Flatpickr example"  style="    float: left;width: 100px;"> 
                              <option value="0" selected>Todos</option>
                              <option value="1">Si|No</option>
                              <option value="2">Si|Si</option>
                              <option value="3">No|No</option> 
                              <option value="4">No|si</option> 
                            </select>
              </div>
            </div> 
            <div class="col-md-3 pt-4">
              <button type="submit" class="btn btn-primary">Buscar</button> 

            </div>
          </div>
          
        </form>
      </div>
      
      
    </div> <!-- / .row -->
  </div>
  <!-- Tab content -->
  <div class="tab-content">
    <div class="tab-pane fade show active" id="contactsListPane" role="tabpanel" aria-labelledby="contactsListTab">

      <!-- Card -->
      <div class="card" data-list='{"valueNames": ["item-name", "item-title", "item-email", "item-phone", "item-score", "item-company"], "page": 10, "pagination": {"paginationClass": "list-pagination"}}' id="contactsList">
        <div class="card-header">
          <div class="row align-items-center">
            <div class="col">

              <!-- Form -->
              <form>
                <div class="input-group input-group-flush input-group-merge input-group-reverse">
                  <input class="form-control list-search" type="search" placeholder="Search">
                  <span class="input-group-text">
                    <i class="fe fe-search"></i>
                  </span>
                </div>
              </form>

            </div>
            <div class="col-auto me-n3">

              

            </div>
            <div class="col-auto">

              <!-- Dropdown -->
            
            </div>
          </div> <!-- / .row -->
        </div>
        <div class="table-responsive">
          <table class="table table-sm table-hover table-nowrap card-table">
            <thead>
             
              <tr>
                 
                <th>
                  <a class="list-sort text-muted" data-sort="item-name" href="#">Fecha</a>
                </th>
                <th>
                  <a class="list-sort text-muted" data-sort="item-email" href="#">Cliente</a>
                </th>
                <th>
                  <a class="list-sort text-muted" data-sort="item-title" href="#">Tecnico</a>
                </th>
                <th>
                  <a class="list-sort text-muted" data-sort="item-phone" href="#">Servicio</a>
                </th>
                <th>
                  <a class="list-sort text-muted" data-sort="item-ptto" href="#">Nvo. ptto              Mod. ptto</a>
                </th> 
                <th >
                  <a class="list-sort text-muted" data-sort="item-factura" href="#">Factura          Pago</a>
                </th>  
                <th > 
                  <a class="list-sort text-muted" data-sort="item-company" href="#">ubicacion</a>
                </th>
                <th > 
                  <a class="list-sort text-muted" data-sort="item-acciones" href="#">acciones</a>
                </th>
              </tr> 
            </thead>
            <tbody class="list fs-base">
              @foreach($servicios as $servicio)
              <tr>
                
                <td > 
                  {{$servicio->fecha;  }} <strong>{{$servicio->hora}}</strong>

                </td>
                <td>

                  <!-- Text -->
                  <span class="item-email"  data-bs-toggle="tooltip" data-bs-html="true"  data-bs-placement="top" title="<b>Direcion:</b>{{$servicio->clientedireccion}} <br> <b>Telefono:</b>{{$servicio->clientetelefono}} <br>  <b>Celular:</b>{{$servicio->clientecelular}} <br> <b>Correo:</b>{{$servicio->clientecorreo}} <br> <b>RFC:</b>{{$servicio->rfc}} <br>  ">{{$servicio->nombrecliente}}</span>

                </td>
                <td>

                  <!-- Text -->
                  <span class="item-title" data-bs-toggle="tooltip" data-bs-html="true"  data-bs-placement="top" title="<b>Direcion:</b>{{$servicio->tecnicodireccion}} <br> <b>Telefono:</b>{{$servicio->tecnicotelefono}} <br>  <b>Celular:</b>{{$servicio->tecnicocelular}} <br> <b>Correo:</b>{{$servicio->tecnicocorreo}} <br> ">{{$servicio->nombretecnico}} </span>

                </td>
                <td>

                  <span class="item-phone">{{$servicio->servicio}}</span> 

                </td>
                <td style="text-align: center"> 
                   {{$servicio->ptto}} 

                </td> 
                <td style="text-align: center"> 
                   {{$servicio->factura}} 
                </td> 
                <td>
                  @if($servicio->googlecurl)
                  <a class="item-company badge bg-success-soft" href="{{$servicio->googlecurl}}" target="_black">Ubicacion</a>
                  @endif
                </td>
                <td class="text-end"> 
                  <button class="btn btn-sm btn-dark " data-idservicio="{{$servicio->id}}" onclick="sys.servicio.OpenModalViewComentarios(this);">
                    <span class="fe fe-inbox"></span>
                  </button> 
                  <button class="btn btn-sm btn-white" data-idservicio="{{$servicio->id}}" onclick="sys.servicio.OpenModalEditar(this);">
                    Editar
                  </button>
                  @if ($servicio->fotos) 
                  <button class="btn btn-sm btn-success" data-fotos="{{$servicio->fotos}}" onclick="sys.servicio.OpenModalView(this);">
                    Ver fotos
                  </button>
                  @else
                   
                  @endif


                  
                  
                  <button class="btn btn-sm btn-danger" data-idservicio="{{$servicio->id}}" onclick="sys.servicio.ConfirmDelete(this);">
                    Eliminar
                  </button>
                </td>
              </tr>
               @endforeach
            </tbody>
          </table>
        </div>
        <div class="card-footer d-flex justify-content-between">

          <!-- Pagination (prev) -->
          <ul class="list-pagination-prev pagination pagination-tabs card-pagination">
            <li class="page-item">
              <a class="page-link ps-0 pe-4 border-end" href="#">
                <i class="fe fe-arrow-left me-1"></i> Prev
              </a>
            </li>
          </ul>

          <!-- Pagination -->
          <ul class="list-pagination pagination pagination-tabs card-pagination"></ul>

          <!-- Pagination (next) -->
          <ul class="list-pagination-next pagination pagination-tabs card-pagination">
            <li class="page-item">
              <a class="page-link ps-4 pe-0 border-start" href="#">
                Next <i class="fe fe-arrow-right ms-1"></i>
              </a>
            </li>
          </ul>

          <!-- Alert -->
          <div class="list-alert alert alert-dark alert-dismissible border fade" role="alert">

            <!-- Content -->
            <div class="row align-items-center">
              <div class="col">

                <!-- Checkbox -->
                <div class="form-check">
                  <input class="form-check-input" id="listAlertCheckbox" type="checkbox" checked disabled>
                  <label class="form-check-label text-white" for="listAlertCheckbox">
                    <span class="list-alert-count">0</span> deal(s)
                  </label>
                </div>

              </div>
              <div class="col-auto me-n3">

                <!-- Button -->
                <button class="btn btn-sm btn-white-20">
                  Edit
                </button>

                <!-- Button -->
                <button class="btn btn-sm btn-white-20">
                  Delete
                </button>

              </div>
            </div> <!-- / .row -->

            <!-- Close -->
            <button type="button" class="list-alert-close btn-close" aria-label="Close"></button>

          </div>

        </div>
      </div>

    </div>
    
  </div>

</div>

  <!-- modal-->  
  <div class="modal fade" id="servicioNuevo" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <div class="modal-dialog modal-lg ">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalToggleLabel">NUEVO SERVICIO 😀</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div>
            <div class="card-body p-2"> 
              <!-- Form -->
              <form name="crearServicio">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group mb-2">
                      <label for="fecha" class="form-label">Fecha</label>
                      <input type="text" class="form-control datepicker" name="fecha" id="fecha" autocomplete="off">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group mb-2">
                      <label for="nombre" class="form-label">Hora</label>
                      <div>
                            <select class="form-control" id="hora" name="hora" style="    float: left;width: 100px;"> 
                              <option value="08">08</option>
                              <option value="09">09</option>
                              <option value="10">10</option>
                              <option value="11">11</option>
                              <option value="12">12</option>
                              <option value="01">01</option>
                              <option value="02">02</option>
                              <option value="03">03</option>
                              <option value="04">04</option>
                              <option value="05">05</option>
                              <option value="06">06</option>  
                            </select>
                            <select class="form-control"  id="tiempo" name="tiempo"  style="    float: left;width: 100px;"> 
                              <option value="00">00</option>
                              <option value="15">15</option>
                              <option value="30">30</option>
                              <option value="45">45</option>
                            </select>
                          </div>
                    </div>
                  </div>
                </div>
              
                <div class="form-group mb-2">
                  <label for="nombre" class="form-label">Tecnico:</label>
                  <select class="form-select" id="idtecnico" name="idtecnico" aria-label="Default select example">
                    <option selected disabled>-- Selecciona una opción--</option>
                    @foreach($tecnicos as $tecnico)
                    <option value="{{$tecnico->idtecnico}}">{{$tecnico->nombretecnico}}</option>
                     @endforeach 
                  </select>
                </div>
                <div class="form-group mb-2">
                  <label for="nombre" class="form-label">Cliente</label> 
                  <select class="form-select"  id="idcliente" name="idcliente"  aria-label="Default select example">
                    <option selected disabled>-- Selecciona una opción--</option> 
                    @foreach($clientes as $cliente)
                    <option value="{{$cliente->idcliente}}">{{$cliente->nombrecliente}}</option>
                     @endforeach 
                  </select>
                </div> 
                <div class="form-group mb-2">
                  <label for="nombre" class="form-label">Servicio</label> 
                  <textarea class="form-control" name="servicio" id="servicio" rows="2"></textarea> 
                </div> 
                <div class="row"> 
                  <div class="col-md-6">
                    <div class="form-group mb-2">
                      <label for="nombre" class="form-label">Nvo. ptto</label> 
                      <select class="form-select"  id="ptto" name="ptto"  aria-label="Default select example">
                        <option selected disabled>-- Selecciona una opción--</option>  
                        <option value="Si">Si</option>  
                        <option value="No">No</option> 
                      </select>                    
                    </div>                   
                  </div>
                  <div class="col-md-6"> 
                    <div class="form-group mb-2">
                      <label for="nombre" class="form-label">Factura  Pago</label> 
                      <select class="form-select"  id="factura" name="factura"  aria-label="Default select example">
                        <option selected disabled>-- Selecciona una opción--</option>  
                        <option value="Si">Si</option>  
                        <option value="No">No</option> 
                      </select>   
                    </div>
                  </div>
                  </div>
                </div> 
                <div class="form-group mb-2">
                  <label for="nombre" class="form-label">Observaciones</label> 
                  <textarea class="form-control" name="observaciones" id="observaciones" rows="2"></textarea> 
                </div> 
                <button type="submit" class="btn btn-primary">Guardar</button> 
              </form>
            </div>
          </div>
        </div>
         <div class="modal-footer">
          <button class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
        </div>  
      </div>
    </div>
  </div>
   <!-- modal-->  
   <div class="modal fade" id="servicioEditar" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <div class="modal-dialog modal-lg ">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalToggleLabel">EDITAR CLIENTE 😀</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div>
            <div class="card-body p-2"> 
              <!-- Form -->
              <form name="editarServicio">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group mb-2">
                      <label for="fecha" class="form-label">Fecha</label>
                      <input type="text" class="form-control datepicker" name="e_fecha" id="e_fecha" autocomplete="off">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group mb-2">
                      <label for="nombre" class="form-label">Hora</label>
                      <div>
                            <select class="form-control" id="e_hora" name="e_hora" style="    float: left;width: 100px;"> 
                              <option value="08">08</option>
                              <option value="09">09</option>
                              <option value="10">10</option>
                              <option value="11">11</option>
                              <option value="12">12</option>
                              <option value="01">01</option>
                              <option value="02">02</option>
                              <option value="03">03</option>
                              <option value="04">04</option>
                              <option value="05">05</option>
                              <option value="06">06</option>  
                            </select>
                            <select class="form-control"  id="e_tiempo" name="e_tiempo"  style="    float: left;width: 100px;"> 
                              <option value="00">00</option>
                              <option value="15">15</option>
                              <option value="30">30</option>
                              <option value="45">45</option>
                            </select>
                          </div>
                    </div>
                  </div>
                </div>
              
                <div class="form-group mb-2">
                  <label for="nombre" class="form-label">Tecnico:</label>
                  <select class="form-select" id="e_idtecnico" name="e_idtecnico" aria-label="Default select example">
                    <option selected disabled>-- Selecciona una opción--</option>
                    @foreach($tecnicos as $tecnico)
                    <option value="{{$tecnico->idtecnico}}">{{$tecnico->nombretecnico}}</option>
                     @endforeach 
                  </select>
                </div>
                <div class="form-group mb-2">
                  <label for="nombre" class="form-label">Cliente</label> 
                  <select class="form-select"  id="e_idcliente" name="e_idcliente"  aria-label="Default select example">
                    <option selected disabled>-- Selecciona una opción--</option> 
                    @foreach($clientes as $cliente)
                    <option value="{{$cliente->idcliente}}">{{$cliente->nombrecliente}}</option>
                     @endforeach 
                  </select>
                </div> 
                <div class="form-group mb-2">
                  <label for="nombre" class="form-label">Servicio</label> 
                  <textarea class="form-control" name="e_servicio" id="e_servicio" rows="2"></textarea> 
                </div> 
                <div class="row"> 
                  <div class="col-md-6">
                    <div class="form-group mb-2">
                      <label for="nombre" class="form-label">Nvo. ptto</label> 
                      <select class="form-select"  id="e_ptto" name="e_ptto"  aria-label="Default select example">
                        <option selected disabled>-- Selecciona una opción--</option>  
                        <option value="Si">Si</option>  
                        <option value="No">No</option> 
                      </select>                    
                    </div>                   
                  </div>
                  <div class="col-md-6"> 
                    <div class="form-group mb-2">
                      <label for="nombre" class="form-label">Factura  Pago</label> 
                      <select class="form-select"  id="e_factura" name="e_factura"  aria-label="Default select example">
                        <option selected disabled>-- Selecciona una opción--</option>  
                        <option value="Si">Si</option>  
                        <option value="No">No</option> 
                      </select>   
                    </div>
                  </div>
                  </div>
                </div> 
                <div class="form-group mb-2">
                  <label for="nombre" class="form-label">Observaciones</label> 
                  <textarea class="form-control" name="e_observaciones" id="e_observaciones" rows="2"></textarea> 
                </div> 
                <button type="submit" class="btn btn-primary">Guardar</button> 
              </form>
            </div>
          </div>
        </div>
         <div class="modal-footer">
          <button class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
        </div>  
      </div>
    </div>
  </div>
    <!-- modal-->  
    <div class="modal fade" id="modalFiltro" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
      <div class="modal-dialog modal-lg ">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="exampleModalToggleLabel">Nuevo Filtro 😀</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div>
              <div class="card-body p-2"> 
                <!-- Form -->
                <form name="nuevoFiltro">
                  
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group mb-2">
                        <label for="fecha" class="form-label">Fecha Inicio</label>
                        <input type="text" class="form-control datepicker" name="fechai" id="fechai" autocomplete="off">
                      </div>
                    </div> 
                    
                    <div class="col-md-6">
                      <div class="form-group mb-2">
                        <label for="fecha" class="form-label">Fecha Fin</label>
                        <input type="text" class="form-control datepicker" name="fechaf" id="fechaf" autocomplete="off">
                      </div>
                    </div> 
                  </div>
                  
                  <button type="submit" class="btn btn-primary">Guardar</button> 
                </form>
              </div>
            </div>
          </div>
           <div class="modal-footer">
            <button class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
          </div>  
        </div>
      </div>
    </div>
    <!-- modal-->  
    <div class="modal fade" id="modalFotos" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
      <div class="modal-dialog modal-lg ">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="exampleModalToggleLabel">Agregar Fotos😀</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div>
              <div class="card-body p-2"> 
                <!-- Form -->
                <form name="nuevoFiltro">
                  <input id="serviciodox" name="serviciodox" type="hidden">

                  <div class="row _bphotos">
                    <div class="mb-3">
                      <label for="formFile" class="form-label">Seleciona foto</label>
                      <input class="form-control" type="file" id="formFile" multiple onchange="sys.servicio.seleccionado(this)"  accept="image/jpg, image/jpeg" >
                    </div>
                   
                  </div>
                  
                 </form>
              </div>
            </div>
          </div>
           <div class="modal-footer">
            <button class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
          </div>  
        </div>
      </div>
    </div>
    <!-- modal-->  
    <div class="modal fade" id="modalFotosView" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
      <div class="modal-dialog modal-lg ">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="exampleModalToggleLabel">Agregar Fotos😀</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div>
              <div class="card-body p-2 _view"> 
                 
              </div>
            </div>
          </div>
           <div class="modal-footer">
            <button class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
          </div>  
        </div>
      </div>
    </div>
    <!-- modal-->  
    <div class="modal fade" id="modalcomentarios" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
      <div class="modal-dialog modal-lg ">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="exampleModalToggleLabel">Ver comentarios</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div>
              <div class="card-body p-2 _viewcomments"> 
                 
              </div>
            </div>
          </div>
           <div class="modal-footer">
            <button class="btn btn-danger" onclick="sys.m1();" data-bs-dismiss="modal">Cerrar</button>
          </div>  
        </div>
      </div>
    </div>
 @endsection
@section('scripts') 
<input id="ptto_request" name="ptto_request" type="hidden" value="{{$ptto}}" />

 
<script>  
 
$(function(){
    if($('#ptto_request').val()){
    $('#ptto').val($('#ptto_request').val())    
    }
    
})
  sys.servicio.init();
 sys.servicio.crear();  
 sys.servicio.buscar();
</script>

@endsection