@extends('layouts.presensi')
@section('content')
 <!-- App Capsule -->

 <style>
.logout{
    position: absolute;
    color: white;
    font-size: 30px;
    text-decoration: none;
    right: 8px;
}

.logout:hover{
    color: white;
}

 </style>
 <div id="appCapsule">
        <div class="section" id="user-section">
    <a href="/proseslogout" class="logout"><ion-icon name="exit-outline"></ion-icon>
</a>

        
            <div id="user-detail">
                <div class="avatar">
                    @if (!empty(Auth::guard('karyawan')->user()->foto))
                    @php
                        $path = Storage::url('uploads/karyawan/'.Auth::guard('karyawan')->user()->foto );
                    @endphp  
                    <img src="{{ url($path) }}" alt="avatar" class="imaged w64" style="height: 60%;">  
                    @else
                    <img src="assets/img/sample/avatar/avatar1.jpg" alt="avatar" class="imaged w64 rounded">
                    @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>
        <input type="hidden" id="lokasi">

        <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="editprofile" 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="https://docs.google.com/document/d/1qJpPsIedQaK5WGU6gdRiLvCi5LjquPXE/edit?usp=sharing&ouid=106869190443706652528&rtpof=true&sd=true" target="_blank" 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/histori" 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 id="googleMapsLink" href="#" target="_blank" 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-12">
                        <div class="card gradasigreen">
                            <div class="card-body">
                                <div class="presencecontent">
                                    <div class="iconpresence">
                                    <!-- <ion-icon name="camera"></ion-icon> -->
                                     @if ($presensihariini != null)
                                     @php
                                         $path = Storage::url('uploads/absensi/'.$presensihariini->foto_in);
                                      @endphp
                                         <img src="{{ url($path) }}" alt="" class="imaged w64">
                                         @else
                                         <ion-icon name="camera"></ion-icon>
                                     @endif
                                    </div>
                                    <div class="presencedetail">
                                        <h4 class="presencetitle">Masuk</h4>
                                        <span>{{ $presensihariini != null ? $presensihariini->jam_in : 'Belum Mulai' }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <!-- </div>
                                        <div class="col-6">
                        <div class="card gradasired">
                            <div class="card-body">
                                <div class="presencecontent">
                                    <div class="iconpresence">
                                        <ion-icon name="camera"></ion-icon>
                                    </div>
                                    <div class="presencedetail">
                                        <h4 class="presencetitle">Pulang</h4>
                                        <span>12:00</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
            </div>
    <div id="rekappresensi">
        <h3>Rekap Presensi Bulan {{$namabulan[$bulanini]}} Tahun {{ $tahunini }} </h3>
        <div class="row">
         <div class="col-3">
                 <div class="card">
                 <div class="card-body text-center" style="padding: 12px 12px !important; line-height: 0.8rem;">
                    <span class="badge bg-danger" style="position: absolute; top: 3px; right: 12px;">
                        {{ $rekappresensi->jmlhadir }}
                    </span>
                    <ion-icon name="accessibility-outline" style="font-size: 1.6rem"; class="text-primary mb-1"></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;">
                    <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;">
                    <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;">
                    <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 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">
                                History
                            </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 ($historibulanini as $d)
                            
                            <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($d->tgl_presensi)) }}</div>
                                        <span class="badge badge-success">{{  $d->jam_in }}</span>
                                        <span class="badge badge-warning">{{  $d->nama_siswa }}</span>
                                    </div>
                                </div>
                            </li>
                            @endforeach
                     </ul>
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel">
                        <ul class="listview image-listview">
                                                      <li>
                                <div class="item">
                                    <img src="assets/img/sample/avatar/avatar1.jpg" alt="image" class="image">
                                    <div class="in">
                                        <div>Nama Siswa</div>
                                        <span class="badge badge-primary">3</span>
                                    </div>
                                </div>
                            </li>
                            
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- * App Capsule -->
@endsection

@push('myscript')
<script>
document.addEventListener("DOMContentLoaded", function () {
    var googleMapsLink = document.getElementById("googleMapsLink");

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var mapsUrl = `https://www.google.com/maps?q=${latitude},${longitude}`;

            // Perbarui href
            googleMapsLink.href = mapsUrl;

            // Tambahkan event listener untuk memastikan navigasi saat diklik
            googleMapsLink.addEventListener("click", function (event) {
                event.preventDefault(); // Mencegah perilaku default
                window.location.href = mapsUrl; // Paksa navigasi
            });
        }, function (error) {
            alert("Gagal mendapatkan lokasi. Pastikan GPS diaktifkan.");
        });
    } else {
        alert("Geolocation tidak didukung di browser ini.");
    }
});
</script>
@endpush