@extends('admin.layout.master')

@section('content')
    <main>
        <!-- Breadcrumb Area -->
        <div class="breadcrumb-area">
            <h1>Dashboard</h1>
            <ol class="breadcrumb">
                <li class=""><a href="{{ url('/admin') }}"><i class='bx bx-home-alt'
                            style="font-size: 18px;color: #F31519;"></i></a></li>
                <li class=""><a href="{{ url('/admin') }}">Principal </a></li>
                <li class="">&nbsp;&nbsp;/ Admin Web</li>
                <li class="">&nbsp;&nbsp;/ <a href="{{ url('/admin/web/notificacion') }}">Notificaciones</a></li>
            </ol>
        </div>
        <!-- End Breadcrumb Area -->

        <div class="card mb-30">
          {{-- <div class="card-body">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
              <strong>Mensaje!</strong> Se registró satisfactoriamente.
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
        
            <div class="alert alert-success alert-dismissible fade show" role="alert">
              <strong>Mensaje!</strong> Los datos del registro se modificaron.
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
        
            <div class="alert alert-success alert-dismissible fade show" role="alert">
              <strong>Mensaje!</strong> Se cambió el estado del registro.
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
        
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <strong>Mensaje!</strong> Ocurrió un error al subir el archivo.
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
        
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <strong>Mensaje!</strong> Este nombre de imagen ya existe, por favor grabar la imagen con otro nombre.
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
        
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <strong>Mensaje!</strong> Este tipo de archivo no es permitido o excede su peso de 500Kb.
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
        
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <strong>Mensaje!</strong> No se grabó el registro, faltan datos por completar. Por favor, revisa nuevamente.
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
        
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <strong>Mensaje!</strong> Se eliminó el registro satisfactoriamente.
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
          </div> --}}
        
          <div class="card-body">
            <div class="card-header d-flex justify-content-between align-items-center">
              <h3>Historial de Notificaciones PUSH <p><small>Tecnolog&iacute;a de Google</small></p>
              </h3>
              <div class="btn-group" role="group" align="right">
                <a href="#" class="btn btn-info rounded-pill" data-toggle="modal" data-target="#myModalVE">
                  <i class='bx bxs-pencil'></i> Nuevo Registro
                </a>
              </div>
            </div>
          </div>
          
          <div class="card-body">
            <div class="table table-responsive">
              <table id="tblUser" class="table" cellspacing="0" cellpadding="0" width="100%">
                <thead>
                  <tr>
                    <th>N.</th>
                    <th>Título</th>
                    <th>Detalle</th>
                    <th>Habilitado</th>
                    <th>Editar</th>
                    <th>Eliminar</th>
                  </tr>
                </thead>
                <tbody id="">
                  <tr>
                    <td>1</td>
                    <td>Ejemplo de Título 1</td>
                    <td>Ejemplo de Detalle 1</td>
                    <td><a href="#" onClick="return statusalert()">Habilitado</a></td>
                    <td><button type='button' class='btn btn-primary btn-xs' data-toggle='modal' data-target='#myModalEdit1'>
                      <span class='bx bx-pencil'></span>
                    </button></td>
                    <td><a href="#" onClick="return confirmar()"><button type='button' class='btn btn-danger btn-xs'>
                      <span class='bx bx-trash'></span>
                    </button></a></td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>Ejemplo de Título 2</td>
                    <td>Ejemplo de Detalle 2</td>
                    <td><a href="#" class='text-danger' onClick="return statusalert()">Deshabilitado</a></td>
                    <td><button type='button' class='btn btn-primary btn-xs' data-toggle='modal' data-target='#myModalEdit2'>
                      <span class='bx bx-pencil'></span>
                    </button></td>
                    <td><a href="#" onClick="return confirmar()"><button type='button' class='btn btn-danger btn-xs'>
                      <span class='bx bx-trash'></span>
                    </button></a></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        
        <!-- Modal de Edición -->
        <div class="modal fade" id="myModalEdit1" role="dialog">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Editar Notificación - Ejemplo 1</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" method="post" action="#" enctype='multipart/form-data'>
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="form-group">
                        <div class="col-lg-12">
                          <label class="control-label" for="email">Título:</label>
                          <input type="text" class="form-control" maxlength="200" name="titulo" placeholder="Ingrese título" value="Ejemplo de Título 1">
                        </div>
                      </div>
                    </div>
                  </div>
        
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="form-group">
                        <div class="col-lg-12">
                          <label class="control-label" for="email">Detalle:</label>
                          <input type="text" class="form-control" maxlength="200" name="detalle" placeholder="Ingrese detalle" value="Ejemplo de Detalle 1">
                        </div>
                      </div>
                    </div>
                  </div>
        
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label class="control-label" for="email">Link:</label>
                        <input type="url" class="form-control" name="linkexterno" placeholder="Ingrese link" value="https://www.ejemplo.com">
                        <strong style="color: #D90205;"> ejemplo: https://www.ejemplo.com/</strong>
                      </div>
                    </div>
                  </div>
        
                  <div class="form-group">
                    <div class="col-sm-offset-5 col-sm-12"><br><br>
                      <button type="submit" class="btn btn-success" name="actualiza">Actualizar</button>
                    </div>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
              </div>
            </div>
          </div>
        </div>
        
        
        <!-- Modal de Nuevo Registro -->
        <div class="modal fade" id="myModalVE" role="dialog">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Crear nuevo registro - Notificación</h4>
                <button type="button" class="close" data-dismiss="modal">&times;"></button>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" method="post" action="#" enctype='multipart/form-data'>
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="form-group">
                        <div class="col-lg-12">
                          <label class="control-label" for="email">Título:</label>
                          <input type="text" class="form-control" maxlength="200" name="titulo" placeholder="Ingrese título">
                        </div>
                      </div>
                    </div>
                  </div>
        
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="form-group">
                        <div class="col-lg-12">
                          <label class="control-label" for="email">Detalle:</label>
                          <input type="text" class="form-control" maxlength="200" name="detalle" placeholder="Ingrese detalle">
                        </div>
                      </div>
                    </div>
                  </div>
        
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label class="control-label" for="email">Link:</label>
                        <input type="url" class="form-control" name="linkexterno" placeholder="Ingrese link">
                        <strong style="color: #D90205;"> ejemplo: https://www.ejemplo.com/</strong>
                      </div>
                    </div>
                  </div>
        
                  <div class="form-group">
                    <div class="col-sm-offset-5 col-sm-12"><br><br>
                      <button type="submit" class="btn btn-success" name="guarda">Guardar</button>
                    </div>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
              </div>
            </div>
          </div>
        </div>
    </main>
@endsection