@extends('layouts.app')

@push('styles')
    <!-- DataTables -->
    <link
        href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}"
        rel="stylesheet" type="text/css" />
    <link
        href="{{ asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}"
        rel="stylesheet" type="text/css" />
@endpush

@section('content')
  <style>
    .lifestyle-btn {
      background: linear-gradient(to bottom, #f0c403, #9fa81b);
      border-radius: 20px;
      width: 65px;
      height: 65px;
      display: flex;
      align-items: center;
      justify-content: center;
      /* margin: 0 auto; */
      position: relative;
    }

    .lifestyle-btn i {
      font-size: 32px;
      color: white;
    }

    .lifestyle-label {
      text-align: left;
      /* margin-left: 10px; */
      color: black;
      font-size: 12px;
      margin-top: 8px;
      font-weight: 500;
    }

    .lifestyle-wrapper {
      /* text-align: center; */
      width: 120px;
    }
  </style>
<!-- Start Page-content-Wrapper -->
<div class="page-content-wrapper">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header" style="background-image:url({{ Auth::user()->siswa ? url($rank_siswa->foto) : asset('assets/images/bg.jpg') }})">
                    <h1 style="color: white">{{Auth::user()->nama}}</h1>
                    @if (Auth::user()->siswa)
                    <h2 style="color: white">Rank : {{$rank_siswa->nama}} ({{$total_target_capaian}} / {{$rank_siswa->maximal_target}})</h2>
                    <h2 style="color: white">Point : {{Auth::user()->siswa->point}} Pt</h2>
                    @endif
                </div>
                <div class="card-body" style="overflow-x: auto;">
                    @if (Auth::user()->siswa)
                        <h3>Cat Online</h3>
                        <div class="d-flex" style="overflow-x: scroll;">
                            @foreach ($cat as $item)
                                <div class="p-1">
                                    <div class="card">
                                        <div class="card-header">
                                            <p style="font-size: 16px; font-weight: bold;">{{$item["mulai"]}}</p>
                                        </div>
                                        <div class="card-body d-flex">
                                            <div class="p-1">
                                                <center>
                                                    <h4><i class="mdi mdi-school"></i> <br>TWK</h4>
                                                    <h5>{{$item['twk']}}</h5>
                                                </center>
                                            </div>
                                            <div class="p-1">
                                                <center>
                                                    <h4><i class="mdi mdi-brain"></i> <br>TIU</h4>
                                                    <h5>{{$item['tiu']}}</h5>
                                                </center>
                                            </div>
                                            <div class="p-1">
                                                <center>
                                                    <h4><i class="mdi mdi-account"></i> <br>TKP</h4>
                                                    <h5>{{$item['tkp']}}</h5>
                                                </center>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    @endif

                    {{-- <h3>Menu</h3> --}}
                        @canany(['view api_tools','view role', 'view user', 'view settings', 'view rank', 'view barang_tukar'])
                        <h3 style="text-align: left;">Data Master</h3>
                        <hr>
                        @endcanany
                        <div class="row text-center">
      <!-- Ulangi item ini sebanyak yang diperlukan -->

                        @can('view api_tools')
                            <div class="col-3">
                                <div class="lifestyle-wrapper">
                                    <a href="{{ url('api_tools') }}">
                                        <div class="lifestyle-btn">
                                            <i class="mdi mdi-buffer"></i>
                                        </div>
                                        <div class="lifestyle-label">API Tools</div>
                                    </a>

                                </div>
                            </div>
                            <div class="col-3">
                                <div class="lifestyle-wrapper">
                                    <a href="{{ url('api_token') }}">
                                        <div class="lifestyle-btn">
                                            <i class="mdi mdi-buffer"></i>
                                        </div>
                                        <div class="lifestyle-label">API Token</div>
                                    </a>

                                </div>
                            </div>
                        @endcan
{{--                         
                        @can('view tes tryout')
                        <li><a href="{{ url('tes_tryout_cat_online') }}">Tes Tryout Cat Online</a></li>
                        @endcan --}}

                        {{-- @can('view orang tua')
                            <li><a href="{{ route('orang_tua.index') }}">Orang Tua</a></li>
                        @endcan --}}

                        @can('view role')
                            <div class="col-3">
                                <div class="lifestyle-wrapper">
                                    <a href="{{ route('role.index') }}">
                                        <div class="lifestyle-btn">
                                            <i class="mdi mdi-buffer"></i>
                                        </div>
                                        <div class="lifestyle-label">Role</div>
                                    </a>
                                </div>
                            </div>
                        @endcan
                        @can('view user')
                                <div class="col-3">
                                <div class="lifestyle-wrapper">
                                    <a href="{{ route('admin.index') }}">
                                        <div class="lifestyle-btn">
                                            <i class="mdi mdi-buffer"></i>
                                        </div>
                                        <div class="lifestyle-label">Admin</div>
                                    </a>

                                </div>
                            </div>
                        @endcan
                        @can('view petugas')
                            <div class="col-3">
                                <div class="lifestyle-wrapper">
                                    <a href="{{ route('petugas.index') }}">
                                        <div class="lifestyle-btn">
                                            <i class="mdi mdi-buffer"></i>
                                        </div>
                                        <div class="lifestyle-label">Petugas</div>
                                    </a>

                                </div>
                            </div>
                        @endcan
                        @can('view siswa')
                            <div class="col-3">
                                <div class="lifestyle-wrapper">
                                    <a href="{{ route('siswa.index') }}">
                                        <div class="lifestyle-btn">
                                            <i class="mdi mdi-buffer"></i>
                                        </div>
                                        <div class="lifestyle-label">Siswa</div>
                                    </a>

                                </div>
                            </div>
                        @endcan
                        @can('view rank')
                            <div class="col-3">
                                <div class="lifestyle-wrapper">
                                    <a href="{{ url('rank') }}">
                                        <div class="lifestyle-btn">
                                            <i class="mdi mdi-buffer"></i>
                                        </div>
                                        <div class="lifestyle-label">Rank</div>
                                    </a>

                                </div>
                            </div>
                        @endcan
                        @can('view barang_tukar')
                            <div class="col-3">
                                <div class="lifestyle-wrapper">
                                    <a href="{{ url('barang_tukar') }}">
                                        <div class="lifestyle-btn">
                                            <i class="mdi mdi-buffer"></i>
                                        </div>
                                        <div class="lifestyle-label">List Barang</div>
                                    </a>

                                </div>
                            </div>
                        @endcan
                        </div>
                        <br>
                        <h3>Menu Utama</h3>
                        <hr>
                        <div class="row text-center">
                                                        <div class="col-3">
                                <div class="lifestyle-wrapper">
                                    <a href="{{ route('dashboard') }}">
                                        <div class="lifestyle-btn">
                                            <i class="mdi mdi-home"></i>
                                        </div>
                                        <div class="lifestyle-label">Dashboard</div>
                                    </a>
                                </div>
                            </div>
                            @can('view pendaftaran')
                                <div class="col-3">
                                    <div class="lifestyle-wrapper">
                                        <a href="{{ route('pendaftaran.index') }}">
                                            <div class="lifestyle-btn">
                                                <i class="mdi mdi-buffer"></i>
                                            </div>
                                            <div class="lifestyle-label">Pendaftaran</div>
                                        </a>

                                    </div>
                                </div>
                            @endcan

                            @can('view jadwal kegiatan')
                                <div class="col-3">
                                    <div class="lifestyle-wrapper">
                                        <a href="{{ url('jadwal') }}">
                                            <div class="lifestyle-btn">
                                                <i class="mdi mdi-clipboard"></i>
                                            </div>
                                            <div class="lifestyle-label">Kegiatan</div>
                                        </a>

                                    </div>
                                </div>
                            @endcan
                            @can('view barang_tukar')
                                <div class="col-3">
                                    <div class="lifestyle-wrapper">
                                        <a href="{{ url('transaksi_barang_tukar') }}">
                                            <div class="lifestyle-btn">
                                                <i class="mdi mdi-store"></i> 
                                            </div>
                                            <div class="lifestyle-label">Tukar Barang</div>
                                        </a>

                                    </div>
                                </div>
                            @endcan
                            @can('tukar_point')
                                <div class="col-3">
                                    <div class="lifestyle-wrapper">
                                        <a href="{{ url('tukar_point') }}">
                                            <div class="lifestyle-btn">
                                                <i class="mdi mdi-cart"></i>
                                            </div>
                                            <div class="lifestyle-label">Tukar Point</div>
                                        </a>

                                    </div>
                                </div>
                            @endcan
                            @can('view capaian')
                                <div class="col-3">
                                    <div class="lifestyle-wrapper">
                                        <a href="{{ url('target_capaian') }}">
                                            <div class="lifestyle-btn">
                                                <i class="mdi mdi-finance"></i>
                                            </div>
                                            <div class="lifestyle-label">Capaian</div>
                                        </a>

                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="lifestyle-wrapper">
                                        <a href="{{url('target_capaian?page=target&type=kegiatan')}}">
                                            <div class="lifestyle-btn">
                                                <i class="mdi mdi-checkbox-multiple-marked"></i>
                                            </div>
                                            <div class="lifestyle-label">Target</div>
                                        </a>

                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="lifestyle-wrapper">
                                        <a href="{{url('target_capaian?page=cat&type=cat')}}">
                                            <div class="lifestyle-btn">
                                                <i class="mdi mdi-format-list-checks"></i>
                                            </div>
                                            <div class="lifestyle-label">Hasil CAT</div>
                                        </a>

                                    </div>
                                </div>
                            @endcan
                            @can('view siswa capaian')
                                <div class="col-3">
                                    <div class="lifestyle-wrapper">
                                        <a href="{{ url('target_capaian') }}">
                                            <div class="lifestyle-btn">
                                                <i class="mdi mdi-finance"></i>
                                            </div>
                                            <div class="lifestyle-label">Capaian</div>
                                        </a>

                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="lifestyle-wrapper">
                                        <a href="{{url('target_capaian?page=target&type=kegiatan')}}">
                                            <div class="lifestyle-btn">
                                                <i class="mdi mdi-checkbox-multiple-marked"></i>
                                            </div>
                                            <div class="lifestyle-label">Target</div>
                                        </a>

                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="lifestyle-wrapper">
                                        <a href="{{url('target_capaian?page=cat&type=cat')}}">
                                            <div class="lifestyle-btn">
                                                <i class="mdi mdi-format-list-checks"></i>
                                            </div>
                                            <div class="lifestyle-label">Hasil CAT</div>
                                        </a>

                                    </div>
                                </div>
                            @endcan
                        </div>
                    {{-- <div class="row">
                        <div class="col-sm-4">
                            <a href="{{url('target_capaian?page=target&type=kegiatan')}}">
                                <div class="card bg-primary">
                                    <br>
                                    <center>
                                        <h3 style="color: white;">Target</h3>
                                    </center>
                                    <br>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a href="{{url('target_capaian?page=cat&type=cat')}}">
                                <div class="card bg-warning">
                                    <br>
                                    <center>
                                        <h3 style="color: white;">Hasil CAT Online</h3>
                                    </center>
                                    <br>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a href="{{ url('tukar_point') }}">
                                <div class="card bg-success">
                                    <br>
                                    <center>
                                        <h3 style="color: white;">Tukar Point</h3>
                                    </center>
                                    <br>
                                </div>
                            </a>
                        </div>
                    </div> --}}
                    <br>
                    <div class="d-flex justify-content-between">
                        <div class="p-1">
                            <h3>Log Activities</h3>
                        </div>
                        <div class="p-1"></div>
                        <div class="p-1">
                            <a href="{{url('notifikasi')}}"><h4>Lihat Semua</h4></a>
                        </div>
                    </div>
                    @foreach ($notifikasi as $item)
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="p-1">
                                        <a href="#" class="btn btn-danger"><i class="mdi mdi-alarm"></i></a>
                                    </div>
                                    <div class="p-1">
                                        <h4>{{$item->keterangan}}</h4>
                                        <p>{{$item->created_at}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->

</div>
<!-- End Page-content -->
@endsection

@push('scripts')
    <!-- Required datatable js -->
    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}">
    </script>
    <script
        src="{{ asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}">
    </script>
    <!-- Buttons examples -->
    <script
        src="{{ asset('assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}">
    </script>
    <script
        src="{{ asset('assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}">
    </script>
    <script src="{{ asset('assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/build/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/build/vfs_fonts.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.html5.min.js') }}">
    </script>
    <script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.print.min.js') }}">
    </script>
    <script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.colVis.min.js') }}">
    </script>
    <!-- Responsive examples -->
    <script
        src="{{ asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}">
    </script>
    <script
        src="{{ asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}">
    </script>

    <!-- Datatable init js -->
    <script src="{{ asset('assets/js/pages/datatables.init.js') }}"></script>
@endpush