@extends('templates.app')
@section('container')
    @php
        use Carbon\Carbon;

        $jam = date('H');
        if ($jam >= 5 && $jam < 12) {
            $waktu = 'Pagi';
        } elseif ($jam >= 12 && $jam < 15) {
            $waktu = 'Siang';
        } elseif ($jam >= 15 && $jam < 18) {
            $waktu = 'Sore';
        } else {
            $waktu = 'Malam';
        }

        $bulan = date('m');
        if ($bulan == '01') {
            $namaBulan = 'Januari';
        } elseif ($bulan == '02') {
            $namaBulan = 'Februari';
        } elseif ($bulan == '03') {
            $namaBulan = 'Maret';
        } elseif ($bulan == '04') {
            $namaBulan = 'April';
        } elseif ($bulan == '05') {
            $namaBulan = 'Mei';
        } elseif ($bulan == '06') {
            $namaBulan = 'Juni';
        } elseif ($bulan == '07') {
            $namaBulan = 'Juli';
        } elseif ($bulan == '08') {
            $namaBulan = 'Agustus';
        } elseif ($bulan == '09') {
            $namaBulan = 'September';
        } elseif ($bulan == '10') {
            $namaBulan = 'Oktober';
        } elseif ($bulan == '11') {
            $namaBulan = 'November';
        } else {
            $namaBulan = 'Desember';
        }

        $tanggal_mulai = date('Y-m-01');
        $tanggal_akhir = date('Y-m-d');

    @endphp
    @if ($shift_karyawan->count() > 0)
        @foreach ($shift_karyawan as $sk)
                                                                                                        @endforeach
    @else
                                                                    @endif
    <style>
        .syn-modal {
            display: none;
            position: fixed;
            z-index: 1050;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            overflow: hidden;
        }

        .syn-modal-content {
            background-color: transparent;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .syn-close {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 36px;
            font-weight: bold;
            color: #fff;
            cursor: pointer;
        }

        .syn-close:hover {
            color: red;
        }

        .syn-img-fluid {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 0;
        }
        .online-counter {
        position: fixed;
        right: 0; /* Posisi di sisi kanan layar */
        top: 50%; /* Posisikan elemen di tengah secara vertikal */
        transform: translateY(-50%); /* Menyesuaikan agar benar-benar di tengah */
        writing-mode: vertical-rl; /* Orientasi teks vertikal */
        transform: translateY(-50%) rotate(180deg); /* Membaca teks dari bawah ke atas */
        background-color: #1e9427; /* Warna latar belakang */
        border: 1px solid #e9ecef; /* Border */
        border-radius: 8px 8px 8px 8px; /* Hanya sisi kiri yang melengkung */
        padding: 10px;
        box-shadow: -2px 0px 6px rgba(0, 0, 0, 0.1); /* Efek bayangan */
        color: #333; /* Warna teks */
        font-size: 14px; /* Ukuran font */
        font-weight: bold; /* Ketebalan font */
        z-index: 1000; /* Menempatkan elemen di atas elemen lain */
        text-align: center; /* Teks rata tengah */
    }
    </style>
    <div class="online-counter">
        <span>Login: {{ $totalOnlineUsers }}</span>
    </div>
</div>
    <div class="card-secton">
        <div class="tf-container">
            <div class="tf-balance-box p-1">
                <div
                    style="border-radius:12px;
                    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
                url('{{ url('assets/img/polka.png') }}');
               background-repeat: no-repeat;
               background-size: 100%;
               background-position: center;
               background-attachment: local;
               padding-top: 4;
               padding-bottom:0">

                    <div class="balance">
                        <div class="row justify-content-between">
                            <div class="col-4 p-0 m-0">
                                <div class="d-flex position-relative" style="flex-wrap: nowrap; justify-content: flex-end;">
                                    @if (auth()->user()->foto_karyawan == null)
                                        <img src="{{ url('assets/img/foto_default.jpg') }}" class="img-circle profile-pic"
                                            style="border-radius: 50%; height: 80px; width: 75px; box-shadow: 0px 4px 8px 0px rgba(24, 25, 27, 0.774);"
                                            alt="User Image">
                                    @else
                                        <img src="{{ url('storage/' . auth()->user()->foto_karyawan) }}"
                                            class="img-circle profile-pic"
                                            style="border-radius: 50%; height: 100px; width: 100px; box-shadow: 0px 4px 8px 0px rgba(24, 25, 27, 0.774);"
                                            alt="User Image">
                                    @endif

                                    @if (auth()->user()->is_vip == 'vip')
                                        <img src="{{ url('assets/img/logo_vip.png') }}" class="vip-badge"
                                            style="position: absolute; bottom: 5px; right: 5px; width: 30px; height: 30 px;">
                                    @endif
                                </div>
                            </div>
                            <div class="col-8 row align-items-center ml-0 p-0">
                                <div class="inner-left p-0" style="align-items: center; width:100%">
                                    <h3 style="font-weight: bolder; text-transform:uppercase">{{ auth()->user()->name }}
                                    </h3>
                                    <p1>
                                        RUANG {{ auth()->user()->lokasi->nama_lokasi }}
                                    </p1>
                                    <br>
                                    <p2>
                                        <span>{{ auth()->user()->jabatan->nama_jabatan }}</span>
                                    </p2>

                                </div>
                            </div>
                        </div>
                    </div>
                    <center>
                        <hr style="background-color:rgb(0, 0, 0); height:3px; width:80%">
                    </center>

                    @php

                        if ($shift_karyawan->count() > 0) {
                            date_default_timezone_set('Asia/Jakarta'); // Atur timezone sesuai lokasi kamu
                            $jam_sekarang = date('H:i'); // Jam saat ini dalam format 24 jam
                            // Konversi ke objek DateTime untuk perbandingan
                            $shift_time = DateTime::createFromFormat('H:i', $skjamas);
                            $current_time = DateTime::createFromFormat('H:i', $jam_sekarang);
                            // Cek apakah sudah melewati jam shift
                            if ($current_time > $shift_time) {
                                if ($skjamab == null) {
                                    $waktuAbsen = 'Telat';
                                    if ($skstatus == 'Cuti') {
                                        $waktuAbsen = 'Cuti';
                                    }
                                } else {
                                    $waktuAbs = DateTime::createFromFormat('H:i', $skjamab);

                                    if ($waktuAbs < $shift_time) {
                                        $waktuAbsen = 'Hadir';
                                    } elseif ($waktuAbs > $shift_time) { 
                                        $waktuAbsen = 'Telat';

                                        $selisih = $shift_time->diff($waktuAbs);
                                        $telatMenit = $selisih->h * 60 + $selisih->i;
                                    } else {
                                        $waktuAbsen = 'Hadir'; // Jika tepat waktu
                                    }
                                }
                            } elseif ($current_time < $shift_time) {
                                if ($skjamab == null) {
                                    $waktuAbsen = 'Belum Absen';
                                    if ($skstatus == 'Cuti') {
                                        $waktuAbsen = 'Cuti';
                                    }
                                } else {
                                    $waktuAbsen = 'Hadir';
                                }
                            }
                        } else {
                            $waktuAbsen = 'Belum MappingShift';
                        }
                    @endphp
                    <div class="row mt-0" style="flex-direction: column;">
                        @if ($skjamab == null && $waktuAbsen == 'Belum Absen')
                            <div class="status_absen2">
                                <h3 style="color: #ffff">
                                    Belum Absen
                                </h3>
                            </div>
                        @elseif ($skjamab == null && $waktuAbsen == 'Telat' && ($skstatus !== 'Libur' && $skstatus !== 'Cuti' && $skstatus !== 'Izin Tidak Masuk'))
                            <div class="status_absen4">
                                <h3 style="color: #ffff">
                                    Telat
                                </h3>
                            </div>
                        @elseif ($skjamab !== null && $waktuAbsen == 'Hadir')
                            <div class="status_absen3">
                                <h3 style="color: #ffff">
                                    Hadir
                                </h3>
                            </div>
                        @elseif ($skjamab !== null && $waktuAbsen == 'Telat' && $skstatus == 'Masuk')
                            <div class="status_absen4">
                                <h3 style="color: #ffff">
                                    Telat : {{ $telatMenit }} Menit
                                </h3>
                            </div>
                        @elseif ($skstatus == 'Libur')
                            <div class="status_absen1">
                                <h3 style="color: #ffff">
                                    Libur
                                </h3>
                            </div>
                        @elseif ($skstatus == 'Cuti')
                            <div class="status_absen4">
                                <h3 style="color: #ffff">
                                    Cuti
                                </h3>
                            </div>
                        @elseif ($skstatus == 'Izin Tidak Masuk')
                            <div class="status_absen4">
                                <h3 style="color: #ffff">
                                    Izin
                                </h3>
                            </div>
                        @elseif ($skstatus == 'Menunggu')
                            <div class="status_absen4">
                                <h3 style="color: #ffff">
                                    Menunggu
                                </h3>
                            </div>
                        @else
                            <div class="status_absen1">
                                <h3 style="color: #ffff">
                                    Shift Kosong
                                </h3>
                            </div>
                        @endif
                        <center>
                            <h3 class="mt-0" style="font-weight: bolder;">
                                {{ date('d') }} {{ $namaBulan }} {{ date('Y') }}
                            </h3>
                        </center>
                    </div>
                    @php
                        $tahun_skrg = date('Y');
                        $bulan_skrg = date('m');
                        $jmlh_bulan = cal_days_in_month(CAL_GREGORIAN, $bulan_skrg, $tahun_skrg);
                        $tgl_mulai = date('Y-m-01');
                        $tgl_akhir = date('Y-m-' . $jmlh_bulan);
                        $sisa_reimbursement = auth()
                            ->user()
                            ->reimbursement->whereBetween('tanggal', [$tgl_mulai, $tgl_akhir])
                            ->where('status', 'Approved')
                            ->sum('sisa');
                        $fee_reimbursement = App\Models\ReimbursementsItem::whereHas('reimbursement', function ($query) use ($tgl_mulai, $tgl_akhir) {
                            $query->whereBetween('tanggal', [$tgl_mulai, $tgl_akhir])->where('status', 'Approved');
                        })
                            ->where('user_id', auth()->user()->id)
                            ->sum('fee');
                        $total_reimbursement = $sisa_reimbursement + $fee_reimbursement;

                        $total_kasbon = App\Models\Kasbon::where('user_id', auth()->user()->id)
                            ->whereBetween('tanggal', [$tgl_mulai, $tgl_akhir])
                            ->where('status', 'Acc')
                            ->sum('nominal');
                    @endphp

                </div>
            </div>
        </div>

        <div class="mt-5">
            <div class="row">
                <div class="absen_masuk">
                    <div class="absen_time">
                        <a style="width:20%; height:auto; margin:.5rem" href="{{ url('/absen') }}"><img
                                src="{{ url('assets/img/camera.png') }}" alt=""></a>
                        <h4 style="color:#ffff; display:block; border-bottom: solid 2px white; font-weight:bolder">Absen
                            Masuk
                        </h4>
                    </div>
                    <h3 style="color:#ffff; display:block; font-weight:200; margin-bottom:.2rem">{{ $skjamab ?? '--:--' }}
                        WIB</h3>
                </div>
                <div class="absen_pulang">
                    <div class="absen_time">
                        <a style="width:20%; height:auto; margin:.5rem" href="{{ url('/absen') }}"><img
                                src="{{ url('assets/img/camera.png') }}" alt=""></a>
                        <h4 style="color:#ffff; display:block; border-bottom: solid 2px white; font-weight:bolder">Absen
                            Pulang
                        </h4>
                    </div>
                    <h3 style="color:#ffff; display:block; font-weight:200; margin-bottom:.2rem">{{ $skjampul ?? '--:--' }}
                        WIB</h3>
                </div>
            </div>
            <div class="tf-container mt-4">
                <div class="tf-balance-box p-1">
                    <div
                        style="border-radius:12px;
                    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
                    url('{{ url('assets/img/polka.png') }}');
                    background-repeat: no-repeat;
                    background-size: 101%;
                    background-position: center;
                    background-attachment: local;
                    padding-top: 4;
                    padding-bottom:0">

                        <ul class="box-service p-1">
                            <li>
                                <a href="{{ url('/absen') }}">
                                    <div class="icon-box bg_color_2">
                                        <svg width="25" height="24" viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg" fill="none">
                                            <path stroke="#d8681d" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M7 3H5a2 2 0 0 0-2 2v2m0 10v2a2 2 0 0 0 2 2h2m10 0h2a2 2 0 0 0 2-2v-2m0-10V5a2 2 0 0 0-2-2h-2" />
                                            <circle cx="12" cy="9" r="3" fill="#000000" stroke="#000000"
                                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                                            <path fill="#1e9427" stroke="#000000" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="2"
                                                d="M12 12c-2.761 0-5 1.79-5 4h10c0-2.21-2.239-4-5-4z" />
                                        </svg>
                                    </div>
                                    Absensi
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/cuti') }}">
                                    <div class="icon-box bg_color_2">
                                        <svg width="25" height="24" viewBox="0 0 14 14" role="img"
                                            focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">

                                            <path fill="#020202"
                                                d="M1.15384611 11.7692308V4.38461536h11.69230778v7.38461544c0 .67692308-.55384616 1.23076924-1.23076924 1.23076924h-9.2307693c-.67692308 0-1.23076924-.55384616-1.23076924-1.23076924z" />

                                            <path fill="#1e9427"
                                                d="M12.84615389 3.15384612v1.84615386H1.15384611V3.15384612c0-.67692308.55384616-1.23076924 1.23076924-1.23076924h9.2307693c.67692308 0 1.23076924.55384616 1.23076924 1.23076924z" />

                                            <g fill="#d8681d" transform="translate(-.38461544 .07692302) scale(.3077)">

                                                <circle cx="33" cy="10" r="3" />

                                                <circle cx="15" cy="10" r="3" />

                                            </g>

                                            <path fill="#d8681d"
                                                d="M9.76923079.99999995c-.33846154 0-.61538462.27692308-.61538462.61538462v1.53846155c0 .33846154.27692308.61538462.61538462.61538462.33846154 0 .61538462-.27692308.61538462-.61538462V1.61538457c0-.33846154-.27692308-.61538462-.61538462-.61538462zm-5.53846158 0c-.33846154 0-.61538462.27692308-.61538462.61538462v1.53846155c0 .33846154.27692308.61538462.61538462.61538462.33846154 0 .61538462-.27692308.61538462-.61538462V1.61538457c0-.33846154-.27692308-.61538462-.61538462-.61538462z" />

                                            <path fill="#d8681d"
                                                d="M6.44615384 10.93846156c0-.06153846 0-.15384615.03076923-.21538461.03076923-.06153847.06153847-.12307693.12307693-.15384616.06153846-.03076923.09230769-.0923077.15384615-.0923077.06153846-.03076922.15384616-.03076922.21538462-.03076922.06153846 0 .15384615 0 .21538462.03076923l.18461538.0923077c.06153846.03076922.0923077.09230768.12307693.15384615.03076923.06153846.03076923.12307692.03076923.21538461 0 .06153847 0 .15384616-.03076923.21538462-.03076923.06153846-.06153847.12307692-.12307693.15384616-.06153846.03076923-.0923077.09230769-.18461538.09230769-.0923077 0-.0923077.06153846-.18461539.06153846-.0923077 0-.15384616 0-.21538462-.03076923-.06153846-.03076923-.12307692-.06153846-.15384615-.0923077-.06153846-.03076923-.0923077-.09230769-.12307693-.15384615-.03076923-.0923077-.06153846-.15384615-.06153846-.24615385zM7.4 9.61538463h-.8l-.12307693-3.38461541H7.4923077L7.4 9.61538463z" />

                                        </svg>

                                    </div>
                                    Cuti & Izin
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/dinas-luar') }}">
                                    <div class="icon-box bg_color_3">
                                        <svg height="25" width="24" version="1.1" id="_x32_"
                                            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                            viewBox="0 0 512 512" xml:space="preserve">
                                            <style type="text/css">
                                                .st0 {
                                                    fill: #1e9427;
                                                }

                                                .st1 {
                                                    fill: #d8681d;
                                                }
                                            </style>
                                            <g>
                                                <path class="st0" d="M0,179.714v248.969c0,13.568,11.101,24.669,24.669,24.669h50.632V155.107H24.669
                                   C11.101,155.107,0,166.146,0,179.714z" />
                                                <path class="st0" d="M487.393,155.107h-50.632v298.245h50.632c13.506,0,24.607-11.101,24.607-24.669V179.714
                                   C512,166.146,500.899,155.107,487.393,155.107z" />
                                                <path class="st1"
                                                    d="M357.765,81.621c0-12.668-10.305-22.973-22.97-22.973h-157.57c-12.672,0-22.976,10.305-22.976,22.973v73.486
                                   h-30.101v298.245h263.709V155.107h-30.09V81.621z M197.418,101.818h117.177v53.289H197.418V101.818z" />
                                            </g>
                                        </svg>
                                    </div>
                                    Dinas Luar
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/lembur') }}">
                                    <div class="icon-box bg_color_4">
                                        <svg height="25" width="24" version="1.1" id="_x32_"
                                            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                            viewBox="0 0 512 512" xml:space="preserve">
                                            <style type="text/css">
                                                .st0 {
                                                    fill: #000000;
                                                }

                                                .st1 {
                                                    fill: #1e9427;
                                                }

                                                .st2 {
                                                    fill: #d8681d;
                                                }

                                                .st3 {
                                                    fill: #9b1414;
                                                }
                                            </style>
                                            <g>
                                                <path class="st1" d="M259.879,252.117v130.217H214.88c0,19.975,15.011,36.173,33.53,36.173h240.198c0.303,0-0.294-0.084,0-0.093
      v-11.973v-24.107V252.117c0-5.326-4.324-9.642-9.651-9.642H269.522C264.195,242.474,259.879,246.791,259.879,252.117z
      M404.13,267.86c0,11.662-10.366,23.324-22.028,20.741C382.102,288.601,383.39,267.86,404.13,267.86z M364.08,294.44
      c8.12-2.6,17.064,0.858,18.612,5.654c1.64-4.754,10.66-8.027,18.721-5.242c3.105,1.068,6.008,2.81,8.473,5.141
      c-7.834,3.676-13.278,11.611-13.278,20.842c0,9.651,5.949,17.906,14.372,21.321c-7.06,10.114-18.469,15.095-28.911,14.986
      c-15.961-0.168-34.018-12.243-34.902-36.138C346.646,306.842,354.471,297.536,364.08,294.44z" />
                                                <path class="st0" d="M249.538,166.646c36.105,0,65.369-29.264,65.369-65.352c0-36.097-29.264-65.362-65.369-65.362
      c-36.08,0-65.353,29.264-65.353,65.362C184.186,137.382,213.459,166.646,249.538,166.646z" />
                                                <rect y="436.21" class="st3" width="512" height="39.857" />
                                                <path class="st0" d="M164.387,378.447l1.077,40.06H214.4c-9.204-9.038-15.002-21.894-15.002-36.173v-13.286h45.008V252.117
      c0-12.646,10.281-22.928,22.928-22.928H381.85c-35.709-29.971-93.203-32.125-124.908-32.125
      c-46.387,0-130.839,4.569-138.521,94.289l-10.888,127.154h47.548L164.387,378.447z" />
                                                <polygon class="st2"
                                                    points="79.749,417.177 95.131,305.64 5.318,305.64 20.699,417.177 	" />
                                                <polygon class="st1"
                                                    points="89.266,266.412 11.174,266.412 5.318,292.211 95.122,292.211 	" />
                                            </g>
                                        </svg>
                                    </div>
                                    Lembur
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/my-profile') }}">
                                    <div class="icon-box bg_color_8">
                                        <svg width="25" height="24" viewBox="0 0 64 64" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M38.87 27.571C38.8647 25.6242 38.0883 23.7587 36.7108 22.3831C35.3333 21.0074 33.4668 20.2336 31.52 20.231C29.5748 20.2357 27.7106 21.0106 26.3351 22.386C24.9596 23.7615 24.1847 25.6257 24.18 27.571C24.1826 29.5178 24.9565 31.3842 26.3322 32.7617C27.7078 34.1393 29.5732 34.9157 31.52 34.921C33.4684 34.9178 35.336 34.1424 36.7137 32.7647C38.0914 31.387 38.8668 29.5193 38.87 27.571Z"
                                                fill="#000000" />
                                            <path
                                                d="M32.39 38.921H30.65C27.3861 38.9239 24.2567 40.2218 21.9487 42.5298C19.6408 44.8377 18.3429 47.9671 18.34 51.231V57.601H44.7V51.231C44.6971 47.9671 43.3992 44.8377 41.0913 42.5298C38.7833 40.2218 35.6539 38.9239 32.39 38.921Z"
                                                fill="#1e9427" />
                                            <path
                                                d="M51.52 5.60095H11.52C9.92869 5.60095 8.40256 6.23309 7.27734 7.35831C6.15213 8.48353 5.51999 10.0097 5.51999 11.601V51.601C5.51999 53.1922 6.15213 54.7184 7.27734 55.8436C8.40256 56.9688 9.92869 57.601 11.52 57.601H14.34V51.231C14.3425 48.0404 15.2795 44.9205 17.0354 42.2565C18.7912 39.5925 21.2889 37.5013 24.22 36.2409C22.9529 35.1797 21.9344 33.8531 21.2363 32.355C20.5382 30.8569 20.1776 29.2237 20.18 27.571C20.1845 24.5648 21.3807 21.683 23.5064 19.5573C25.6321 17.4316 28.5138 16.2355 31.52 16.231C34.5277 16.2333 37.4118 17.4285 39.5395 19.5544C41.6672 21.6802 42.865 24.5632 42.87 27.571C42.8724 29.2237 42.5118 30.8569 41.8137 32.355C41.1156 33.8531 40.0971 35.1797 38.83 36.2409C41.7587 37.5034 44.2539 39.5955 46.0078 42.2592C47.7617 44.9229 48.6976 48.0417 48.7 51.231V57.601H51.52C53.1113 57.601 54.6374 56.9688 55.7626 55.8436C56.8879 54.7184 57.52 53.1922 57.52 51.601V11.601C57.52 10.0097 56.8879 8.48353 55.7626 7.35831C54.6374 6.23309 53.1113 5.60095 51.52 5.60095Z"
                                                fill="#d8681d" />
                                        </svg>
                                    </div>
                                    Profile
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/my-profile/edit-password') }}">
                                    <div class="icon-box bg_color_2">
                                        <svg width="25" height="24" version="1.1" id="Capa_1"
                                            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                            x="0px" y="0px" viewBox="0 0 489.6 489.6"
                                            style="enable-background:new 0 0 489.6 489.6;" xml:space="preserve">
                                            <g>
                                                <g>
                                                    <path
                                                        d="M447.333,383.2c-62.3-42.8-151.8-57.6-151.8-57.6l-13.5-111.9c0-16.5-13.4-30-30-30c-16.3,0-29.5,12.9-29.9,29.1l0,0v60.7
       l-1.2,172.1l-35.4-27.3c0,0-45.4-40.1-83,1.2c0,0,24.1,33.9,62.2,70.1h280.5C458.133,438.4,447.333,383.2,447.333,383.2z"
                                                        fill="#00000" />
                                                    <path d="M84.433,0h-32.6c-7.6,0-13.8,6.2-13.8,13.8v32.5c0,7.6,6.2,13.8,13.8,13.8h32.5c7.6,0,13.8-6.2,13.8-13.8V13.8
       C98.133,6.2,92.033,0,84.433,0z" fill="#1e9427" />
                                                    <path d="M143.833,60.1h32.5c7.6,0,13.8-6.2,13.8-13.8V13.8c0-7.6-6.2-13.8-13.8-13.8h-32.5c-7.6,0-13.8,6.2-13.8,13.8v32.5
       C130.033,53.9,136.233,60.1,143.833,60.1z" fill="#FF9100" />
                                                    <path d="M84.433,92.3h-32.6c-7.6,0-13.8,6.2-13.8,13.8v32.5c0,7.6,6.2,13.8,13.8,13.8h32.5c7.6,0,13.8-6.2,13.8-13.8v-32.5
       C98.133,98.5,92.033,92.3,84.433,92.3z" fill="#FF9100" />
                                                    <path d="M143.833,152.4h32.5c7.6,0,13.8-6.2,13.8-13.8v-32.5c0-7.6-6.2-13.8-13.8-13.8h-32.5c-7.6,0-13.8,6.2-13.8,13.8v32.5
       C130.033,146.2,136.233,152.4,143.833,152.4z" fill="#1e9427" />
                                                    <path d="M84.433,184.3h-32.6c-7.6,0-13.8,6.2-13.8,13.8v32.5c0,7.6,6.2,13.8,13.8,13.8h32.5c7.6,0,13.8-6.2,13.8-13.8v-32.5
       C98.133,190.5,92.033,184.3,84.433,184.3z" fill="#1e9427" />
                                                    <path d="M143.833,244.4h32.5c7.6,0,13.8-6.2,13.8-13.8v-32.5c0-7.6-6.2-13.8-13.8-13.8h-32.5c-7.6,0-13.8,6.2-13.8,13.8v32.5
       C130.033,238.2,136.233,244.4,143.833,244.4z" fill="#FF9100" />
                                                    <path d="M143.833,336.5h32.5c7.6,0,13.8-6.2,13.8-13.8v-32.5c0-7.6-6.2-13.8-13.8-13.8h-32.5c-7.6,0-13.8,6.2-13.8,13.8v32.6
       C130.033,330.4,136.233,336.5,143.833,336.5z" fill="#1e9427" />
                                                    <path d="M235.733,60.1h32.5c7.6,0,13.8-6.2,13.8-13.8V13.8c0-7.6-6.2-13.8-13.8-13.8h-32.5c-7.6,0-13.8,6.2-13.8,13.8v32.5
       C222.033,53.9,228.133,60.1,235.733,60.1z" fill="#FF9100" />
                                                    <path d="M235.733,152.4h32.5c7.6,0,13.8-6.2,13.8-13.8v-32.5c0-7.6-6.2-13.8-13.8-13.8h-32.5c-7.6,0-13.8,6.2-13.8,13.8v32.5
       C222.033,146.2,228.133,152.4,235.733,152.4z" fill="#FF9100" />
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                    Password
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/my-absen') }}">
                                    <div class="icon-box bg_color_2">
                                        <svg width="25" height="24" version="1.1" id="Layer_1"
                                            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                            x="0px" y="0px" viewBox="0 0 392.598 392.598"
                                            style="enable-background:new 0 0 392.598 392.598;" xml:space="preserve">
                                            <g>
                                                <path style="fill:#d8681d;" d="M288,205.285c-45.576,0-82.747,37.107-82.747,82.747c0,45.576,37.107,82.747,82.747,82.747
      s82.747-37.107,82.747-82.747C370.747,242.457,333.576,205.285,288,205.285z" />
                                                <path style="fill:#1e9427;"
                                                    d="M227.232,203.087V31.58c0-5.301-4.331-9.632-9.632-9.632H85.592v52.945
      c0,6.012-4.848,10.925-10.925,10.925H21.786v199.693c0,5.301,4.331,9.632,9.632,9.632h152.307
      c-0.129-2.327-0.388-4.655-0.388-7.046C183.467,252.994,200.727,222.093,227.232,203.087z" />
                                            </g>
                                            <path style="fill:#ffff;" d="M88.242,43.604L43.572,88.275v184.889h118.82c3.62-31.418,18.941-60.186,42.99-80.808V43.604H88.242z
     " />
                                            <path style="fill:#56ACE0;" d="M288,348.929c-33.616,0-60.962-27.345-60.962-60.962s27.345-60.962,60.962-60.962
     s60.962,27.345,60.962,60.962S321.616,348.929,288,348.929z" />
                                            <g>
                                                <path style="fill:#194F82;"
                                                    d="M182.691,82.457h-61.802c-6.012,0-10.925-4.848-10.925-10.925c0-6.012,4.848-10.925,10.925-10.925
      h61.802c6.012,0,10.925,4.848,10.925,10.925C193.551,77.608,188.703,82.457,182.691,82.457z" />
                                                <path style="fill:#194F82;"
                                                    d="M182.691,140.444H66.392c-6.012,0-10.925-4.848-10.925-10.925c0-6.012,4.848-10.925,10.925-10.925
      h116.299c6.012,0,10.925,4.848,10.925,10.925C193.551,135.531,188.703,140.444,182.691,140.444z" />
                                                <path style="fill:#194F82;" d="M182.691,197.915H66.392c-6.012,0-10.925-4.848-10.925-10.925s4.848-10.925,10.925-10.925h116.299
      c6.012,0,10.925,4.848,10.925,10.925S188.703,197.915,182.691,197.915z" />
                                                <path style="fill:#194F82;"
                                                    d="M154.246,255.386H66.392c-6.012,0-10.925-4.848-10.925-10.925c0-6.012,4.848-10.925,10.925-10.925
      h87.855c6.012,0,10.925,4.848,10.925,10.925C165.107,250.537,160.259,255.386,154.246,255.386z" />
                                                <path style="fill:#00000;" d="M362.99,215.37l20.687-20.558c4.267-4.267,4.331-11.119,0.065-15.451
      c-4.267-4.267-11.119-4.331-15.451-0.065l-22.044,21.915c-13.834-9.374-29.996-15.386-47.451-17.131v-14.739h4.655
      c6.012,0,10.925-4.848,10.925-10.925c0-6.012-4.848-10.925-10.925-10.925h-31.16c-6.012,0-10.925,4.848-10.925,10.925
      c0,6.012,4.848,10.925,10.925,10.925h4.655v14.675c-9.826,1.034-19.265,3.491-28.057,7.046V31.58
      c0.129-17.39-13.964-31.547-31.354-31.547H83.2c-8.339,0-16.291,3.232-22.238,9.18L9.18,60.994C3.232,66.941,0,74.893,0,83.232
      v202.085c0,17.39,14.158,31.547,31.547,31.547h156.121c12.606,43.636,52.752,75.701,100.396,75.701
      c57.665,0,104.533-46.933,104.533-104.533C392.533,259.846,381.285,234.246,362.99,215.37z M63.806,37.269v26.57h-26.57
      L63.806,37.269z M31.547,295.079c-5.301,0-9.632-4.331-9.632-9.632V85.689h52.945c6.012,0,10.925-4.848,10.925-10.925V21.818
      h131.879c5.301,0,9.632,4.331,9.632,9.632v171.572c-26.505,19.006-43.83,49.907-43.83,84.945c0,2.392,0.259,4.719,0.388,7.046
      H31.547V295.079z M288,370.78c-45.576,0-82.747-37.107-82.747-82.747c0-45.576,37.107-82.747,82.747-82.747
      s82.747,37.107,82.747,82.747C370.747,333.608,333.576,370.78,288,370.78z" />
                                            </g>
                                            <polygon style="fill:#56ACE0;"
                                                points="37.236,63.838 63.806,63.838 63.806,37.269 " />
                                            <path style="fill:#194F82;"
                                                d="M288,217.503c-6.012,0-10.925,4.848-10.925,10.925v59.669c0,6.012,4.848,10.925,10.925,10.925
     c6.012,0,10.925-4.848,10.925-10.925v-59.669C298.861,222.352,294.012,217.503,288,217.503z" />
                                        </svg>

                                    </div>
                                    History
                                </a>
                            </li>
                            <li>
                                <a href="https://api.whatsapp.com/send?phone=62{{ $data->phone }}">
                                    <div class="icon-box bg_color_2">
                                        <svg fill="#000000" width="25" height="24" viewBox="0 0 24 24"
                                            id="whatsapp" data-name="Flat Line" xmlns="http://www.w3.org/2000/svg"
                                            class="icon flat-line">
                                            <path fill="#1e9427" id="secondary"
                                                d="M10.54,3.12A9,9,0,0,0,4,16.12L3,21l4.88-1A9,9,0,1,0,10.54,3.12ZM8.68,10.94A5.27,5.27,0,0,1,8,8H9.81l.4,1.4ZM16,16a5.27,5.27,0,0,1-2.94-.66l1.54-1.53,1.4.4Z">
                                            </path>
                                            <path fill="#d8681d" id="primary"
                                                d="M8.68,10.94,10.21,9.4,9.81,8H8s-.41,2.54,2.52,5.46S16,16,16,16V14.19l-1.4-.4-1.54,1.53"
                                                style="fill: none; stroke: #d8681d; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;">
                                            </path>
                                            <path id="primary-2" data-name="primary"
                                                d="M20.88,13.46A9,9,0,0,1,7.88,20L3,21l1-4.88a9,9,0,1,1,16.88-2.66Z"
                                                style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;">
                                            </path>
                                        </svg>
                                    </div>
                                    Admin
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-5">
            <div class="tf-container">
                <div class="mt-5">
                    <div class="d-flex justify-content-between">
                        <h3 style="color:white;">History</h3> <a href="{{ url('/my-absen') }}" class="primary_color fw_6">View All</a>
                    </div>
                    <div class="swiper-container banner-tes">
                        <div class="swiper-wrapper">

                            @foreach ($shift_karyawans as $sk)
                                <div class="swiper-slide">
                                    <div class="row">
                                        <div class="col-4">
                                            <img src="{{ url('assets/img/scanning.png') }}" alt=""
                                                style="width: 100%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        margin: 0;
                                        width:100%;">
                                        </div>
                                        <div class="col-8">

                                            <div class="content-scan d-flex flex-column">
                                                <p style="font-weight: bolder; color:white; line-height:12px;">
                                                    @php
                                                        Carbon::setLocale('id');
                                                        $tanggal_ini = Carbon::parse($sk->tanggal);
                                                        $hari = $tanggal_ini->translatedFormat('l');
                                                    @endphp
                                                    {{ $hari }}
                                                    </br></br>
                                                    Absen Masuk<br>
                                                    @php
                                                        $tanggal_saja = Carbon::parse($sk->tanggal)->format('d');
                                                    @endphp
                                                    <span>{{ $tanggal_saja ?? '' }} {{ $namaBulan }}
                                                        {{ date('Y') }}<br>
                                                        {{ $sk->jam_absen ?? '--:--' }}
                                                        WIB</br></br>
                                                        @if ($sk->status_absen == 'Libur')
                                                            <span style="background-color: lightblue; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">Libur</span>
                                                        @elseif($sk->status_absen == 'Cuti' || $sk->status_absen == 'Izin Tidak Masuk')
                                                            <span style="background-color: lightblue; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">Sedang Izin</span>
                                                        @elseif($sk->status_absen == 'Izin Telat')
                                                            <span style="background-color: lightblue; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">Izin Telat</span>
                                                        @elseif($sk->jam_absen == null)
                                                            <span style="background-color: red; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">
                                                                    Belum Absen</span>
                                                        @else
                                                                                                                        @if ($jam <= 0 && $menit2 <= 0)
                                                                <span style="background-color: green; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">
                                                                    Tepat Waktu
                                                                </span>
                                                            @else
                                                                <span style="background-color: orange; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">
                                                                    Telat 
                                                                    {{ $jam . ' Jam ' . $menit2 . ' Menit' }}</span>
                                                            @endif
                                                        @endif
                                                    </span>
                                                </p>
                                                <p style="font-weight: bolder; color:white; line-height:12px;">
                                                    </br><br>
                                                    Absen Pulang<br>
                                                    @php
                                                        $tanggal_saja = Carbon::parse($sk->tanggal)->format('d');
                                                        if (Carbon::createFromFormat('H:i', $sk->Shift->jam_keluar)->lessThan(Carbon::createFromFormat('H:i', $sk->Shift->jam_masuk))) {
                                                            $tanggal_saja = Carbon::parse($sk->tanggal)
                                                                ->addDay()
                                                                ->format('d');
                                                        }
                                                    @endphp
                                                    <span>
                                                        {{ $tanggal_saja ?? '' }} {{ $namaBulan }}
                                                        {{ date('Y') }}<br>{{ $sk->jam_pulang ?? '--:--' }}
                                                        WIB<br><br>
                                                        @if ($sk->status_absen == 'Libur')
                                                            <span style="background-color: lightblue; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">Libur</span>
                                                        @elseif($sk->status_absen == 'Cuti' || $sk->status_absen == 'Izin Tidak Masuk')
                                                            <span style="background-color: lightblue; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">Sedang Izin</span>
                                                        @elseif($sk->status_absen == 'Izin Pulang Cepat')
                                                            <span style="background-color: lightblue; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">Izin Pulang Cepat</span>
                                                        @elseif($sk->jam_absen == null)
                                                            <span style="background-color: red; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">Belum Absen</span>
                                                        @elseif($sk->jam_pulang == null)
                                                            <span style="background-color: red; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">
                                                                    Belum Pulang
                                                                </span>
                                                        @else
                                                                                                                        @if ($jam <= 0 && $menit2 <= 0)
                                                             <span style="background-color: green; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">
                                                                    Tepat Waktu
                                                                </span>
                                                            @else
                                                                <span style="background-color: orange; color: white; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;">Pulang Cepat
                                                                    {{ $jam . ' Jam ' . $menit2 . ' Menit' }}</span>
                                                            @endif
                                                        @endif

                                                        </br>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-5 mb-9">
            <div class="tf-container">
                <div class="mt-5">
                    <div class="d-flex justify-content-between">
                        <h3><span style="color:white;">Informasi</span></h3>
                    </div>
                    <div class="swiper-container banner-tes">
                        <div class="swiper-wrapper">
                            @if ($banner->count() > 0)
                                @foreach ($banner as $bn)
                                    <div class="swiper-slide">
                                        <img src="{{ url('storage/' . $bn->foto_banner) }}" alt="{{ $bn->nama_benner }}"
                                            class="clickable-image"
                                            style="cursor: pointer;"onclick="openSynModal('{{ url('storage/' . $bn->foto_banner) }}', '{{ $bn->nama_benner }}')">
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="synModal" class="syn-modal">
            <div class="syn-modal-content">
                <span class="syn-close" onclick="closeSynModal()">&times;</span>
                <h2 id="synModalTitle"></h2>
                <img id="synModalImage" src="" class="syn-img-fluid" alt="">
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="notificationModal" tabindex="-1" aria-labelledby="notificationModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="notificationModalLabel"><i class="fa fa-bell"></i> Pengumuman</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <h3 id="notificationTitle"></h3>
                        <p id="notificationContent"></p>
                        <img id="notificationImage" src="" alt="Pemberitahuan" class="img-fluid"
                            style="max-height: 300px;">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Oke</button>
                        <button type="button" class="btn btn-danger" onclick="disableNotification()">Jangan Tampilkan
                            Lagi</button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function openSynModal(imageUrl, title) {
                document.getElementById('synModalImage').src = imageUrl;
                document.getElementById('synModalTitle').innerText = title;
                document.getElementById('synModal').style.display = 'block';
            }

            function closeSynModal() {
                document.getElementById('synModal').style.display = 'none';
            }

            // Tutup modal saat klik di luar area modal
            window.onclick = function(event) {
                let modal = document.getElementById('synModal');
                if (event.target === modal) {
                    closeSynModal();
                }
            }
        </script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const hiddenNotificationId = localStorage.getItem('hiddenNotificationId');

                // Fetch notification data
                axios.get('/news-modal')
                    .then(response => {
                        if (response.data) {
                            const notification = response.data;
                            const notificationImageElement = document.getElementById('notificationImage');
                            // Check if notification ID is already hidden
                            if (hiddenNotificationId !== notification.id.toString()) {
                                document.getElementById('notificationTitle').textContent = notification.title;
                                document.getElementById('notificationContent').textContent = notification.content;
                                document.getElementById('notificationContent').innerHTML = notification.content
                                    .replace(/\n/g, '<br>');
                                if (notification.image) {
                                    notificationImageElement.src = notification.image;
                                    notificationImageElement.style.display = 'block';
                                } else {
                                    notificationImageElement.style.display = 'none';
                                }
                                const modal = new bootstrap.Modal(document.getElementById('notificationModal'));
                                modal.show();
                            }
                        }
                    });
            });

            function disableNotification() {
                axios.get('/news-modal')
                    .then(response => {
                        if (response.data) {
                            localStorage.setItem('hiddenNotificationId', response.data.id);
                            const modal = bootstrap.Modal.getInstance(document.getElementById('notificationModal'));
                            modal.hide();
                        }
                    });
            }
        </script>
    @endsection