@extends('layouts.admin')
@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/vendors/datatables.css') }}">
    <style>
        #webcam-container {
            margin-top: 20px;
            text-align: center;
        }

        #webcam {
            transform: scaleX(-1);
            =-webkit-transform: scaleX(-1);
        }
    </style>
@endsection
@section('app')
    <div class="container-fluid">
        <div class="row d-flex justify-content-center">
            <div class="col-sm-12 col-xl-6 d-none mb-3" id="webcam-container">
                <video id="webcam" autoplay playsinline style="width: 100%;"></video>
                <button id="btn-capture" class="btn btn-primary mt-3">Ambil</button>

                <canvas id="canvas-preview" class="d-none" style="width: 100%; border: 1px solid #ccc;"></canvas>

                <div id="action-buttons" class="d-none mt-3">
                    <button id="btn-retry" class="btn btn-warning">Ulangi</button>
                    <button id="btn-save" class="btn btn-success">Simpan</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-xl-6">
                <div class="card card-absolute">
                    @if (!$checkInAttendance)
                        <div class="card-header bg-primary">
                            <a href="javascript:void(0)" id="attendance-btn">
                                <h5 class="txt-light">Hadir</h5>
                            </a>
                        </div>
                    @endif
                    <div class="card-body">
                        <div class="d-flex list-behavior-1 align-items-center">
                            @if ($checkInAttendance)
                                <div class="flex-shrink-0">
                                    <a
                                        href="{{ Storage::url("attendances/{$checkInAttendance->attachments->first()->formatted_attachment}") }}">
                                        <img class="tab-img img-fluid"
                                            src="{{ Storage::url("attendances/{$checkInAttendance->attachments->first()->formatted_attachment}") }}"
                                            alt="image">
                                    </a>
                                </div>
                            @endif
                            @if (!$checkInAttendance)
                                <div class="flex-grow-1">
                                    <p class="mb-xl-0 mb-sm-4">
                                        Selamat pagi, semoga hari Anda penuh semangat! Jangan lupa untuk melakukan absensi
                                        kehadiran masuk sebelum memulai aktivitas Anda hari ini.
                                    </p>
                                </div>
                            @else
                                <div class="flex-grow-1">
                                    <p class="mb-xl-0 mb-sm-4">
                                        Terima kasih, Anda telah melakukan absensi kehadiran masuk pada pukul
                                        {{ $checkInAttendance->check_in }}.Semoga hari Anda produktif.
                                    </p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @if ($checkInAttendance)
                <div class="col-sm-12 col-xl-6">
                    <div class="card card-absolute">
                        @if (!$checkOutAttendance)
                            <div class="card-header bg-primary">
                                <a href="javascript:void(0)" id="attendance-btn">
                                    <h5 class="txt-light">Hadir</h5>
                                </a>
                            </div>
                        @endif
                        <div class="card-body">
                            <div class="d-flex list-behavior-1 align-items-center">
                                @if ($checkOutAttendance)
                                    <div class="flex-shrink-0">
                                        <a
                                            href="{{ Storage::url("attendances/{$checkOutAttendance->attachments()->latest()->first()->formatted_attachment}") }}">
                                            <img class="tab-img img-fluid"
                                                src="{{ Storage::url("attendances/{$checkOutAttendance->attachments()->latest()->first()->formatted_attachment}") }}"
                                                alt="image">
                                        </a>
                                    </div>
                                @endif
                                @if (!$checkOutAttendance)
                                    <div class="flex-grow-1">
                                        <p class="mb-xl-0 mb-sm-4">
                                            Jangan lupa untuk melakukan absensi kehadiran pulang sebelum meninggalkan
                                            tempat kerja.
                                        </p>
                                    </div>
                                @else
                                    <div class="flex-grow-1">
                                        <p class="mb-xl-0 mb-sm-4">
                                            Terima kasih, Anda telah melakukan absensi kehadiran pulang pada pukul
                                            {{ $checkOutAttendance->check_out }}.Semoga istirahat Anda menyegarkan untuk
                                            hari berikutnya.
                                        </p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="display" id="datatable" data-ajax="{{ url(url()->current()) }}">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Tanggal</th>
                                        <th>Masuk</th>
                                        <th>Foto</th>
                                        <th>Pulang</th>
                                        <th>Foto</th>
                                        <th>Total Kerja</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('afterScripts')
    <script src="{{ asset('assets/admin/js/datatable/jquery.dataTables.min.js?ver=1.0.0') }}"></script>
    <script src="{{ asset('assets/admin/js/datatable/custom-table/attendance.js?ver=1.0.0') }}"></script>
    <script src="{{ asset('assets/admin/js/datatable/server-side.js?ver=1.0.0') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/id.min.js"></script>
    <script src="{{ asset('assets/admin/js/custom/attendance.js?ver=1.0.0') }}"></script>
@endsection