@extends('templete.layout')

@section('contenido')
<div class="col-12">

  <!-- Header -->
  <div class="header">
    <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">
            Tecnicos
          </h1>

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

          
          <!-- Buttons -->
          <button   class="btn btn-primary ms-2" onclick="sys.tecnico.addOpenModel()">
            Agregar tecnico
          </a>

        </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 los tecnicos
              </a>
            </li> 
          </ul>

        </div>
      </div>
    </div>
  </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="#">Nombre</a>
                </th>
                <!--<th>
                  <a class="list-sort text-muted" data-sort="item-title" href="#">Direccion</a>
                </th> 
                <th>
                  <a class="list-sort text-muted" data-sort="item-email" href="#">Telefono</a>
                </th>
                <th>
                  <a class="list-sort text-muted" data-sort="item-phone" href="#">Celular</a>
                </th> 
                <th colspan="2">
                  <a class="list-sort text-muted" data-sort="item-company" href="#">Correo</a>
                </th> -->
              </tr> 
            </thead>
            <tbody class="list fs-base">
              @foreach($tecnicos as $tecnico)
              <tr>
                
                <td>

                  <!-- Avatar -->
                  <div class="avatar avatar-xs align-middle me-2">
                    <img class="avatar-img rounded-circle" src="assets/img/avatars/profiles/avatar-1.jpg" alt="...">
                  </div> {{$tecnico->nombretecnico}}

                </td>
                <!--<td> 
                  <span class="item-title">{{$tecnico->tecnicodireccion}}</span>

                </td> 
                <td> 
                  <a class="item-email text-reset" href="tel:>{{$tecnico->tecnicotelefono}}">{{$tecnico->tecnicotelefono}}</a>

                </td>
                <td> 
                  <a class="item-phone text-reset" href="tel:{{$tecnico->tecnicocelular}}">{{$tecnico->tecnicocelular}}</a>

                </td> 
                <td> 
                  <a class="item-company badge bg-primary-soft" href="mailto:{{$tecnico->tecnicocorreo}}">{{$tecnico->tecnicocorreo}}</a>

                </td>-->
                <td class="text-end">
                  <button   class="btn btn-sm btn-white" data-idtecnico="{{$tecnico->idtecnico}}" onclick="sys.tecnico.OpenModalEditar(this);">
                    Editar
                  </button>
                  <button   class="btn btn-sm btn-danger" data-idtecnico="{{$tecnico->idtecnico}}" onclick="sys.tecnico.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="tecnicoNuevo" 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 TECNICO 😀</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="crearTecnico">
                <div class="form-group mb-2">
                  <label for="nombre" class="form-label">Nombre </label>
                  <input type="text" class="form-control" name="nombre" id="nombre" placeholder="nombre">
                </div> 
                <div class="form-group mb-2" style="display: none">
                  <label for="nombre" class="form-label">Dirección</label> 
                  <textarea class="form-control" name="direccion" id="direccion" rows="3"></textarea> 
                </div> 
                <div class="row" style="display: none">
                  <div class="col-md-6">
                    <div class="form-group mb-2">
                      <label for="nombre" class="form-label">Teléfono </label>
                      <input type="text" class="form-control" name="telefono" id="telefono" placeholder="3312701862">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group mb-2">
                      <label for="nombre" class="form-label">Celular</label>
                      <input type="text" class="form-control" name="celular" id="celular" placeholder="3312701862">
                    </div>
                  </div>
                </div> 
                <div class="form-group mb-4" style="display: none">
                  <label for="nombre" class="form-label">Correo electronico</label>
                  <input type="text" class="form-control" name="email" id="email" placeholder="codigonan@gmail.com">
                </div> 
                
                <div class="form-group mb-4" >
                  <label for="nombre" class="form-label">Usuario</label>
                  <input type="text" class="form-control" name="user" id="user" placeholder="jesus.padilla">
                </div>
                
                <div class="form-group mb-4">
                  <label for="nombre" class="form-label">Contraseña</label>
                  <input type="text" class="form-control" name="pwd" id="pwd" placeholder="*****">
                </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="tecnicoEditar" 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 TECNICO 😀</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="editarTecnico">
                <div class="form-group mb-2">
                  <label for="nombre" class="form-label">Nombre</label>
                  <input type="text" class="form-control" name="e_nombre" id="e_nombre" placeholder="Nombre">
                </div>
                <div class="form-group mb-2"  style="display: none">
                  <label for="nombre" class="form-label">Dirección</label> 
                  <textarea class="form-control" name="e_direccion" id="e_direccion" rows="3"></textarea> 
                </div> 
                <div class="row"  style="display: none">
                  <div class="col-md-6">
                    <div class="form-group mb-2">
                      <label for="nombre" class="form-label">Teléfono </label>
                      <input type="text" class="form-control" name="e_telefono" id="e_telefono" placeholder="3312701862">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group mb-2">
                      <label for="nombre" class="form-label">Celular</label>
                      <input type="text" class="form-control" name="e_celular" id="e_celular" placeholder="3312701862">
                    </div>
                  </div>
                </div> 
                <div class="form-group mb-4"  style="display: none">
                  <label for="nombre" class="form-label">Correo electronico</label>
                  <input type="text" class="form-control" name="e_email" id="e_email" placeholder="codigonan@gmail.com">
                </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>
 
 @endsection
@section('scripts') 
<script> 
sys.tecnico.crear();
</script>
@endsection