@extends('layouts.index')
@section('title')
Rekap Absensi
@endsection
@section('css')
<link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{{ asset('back') }}/extra-libs/prism/prism.css" />
@endsection
@section('content')
<div class="page-titles">
    <div class="row">
        <div class="col-lg-8 col-md-6 col-12 align-self-center">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 d-flex align-items-center">
                    <li class="breadcrumb-item">
                        <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Rekap Absensi
                    </li>
                </ol>
            </nav>
            <h1 class="mb-0 fw-bold"> Detail Rekap Absensi</h1>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================= -->
<!-- Container fluid  -->
<!-- ============================================================= -->
<div class="container-fluid">
    <!-- ============================================================= -->
    <!-- Start Page Content -->
    <!-- ============================================================= -->

    <div class="row">
        <div class="col-lg-4 col-xlg-3 col-md-5 match-row ">
            <div class="card">
                <div class="card-body">
                    <center class="mt-4">
                        @php
                            $path = asset('back/images/users/1.jpg');
                            if ($pegawai->foto != null) {
                                if (Storage::exists($pegawai->foto)) {
                                    $path = Storage::url($pegawai->foto);
                                } else {
                                    $path = asset($pegawai->foto);
                                }
                            }
                        @endphp
                        <img src="{{$path}}" class="user-photo" width="200" height="200" style="object-fit: cover;">
                        <h4 class="mt-2">{{$pegawai->nama_lengkap}}</h4>
                        <span class="badge rounded-pill font-weight-medium bg-light-success text-success">{{$pegawai->jabatan->nama}}</span>
                        <br>

                    </center>
                </div>
            </div>
        </div>
        <div class="col-lg-8 col-xlg-9 col-md-8 match-row ">
            <div class="row">
                <div class="row">
                    <div class="col-12 col-md-6 d-flex align-items-stretch">
                        <!-- earnings card -->
                        <div class="card bg-primary w-100">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-normal text-white">Masuk Telat</h4>
                                    <div class="ms-auto">
                                        <span class="
                                                btn btn-lg btn-info btn-circle
                                                d-flex
                                                align-items-center
                                                justify-content-center
                                                ">
                                            <i class="bi bi-box-arrow-in-right"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <h2 class="fs-8 text-white mb-0">{{$total_absen->masuk_telat ?: 0}}</h2>
                                    <span class="text-white op-5">Menit</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 d-flex align-items-stretch">
                        <!-- monthly sales card -->
                        <div class="card w-100">
                            <div class="card-body">
                                <div class="d-flex align-items-center">

                                    <h4 class="fw-normal mb-0 text-muted">
                                        Pulang Cepat</h4>
                                    <div class="ms-auto">
                                        <span class="
                                                btn btn-lg btn-warning btn-circle
                                                d-flex
                                                align-items-center
                                                justify-content-center
                                                ">
                                            <i class="bi bi-box-arrow-in-left"></i>
                                        </span>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <h2 class="fs-8 mb-0">{{$total_absen->pulang_cepat ?: 0}}</h2>
                                    <span class=" op-5">Menit</span>
                                </div>

                            </div>
                        </div>
                        <!-- chart -->

                    </div>
                </div>
                <div class="row">

                    <div class="col-md-12 col-lg-612 d-flex align-items-stretch">
                        <div class="card w-100 overflow-hidden">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <h4 class="mb-0">Presensi</h4>
                                </div>
                                <div class="d-flex align-items-center my-3">
                                    <div class="border-end pe-3">
                                        <h6 class="text-muted fw-normal">HADIR</h6>
                                        <b>{{$total_absen->hadir}}</b>
                                    </div>
                                    <div class="ms-3 border-end pe-3">
                                        <h6 class="text-muted fw-normal">TAP</h6>
                                        <b>{{$total_absen->tap}}</b>
                                    </div>
                                    <div class="ms-3 border-end pe-3">
                                        <h6 class="text-muted fw-normal">TK</h6>
                                        <b>{{$total_absen->tanpa_keterangan}}</b>
                                    </div>
                                    @foreach ($ref_absen as $item)
                                    <div class="ms-3 border-end pe-3">
                                        <h6 class="text-muted fw-normal">{{strtoupper($item->slug)}}</h6>
                                        @php
                                            $slugIndex = $item->slug
                                        @endphp
                                        <b>{{$total_absen->$slugIndex}}</b>
                                    </div>
                                    @endforeach
                                </div>

                            </div>
                            <div class="progress">
                                <div class="
                      progress-bar progress-bar-striped
                      bg-primary
                      progress-bar-animated
                    " style="width: 60%; height: 6px" role="progressbar">
                                    <span class="sr-only">60% Complete</span>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>


            </div>


        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                    <table class="table">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Tanggal</th>
                                        <th>Shift</th>
                                        <th>Jam Masuk</th>
                                        <th>Jam Pulang</th>
                                        <th>Masuk Telat</th>
                                        <th>Pulang Cepat</th>
                                        <th>Opsi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $cek = [];
                                    @endphp
                                    @foreach ($jadwal as $item)
                                        <tr id="list_{{$item->tanggal}}">
                                            <td>{{$loop->iteration}}</td>
                                            <td>{{date("d M Y", strtotime($item->tanggal))}}</td>
                                            <td>{{$item->ref_shift->nama}}</td>
                                            @if ($item->pengajuan_absen)
                                                @php
                                                    $cek[$item->pengajuan_absen->id] = isset($cek[$item->pengajuan_absen->id]) ?: 0;
                                                @endphp
                                                <td colspan="4" class="bg-light-success text-success">{{$item->pengajuan_absen->absen->nama}}</td>
                                                @if ($cek[$item->pengajuan_absen->id] == 0)
                                                    @php
                                                        $cek[$item->pengajuan_absen->id] = 1;
                                                    @endphp
                                                    <td class="bg-light-success">
                                                        <a href="javascript:void(0)" class="btn btn-outline-danger btn-sm" id="btn-add-contact" data-id-pengajuan="{{$item->pengajuan_absen->id}}"
                                                            onclick="batalkanPengajuan(this)">Batalkan</a>
                                                    </td>
                                                @else 
                                                    <td class="bg-light-success text-success"></td>
                                                @endif
                                            @elseif ($item->koreksi)
                                                <td><i>Koreksi</i></td>
                                                <td colspan="1">
                                                    <b>Status Kehadiran :</b><br>
                                                    {{$item->koreksi->ref_absen->nama}}
                                                </td>
                                                <td colspan="1">
                                                    <b>Alasan :</b><br>
                                                    {{$item->koreksi->alasan ?: '-'}}
                                                </td>
                                                <td colspan="1">
                                                    @php
                                                    $lampiran = '-';
                                                    if($item->koreksi->lampiran){
                                                        if (Storage::exists($item->koreksi->lampiran)) {
                                                            $lampiran = '<a href="'.Storage::url($item->koreksi->lampiran).'" download><i class="fa fa-download"></i> Download Lampiran</a>';
                                                        }
                                                    }
                                                    echo $lampiran;
                                                    @endphp
                                                </td>
                                            @elseif ($item->absen)
                                                <td>{{$item->absen->jam_masuk ?: null}}</td>
                                                <td>{{$item->absen->jam_pulang}}</td>
                                                <td>{{convert_minute($item->absen->masuk_telat)}}</td>
                                                <td>{{convert_minute($item->absen->pulang_cepat)}}</td>
                                            @else
                                                <td colspan="5" class="bg-light-danger text-danger">Tanpa Keterangan</td>
                                            @endif
                                            <td>
                                                @if ($item->absen)
                                                    @php
                                                        $ref_absensi = "";
                                                        if($item->koreksi){
                                                            $ref_absensi = $item->koreksi->id_ref_absensi;
                                                        }
                                                    @endphp
                                                <a href="javascript:void(0)" id="btn-add-contact" class="btn btn-outline-info btn-sm"
                                                    onclick="detailAbsen({{$item->absen->id}})">Detail</a>
                                                <a href="javascript:void(0)" id="btn-add-contact" class="btn btn-outline-warning btn-sm" data-tanggal="{{$item->tanggal}}" data-absen="{{$item->absen->id}}" data-ref="{{$ref_absensi}}"
                                                    onclick="koreksiAbsen(this)">Koreksi</a>
                                                @endif
                                                @if ($item->koreksi)
                                                    <a href="javascript:void(0)" id="btn-add-contact" data-alasan="{{$item->koreksi->alasan}}" class="btn btn-outline-warning btn-sm" data-tanggal="{{$item->koreksi->absen->tanggal}}" 
                                                        data-absen="{{$item->koreksi->id_absen}}" data-ref="{{$item->koreksi->id_ref_absensi}}"
                                                    onclick="koreksiAbsen(this)">Koreksi</a>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="offcanvas offcanvas-end" tabindex="-1" id="koreksiAbsen" aria-labelledby="offcanvasRightLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                    Koreksi Absen
                </h5>
                <hr>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div>
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-subtitle mb-3 border-bottom pb-3">
                                silakan ubah sesuai koreksi
                            </h4>
                            <form class="form" id="koreksi" enctype="multipart/form-data">
                                <input type="hidden" name="absen" id="absen_koreksi">
                                <div class="mb-1 row border-top">
                                <div class="col-md-12 mb-3">
                                        <label for="example-text-input" class="col-form-label text-center text-primary">
                                            <h5>Tanggal</h5>
                                        </label>
                                        <input type="date" name="tanggal" id="tanggal_koreksi" class="form-control" readonly>
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <label for="example-text-input" class="col-form-label text-center text-primary">
                                            <h5>Status Absensi</h5>
                                        </label>
                                        <select class="form-select" name="id_ref_absensi" id="id_ref_absensi_koreksi">
                                            @foreach ($status_absensi as $item)
                                                <option value="{{$item->id}}">{{$item->nama}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <label for="example-text-input" class="col-form-label text-center text-primary">
                                            <h5>Alasan Koreksi</h5>
                                        </label>
                                        <textarea class="form-control" name="alasan" id="alasan_koreksi"></textarea>
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <label for="example-text-input" class="col-form-label text-center text-primary">
                                            <h5>Lampiran</h5>
                                        </label>
                                        <input type="file" class="form-control" name="lampiran" id="lampiran_koreksi">
                                    </div>
                                </div>
                                <!-- Koreksi end -->
                                <div class="form-actions">
                                    <div class="card-body border-top">
                                        <button type="button" class="
                                    btn btn-outline-secondary
                                    rounded-pill
                                    px-4
                                    ms-2
                                  " class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
                                            Batal
                                        </button>
                                        <button type="submit" class="btn btn-primary rounded-pill px-4">
                                            <div class="d-flex align-items-center">
                                                Simpan
                                            </div>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="offcanvas offcanvas-end" tabindex="-1" id="detailAbsen" aria-labelledby="offcanvasRightLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                    Detail Absen
                </h5>
                <hr>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div>
                    <div class="card">
                        <div class="card-body">
                            {{-- <h4 class="card-subtitle mb-3 border-bottom pb-3">
                            </h4> --}}
                                <div class="mb-1 row border-top">
                                <div class="col-md-12 mb-3">
                                    <label for="" for="example-text-input" class="col-form-label text-center text-primary">
                                        <h5>Waktu Kerja</h5>
                                    </label>
                                    <p><span id="waktu_kerja_detail"></span></p>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <label for="example-text-input" class="col-form-label text-center text-primary">
                                                <h5>Foto Masuk</h5>
                                                <img width="80" id="foto_masuk_detail" height="100" src="https://images.unsplash.com/photo-1518671645931-e1d946a64b17?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80" style="" alt="">
                                            </label>
                                        </div>
                                        <div class="col-md-5">
                                            <label for="example-text-input" class="col-form-label text-center text-primary">
                                                <h5>Foto Keluar</h5>
                                                <img width="80" id="foto_pulang_detail" height="100" src="https://images.unsplash.com/photo-1557002665-c552e1832483?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" style="" alt="">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="example-text-input" class="col-form-label text-center text-primary">
                                        <h5>Lokasi Masuk</h5>
                                        <div id="lokasi_masuk">
                                            <iframe 
                                                width="100%" 
                                                height="170" 
                                                frameborder="0" 
                                                scrolling="no" 
                                                marginheight="0" 
                                                marginwidth="0" 
                                                src="#"
                                                >
                                            </iframe>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="example-text-input" class="col-form-label text-center text-primary">
                                        <h5>Lokasi Pulang</h5>
                                        <div id="lokasi_pulang">
                                            <iframe 
                                                width="100%" 
                                                height="170" 
                                                frameborder="0" 
                                                scrolling="no" 
                                                marginheight="0" 
                                                marginwidth="0" 
                                                src="#"
                                                >
                                            </iframe>
                                        </div>
                                    </label>
                                </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================= -->
    <!-- End PAge Content -->
    <!-- ============================================================= -->
</div>


<div class="offcanvas offcanvas-end" tabindex="-1" id="koreksiAbsen" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">
            Koreksi Absen
        </h5>
        <hr>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div>

            <div class="card">

                <div class="card-body">

                    <h4 class="card-subtitle mb-3 border-bottom pb-3">
                        silakan ubah sesuai koreksi
                    </h4>
                    <form class="form">

                        <!-- Koreksi start -->
                        <div class="mb-1 row border-top">

                        <div class="col-md-12 mb-3">
                                <label for="example-text-input" class="col-form-label text-center text-primary">
                                    <h5>Tanggal</h5>
                                </label>
                                <input type="date" class="form-control">
                            </div>


                            <div class="col-md-12 mb-3">
                                <label for="example-text-input" class="col-form-label text-center text-primary">
                                    <h5>Status Absensi</h5>
                                </label>
                                <select class="form-select " style="width: 320px;">
                                    <option value="">Hadir</option>
                                    <option value="">Cuti</option>
                                    <option value="">Tidak Absen Pulang</option>
                                    <option value="">Sakit</option>
                                    <option value="">Dinas Dalam</option>
                                    <option value="">Dinas Luar</option>
                                </select>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="example-text-input" class="col-form-label text-center text-primary">
                                    <h5>Alasan Koreksi</h5>
                                </label>
                                <textarea class="form-control"></textarea>
                            </div>


                            <div class="col-md-12 mb-3">
                                <label for="example-text-input" class="col-form-label text-center text-primary">
                                    <h5>Lampiran</h5>
                                </label>
                                <input type="file" class="form-control">
                            </div>



                           
                        </div>
                        <!-- Koreksi end -->

                        <div class="form-actions">
                            <div class="card-body border-top">
                                <button type="button" class="
                            btn btn-outline-secondary
                            rounded-pill
                            px-4
                            ms-2
                          " class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
                                    Batal
                                </button>

                                <button type="submit" class="btn btn-primary rounded-pill px-4">
                                    <div class="d-flex align-items-center">

                                        Simpan
                                    </div>
                                </button>

                            </div>
                        </div>


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



    </div>
</div>



@endsection
@section('js')
<!--This page plugins -->
<script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>

<script src="{{ asset('back') }}/assets/extra-libs/prism/prism.js"></script>

<script>

        var offCanvasKoreksiAbsen = document.getElementById("koreksiAbsen");
        var offCanvasKoreksi = new bootstrap.Offcanvas(offCanvasKoreksiAbsen, {
            backdrop: true
        });

        function koreksiAbsen(attr) {

            var tanggal = attr.getAttribute('data-tanggal');
            var absen = attr.getAttribute('data-absen');
            var ref = attr.getAttribute('data-ref');
            var alasan = attr.getAttribute('data-alasan');

            $('#tanggal_koreksi').val(tanggal);
            $('#absen_koreksi').val(absen);
            $('#alasan_koreksi').val(alasan);
            $('#id_ref_absensi_koreksi').val(ref);

            offCanvasKoreksi.show();
        }

        var offCanvasDetailAbsen = document.getElementById("detailAbsen");
        var offCanvasDetail = new bootstrap.Offcanvas(offCanvasDetailAbsen, {
            backdrop: true
        });

        function detailAbsen(id) {

            fetch('{{url("rekap-absensi/detail-absen")}}/'+id)
            .then(response => response.json())
            .then(res => {

                var waktu_kerja = res.data.waktu_kerja;
                var foto_masuk = res.data.foto_masuk;
                var foto_pulang = res.data.foto_pulang;
                var latitude_masuk = res.data.latitude_masuk;
                var longitude_masuk = res.data.longitude_masuk;
                var lokasi_masuk = 'https://maps.google.com/maps?q='+latitude_masuk+','+longitude_masuk+'&hl=id&z=14&amp;output=embed';
                // var lokasi_masuk = 'https://maps.google.com/maps?q=-6.8571872,107.9207505&hl=id&z=14&zoom=13&amp;output=embed';
                var latitude_pulang = res.data.latitude_pulang;
                var longitude_pulang = res.data.longitude_pulang;

                $('#waktu_kerja_detail').html(waktu_kerja);
                $('#foto_masuk_detail').attr('src', foto_masuk);
                if (longitude_pulang === null || longitude_pulang === undefined) {
                    $('#foto_pulang_detail').hide();
                    $('#lokasi_pulang').hide();
                }else{
                    var lokasi_pulang = 'https://maps.google.com/maps?q='+latitude_pulang+','+longitude_pulang+'&hl=id&z=14&amp;output=embed';
                    $('#foto_pulang_detail').attr('src', foto_pulang);
                    var lokasi_pulang_html = '<iframe width="100%" height="170" frameborder="0" scrolling="no"';
                    lokasi_pulang_html += 'marginheight="0" marginwidth="0" src="'+lokasi_pulang+'"></iframe>';
                    $('#lokasi_pulang').html(lokasi_pulang_html);
                }
                var lokasi_masuk_html = '<iframe width="100%" height="170" frameborder="0" scrolling="no"';
                lokasi_masuk_html += 'marginheight="0" marginwidth="0" src="'+lokasi_masuk+'"></iframe>';
                $('#lokasi_masuk').html(lokasi_masuk_html);

                console.log('Success', data);
            }).catch((error) => {
                console.error('Error', error);
            });

            offCanvasDetail.show();
        }

        var koreksi = document.getElementById('koreksi');

        koreksi.addEventListener('submit', async (e) => {
            e.preventDefault();

            var tanggal = koreksi.tanggal.value;
            var absen = koreksi.absen.value;
            var id_ref_absensi = koreksi.id_ref_absensi.value;
            var alasan = koreksi.alasan.value;
            var lampiran = $('#lampiran_koreksi')[0].files;
            var _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("id_absen", absen);
            formData.append("tanggal", tanggal);
            formData.append("id_ref_absensi", id_ref_absensi);
            formData.append("alasan", alasan);
            formData.append("lampiran", lampiran[0]);

            try {
                let response = await fetch("{{ route('absen-koreksi.store') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_tanggal = datasend.data.tanggal;
                    var res_tanggal_format = datasend.data.tanggal_format;
                    var res_tanggal_format_human = datasend.data.tanggal_format_human;
                    var res_id_absen = datasend.data.id_absen;
                    var res_id_ref_absensi = datasend.data.id_ref_absensi;
                    var res_alasan = datasend.data.alasan;
                    var res_ref_absensi = datasend.data.ref_absensi;
                    var res_shift = datasend.data.shift;
                    var res_lampiran = datasend.data.lampiran;
                    var lampiran = '-';

                    if (res_lampiran != '/storage/') {
                        lampiran = '<a href="'+res_lampiran+'" download><i class="fa fa-download"></i> Download Lampiran</a>';
                    }

                    if (res_alasan == null) {
                        res_alasan = '-';
                    }

                    var row = '<tr id="list_'+res_tanggal_format+'"><td>#</td><td>'+res_tanggal_format_human+'</td><td>'+res_shift+'</td><td><i>Koreksi</i></td>';
                    row += '<td colspan="2"><b>Status Kehadiran :</b><br>'+res_ref_absensi+'</td><td colspan="2">';
                    row += '<b>Alasan :</b><br>'+res_alasan+'</td><td colspan="4">'+lampiran+'<td><a href="javascript:void(0)"';
                    row += 'id="btn-add-contact" class="btn btn-outline-warning" data-tanggal="'+res_tanggal_format+'"'; 
                    row += 'data-absen="'+res_id_absen+'" data-alasan="'+res_alasan+'" data-ref="'+res_id_ref_absensi+'" onclick="koreksiAbsen(this)">Koreksi</a></td></tr>';

                    $('#tanggal_koreksi').val("");
                    $('#id_ref_absensi_koreksi').val("");
                    $('#alasan_koreksi').val("");
                    $('#lampiran_koreksi').val("");
                    $('#list_' + res_tanggal_format).replaceWith(row);
                    offCanvasKoreksi.hide();
                    Swal.fire('Data berhasil dikoreksi', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        function batalkanPengajuan(attr){

            var id = attr.getAttribute('data-id-pengajuan');
            var _token = "{{ csrf_token() }}";

            Swal.fire({
                title: 'Masukan alasan pembatalan',
                input: 'text',
                inputAttributes: {
                    autocapitalize: 'off'
                },
                showCancelButton: true,
                confirmButtonText: 'Submit',
                showLoaderOnConfirm: true,
                preConfirm: (alasan) => {

                    var alasan_pembatalan = alasan;

                    let formData = new FormData();
                    formData.append("id", id);
                    formData.append("alasan_pembatalan", alasan_pembatalan);

                    return fetch("{{ route('pengajuan-absen.batal') }}", {
                        method: "POST",
                        body: formData,
                        headers: {
                            "X-CSRF-TOKEN": _token
                        }
                    })
                    .then(response => {
                        if (!response.ok) {
                        throw new Error(response.statusText)
                        }
                        return response.json()
                    })
                    .catch(error => {
                        Swal.showValidationMessage(
                        `Request failed: ${error}`
                        )
                    })
                },
                allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire('Pengajuan berhasil dibatalkan', '', 'success')
                }
            })
        }

</script>

@endsection