@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card pb-0 p-3">
                        <h6 class="mb-1">Dashboard</h6>
                        <p class="text-sm">Welcome to MSJ Bukti Potong!</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Data Terbaru</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $count_read }}
                                    </h5>
                                    <p class="mb-0">
                                        <span class="text-success text-sm font-weight-bolder">*</span>
                                        Data yang belum pernah dibaca
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape text-center rounded-circle"
                                    style="background: linear-gradient(87deg, #05595B, #062C30); box-shadow: 0 4px 10px #2e7d8080;">
                                    <i class="fas fa-envelope text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Data Belum Terdownload</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $count_download }}
                                    </h5>
                                    <p class="mb-0">
                                        <span class="text-success text-sm font-weight-bolder">*</span>
                                        Data yang belum pernah didownload
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape text-center rounded-circle"
                                    style="background: linear-gradient(87deg, #37B7C3, #071952); box-shadow: 0 4px 10px #2e7d8080;">
                                    <i class="fas fa-download text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            @if ($broadcasts->isEmpty())
                <div class="col-12">
                    <div class="card">
                        <div class="card-body p-3">
                            <p>Anda belum menerima broadcast apa pun.</p>
                        </div>
                    </div>
                </div>
            @else
                @foreach ($broadcasts as $b)
                    <div class="col-12 mb-4">
                        <div class="card">
                            <div class="card-header p-3 pb-0 pt-3 bg-transparent d-flex justify-content-between">
                                <h4 class="text-capitalize">Announcement</h4>
                                <p class="mb-0">Dibuat tanggal : {{ $b->created_at }}</p>
                            </div>
                            <div class="card-body p-3">
                                <p>Tanggal Pengumuman : <i>{{ $b->start_date }}</i> sampai <i>{{ $b->end_date }}</i></p>
                                <p>Kepada Yth. {{ $b->nama_vendor }},</p>
                                <p>{!! $b->content_bc !!}</p>
                                <p>
                                    Hormat kami,<br>
                                    PT Multi Spunindo Jaya Tbk<br>
                                    Nonwovens Manufacturer<br>
                                    Desa Jabaran, RT.008 RW.003<br>
                                    Desa Jabaran, Balongbendo, Kab. Sidoarjo Jawa Timur 61263, Jawa Timur - Indonesia<br>
                                    Telp : +62-31 -8975555<br>
                                    Fax : +62-31-8976666, 8971300
                                </p>
                                <p>
                                    <code>* Jika ada pertanyaan, silakan hubungi kami.</code>
                                </p>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
@endsection

@push('js')
@endpush