@extends('layouts.tabler')

@section('content')

<div class="page-header d-print-none">
  <div class="container-xl mt-3 px-4 ">
    <div class="row mt-5 mx-1">
      <div class="card rounded-4" style="border-color: #3478f6;">
        <div class="card-body">
          <div class="d-flex mb-3" >
            <div class="m-2 h2">
              <a href="{{route('home',['pais_id'=>$pais_id])}}"><i class="fa-solid fa-arrow-left fa-lg"></i></a>
            </div>
            <div class="p-1 ml-2 m-2"><span class="text-black"><b>Notificaciones</b></span></div>
          </div>
          @foreach ($notifications as $notification)
          <div class="mb-4">
            <div class="p-2 d-flex flex-row d-flex align-items-center justify-content-between flex-wrap" style="border-top: 1px solid #3478f6;border-bottom: 1px solid #3478f6;">
              <div class="d-flex flex-row gap-2 align-items-center">
                <div><img class="img-fluid" src="{{asset('img/Bell.png')}}" width="25" height="25" alt="Carrito"></div>
                <div>{{$notification->title}}. {{$notification->body}}</div>
              </div>
              <div class="d-flex flex-row gap-3 align-items-center">
                <div class="rounded-pill d-flex align-items-center">
                  <span class="text-black p-2">{{Carbon\Carbon::parse($notification->sent_time)->format('d-m-Y')}}</span>
                </div>
              </div>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</div>

<div class="page-body">
  <div class="container-xl">
    <div class="col-10 offset-1">

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

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Tus Productos</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
@endsection
@section('js')
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(function() {
      $("#brand_id").val("");
      $("#brand_id").change(function(){
        if($("#brand_id").val() == ""){
          $("#model_id").html("<option value=''>Modelo</option>");
          return 0;
        }
        let options = JSON.parse($("#brand_id option:selected").attr("data-models"));
          console.log(options);
        $("#model_id").html("<option value=''>Modelo</option>");
          $.each(options, function(v,e){
          $("#model_id").append("<option value='"+e.id+"'>"+e.name+"</option>");
        });
      });
      $("#mas").click(function(){
        $("#contador").text(parseInt($("#contador").text())+1);
      });
      $("#menos").click(function(){
        $("#contador").text(parseInt($("#contador").text())-1);
      });
    });
  </script>
@stop