@extends('pwa.template.app.main')

@section('script')

@include('pwa.template.pwa-script')



@if (session('success-login'))

<script>
    Swal.fire({

        icon: 'success',

        title: 'Sukses Login',

        text: "{{ session('success-login') }}",

    })

</script>

@endif

@if (session('success-merchant'))

<script>
    Swal.fire({

        icon: 'success',

        title: 'Sukses!',

        text: "{{ session('success-merchant') }}",

    })

</script>

@endif

@if (session('failed-merchant'))

<script>
    Swal.fire({

        icon: 'info',

        title: 'Sedang Dalam Proses!',

        text: "{{ session('failed-merchant') }}",

    })

</script>

@endif

@if (session('success-sendlaporan'))

<script>
    Swal.fire({

        icon: 'success',

        title: 'Sukses!',

        text: "{{ session('success-sendlaporan') }}",

    })

</script>

@endif

<script>
    // $('.loop').owlCarousel({

    //   center: true,

    //   items: 5,

    //   loop: true,

    //   margin: 10,

    //   responsive: {

    //     600: {

    //       items: 4

    //     }

    //   }

    // });

</script>

@endsection

@section('head')

<style>
    .owl-stage {

        display: flex;

    }

</style>

@endsection

@section('app-content')

{{-- section profil desa --}}

<div class="container pt-4">

    <div class="text mb-2" style="display: flex; justify-content: space-between">

        <p style="margin: 0; font-weight: bold;color: black">Profil Desa</p>

    </div>

    <div class="owl-carousel">

        @if (count($profil) >= 1)

        @foreach ($profil as $p)

        <!-- Single Vendor -->

        <div class="single-vendor-wrap bg-img bg-profil p-4 bg-overlay"
            style="background-image: url('{{ asset('storage/' . $p->gambar) }}')">
        </div>


        @endforeach

        @else

        <div class="alert alert-primary" role="alert">

            Tidak Profil Desa!

        </div>

        @endif

    </div>

</div>

{{-- section laporan --}}

<div class="container pt-4">

    <div class="text mb-2" style="display: flex; justify-content: space-between">

        <p style="margin: 0; font-weight: bold;color: black">Informasi Warga</p>

        <a class="btn p-0" href="{{ route('list-laporan') }}" style="color: grey">

            Lihat Semua

        </a>

    </div>

    <div class="owl-carousel">

        @if (count($laporan) >= 1)

        @foreach ($laporan->take(5) as $l)

        <!-- Single Vendor -->

        <div class="single-vendor-wrap bg-img p-4 bg-overlay"
            style="background-image: url('{{ asset('storage/' . $l->foto) }}')">

            <p class="vendor-title text-white d-flex justify-content-between">

                <span><b>{{ $l->nama }}</b></span>

                <span style="white-space: nowrap;">{{ date_format(date_create($l->tanggal), 'd M Y') }}</span>

            </p>

            <div class="vendor-info">

                <p class="mb-1 text-white"><i class="fa-solid fa-location-dot me-1"></i>{{ $l->lokasi }}</p>

                <div class="ratings lh-1">

                    <span class="text-white">

                        Pelapor : {{ $l->user->nama }}

                    </span>

                </div>

            </div><a class="btn btn-warning btn-sm mt43" href="{{ route('list-laporan.detail', $l->id) }}">Lihat

                Laporan</a>

            <!-- Vendor Profile-->

            {{-- <div class="vendor-profile shadow">

                <figure class="m-0"><img src="img/product/dw.png" alt=""></figure>

              </div> --}}

        </div>


        @endforeach

        @else

        <div class="alert alert-primary" role="alert">

            Tidak Ada Laporan Terbaru!

        </div>

        @endif

    </div>

</div>

{{-- section saaldo --}}

<div class="container mt-4">

    <div class="card">

        {{-- <div class="card-body d-flex justify-content-between align-items-end">

            <div class="left">

                <p style="margin-bottom: 0">Saldo Bumdes</p>

                <h1 style="margin-bottom: 0">Rp. {{ number_format(Auth::user()->saldo, 0, '.', '.') }}</h1>

        <br>

        <a href="{{ route('riwayat-topup') }}" style="color: #9E0E13;">Lihat Riwayat Top Up</a>

    </div>

    <div class="right" style="display: flex; align-items: center;">

        <a href="{{ route('topup') }}" style="margin-bottom: 10px;">

            <svg xmlns="http://www.w3.org/2000/svg" fill="#9E0E13" class="bi bi-plus-square-fill" viewBox="0 0 16 16"
                style="width: 30px; ">

                <path
                    d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z" />

            </svg>

        </a>

    </div>

</div> --}}

<!--<div class="card-footer d-flex justify-content-center bg-white" style="gap: 20px">-->

<!--  <a class="btn btn-warning bg-gradient w-100" href="{{ route('riwayat-topup') }}">Riwayat Top Up</a>-->

<!--</div>-->

</div>

</div>

{{-- section saldo --}}



<!-- Product Catagories -->

{{-- <div class="product-catagories-wrapper p-3">

    <div class="container p-4 rounded" style="background: #9E0E13;">

        <h6 class="text-white font-weight-bold">Pembayaran Layanan Digital</h6>

        <div class="row g-2 rtl-flex-d-row-r">

            <!-- Catagory Card -->

            <div class="col-3">

                <div class="card catagory-card">

                    <div class="card-body px-2">

                        <a href="{{ route('pdam') }}"><img src="{{ asset('pwa/icons/PDAM.png') }}"
    alt="" /><span>Tagihan

    PDAM</span></a>

</div>

</div>

</div>

<!-- Catagory Card -->

<div class="col-3">

    <div class="card catagory-card">

        <div class="card-body px-2">

            <a href="{{ route('layanan-digital.listrik') }}"><img src="{{ asset('pwa/icons/Listrik.png') }}"
                    alt="" /><span>Tagihan

                    Listrik</span></a>

        </div>

    </div>

</div>

<!-- Catagory Card -->

<div class="col-3">

    <div class="card catagory-card" style="height: 100%">

        <div class="card-body px-2">

            <a href="{{ route('wifi') }}"><img src="{{ asset('pwa/icons/Wifi.png') }}" alt="" /><span>WIFI</span></a>

        </div>

    </div>

</div>

<!-- Catagory Card -->

<div class="col-3">

    <div class="card catagory-card" style="height: 100%">

        <div class="card-body px-2">

            <a href="{{ route('isipulsa') }}"><img src="{{ asset('pwa/icons/Hape.png') }}" alt="" /><span>Pulsa

                    Hp</span></a>

        </div>

    </div>

</div>

</div>

</div>

</div> --}}

{{-- section slider banner --}}

{{-- <div class="hero-wrapper">

    <div class="container">

      <div class="pt-3">

        <!-- Hero Slides-->

        <div class="hero-slides owl-carousel">

          <!-- Single Hero Slide-->

          <div class="single-hero-slide"

            style="

                              background-image: url('pwa/img/bg-img/1.jpg');

                          ">

            <div class="slide-content h-100 d-flex align-items-center">

              <div class="slide-text">

                <h4 class="text-white mb-0" data-animation="fadeInUp" data-delay="100ms" data-duration="1000ms">

                  Amazon Echo

                </h4>

                <p class="text-white" data-animation="fadeInUp" data-delay="400ms" data-duration="1000ms">

                  3rd Generation, Charcoal

                </p>

                <a class="btn btn-primary" href="#" data-animation="fadeInUp" data-delay="800ms"

                  data-duration="1000ms">Buy Now</a>

              </div>

            </div>

          </div>

          <!-- Single Hero Slide-->

          <div class="single-hero-slide"

            style="

                              background-image: url('pwa/img/bg-img/2.jpg');

                          ">

            <div class="slide-content h-100 d-flex align-items-center">

              <div class="slide-text">

                <h4 class="text-white mb-0" data-animation="fadeInUp" data-delay="100ms" data-duration="1000ms">

                  Light Candle

                </h4>

                <p class="text-white" data-animation="fadeInUp" data-delay="400ms" data-duration="1000ms">

                  Now only $22

                </p>

                <a class="btn btn-success" href="#" data-animation="fadeInUp" data-delay="500ms"

                  data-duration="1000ms">Buy Now</a>

              </div>

            </div>

          </div>

          <!-- Single Hero Slide-->

          <div class="single-hero-slide" style="background-image: url('pwa/img/bg-img/3.jpg');">

            <div class="slide-content h-100 d-flex align-items-center">

              <div class="slide-text">

                <h4 class="text-white mb-0" data-animation="fadeInUp" data-delay="100ms" data-duration="1000ms">

                  Best Furniture

                </h4>

                <p class="text-white" data-animation="fadeInUp" data-delay="400ms" data-duration="1000ms">

                  3 years warranty

                </p>

                <a class="btn btn-danger" href="#" data-animation="fadeInUp" data-delay="800ms"

                  data-duration="1000ms">Buy Now</a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div> --}}

{{-- section old laporan --}}

{{-- <div class="container mt-4">

    <div class="text" style="display: flex; justify-content: space-between">

      <p style="margin: 0; font-weight: bold;color: black">Laporan Warga</p>

      <a class="btn p-0" href="{{ route('list-laporan') }}" style="color: grey">Lihat Semua

</a>

</div>

@if (count($laporan) >= 1)

@foreach ($laporan->take(5) as $l)

<div class="card shadow-sm px-3 py-2 mb-1">

    <div class="card-header bg-white border-0">

        <img style="width: 100%; height: 150px; object-fit: cover;" src="{{ asset('storage/' . $l->foto) }}" alt="">

    </div>

    <div class="card-body pb-0">

        <div class="d-flex justify-content-between ">

            <p class="mb-0 text-dark text-bold">{{ $l->nama }}</p>

            <p class="mb-0 text-dark text-bold">{{ $l->tanggal }}</p>

        </div>

        <hr class="my-2">

        <div class="d-flex justify-content-between">

            <div class="pelapor">

                <p class="mb-0 text-dark">Pelapor : </p>

                <p class="mb-0">{{ $l->user->nama }}</p>

            </div>

            <div class="lokasi">

                <p>{{ $l->lokasi }}</p>

            </div>

        </div>

        <div class="mb-3">

            {!! $l->keterangan !!}

        </div>

    </div>

    @if (isset($l->tanggapan))

    <div class="tanggapan">

        <p class="mb-0 text-dark">Tanggapan : </p>

        <p class="mb-2">Admin : {{ $l->tanggapan }}</p>

    </div>

    @else

    @endif

    <div class="card-footer pt-0 bg-white border-0 d-flex justify-content-end">

        <a href="{{ route('list-laporan.detail', $l->id) }}" class="btn btn-info">Lihat Detail</a>

    </div>

</div>

@endforeach

@else

<div class="alert alert-primary" role="alert">

    Tidak Ada Laporan Terbaru!

</div>

@endif

</div> --}}



{{-- section list transaksi --}}

<!-- <div class="container mt-4">

    <div class="text mb-2" style="display: flex; justify-content: space-between">

        <p style="margin: 0; font-weight: bold;color: black">Transaksi Terakhir</p>

        {{-- <a style="margin: 0;display: flex;align-items: center;color: blue;" href="{{ route('shop') }}"
        style="color: grey">Lihat Semua</a> --}}

        <a class="btn p-0" href="{{ route('shop') }}" style="color: grey">Lihat Semua</a>

    </div>

    @if (count($transaksis) >= 1)

    @foreach ($transaksis as $transaksi)

    @switch($transaksi->tipe)

    @case('tagihanpdam')

    @php

    $tagihan_pdam = $transaksi->tagihan_pdam;

    @endphp

    <div class="card mb-3">

        <div class="card-header bg-white d-flex justify-content-between">

            <div style="display: flex; align-items: center;">

                {{-- <i class="fa-solid fa-bag-shopping me-2"></i> --}}

                <i class="fa-solid fa-faucet-drip me-2"></i>

                <div style="display: flex; flex-direction: column">

                    <div>Tagihan PDAM</div>

                    <div style="font-size: 13px; margin-top: -5px">
                        {{ date('d M Y', strtotime($tagihan_pdam->created_at)) }}

                    </div>

                </div>

            </div>

            <span>

                @switch($tagihan_pdam->is_lunas)

                @case(false)

                <span class="badge text-bg-warning">Pending</span>

                @break



                @case(true)

                <span class="badge text-bg-success">Lunas</span>

                @break

                @endswitch

            </span>

        </div>

        <div class="card-body">

            <div class="d-flex" style="gap: 5px">

                <div>

                    <h5 class="card-title mb-0">Tagihan PDAM

                        <span class="text-primary fw-bold">

                            {{-- ID : {{ $tagihan_pdam->pelanggan_pdam->id }} --}}

                            Rp. {{ number_format($tagihan_pdam->nominal - $tagihan_pdam->beban, 0, 0, '.') }}

                        </span>

                    </h5>

                    <p class="mb-1" style="margin-top: -3px">ID : {{ $tagihan_pdam->pelanggan_pdam->id }}</p>

                </div>

            </div>

            <div class="d-flex justify-content-between">

                <div>

                    <p class="mb-0" style="font-size: 15px">Total Belanja</p>

                    <p class="mb-0 text-dark" style="font-weight: bold">

                        Rp. {{ number_format($tagihan_pdam->nominal, 0, 0, '.') }}

                    </p>

                </div>

                {{-- <a href="{{ route('transaksi.detail', $tagihan_pdam->id) }}" class="btn btn-primary"

                style="height: fit-content; align-self:flex-end">Detail</a> --}}

            </div>

        </div>

    </div>

    @break



    @case('isipulsa')

    @php

    $isi_pulsa = $transaksi->isi_pulsa;

    @endphp

    <div class="card mb-3">

        <div class="card-header bg-white d-flex justify-content-between">

            <div style="display: flex; align-items: center;">

                {{-- <i class="fa-solid fa-bag-shopping me-2"></i> --}}

                <i class="fa-solid fa-phone me-2"></i>

                <div style="display: flex; flex-direction: column">

                    <div>Isi Pulsa</div>

                    <div style="font-size: 13px; margin-top: -5px">
                        {{ date('d M Y', strtotime($isi_pulsa->created_at)) }}

                    </div>

                </div>

            </div>

            <span>

                @switch($isi_pulsa->status)

                @case('pending')

                <span class="badge text-bg-warning">Sedang Proses</span>

                @break



                @case('sukses')

                <span class="badge text-bg-success">Berhasil</span>

                @break

                @endswitch

            </span>

        </div>

        <div class="card-body">

            <div class="d-flex" style="gap: 5px">

                <div>

                    <p class="card-title mb-0">Isi Pulsa

                        <span class="text-success fw-bold">

                            Rp. {{ number_format($isi_pulsa->nominal, 0, 0, '.') }}

                        </span>

                    </p>

                    <p class="mb-1" style="margin-top: -3px">Nomor : {{ $isi_pulsa->nomor }}</p>

                </div>

            </div>

            <div class="d-flex justify-content-between">

                <div>

                    <small class="mb-0">Total Pembelian</small>

                    <h4 class="mb-0 text-dark" style="font-weight: bold">

                        Rp. {{ number_format($isi_pulsa->nominal + $isi_pulsa->biaya_admin, 0, 0, '.') }}

                    </h4>

                </div>

                {{-- <a href="{{ route('transaksi.detail', $isi_pulsa->id) }}" class="btn btn-primary"

                style="height: fit-content; align-self:flex-end">Detail</a> --}}

            </div>

        </div>

    </div>

    @break



    @case('produk')

    @php

    $order = $transaksi->order;

    @endphp

    <div class="card mb-3">

        <div class="card-header bg-white d-flex justify-content-between">

            <div style="display: flex; align-items: center;">

                <i class="fa-solid fa-bag-shopping me-2"></i>

                <div style="display: flex; flex-direction: column">

                    <div>

                        @switch($order->tipe)

                        @case('produk')

                        Belanja

                        @break



                        @case('layanan_digital')

                        @break

                        @endswitch

                    </div>

                    <div style="font-size: 13px; margin-top: -5px">{{ date('d M Y', strtotime($order->created_at)) }}
                    </div>

                </div>

            </div>

            <span>

                @switch($order->status)

                @case('pending')

                <span class="badge text-bg-warning">{{ $order->status }}</span>

                @break



                @case('kirim')

                <span class="badge text-bg-primary">{{ $order->status }}</span>

                @break



                @case('terima')

                <span class="badge text-bg-success">{{ $order->status }}</span>

                @break



                @case('tolak')

                <span class="badge text-bg-danger">{{ $order->status }}</span>

                @break

                @endswitch

            </span>

        </div>

        <div class="card-body">

            <div class="d-flex" style="gap: 5px">

                <img src="{{ asset('storage/' . $order->order_details[0]->produk->foto) }}" alt="" style="width: 40px; border-radius: 5px;

            height: 40px; object-fit: cover;" class="shadow-sm">

                <div>

                    <h5 class="card-title mb-0">{{ $order->no_invoice }}</h5>

                    <p class="mb-0">{{ $order->total_barang() }} Barang</p>

                </div>

            </div>

            <div class="d-flex justify-content-between">

                <div>

                    <p class="mb-0" style="font-size: 15px">Total Belanja</p>

                    <p class="mb-0 text-dark" style="font-weight: bold">Rp.
                        {{ number_format($order->harga, 0, 0, '.') }}

                    </p>

                </div>

                <a href="{{ route('transaksi.detail', $order->id) }}" class="btn btn-primary"
                    style="height: fit-content; align-self:flex-end">Detail</a>

            </div>

        </div>

    </div>

    @break



    @case('tokenlistrik')

    @php

    $token_listrik = $transaksi->token_listrik;

    @endphp

    <div class="card mb-3">

        <div class="card-header bg-white d-flex justify-content-between">

            <div style="display: flex; align-items: center;">

                {{-- <i class="fa-solid fa-bag-shopping me-2"></i> --}}

                <i class="fa-solid fa-bolt-lightning me-2"></i>

                <div style="display: flex; flex-direction: column">

                    <div>Token Listrik</div>

                    <div style="font-size: 13px; margin-top: -5px">

                        {{ date('d M Y', strtotime($token_listrik->created_at)) }}

                    </div>

                </div>

            </div>

            <span>

                @switch($token_listrik->status)

                @case('pending')

                <span class="badge text-bg-warning">Pending</span>

                @break



                @case('sukses')

                <span class="badge text-bg-success">Sukses</span>

                @break

                @endswitch

            </span>

        </div>

        <div class="card-body">

            <div class="d-flex" style="gap: 5px">

                <div>

                    <p class="card-title mb-0">Token Listrik

                        <span class="text-success fw-bold">

                            Rp. {{ number_format($token_listrik->nominal, 0, 0, '.') }}

                        </span>

                    </p>

                    <p class="mb-1" style="margin-top: -3px">ID Pelanggan : {{ $token_listrik->id_pelanggan }}</p>

                </div>

            </div>

            <div class="d-flex justify-content-between">

                <div>

                    <small class="mb-0" style="font-size: 15px">Total Pembelian</small>

                    <h4 class="mb-0 text-dark" style="font-weight: bold">

                        Rp. {{ number_format($token_listrik->nominal + $token_listrik->biaya_admin, 0, 0, '.') }}

                    </h4>

                </div>

                <a href="{{ route('transaksi.token-listrik.detail', $token_listrik->id) }}"
                    class="btn btn-primary {{ $token_listrik->status == 'pending' ? 'disabled' : '' }}"
                    style="height: fit-content; align-self:flex-end">Lihat Token</a>

            </div>

        </div>

    </div>

    @break



    @case('tagihanlistrik')

    @php

    $tagihan_listrik = $transaksi->tagihan_listrik;

    @endphp

    <div class="card mb-3">

        <div class="card-header bg-white d-flex justify-content-between">

            <div style="display: flex; align-items: center;">

                {{-- <i class="fa-solid fa-bag-shopping me-2"></i> --}}

                <i class="fa-solid fa-bolt-lightning me-2"></i>

                <div style="display: flex; flex-direction: column">

                    <div>Tagihan Listrik</div>

                    <div style="font-size: 13px; margin-top: -5px">

                        {{ date('d M Y', strtotime($tagihan_listrik->created_at)) }}

                    </div>

                </div>

            </div>

            <span>

                @switch($tagihan_listrik->status)

                @case('pending')

                <span class="badge text-bg-warning">Pending</span>

                @break



                @case('lunas')

                <span class="badge text-bg-success">Lunas</span>

                @break

                @endswitch

            </span>

        </div>

        <div class="card-body">

            <div class="d-flex" style="gap: 5px">

                <div>

                    <h5 class="card-title mb-0">Tagihan Listrik

                        <span class="text-primary fw-bold">

                            Rp. {{ number_format($tagihan_listrik->nominal, 0, 0, '.') }}

                        </span>

                    </h5>

                    <p class="mb-1" style="margin-top: -3px">ID : {{ $tagihan_listrik->pelanggan_listrik->id }}</p>

                </div>

            </div>

            <div class="d-flex justify-content-between">

                <div>

                    <p class="mb-0" style="font-size: 15px">Total Tagihan</p>

                    <p class="mb-0 text-dark" style="font-weight: bold">

                        Rp. {{ number_format($tagihan_listrik->nominal + $tagihan_listrik->biaya_admin, 0, 0, '.') }}

                    </p>

                </div>

                {{-- <a href="{{ route('transaksi.token-listrik.detail', $tagihan_listrik->id) }}"

                class="btn btn-primary {{ $tagihan_listrik->status == 'pending' ? 'disabled' : '' }}"

                style="height: fit-content; align-self:flex-end">Detail</a> --}}

            </div>

        </div>

    </div>

    @break



    @case('wifi')

    @php

    $tagihan_wifi = $transaksi->tagihan_wifi;

    @endphp

    <div class="card mb-3">

        <div class="card-header bg-white d-flex justify-content-between">

            <div style="display: flex; align-items: center;">

                {{-- <i class="fa-solid fa-bag-shopping me-2"></i> --}}

                <i class="fa-solid fa-wifi me-2"></i>

                <div style="display: flex; flex-direction: column">

                    <div>Tagihan Wifi</div>

                    <div style="font-size: 13px; margin-top: -5px">
                        {{ date('d M Y', strtotime($tagihan_wifi->created_at)) }}

                    </div>

                </div>

            </div>

            <span>

                {{-- @switch($tagihan_wifi->status)

                @case('pending')

                  <span class="badge text-bg-warning">Pending</span>

                @break



                @case('sukses')

                  <span class="badge text-bg-success">Sukses</span>

                @break

              @endswitch --}}

            </span>

        </div>

        <div class="card-body">

            <div class="d-flex" style="gap: 5px">

                <div>

                    <h5 class="card-title mb-0">Tagihan Wifi

                        <span class="text-primary fw-bold">

                            Rp. {{ number_format($tagihan_wifi->nominal, 0, 0, '.') }}

                        </span>

                    </h5>

                    <p class="mb-1" style="margin-top: -3px">Biaya Admin :

                        Rp. {{ number_format($tagihan_wifi->biaya_admin, 0, 0, '.') }}</p>

                </div>

            </div>

            <div class="d-flex justify-content-between">

                <div>

                    <p class="mb-0" style="font-size: 15px">Total Tagihan</p>

                    <p class="mb-0 text-dark" style="font-weight: bold">

                        Rp. {{ number_format($tagihan_wifi->nominal + $tagihan_wifi->biaya_admin, 0, 0, '.') }}

                    </p>

                </div>

                <a href="{{ route('transaksi.wifi.detail', $tagihan_wifi->id) }}" class="btn btn-primary"
                    style="height: fit-content; align-self:flex-end">Detail</a>

            </div>

        </div>

    </div>

    @break



    @endswitch

    @endforeach

    @else

    <div class="alert alert-primary" role="alert">

        Belum Ada Riwayat Transaksi

    </div>

    @endif

    {{-- <div class="card shadow-sm px-3 py-2 mb-1" data-bs-toggle="collapse" data-bs-target="#collapseExample2">

      <div class="d-flex justify-content-between ">

        <p class="mb-0 text-dark text-bold">Isi Pulsa</p>

        <p class="mb-0 text-dark text-bold">Rp. 2.000.000</p>

      </div>

      <div class="collapse" id="collapseExample2">

        <hr class="my-2">

        <div class="d-flex justify-content-between">

          <p>No Telepon</p>

          <p>08813573777</p>

        </div>

      </div>

    </div> --}}

    {{-- <div class="saldo mb-2"

        style="display: flex;

        justify-content: space-between;

        background-color: white;

        box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);

        padding: 10px 15px;

        border-radius: 10px;">

        <div class="left">

          <p style="margin-bottom: 0;font-weight: bold;color: black;">Pulsa Tri 5.000</p>

          <p style="margin-bottom: 0">083838383883</p>

          <p style="margin-bottom: 0">25 DEsember 2022</p>

        </div>

        <div class="right" style="display: flex;flex-direction: column;align-items: end;justify-content: start;">

          <p style="font-weight: bold; color: black; margin: 0"> Rp. 5.800</p>

          <p style="font-weight: bold; color: #0087ff; margin: 0">Berhasil</p>

        </div>

      </div>

      <div class="saldo mb-2"

        style="display: flex;

        justify-content: space-between;

        background-color: white;

        box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);

        padding: 10px 15px;

        border-radius: 10px;">

        <div class="left">

          <p style="margin-bottom: 0;font-weight: bold;color: black;">Pulsa Tri 5.000</p>

          <p style="margin-bottom: 0">083838383883</p>

          <p style="margin-bottom: 0">25 DEsember 2022</p>

        </div>

        <div class="right" style="display: flex;flex-direction: column;align-items: end;justify-content: start;">

          <p style="font-weight: bold; color: black; margin: 0"> Rp. 5.800</p>

          <p style="font-weight: bold; color: #0087ff; margin: 0">Berhasil</p>

        </div>

      </div>

      <div class="saldo mb-2"

        style="display: flex;

        justify-content: space-between;

        background-color: white;

        box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);

        padding: 10px 15px;

        border-radius: 10px;">

        <div class="left">

          <p style="margin-bottom: 0;font-weight: bold;color: black;">Pulsa Tri 5.000</p>

          <p style="margin-bottom: 0">083838383883</p>

          <p style="margin-bottom: 0">25 DEsember 2022</p>

        </div>

        <div class="right" style="display: flex;flex-direction: column;align-items: end;justify-content: start;">

          <p style="font-weight: bold; color: black; margin: 0"> Rp. 5.800</p>

          <p style="font-weight: bold; color: #0087ff; margin: 0">Berhasil</p>

        </div>

      </div>

      <div class="saldo mb-2"

        style="display: flex;

        justify-content: space-between;

        background-color: white;

        box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);

        padding: 10px 15px;

        border-radius: 10px;">

        <div class="left">

          <p style="margin-bottom: 0;font-weight: bold;color: black;">Pulsa Tri 5.000</p>

          <p style="margin-bottom: 0">083838383883</p>

          <p style="margin-bottom: 0">25 DEsember 2022</p>

        </div>

        <div class="right" style="display: flex;flex-direction: column;align-items: end;justify-content: start;">

          <p style="font-weight: bold; color: black; margin: 0"> Rp. 5.800</p>

          <p style="font-weight: bold; color: #0087ff; margin: 0">Berhasil</p>

        </div>

      </div> --}}

</div> -->



<!-- Top Products -->

{{-- <div class="top-products-area py-3">

    <div class="container">

        <div class="section-heading d-flex align-items-center justify-content-between dir-rtl">

            <h6 class="font-weight-bold">Produk Pilihan UMKM Desa</h6>

            <a class="btn p-0" href="{{ route('shop') }}" style="color: grey">Lihat Semua</a>

</div>



<div class="row g-2">

    <!-- Product Card -->

    @if (count($produks) >= 1)

    @foreach ($produks as $produk)

    <div class="col-6 col-md-4">

        <x-pwa.produk.card :produk="$produk"></x-pwa.produk.card>

    </div>

    @endforeach

    @else

    <div class="alert alert-primary" role="alert">

        Belum Ada Produk Yang Dapat Dibeli

    </div>

    @endif

</div>

</div>

</div> --}}

{{-- <div class="container">

    <div class="owl-carousel">

      <span class="badge rounded-pill text-bg-primary">Primary</span>

      <span class="badge rounded-pill text-bg-primary">Primary</span>

      <span class="badge rounded-pill text-bg-primary">Primary</span>

      <span class="badge rounded-pill text-bg-primary">Primary</span>

    </div>

  </div> --}}

{{-- section jadwal tv --}}

{{-- <div class="container my-3">

    <div class="section-heading d-flex align-items-center justify-content-between dir-rtl">

        <h6 class="font-weight-bold">Jadwal TV</h6>

        <a class="btn p-0" href="{{ route('jadwal-tv') }}" style="color: grey">Lihat Semua</a>

</div>

@foreach ($jadwal_tvs as $j)

<div class="card mb-2">

    <div class="card-body">

        <h5 class="accordian-title">{{ $j->nama }}</h5>

        <p class="mb-0 d-flex align-items-center">

            <i class="fa-regular fa-clock me-2"></i>

            <span>{{ $j->waktu }}</span>



        </p>

    </div>

</div>

@endforeach

</div> --}}

<!-- SECTION PERPUSTAKAAN -->
<div class="top-products-area mt-4">
    <div class="container">
        <div class="section-heading d-flex align-items-center justify-content-between dir-rtl">

            <h6>Perpustakaan Desa</h6>

            <a class="btn p-0" href="{{ route('ebook') }}" style="color: grey">Lihat Semua</a>


        </div>

        <div class="ebook-carousel overflow-hidden">
            @foreach ($ebooks as $e)
            <div class="card pb-3">
                <div class=" product-card" style="height: 300px;">
                    <a href="{{ route('ebook.detail', $e->id) }}">
                        <div class="card-body">
                            <div class="produks">
                                <div class="produk-f">
                                    <!-- Thumbnail -->
                                    <div class="product-thumbnail d-block">
                                        <img class=" mb-2 rounded" 
                                            src="{{ asset('storage/' . $e->cover) }}" alt="" style="object-fit: cover; height: 150px;">
                                    </div>
                                </div>
                                <div class="produk-lt mt-2">
                                    <!-- Product Title -->
                                    <div class="product-title mb-3" style="height: 30px;">{{ $e->judul }}</div>
                                    <!-- Product Price -->
                                    <p style="height: 100"> {!! substr($e->deskripsi, 0, 40) . '...' !!}</p>
                                </div>
                            </div>

                        </div>
                    </a>


                </div>
                <a class="mt-2 btn btn-danger" style="width: 90%; margin: auto;" href="{{asset('storage/' . $e->file)}}" target="_blank">Baca ebook</a>
            </div>
            @endforeach
        </div>
    </div>
</div>
<!-- ! SECTION PERPUSTAKAAN -->

<!-- SECTION PELATIHAN -->
<div class="top-products-area mt-4">
    <div class="container">
        <div class="section-heading d-flex align-items-center justify-content-between dir-rtl">

            <h6>Pelatihan Desa</h6>

            <a class="btn p-0" href="{{ route('pelatihan') }}" style="color: grey">Lihat Semua</a>


        </div>

        <div class="row g-2">
            @foreach ($pelatihans as $p)
            <div class="col-6 mb-3">

                <div class="card py-2">

                    <div class="card-header bg-white border-0">

                        <img class="mb-2" src="{{ asset('storage/' . $p->file) }}" alt=""
                            style="object-fit: cover; border-radius: 3px; width: 100%; " />

                    </div>

                    <div class="card-body py-0">

                        <h4 class="mb-1">{{ $p->judul }}</h4>



                        <span class="badge text-bg-primary mb-2">{{ $p->category->nama ?? null }}</span>

                        <p> {!! substr($p->deskripsi, 0, 50) . '...' !!}</p>

                    </div>

                    <div class="card-footer d-flex justify-content-end bg-white">

                        <a class="btn btn-primary btn-sm" href="{{ route('pelatihan.detail', $p->id) }}">

                            Lihat

                        </a>

                    </div>

                </div>

            </div>

            @endforeach
        </div>
    </div>
</div>
<!-- ! SECTION PELATIHAN -->



<!-- SECTION ENTERTAINMENT -->

<div class="top-products-area mt-4">

    <div class="container">

        <div class="section-heading d-flex align-items-center justify-content-between dir-rtl">

            <h6>Entertainment Desa</h6>

            <a class="btn p-0" href="{{ route('entertainment') }}" style="color: grey">Lihat Semua</a>

        </div>

        <div class="row g-2">

            <!-- Product televisi -->

            @foreach ($entertainments as $e)

            <div class="col-6 mb-3">

                <div class="card py-2">

                    <div class="card-header bg-white border-0">

                        @switch($e->tipe)

                        @case('foto')

                        <img class="mb-2" src="{{ asset('storage/' . $e->file) }}" alt=""
                            style="object-fit: cover; border-radius: 3px; width: 100%;" />

                        @break



                        @case('video')

                        <video class="mb-2" src="{{ asset('storage/' . $e->file) }}" controls
                            style="object-fit: cover; border-radius: 3px; width: 100%;"></video>

                        @break



                        @default

                        @endswitch

                    </div>

                    <div class="card-body py-0">

                        <h4 class="mb-1">{{ $e->judul }}</h4>



                        <span class="badge text-bg-primary mb-2">{{ $e->category->nama ?? null }}</span>

                        <p style="height: 50px"> {{ substr($e->deskripsi, 0, 50) . '...' }}</p>

                    </div>

                    <div class="card-footer d-flex justify-content-end bg-white">

                        <a class="btn btn-primary btn-sm" href="{{ route('entertainment.detail', $e->id) }}">

                            Lihat

                        </a>

                    </div>

                </div>

            </div>

            {{-- <div class="col-6 col-md-4">

            <div class="card product-card" style="height: 100%">

              <div class="card-body" style="display: flex; flex-direction: column; justify-content: space-between;">

                <span class="badge rounded-pill text-bg-primary">{{ $e->kategori }}</span>

            <div>

                <!-- Thumbnail -->

                <div class="product-thumbnail d-block">

                    @switch($e->tipe)

                    @case('foto')

                    <img class="mb-2" src="{{ asset('storage/' . $e->file) }}" alt=""
                        style="height: 140px; object-fit: cover; border-radius: 3px; width: 100%;" />

                    @break



                    @case('video')

                    <video class="mb-2" src="{{ asset('storage/' . $e->file) }}" controls
                        style="height: 140px; object-fit: cover; border-radius: 3px; width: 100%;"></video>

                    @break



                    @default

                    @endswitch

                    <!-- Product Title -->

                </div>

                <a class="product-title fw-bold" href="single-product.html">{{ $e->judul }}</a>

            </div>

            <div>

                <!-- Product Price -->

                <p class="sale-price fs-6 text-muted">

                    {{ substr($e->deskripsi, 0, 17) . '...' }}

                </p>

                <small>{{ $e->tanggal }}</small>

            </div>

            <!-- Add to Cart -->

            <a class="btn btn-primary btn-sm " href="{{ route('entertainment.detail', $e->id) }}">

                <i class="fa-solid fa-eye"></i>

            </a>

        </div>

    </div>

</div> --}}

@endforeach

</div>

</div>

</div>

@endsection


@push('scripts')
<script>
    $(document).ready(function () {
        $(".owl-carousel").owlCarousel({
            items: 1,
            loop: true,
            margin: 2,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
        });

        $(".owl-carousel").trigger('play.owl.autoplay', [3000])

        $(".ebook-carousel").owlCarousel({
            items: 2,
            loop: true,
            margin: 3,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            nav: false,
            dots: false,
            pagination: false,
        });

        $(".ebook-carousel").trigger('play.owl.autoplay', [3000])
    });

</script>
@endpush