@include('partials.alert')

<div class="card mb-4">
    <div class="card-body">
        <div class="row">
            <div class="col-lg-6 mb-3">
                <div id="map" style="width:100%; height:400px"></div>
            </div>

            <div class="col-lg-6">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="">
                            <span style="font-size: 0.9rem"><i class="fa-regular fa-calendar-days fa-fw"></i>
                                Tanggal</span>
                            <h5 id="date_now" class="text-black fw-bolder">-</h5>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="">
                            <span style="font-size: 0.9rem"><i class="fa-solid fa-clock fa-fw"></i> Waktu Saat
                                ini</span>
                            <div id="grouped" class="fw-bolder grouping d-flex align-items-end text-black">
                                <div id="hourToday" style="font-size: 1.7rem"></div>
                                <div id="minutesToday" style="font-size: 1.7rem"></div>
                                <div id="secondToday" class="mb-1" style="font-size: 1.1rem;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-lg-6 mb-3">
                        <span style="font-size: 0.9rem"><i class="fa-solid fa-location-dot fa-fw"></i> Lokasi
                            Absen</span>
                        <select name="location_absent" id="location_absent" class="form-control selectpicker">
                            <option value="">-- Pilih lokasi absen --</option>
                        </select>
                    </div>

                    <div class="col-lg-5">
                        <span style="font-size: 0.9rem"><i class="fa-solid fa-calendar-week fa-fw"></i> Jadwal</span>
                        <div id="status_shift_in" class="text-dark"></div>
                    </div>
                </div>

                {{-- Status absent --}}
                <div class="row mt-3">
                    <div class="col-md-6 mb-2">
                        <span style="font-size: 0.9rem"><i class="fa-solid fa-plane-departure fa-fw"></i> Absen
                            Masuk</span>
                        <div id="grouped-in" class="fw-bolder grouping text-black"></div>
                    </div>
                    <div class="col-md-5">
                        <span style="font-size: 0.9rem"><i class="fa-solid fa-plane-arrival fa-fw"></i> Absen
                            Keluar</span>
                        <div id="grouped-out" class="fw-bolder grouping text-black"></div>
                    </div>
                </div>

                {{-- evidence --}}
                <div class="row mt-3">
                    <div class="col-lg-6 mb-2">
                        <span style="font-size: 0.9rem"><i class="fa-solid fa-file-contract fa-fw"></i> Evindence
                            Masuk</span>
                        <div id="evidence-in" class="fw-bolder"></div>
                    </div>
                    <div class="col-lg-5">
                        <span style="font-size: 0.9rem"><i class="fa-solid fa-file-contract fa-fw"></i> Evindence
                            Keluar</span>
                        <div id="evidence-out" class="fw-bolder"></div>
                    </div>
                </div>

                {{-- button in out --}}
                <div class="row mt-3">
                    <span style="font-size: 0.9rem"><i class="fa-solid fa-hammer fa-fw"></i> Action</span>
                    <div class="d-flex gap-4">
                        <button type="button" id="buttonAbsentIn" class="btn btn-success" onclick="clockInButton()"
                            style="width: 45%" disabled>Masuk</button>
                        {{-- <button id="buttonAbsentIn" class="btn btn-success" data-bs-toggle="modal"
                            data-bs-target="#absent_in_modal" style="width: 45%" disabled>Masuk</button> --}}

                        {{-- <button id="buttonAbsentOut" class="btn btn-danger" data-bs-toggle="modal"
                            data-bs-target="#absent_out_modal" style="width: 45%" disabled>Keluar</button> --}}
                        <button id="buttonAbsentOut" class="btn btn-danger" style="width: 45%"
                            onclick="clockOutButton()" disabled>Keluar</button>
                    </div>
                </div>

                @if (config('app.app_feature_forgot_attendance'))
                    <div class="row mt-3">
                        <div class="col-lg-10">
                            {{-- <button class="fw-bolder text-start btn p-0 text-blue" data-bs-toggle="offcanvas"
                                data-bs-target="#forgotAbsent" aria-controls="forgotAbsent">Lupa absen ? klik
                                disini.</button> --}}
                            <button class="fw-bolder text-start btn p-0 text-blue" onclick="handleOffCanvas()">Lupa
                                absen ? klik
                                disini.</button>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@include('dashboard.live_attendance.modals.absent_in_modal')
@include('dashboard.live_attendance.modals.absent_out_modal')
@include('dashboard.live_attendance.offcanvas.forgot_absent')

@push('scripts')
    <script src="{{ assetTemp('/js/attendances/live_attendance/forgot/index.js') }}"></script>
    <script src="{{ assetTemp('/js/functions/flatpicker.js') }}"></script>
    <script src="{{ assetTemp('/js/functions/fetchData.js') }}"></script>
    <script src="{{ assetTemp('/js/functions/formatTime.js') }}"></script>
    <script src="{{ assetTemp('/js/functions/LocationAttendances.js') }}"></script>
@endpush