@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" />
<link
     rel="stylesheet"
     type="text/css"
     href="{{asset('back')}}/libs/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"
   />
   <link rel="stylesheet" href="{{asset('back/css/toggleswitch.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">
                        Attendance Summary Detail
                    </li>
                </ol>
            </nav>
            <h1 class="mb-0 fw-bold"> Attendance Summary Detail</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/3.jpg');
                            if ($pegawai) {
                                if ($pegawai->user) {
                                    if (Storage::exists($pegawai->user->photos)) {
                                        $path = Storage::url($pegawai->user->photos);
                                    }else{
                                        $path = $pegawai->foto_storage;
                                    }
                                }
                            }
                        @endphp
                        <img src="{{$path}}" class="user-photo" width="200" height="200" style="object-fit: cover;">
                        <h4 class="mt-2">{{$pegawai->user ? $pegawai->user->name : $pegawai->nama_lengkap}}</h4>
                        <span class="badge rounded-pill font-weight-medium bg-light-success text-success">{{$pegawai->jabatan ? $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 justify-content-start">
                                    <h4 class="mb-0">Attendance</h4>
                                </div>
                                <div class="d-flex justify-content-start my-3">
                                    <div class="border-end pe-3">
                                        <h6 class="text-muted fw-normal">Present</h6>
                                        <b>{{ $absen ? $total_absen->hadir : 0}}</b>
                                    </div>
                                    <div class="ms-3 border-end pe-3">
                                        <h6 class="text-muted fw-normal">No Checking Out</h6>
                                        <b>{{$absen ? $total_absen->tap : 0}}</b>
                                    </div>
                                    <div class="ms-3 border-end pe-3">
                                        <h6 class="text-muted fw-normal">Without Explanation</h6>
                                        <b>{{$absen ? $total_absen->tanpa_keterangan : 0}}</b>
                                    </div>
                                    {{-- <div class="ms-3 border-end pe-3">
                                        <h6 class="text-muted fw-normal">Leave</h6>
                                        <b>0</b>
                                    </div> --}}
                                </div>
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th colspan="{{count($ref_absen)}}" class="text-center">Leave</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="">
                                                @foreach ($ref_absen as $item)
                                                    <td>{{$item->nama}}</td>
                                                @endforeach
                                            </tr>
                                            <tr class="">
                                                @foreach ($ref_absen as $item)
                                                @php
                                                    $slug = $item->slug;
                                                @endphp
                                                    <td>{{$absen ? $total_absen->$slug : 0}}</td>
                                                @endforeach
                                            </tr>
                                        </tbody>
                                    </table>
                                </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">
                    <div class="d-flex my-3">
                        <form class="me-3" id="typeForm">
                            <div class="d-flex justify-content-start">
                                <select class="form-select me-3" name="month" onchange="submitForm()">
                                    <option value="">-- Select --</option>
                                    @php
                                        $arrMonth = ['January', 'February', 'March', 'April', 'Mei', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
                                    @endphp
                                    @foreach ($arrMonth as $item)
                                        <option value="{{ $loop->iteration }}"
                                            {{ $month == $loop->iteration ? 'selected' : null }}>
                                            {{ $item }}</option>
                                    @endforeach
                                </select>
                                <select class="form-select me-3" name="year" onchange="submitForm()">
                                    <option value="">-- Select --</option>
                                    @for ($i = 2022; $i <= date('Y'); $i++)
                                        <option value="{{ $i }}"
                                            {{ $year == $i ? 'selected' : null }}>
                                            {{ $i }}</option>
                                    @endfor
                                </select>
                                <select name="type" class="form-select me-3" id="" onchange="submitForm()">
                                    <option value="">-- All Type --</option>
                                    <option value="weekend" {{$type == 'weekend' ? 'selected' : null}}>Weekend</option>
                                    <option value="weekday" {{$type == 'weekday' ? 'selected' : null}}>Weekday</option>
                                </select>
                            </div>
                        </form>
                        <div class="d-flex justify-content-end ms-auto">
                            <a href="{{route('rekap-absensi.export-detail', ['id' => $pegawai->id, 'month' => $month, 'year' => $year, 'type' => $type])}}" class="btn btn-outline-success"><i class="fa fa-file-excel"></i> Export Excel</a>
                        </div>
                    </div>
                    <table class="table">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Date</th>
                                        <th>Start Work Time</th>
                                        <th>End Work Time</th>
                                        <th>Total Working Time</th>
                                        <th>Option</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $cek = [];
                                    @endphp
                                    @if ($absen)
                                        @foreach ($jadwal as $item)
                                            <tr id="list_{{$item['tanggal']}}">
                                                <td>{{$loop->iteration}}</td>
                                                <td>{{date("l, d M Y", strtotime($item['tanggal']))}}</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)">Cancel</a>
                                                        </td>
                                                    @else 
                                                        <td class="bg-light-success text-success"></td>
                                                    @endif --}}
                                                @elseif (isset($item['koreksi']))
                                                    <td><i>Correct</i></td>
                                                    <td colspan="1">
                                                        <b>Attendance Status :</b><br>
                                                        {{$item['koreksi']->ref_absen->nama}}
                                                    </td>
                                                    <td colspan="1">
                                                        <b>Reason Correction :</b><br>
                                                        {{$item['koreksi']->alasan ?: '-'}}
                                                        <br>
                                                        <b>Attachment :</b><br>
                                                        @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 (isset($item['absen']))
                                                    @php
                                                    // dd($item['absen']);
                                                        $is_correction = false;
                                                        $addedClass = null;
                                                        if($item['absen']->is_correction == '1'){
                                                            $is_correction = true;
                                                            $addedClass = 'class="text-white bg bg-warning"';
                                                        }
                                                    @endphp
                                                    <td {!!$is_correction ? $addedClass : null!!}>{{$item['absen']->jam_masuk ?: '-'}}</td>
                                                    <td {!!$is_correction ? $addedClass : null!!}>{{$item['absen']->jam_pulang ?: '-'}}</td>
                                                    @php
                                                        $pause_time = null;
                                                        if ($item['absen']->total_pause_time) {
                                                            $pause_time = $item['absen']->total_pause_time;
                                                        }
                                                    @endphp
                                                    <td 
                                                        {!!$is_correction ? $addedClass : null!!}>{{$item['absen']->waktu_kerja ? convert_minute($item['absen']->waktu_kerja - $pause_time) : '-'}}
                                                        <br>
                                                        {{$item['absen']->total_pause_time ? convert_minute($item['absen']->total_pause_time).' (Pause)' : null;}}
                                                    </td>
                                                    <td>
                                                            @php
                                                                $ref_absensi = "";
                                                                if(isset($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> 
                                                            @hasanyrole('admin|hr')
                                                            <a href="javascript:void(0)" id="btn-add-contact" class="btn btn-outline-warning btn-sm" 
                                                                onclick="koreksiAbsen('{{$item['tanggal']}}')">Correction</a>
                                                            @endhasanyrole
                                                    </td>
                                                @else
                                                    <td colspan="3" class="bg-light-danger text-danger">Without Explanation</td>
                                                    <td class="bg-light-danger text-danger"> 
                                                    @hasanyrole('admin|hr')
                                                        <a href="javascript:void(0)" id="btn-add-contact" class="btn btn-outline-warning btn-sm" 
                                                        onclick="koreksiAbsen('{{$item['tanggal']}}')">Correction</a>
                                                        @endhasanyrole
                                                    </td>
                                                @endif
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="6">You are not present at all, there is no calculation yet</td>
                                        </tr>
                                    @endif
                                </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">
                    Attendance Correction
                </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">
                            <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">
                                        <label for="example-text-input" class="col-form-label text-center text-primary">
                                            Date <sup class="text-danger" title="Required">*</sup>
                                        </label>
                                        <input type="date" name="tanggal" id="tanggal_koreksi" class="form-control" readonly>
                                        <small class="text-danger" id="tanggal_validation"></small>
                                    </div>
                                    <div class="col-md-12">
                                        <label class="col-form-label text-center text-primary" for="">Start work Location <sup class="text-danger" title="Required">*</sup></label>
                                        <div class="toggleContainer">             
                                            <label class="toggleSwitch nolabel" onclick="">
                                              <input type="checkbox" name="is_the_office_masuk" />
                                              <a></a>
                                              <span>
                                                  <span class="left-span">In the Office</span>
                                                  <span class="right-span">Outside the Office</span>
                                              </span>											
                                          </label>
                                        </div> 
                                        <small class="text-danger" id="is_the_office_masuk_validation"></small>
                                    </div>
                                    <div class="col-md-12">
                                        <label class="col-form-label text-center text-primary" for="">Start work Time <sup class="text-danger" title="Required">*</sup></label>
                                        <input type="time" class="form-control" name="jam_masuk">
                                        <small class="text-danger" id="jam_masuk_validation"></small>
                                    </div>
                                    <div class="col-md-12">
                                        <label class="col-form-label text-center text-primary" for="">End work Location <sup class="text-danger" title="Required">*</sup></label>
                                        <div class="toggleContainer">             
                                            <label class="toggleSwitch nolabel" onclick="">
                                              <input type="checkbox" name="is_the_office_pulang" />
                                              <a></a>
                                              <span>
                                                  <span class="left-span">In the Office</span>
                                                  <span class="right-span">Outside the Office</span>
                                              </span>											
                                          </label>
                                        </div> 
                                        <small class="text-danger" id="is_the_office_pulang_validation"></small>
                                    </div>
                                    <div class="col-md-12">
                                        <label class="col-form-label text-center text-primary" for="">End work Time <sup class="text-danger" title="Required">*</sup></label>
                                        <input type="time" class="form-control" name="jam_pulang">
                                        <small class="text-danger" id="jam_pulang_validation"></small>
                                    </div>
                                    <div class="col-md-12 mt-3">
                                        <div class="form-check form-switch">
                                          <input class="form-check-input" type="checkbox" id="isPause" name="is_pause" onclick="togglePause()" />
                                          <label class="form-check-label" for="isPause">Have a pause time?</label>
                                        </div>
                                      </div>
                                      
                                      <div id="pauseRepeat" style="display: none">
                                            <div class="pause_section">
                                                <div class="form-group">
                                                    <label class="col-form-label text-center text-primary" for="">Start pause Time <sup class="text-danger" title="Required">*</sup></label>
                                                    <input type="time" class="form-control" name="pause[][start_pause][]">
                                                    <small class="text-danger" id="pause_start_pause_validation"></small>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-form-label text-center text-primary" for="">End pause Time <sup class="text-danger" title="Required">*</sup></label>
                                                    <input type="time" class="form-control" name="pause[][end_pause][]">
                                                    <small class="text-danger" id="pause_end_pause_validation"></small>
                                                </div>
                                                <div class="my-3">
                                                    <button
                                                    onclick="pause_repeat();"
                                                    class="
                                                        btn
                                                        rounded-pill
                                                        px-4
                                                        btn-light-success
                                                        text-success
                                                        font-weight-medium
                                                        waves-effect waves-light
                                                    "
                                                    type="button"
                                                    >
                                                    <i class="ri-add-circle-line fs-5"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div id="pause_time" class="my-4"></div>
                                      </div>
                                    <div class="col-md-12">
                                        <label for="example-text-input" class="col-form-label text-center text-primary">
                                            Reason <sup class="text-danger" title="Required">*</sup>
                                        </label>
                                        <textarea class="form-control" name="correction_reason" id="alasan_koreksi"></textarea>
                                        <small class="text-danger" id="correction_reason_validation"></small>
                                    </div>
                                    <div class="col-md-12">
                                        <label for="example-text-input" class="col-form-label text-center text-primary">
                                            Attachment
                                        </label>
                                        <input type="file" class="form-control" name="correction_attachment" id="lampiran_koreksi">
                                        <small class="text-danger" id="correction_attachment_validation"></small>
                                    </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">
                    Attendance Detail
                </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>Total Working Time</h5>
                                    </label>
                                    <p><span id="waktu_kerja_detail"></span></p>
                                </div>
                                <div class="col-md-12 mb-3" id="pause">
                                    <h5>History of Pause</h5>
                                    <table id="pauseBody">

                                    </table>
                                </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-primary">
                                                <h5>Does Start at the Office</h5>
                                                <span id="is_the_office_masuk"></span>
                                            </label>
                                        </div>
                                        <div class="col-md-5">
                                            <label for="example-text-input" class="col-form-label text-primary">
                                                <h5>Does End at the Office</h5>
                                                <span id="is_the_office_pulang"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3" id="remarksSection">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <label for="example-text-input" class="col-form-label text-secondary">
                                                <h5>Remarks Start</h5>
                                                <small id="catatan_masuk"></small>
                                            </label>
                                        </div>
                                        <div class="col-md-5">
                                            <label for="example-text-input" class="col-form-label text-secondary">
                                                <h5>Remarks End</h5>
                                                <small id="catatan_pulang"></small>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3" id="correctionSection">
                                    <div class="row">
                                        <label for="" class="col-form-label text-secondary">
                                            <h5>Correction Reason</h5>
                                        </label>
                                        <p id="correction_reason"></p>
                                    </div>
                                    <div class="row">
                                        <label for="" class="col-form-label text-secondary">
                                            <h5>Correction Attachment</h5>
                                        </label>
                                        <a href="#" id="correction_attachment" download>Download</a>
                                    </div>
                                    <div class="row" id="correction">
                                        <label for="" class="col-form-label text-secondary">
                                            <h5>Correction History</h5>
                                            <table id="correctionBody">
    
                                            </table>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3" id="picSection">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <label for="example-text-input" class="col-form-label text-center text-primary">
                                                <h5>Pic. Start</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>Pic. End</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" id="locationStartSection">
                                    <label for="example-text-input" class="col-form-label text-center text-primary">
                                        <h5>Location Start</h5>
                                        <div id="lokasi_masuk">
                                            <iframe 
                                                width="100%" 
                                                height="170" 
                                                frameborder="0" 
                                                scrolling="no" 
                                                marginheight="0" 
                                                marginwidth="0" 
                                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.7697955866242!2d106.81779401462978!3d-6.16157769553904!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f59c0d1defdf%3A0x1f79b103c6afe4cf!2sUID%20Learning%20Hub!5e0!3m2!1sen!2sid!4v1671615314771!5m2!1sen!2sid"
                                                >
                                            </iframe>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-md-12 mb-3" id="locationEndSection">
                                    <label for="example-text-input" class="col-form-label text-center text-primary">
                                        <h5>Location End</h5>
                                        <div id="lokasi_pulang">
                                            <iframe 
                                                width="100%" 
                                                height="170" 
                                                frameborder="0" 
                                                scrolling="no" 
                                                marginheight="0" 
                                                marginwidth="0" 
                                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.7697955866242!2d106.81779401462978!3d-6.16157769553904!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f59c0d1defdf%3A0x1f79b103c6afe4cf!2sUID%20Learning%20Hub!5e0!3m2!1sen!2sid!4v1671615314771!5m2!1sen!2sid"
                                                >
                                            </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">
            Attendance Correction
        </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"></div>
                    <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 src="{{asset('back')}}/libs/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
<script>

        function submitForm() {
            // Get the current query parameters as a string
            const queryParams = window.location.search;
            
            // Get the form data as a new FormData object
            const formData = new FormData(document.getElementById('typeForm'));
            
            // Append the current query parameters to the form data
            formData.append('query', queryParams);
            
            // Submit the form with the updated form data
            const form = document.getElementById('typeForm');
            form.submit();
        }

        function hideValidation() {
            const validation = document.querySelectorAll(`[id$="_validation"]`)
            for(var i = 0; i < validation.length; i++){
                
                validation[i].style.display = "none";
            }
        }

        $(
            ".bt-switch input[type='checkbox'], .bt-switch input[type='radio']"
        ).bootstrapSwitch();
        var radioswitch = (function () {
            var bt = function () {
            $(".radio-switch").on("switch-change", function () {
                $(".radio-switch").bootstrapSwitch("toggleRadioState");
            }),
                $(".radio-switch").on("switch-change", function () {
                $(".radio-switch").bootstrapSwitch(
                    "toggleRadioStateAllowUncheck"
                );
                }),
                $(".radio-switch").on("switch-change", function () {
                $(".radio-switch").bootstrapSwitch(
                    "toggleRadioStateAllowUncheck",
                    !1
                );
                });
            };
            return {
            init: function () {
                bt();
            },
            };
        })();
        $(document).ready(function () {
            radioswitch.init();
        });

        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 latitude_pulang = res.data.latitude_pulang;
                var longitude_pulang = res.data.longitude_pulang;
                var catatan_masuk = res.data.catatan_masuk;
                var catatan_pulang = res.data.catatan_pulang;
                var is_the_office_masuk = res.data.is_the_office_masuk;
                var is_the_office_pulang = res.data.is_the_office_pulang;
                var is_correction = res.data.is_correction;
                var correction_reason = res.data.correction_reason;
                var correction_attachment = res.data.correction_attachment_storage;
                var is_correction = res.data.is_correction;
                var pause = res.data.pause;
                var correction = res.data.correction;
                var pause_time = res.data.total_pause_time_cvt;

                if(is_correction == '1'){
                    $('#remarksSection').hide();
                    $('#correctionSection').show();
                    $('#correction_reason').html(correction_reason);
                    $('#correction_attachment').attr('href', correction_attachment);
                }else{
                    $('#remarksSection').show();
                    $('#correctionSection').hide();
                }

                if (is_the_office_masuk == '1') {
                    is_the_office_masuk = 'No'
                }else if (is_the_office_masuk == '0'){
                    is_the_office_masuk = 'Yes'
                }else{
                    is_the_office_masuk = 'Not yet'
                }

                $('#catatan_masuk').html(catatan_masuk);
                $('#is_the_office_masuk').html(is_the_office_masuk);

                if (is_the_office_pulang == 1) {
                    is_the_office_pulang = 'No'
                }else if (is_the_office_pulang == 0){
                    is_the_office_pulang = 'Yes'
                }else{
                    is_the_office_pulang = 'Not yet'
                }

                $('#catatan_pulang').html(catatan_pulang);
                $('#is_the_office_pulang').html(is_the_office_pulang);

                $('#waktu_kerja_detail').html(waktu_kerja);
                $('#foto_masuk_detail').attr('src', foto_masuk);
                if (longitude_masuk === null || longitude_masuk === undefined) {
                    $('#foto_masuk_detail').hide();
                    $('#lokasi_masuk').hide();
                }
                if (longitude_pulang === null || longitude_pulang === undefined) {
                    $('#foto_pulang_detail').hide();
                    $('#lokasi_pulang').hide();
                }else{
                    $('#foto_pulang_detail').show();
                    $('#lokasi_pulang').show();
                    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);

                if (pause) {
                    $('#pause').show();

                    let pauseArr = Object.entries(pause);
                    let pauseHtml = '';
                    if (pauseArr.length == 0) {
                        pauseHtml = 'Nothing';
                    } else {
                        pauseArr.forEach((e,i) => {
                            pauseHtml += `<tr>
                                            <td><li class="ml-5">${e[1].start_pause}</li></td>
                                            <td> - </td>
                                            <td>${e[1].end_pause??''}</td>
                                            <td>(${e[1].total_time??'counting...'})</td>
                                        </tr>`;
                        })
                        pauseHtml += `
                            <tr>
                                <td colspan="4">Total <b>${pause_time}</b></td>    
                            </tr>
                        `;
                    }
                    $('#pauseBody').html(pauseHtml);
                    
                }else{
                    ('#pause').hide();
                }

                if (correction) {
                    console.log(correction);
                    $('#correction').show();

                    let correctionArr = Object.entries(correction);
                    let correctionHtml = '';
                    if (correctionArr.length == 0) {
                        correctionHtml = 'Nothing';
                    } else {
                        correctionHtml += `<tr>
                                            <td class="ml-5">Start </td>
                                            <td></td>
                                            <td>End </td>
                                        </tr>`;
                        correctionArr.forEach((e,i) => {
                            correctionHtml += `<tr>
                                            <td class="ml-5">${e[1].jam_masuk}</td>
                                            <td> - </td>
                                            <td>${e[1].jam_pulang??''}</td>
                                        </tr>`;
                        })
                    }
                    $('#correctionBody').html(correctionHtml);
                    
                }else{
                    ('#correction').hide();
                }

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

            offCanvasDetail.show();
        } 

        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)
                        }
                        setInterval(() => {
                            location.reload();
                        }, 1000);
                        return response.json()
                    })
                    .catch(error => {
                        Swal.showValidationMessage(
                        `Request failed: ${error}`
                        )
                    })
                },
                allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire('Pengajuan berhasil dibatalkan', '', 'success')
                }
            })
        }

        let id_pegawai = {{$pegawai->id}};
        var offCanvasKoreksiAbsen = document.getElementById("koreksiAbsen");
        var offCanvasKoreksi = new bootstrap.Offcanvas(offCanvasKoreksiAbsen, {
            backdrop: true
        });

        function koreksiAbsen(tanggal) {

            $('#tanggal_koreksi').val(tanggal);

            offCanvasKoreksi.show();
        }

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

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

            let is_the_office_masuk = koreksi.is_the_office_masuk.checked;
            if (is_the_office_masuk) {
              is_the_office_masuk = 1;
            }else{
              is_the_office_masuk = 0;
            }

            let is_the_office_pulang = koreksi.is_the_office_pulang.checked;
            if (is_the_office_pulang) {
              is_the_office_pulang = 1;
            }else{
              is_the_office_pulang = 0;
            }
            
            let is_pause = koreksi.is_pause.checked;
            let pause_data = [];

            if (is_pause) {
                let startInputs = document.querySelectorAll('input[name="pause[][start_pause][]"]');
                let endInputs = document.querySelectorAll('input[name="pause[][end_pause][]"]');

                for (let i = 0; i < startInputs.length; i++) {
                    pause_data.push({
                    start_pause: startInputs[i].value,
                    end_pause: endInputs[i].value
                    });
                }
            }

            var tanggal = koreksi.tanggal.value;
            var jam_masuk = koreksi.jam_masuk.value;
            var jam_pulang = koreksi.jam_pulang.value;
            var correction_reason = koreksi.correction_reason.value;
            var correction_attachment = koreksi.correction_attachment.files[0];
            var _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("id_pegawai", id_pegawai);
            formData.append("tanggal", tanggal);
            formData.append("is_the_office_masuk", is_the_office_masuk);
            formData.append("is_the_office_pulang", is_the_office_pulang);
            formData.append("jam_masuk", jam_masuk);
            formData.append("jam_pulang", jam_pulang);
            formData.append("correction_reason", correction_reason);
            formData.append("correction_attachment", correction_attachment??'');
            if (is_pause) {
                if (pause_data.length > 0) {
                    formData.append("pause_data", pause_data?JSON.stringify(pause_data):'');
                }
            }

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

                    hideValidation()
                    Swal.fire('Attendance has been corrected', '', 'success')
                    setTimeout(() => {
                        location.reload()
                    }, 1000);
                }else if(datasend.status == false){
                    if (datasend.data) {
                        var error = Object.entries(datasend.data);
                        hideValidation()
                        error.forEach((key,value) => {
                            $('#'+key[0]+'_validation').show();
                            $('#'+key[0]+'_validation').html(key[1]);
                        });
                    }
                }

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

            return false;
        });

        function togglePause() {
            
            let isPause = document.getElementById('isPause');
            let pauseRepeat = document.getElementById('pauseRepeat')

            if (isPause.checked) {
                pauseRepeat.style.display = 'block';
            }else{
                pauseRepeat.style.display = 'none';
            }

        }

        var room = 1;

        function pause_repeat() {
        room++;
        var objTo = document.getElementById("pause_time");
        var divtest = document.createElement("div");
        divtest.setAttribute("class", "mb-3 removeclass" + room);
        var rdiv = "removeclass" + room;
        divtest.innerHTML =
            `<div class="form-group">
                <label class="col-form-label text-center text-primary" for="">Start pause Time <sup class="text-danger" title="Required">*</sup></label>
                <input type="time" class="form-control" name="pause[][start_pause][]">
                <small class="text-danger" id="pause_start_pause_validation"></small>
            </div>
            <div class="form-group">
                <label class="col-form-label text-center text-primary" for="">End pause Time <sup class="text-danger" title="Required">*</sup></label>
                <input type="time" class="form-control" name="pause[][end_pause][]">
                <small class="text-danger" id="pause_end_pause_validation"></small>
            </div>
            <div class="my-3">
                <button class="btn rounded-pill px-4 btn-light-danger text-danger font-weight-medium waves-effect waves-light" type="button" 
                onclick="remove_pause_repeat('${room}');"
                
                >
                <i class="ri-delete-bin-line fs-5"></i> </button>
            </div>`;

            objTo.appendChild(divtest);
            feather.replace();
        }

        function remove_pause_repeat(rid) {
            $(".removeclass" + rid).remove();
        }
</script>

@endsection