<style>
.pb-8, .py-8 {
    padding-bottom: 3.75rem !important;
    }

.pt-8, .py-8 {
    padding-top: 3.75rem !important;
    }

.bg-smoke {
    background-color: #f5f5f5 !important;
    }

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
    }

*, *::before, *::after {
    box-sizing: border-box;
}

section {
    display: block;
    }

    .table-dashboard .table.table-hover tbody tr {
    transition: all .5s;
}

.table-dashboard .table tr {
    background-color: #f5f5f5;
}
*, *::before, *::after {
    box-sizing: border-box;
}

@media (min-width: 768px){

.table-dashboard .table .second-child {
    padding: 32px 0px;
    padding-left: 10px;
}}
.table-dashboard .table .second-child {
    display: flex;
    align-items: center;
}
.table-dashboard .table th, .table-dashboard .table td {
    padding: 0;
    vertical-align: middle;
    padding: 15px 0;
}
.table th, .table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

tr td {
    padding-bottom: 1em;
}

*, *::before, *::after {
    /* box-sizing: border-box; */
}

td {
    display: table-cell;
    vertical-align: inherit;
}
.table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

@media (min-width: 768px){

.table-dashboard .table h4 {
    font-size: 12px;
}}

.table-dashboard .table h4 {
    font-size: 8px;
    color: #969696;
    text-transform: uppercase;
}
.table-dashboard .table h2, .table-dashboard .table h4 {
    text-align: right;
}
.table-dashboard .table h1, .table-dashboard .table h2, .table-dashboard .table h3, .table-dashboard .table h4, .table-dashboard .table h5, .table-dashboard .table h6, .table-dashboard .table p {
    margin: 0;
}
h4, .h4 {
    font-size: 1.12875rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-weight: 400;
    line-height: 1.2;
}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
*, *::before, *::after {
    /* box-sizing: border-box; */
}

h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

@media (min-width: 768px){
.table-dashboard .table p {
    font-size: 14px;
}}
.table-dashboard .table p {
    font-size: 9px;
    text-transform: uppercase;
}

p {
    font-size: 0.875rem;
    color: #969696;
    font-family: "Montserrat", sans-serif;
    line-height: 21px;
    font-weight: 400;
}

::selection {
    color: #fff;
    background-color: #ff891e;
}

width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
  border-radius: 25px;
  background-color:#D1DEDE;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 970px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1170px;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

p, #isi {
    font-size: 12px;
}

#isih2 {
    font-size: 18;
}

#tableagenda {
    padding-left: 15px!important;
    padding-right: relative;
}

#grad1 {
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, aqua, yellow);
}
</style>


<section class="bg-smoke py-4 py-lg-6">
    <div class="container" style="">
      <div class="text-center section-title">
        <h2 class="text-uppercase font-weight-bold position-relative">
          <span class="bg-smoke">
            <h3>Agenda Biro Administrasi Pimpinan</h3>
          </span>
        </h2>
        {{-- <p class="text-capitalize text-center">--------------------</p> --}}
      </div>

      <div class="table-dashboard mb-7">
        <div class="row">
          <div class="col-md-7 float-left">
            <!-- <h2 class="text-uppercase mb-3">Recent activity</h2> -->
            <table class="table table-hover table-radius" id="tabelagenda">
                @foreach($acara as $agenda )

              <tbody>

                <tr>
                  <th scope="row">
                    <div class="badge badge-primary">
                      <span class="d-block">
                        <!-- <h1>25</h1> -->
                        <h3> <i class="fa fa-calendar" aria-hidden="true"></i></h3>
                      </span>
                    </div>
                  </th>

                  <td class="second-child">
                    <!-- <i class="fa fa-calendar" aria-hidden="true"></i> -->
                    <div class="ml-2">
                      <p id="isi"> {{ $agenda->tanggal }}</p>
                      <p class=""> {{ $agenda->jam_mulai }} - {{ $agenda->jam_akhir }}</p>
                      <a href="javascript:void(0)" class="hover-text-primary">{{ $agenda->urgensi }}</a>
                    </div>
                  </td>

                  <td>
                    <h5 class="text-right">  {{ $agenda->nama }}</h5>
                    <h6 id="isi" class="text-right">  {{ $agenda->pihak_terkait }}</h6>
                  </td>
                </tr>

                </tbody>
                @endforeach
              </table>
              <div class="text-center mt-7">
                <a href="{{ url('/agenda_biro')}}" target="_blank" class="btn btn-sm btn-outline-secondary text-uppercase">Lihat Semua</a>
              </div>

            </div>

            {{-- AGENDA Scroll --}}
            <div class="col-md-1 col-sm-0"></div>
            <div class="col-md-4 float-left">
            <h5 style="font-size:90%;text-align:left;margin-top:3%;" class="s_date"> &nbsp;&nbsp;&nbsp;<i class="fa fa-file-text-o" aria-hidden="true"></i> List Kegiatan Tanggal <span style="color:red;font-size:140%;"></span>: <!--[] -->
            </h5>

              <div class="event_detail" style="border: 2px solid #e9ecee; padding: 20px 15px;border-radius: 15px;">
                  <div class="detail_event" style="font-size:90%;height:340px;">
                      <marquee onmouseover="this.stop();" onmouseout="this.start();" direction="up" height="140px" scrollamount="3" border="1">
                  <div class="testimonial-item">
                    @foreach ($acara as $agenda1)
                      <img src="{{ url('../frontend/img/aryadii.jpeg') }}" alt="" height="200px" class="testimonial-img" style="border: 6px solid #e91010;">
                      <h6>Kabiro Adpim Setda Riau</h6>
                      <p>Ariyadi S.SIP</p>
                       <small><i class="fa fa-clock-o"></i> {{ $agenda1->tanggal }} - {{ $agenda1->jam_mulai }}</small>
                       <p style="color:green">
                        <span style="color:red;"><u>Didampingi Oleh:</u></span>
                         <span style="color:blue;font-size:90%">{{ $agenda1->pihak_terkait }}</span><br><i class="bx bxs-quote-alt-left quote-icon-left" style="color:gray;font-size:105%;text-align:justify;"></i>{{ $agenda1->urgesni }} &amp; {{ $agenda1->nama }}<i class="bx bxs-quote-alt-right quote-icon-right" style="color:gray;"></i><br>
                          <span style="color:black;"><u>Tempat:</u></span>
                          <span style="color:red;font-size:90%">{{ $agenda1->keterangan }}</span><br>
                           <span style="color:black;"><u>Penanggung jawab:</u></span>
                           <span style="color:blue;font-size:90%">{{ $agenda1->pihak_terkait }}</span>
                        </p>
                        @endforeach
                    </div>
                      </marquee>
                  </div>
              </div>
                  <div class="s_link" style="font-size:80%;">
                      <div class="form-inline">
                           &nbsp;&nbsp;&nbsp;<button class="btn btn-outline-primary btn-sm" onclick="copy_text()">Agenda Gubernur:</button>
                          <div class="col-md-9">
                              <input readonly="" class="form-control-plaintext" value="https://agenda.riau.go.id/evencal/index/2023/02/28" id="pilih">
                          </div>
                      </div>
                  </div>
           </div>
            {{-- Akhir Agenda --}}

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

              {{--  --}}


      <br><br>
      <div class="section-title">
        <h2>BERITA TERKINI</h2>

        </div>

        <div class="container-fluid" id="grad1">
            <div class="row mt-5 mx-2">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                {{-- <h2 class="item-center"> Berita Terkini </h2> --}}


                <div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
                    <div class="swiper-wrapper">
                        @foreach ($table as $tables)
                            <div class="swiper-slide">

                                <a href="https://riau.go.id/home/content/{{date_format(date_create($tables['conttime']),'Y/m/d').'/'.$tables['contid'].'-'.urlencode($tables['conttitle'])}}" target="_blank">
                                    {{-- <div class="card mb-4 shadow-sm"> --}}
                                        <img src="{{ $tables['contimg'] }}" class="card-img-top" alt="..." width=300 height=200>
                                        <div class="card-body" style="height: 6rem;">
                                            <small class="text-muted float-end text-date">{{date("l, j F Y - g:i a", strtotime($tables['conttime']) ); }}</small><br>

                                            <h5 class="text-primary" style="border-spacing;"><strong>{{ $tables['conttitle'] }}</strong></h5>
                                            <small class="text-primary">{{ $tables['contwriter'] }}</small>
                                            <div class="d-flex justify-content-between align-items-center">
                                            </div>
                                        </div>
                                        <div class="card-footer p-0" style="padding-bottom:10;">

                                        </div>
                                </a>
                                </div>
                                @endforeach
                            </div>

                    </div>
                    {{-- <div class="swiper-pagination"></div> --}}
            </div>
            <div class="col-md-1"></div>

            </div>
        </div>

    </section>