<!DOCTYPE html>
<html lang="es">
<head>
  {{> head }}
  <title>{{ title }}</title>
</head>

<body>

  <div class="d-flex" id="wrapper">
    <div id="sidebar-wrapper">
      <div class="sidebar-heading">{{ title }} </div>
      {{> navbar }}
    </div>

    <div id="page-content-wrapper">
      <nav class="navbar navbar-expand-lg navbar-light border-bottom">
        {{> topbar }}
      </nav>
      <div class="container-fluid">
        <div class="row">
          <div class="card col-md-12">
             <div class="pd-15">
                <h1 class="title">Control Diario #{{id_reporte}}</h1>
                <div class="my-4">
                  <a class="btn btn-green" href="/modulos/control-diario">
                    Volver
                  </a>
                </div>
                <div class="row">
                  <div class="form-group col-md-3">
                    <label for="">Fecha Creación</label>
                    <input type="text" readonly class="form-control" value="{{formatDate reporte_json.fecha_registro}}">
                  </div>
                  <div class="form-group col-md-3">
                    <label for="">Vehículo <span style="text-transform: uppercase;">({{reporte_json.Transporte.transporte}})</span></label>
                    <input type="text" readonly class="form-control" value="{{reporte_json.placa}}">
                  </div>
                  <div class="form-group col-md-3">
                    <label for="">Kilometraje Anterior</label>
                    <input type="text" readonly class="form-control" value="{{reporte_json.kilometrajeAnterior}}">
                  </div>
                  <div class="form-group col-md-3">
                    <label for="">Kilometraje Actual</label>
                    <input type="text" readonly class="form-control" value="{{reporte_json.kilometraje}}">
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-3">
                    <label for="">Observaciones</label>
                    <textarea readonly class="form-control" cols="10" rows="5">{{reporte_json.observaciones}}</textarea>
                  </div>
                  <div class="col-md-3">
                    <label for="">¿Reportado como Accidente?</label>
                    <select disabled class="form-control">
                      {{{selectBool reporte_json.notificar_accidente}}}
                    </select>
                  </div>
                  <div class="form-group col-md-3">
                    <label for="">Usuario Encargado</label>
                    <input type="text" readonly class="form-control" value="{{reporte_json.Usuario.nombre}}">
                    <br>
                    <label for="">Nivel de Gasolina ({{reporte_json.gasolina}})</label>
                    <div class="progress">
                      <div class="progress-bar w-{{reporte_json.gasolina}}" role="progressbar" aria-valuenow="{{reporte_json.gasolina}}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                  <div class="form-group col-md-3">
                     <label for="">Usuario Anterior</label>
                    <input type="text" readonly class="form-control" value="{{reporte_json.usuario_anterior.nombre}}">
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    <strong>Adjuntos</strong>
                    <div class="border p2">
                      {{{ existenErrores reporte_json.malos reporte_json.informe_excel }}}
                    </div>
                  </div>
                  <div class="col-md-3">
                    <strong>¿Accidente?</strong>
                    {{#if reporte_json.foto_accidente}}
                      {{{splitCommaURL reporte_json.foto_accidente}}}
                    {{/if}}
                  </div>
                  <div class="col-md-3">
                    <strong>Fotos del Vehiculo</strong>
                    {{#if reporte_json.fotos_vehiculo}}
                      {{{splitCommaURL reporte_json.fotos_vehiculo}}}
                    {{/if}}
                  </div>
                  <div class="col-md-3">
                    <strong>Documentos del Vehiculo</strong>
                    {{#if reporte_json.foto_documentos}}
                      {{{splitCommaURL reporte_json.foto_documentos}}}
                    {{/if}}
                  </div>
                </div>
             </div>
          </div>
          <div class="col-md-12 card mt-4">
            <div class="card">
              <div class="card-header">
                <h5 class="card-title">Detalle</h5>
              </div>
              <div class="card-body">
                <table class="table TableExportar">
                  <thead>
                    <tr>
                      <th scope="col">Parametros</th>
                      <th scope="col">Estado</th>
                      <th scope="col">Imagen</th>
                    </tr>
                  </thead>
                  <tbody>
                    {{# each detalle_json}}
                      <tr>
                        <th scope="row">{{descripcion}}</th>
                        <td style="text-transform: upperCase;">
                          {{#if foto_url}}
                            <i class="fa fa-exclamation-triangle" style="color:#f92a2a;" aria-hidden="true"></i>
                            <a href="{{foto_url}}" target="_blank">{{estado}}</a>
                          {{else}}
                            {{estado}}
                          {{/if}}
                        </td>
                        <td>
                          {{#if foto_url}}
                            {{{splitComma foto_url}}}
                          {{/if}}
                        </td>
                      </tr>
                    {{/each}}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- javascrips imports -->
  {{> scripts }}

</body>

</html>
