@extends('layouts.admin.index')

@section('content')
<div id="main-wrapper">
  <!-- Sidebar -->
  @include('layouts.admin.sidebar')
  <div class="page-wrapper">
    <!--  Header -->
    @include('layouts.admin.header')

    <div class="body-wrapper">
      <div class="container-fluid mw-100">
        <div class="row">
          <div class="col-12">
            <!-- -------------------------------------------- -->
            <!-- Welcome Card -->
            <!-- -------------------------------------------- -->
            <div class="card">
              <div class="card-body p-3">
                <div class="hstack justify-content-between">
                  <div class="hstack gap-3">
                    <img src="{{ asset('assets/images/profile/user-1.jpg') }}" class="rounded-circle" width="70" height="70" alt="matdash-img" />
                    <div class="d-flex flex-column">
                      <h5 class=" fs-6 mb-0">Selamat Datang {{ $user->name }} 👋</h5>
                      <span>Lakukan langkah-langkah berikut untuk mulai berkontribusi dalam platform ini</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <h6 class="mb-4">Getting started <span>({{ $count }}/{{ $user->role_id == 2 ? '2' : '7' }})</span></h6>

            <div class="card">
              <div class="card-body p-3">
                <a href="{{ route('profile') }}">
                  <div class="hstack justify-content-between">
                    <div class="hstack gap-3">
                      <img src="{{ asset('assets/icons/user-gs.svg') }}" class="rounded-circle" width="70" height="70" alt="matdash-img" />
                      <div class="d-flex flex-column">
                        <h5 class=" fs-6 mb-0">Lengkapi Profil Diri</h5>
                        <span>Pastikan semua informasi diri Anda lengkap</span>
                      </div>
                    </div>
                    <img src="{{ $user->is_completed_user_profile === 1 ? asset('assets/icons/completed-gs.svg') : asset('assets/icons/uncompleted-gs.svg') }}" class="rounded-circle" width="48" height="48" alt="matdash-img" />
                  </div>
                </a>
              </div>
            </div>
            @if ($user->role_id !== 1 && $user->role_id !== 2)
              <div class="card">
                <div class="card-body p-3">
                  <a href="{{ $user->role_id == 3 ? route('matrix2b.add') : ($user->role_id == 5 ? route('matrix3.add') : route('matrix4.add')) }}">
                    <div class="hstack justify-content-between">
                      <div class="hstack gap-3">
                        <img src="{{ asset('assets/icons/book-gs.svg') }}" class="rounded-circle" width="70" height="70" alt="matdash-img" />
                        <div class="d-flex flex-column">
                          <h5 class=" fs-6 mb-0">Buat Rencana Aksi</h5>
                          <span>Tambahkan Rencana Aksi SDGs dari lembaga Anda</span>
                        </div>
                      </div>
                      <img src="{{ $matrix ? asset('assets/icons/completed-gs.svg') : asset('assets/icons/uncompleted-gs.svg') }}" class="rounded-circle" width="48" height="48" alt="matdash-img" />
                    </div>
                  </a>
                </div>
              </div>
              <div class="card">
                <div class="card-body p-3">
                  <a href="{{ $user->role_id == 3 ? route('matrix2b.forms') : ($user->role_id == 5 ? route('matrix3.forms') : route('matrix4.forms')) }}">
                    <div class="hstack justify-content-between">
                      <div class="hstack gap-3">
                        <img src="{{ asset('assets/icons/institution-gs.svg') }}" class="rounded-circle" width="70" height="70" alt="matdash-img" />
                        <div class="d-flex flex-column">
                          <h5 class=" fs-6 mb-0">Pantau dan Evaluasi Aksi</h5>
                          <span>Pantau dan evaluasi kemajuan Aksi SDGs</span>
                        </div>
                      </div>
                      <img src="{{ $forms ? asset('assets/icons/completed-gs.svg') : asset('assets/icons/uncompleted-gs.svg') }}" class="rounded-circle" width="48" height="48" alt="matdash-img" />
                    </div>
                  </a>
                </div>
              </div>
              <div class="card">
                <div class="card-body p-3">
                  <a href="{{ route('good-practice.add') }}">
                    <div class="hstack justify-content-between">
                      <div class="hstack gap-3">
                        <img src="{{ asset('assets/icons/users-gs.svg') }}" class="rounded-circle" width="70" height="70" alt="matdash-img" />
                        <div class="d-flex flex-column">
                          <h5 class=" fs-6 mb-0">Bagi Praktik Baik</h5>
                          <span>Buat dan sebarkan praktik baik Aksi SDGs</span>
                        </div>
                      </div>
                      <img src="{{ $goodPractices > 0 ? asset('assets/icons/completed-gs.svg') : asset('assets/icons/uncompleted-gs.svg') }}" class="rounded-circle" width="48" height="48" alt="matdash-img" />
                    </div>
                  </a>
                </div>
              </div>
              <div class="card">
                <div class="card-body p-3">
                  <a href="{{ route('action-news.add') }}">
                    <div class="hstack justify-content-between">
                      <div class="hstack gap-3">
                        <img src="{{ asset('assets/icons/newspaper-gs.svg') }}" class="rounded-circle" width="70" height="70" alt="matdash-img" />
                        <div class="d-flex flex-column">
                          <h5 class=" fs-6 mb-0">Buat Berita Aksi</h5>
                          <span>Bagikan kabar Aksi SDGs</span>
                        </div>
                      </div>
                      <img src="{{ $actionNews > 0 ? asset('assets/icons/completed-gs.svg') : asset('assets/icons/uncompleted-gs.svg') }}" class="rounded-circle" width="48" height="48" alt="matdash-img" />
                    </div>
                  </a>
                </div>
              </div>
              <div class="card">
                <div class="card-body p-3">
                  <a href="{{ route('msp') }}">
                    <div class="hstack justify-content-between">
                      <div class="hstack gap-3">
                        <img src="{{ asset('assets/icons/collaborate-gs.svg') }}" class="rounded-circle" width="70" height="70" alt="matdash-img" />
                        <div class="d-flex flex-column">
                          <h5 class=" fs-6 mb-0">Kolaborasi dalam Kemitraan Multipihak</h5>
                          <span>Pantau dan Laporkan Perkembangan Aksi Bersama dalam Kerangka Kemitraan Multipihak</span>
                        </div>
                      </div>
                      <img src="{{ $msp ? asset('assets/icons/completed-gs.svg') : asset('assets/icons/uncompleted-gs.svg') }}" class="rounded-circle" width="48" height="48" alt="matdash-img" />
                    </div>
                  </a>
                </div>
              </div>
              <div class="card">
                <div class="card-body p-3">
                  <a href="{{ route('institution.profile') }}">
                    <div class="hstack justify-content-between">
                      <div class="hstack gap-3">
                        <img src="{{ asset('assets/icons/institution-gs.svg') }}" class="rounded-circle" width="70" height="70" alt="matdash-img" />
                        <div class="d-flex flex-column">
                          <h5 class=" fs-6 mb-0">Lengkapi Profil Lembaga</h5>
                          <span>Perbaiki profil lembaga Anda</span>
                        </div>
                      </div>
                      <img src="{{ $user->is_completed_institution_profile === 1 ? asset('assets/icons/completed-gs.svg') : asset('assets/icons/uncompleted-gs.svg') }}" class="rounded-circle" width="48" height="48" alt="matdash-img" />
                    </div>
                  </a>
                </div>
              </div>
            @endif
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
@endsection