@extends('layouts.presensi')
@section('content')
<div class="section" id="user-section">
    <div id="user-detail">
        <div class="avatar">
            @if (empty(Auth::guard('karyawan')->user()->image))
            <img src="assets/img/sample/avatar/avatar1.jpg" alt="avatar" class="imaged w64 rounded">
            @else
            @php
                $path = Storage::url('uploads/karyawan/'.Auth::guard('karyawan')->user()->image)
            @endphp
            <img src="{{ url($path) }}" alt="avatar" class="imaged w64 rounded" {{-- style="height:60px" --}}>
            @endif
        </div>
        <div id="user-info">
            <h2 id="user-name">{{ Auth::guard('karyawan')->user()->nama_lengkap }}</h2>
            <span id="user-role">{{ Auth::guard('karyawan')->user()->jabatan }}</span>
        </div>
    </div>
</div>

<div class="section" id="menu-section">
    <div class="card">
        <div class="card-body text-center">
            <div class="list-menu">
                <div class="item-menu text-center">
                    <div class="menu-icon">
                        <a href="/edit_profile" class="green" style="font-size: 40px;">
                            <ion-icon name="person-sharp"></ion-icon>
                        </a>
                    </div>
                    <div class="menu-name">
                        <span class="text-center">Profil</span>
                    </div>
                </div>
                <div class="item-menu text-center">
                    <div class="menu-icon">
                        <a href="/presensi/izin" class="danger" style="font-size: 40px;">
                            <ion-icon name="calendar-number"></ion-icon>
                        </a>
                    </div>
                    <div class="menu-name">
                        <span class="text-center">Cuti</span>
                    </div>
                </div>
                <div class="item-menu text-center">
                    <div class="menu-icon">
                        <a href="/presensi/history" class="warning" style="font-size: 40px;">
                            <ion-icon name="document-text"></ion-icon>
                        </a>
                    </div>
                    <div class="menu-name">
                        <span class="text-center">Histori</span>
                    </div>
                </div>
                <div class="item-menu text-center">
                    <div class="menu-icon">
                        <a href="" class="orange" style="font-size: 40px;">
                            <ion-icon name="location"></ion-icon>
                        </a>
                    </div>
                    <div class="menu-name">
                        Lokasi
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section mt-2" id="presence-section">
    <div class="todaypresence">
        <div class="row">
            <div class="col-6">
                <div class="card gradasigreen">
                    <div class="card-body">
                        <div class="presencecontent">
                            <div class="iconpresence">
                                @if ($presensi_now != NULL)
                                    @php
                                        $path = Storage::url('/uploads/absensi/'.$presensi_now->photo_in);
                                    @endphp
                                    <img src="{{ url($path) }}" alt="Absen Masuk" class="imaged w48">
                                @else
                                    <ion-icon name="camera"></ion-icon>
                                @endif
                            </div>
                            <div class="presencedetail">
                                <h4 class="presencetitle">Masuk</h4>
                                <span>{{ $presensi_now != NULL ? $presensi_now->time_in : 'Belum Absen' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card gradasired">
                    <div class="card-body">
                        <div class="presencecontent">
                            <div class="iconpresence">
                                @if ($presensi_now != NULL && $presensi_now->time_out != NULL)
                                    @php
                                        $path = Storage::url('/uploads/absensi/'.$presensi_now->photo_out);
                                    @endphp
                                    <img src="{{ url($path) }}" alt="Absen Keluar" class="imaged w48">
                                @else
                                    <ion-icon name="camera"></ion-icon>
                                @endif
                            </div>
                            <div class="presencedetail">
                                <h4 class="presencetitle">Pulang</h4>
                                <span>{{ $presensi_now != NULL && $presensi_now->time_out != NULL ? $presensi_now->time_out : 'Belum Absen' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="rekap_presensi">
        <h3>Rekap Presensi Bulan {{ date('F')}}</h3>
        <div class="row">
            <div class="col-3">
                <div class="card">
                    <div class="card-body text-center" style="padding: 12px 12px !important;">
                        <span class="badge bg-danger" style="position: absolute; top: 3px; right: 11px; font-size: 0.6rem; z-index: 999;">{{ $rekap_presensi->jmlHadir }}</span>
                        <ion-icon name="accessibility-outline" style="font-size: 1.6rem" class="text-primary"></ion-icon>
                        <br>
                        <span style="font-size: 0.8rem; font-weight: 500">Hadir</span>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <div class="card-body text-center" style="padding: 12px 12px !important;">
                        <span class="badge bg-danger" style="position: absolute; top: 3px; right: 11px; font-size: 0.6rem; z-index: 999;">{{ $rekap_permission->jmlIzin }}</span>
                        <ion-icon name="newspaper-outline" style="font-size: 1.6rem" class="text-success"></ion-icon>
                        <br>
                        <span style="font-size: 0.8rem; font-weight: 500">Izin</span>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <div class="card-body text-center" style="padding: 12px 12px !important;">
                        <span class="badge bg-danger" style="position: absolute; top: 3px; right: 11px; font-size: 0.6rem; z-index: 999;">{{ $rekap_permission->jmlSakit }}</span>
                        <ion-icon name="medkit-outline" style="font-size: 1.6rem" class="text-warning"></ion-icon>
                        <br>
                        <span style="font-size: 0.8rem; font-weight: 500">Sakit</span>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <div class="card-body text-center" style="padding: 12px 12px !important;">
                        <span class="badge bg-danger" style="position: absolute; top: 3px; right: 11px; font-size: 0.6rem; z-index: 999;">{{ $rekap_presensi->jmlTerlambat }}</span>
                        <ion-icon name="alarm-outline" style="font-size: 1.6rem" class="text-danger"></ion-icon>
                        <br>
                        <span style="font-size: 0.8rem; font-weight: 500">Telat</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="presencetab mt-2">
        <div class="tab-pane fade show active" id="pilled" role="tabpanel">
            <ul class="nav nav-tabs style1" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">
                        Bulan Ini
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">
                        Leaderboard
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab-content mt-2" style="margin-bottom:100px;">
            <div class="tab-pane fade show active" id="home" role="tabpanel">
                <ul class="listview image-listview">
                    @foreach ($history_month_now as $var)
                    <li>
                        <div class="item">
                            <div class="icon-box bg-primary">
                                <ion-icon name="finger-print-outline"></ion-icon>
                            </div>
                            <div class="in">
                                <div>{{ date("d-m-Y", strtotime($var->tanggal_presensi)) }}</div>
                                <span class="badge badge-success">{{ $var->time_in }}</span> -
                                <span class="badge badge-danger">{{ $presensi_now != NULL && $var->time_out != NULL ? $var->time_out : "Belum Absen" }}</span>
                            </div>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel">
                <ul class="listview image-listview">
                    @foreach ($leaderboard as $val)
                    <li>
                        <div class="item">
                            <img src="assets/img/sample/avatar/avatar1.jpg" alt="image" class="image">
                            <div class="in">
                                <div>
                                    {{ $val->nama_lengkap }} <br>
                                    <small class="text-muted">{{ $val->jabatan }}</small>
                                </div>
                                <span class="badge {{ $val->time_in < "07:00" ? "bg-success" : "bg-danger" }}">
                                    {{ $val->time_in }}
                                </span>
                            </div>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>

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