@extends('layouts.index')
@section('title')
    Leave Request
@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 href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .l2 {
            padding-left: 1em;
        }

        .l3 {
            padding-left: 2em;
        }
        label.error {
            color: #F94687;
            font-size: 13px;
            font-size: .875rem;
            font-weight: 400;
            line-height: 1.5;
            margin-top: 5px;
            padding: 0;
        }
    
        input.error {
            color: #F94687;
            border: 1px solid #F94687;
        }

        select.error {
            color: #F94687;
            border: 1px solid #F94687;
        }

        textarea.error {
            color: #F94687;
            border: 1px solid #F94687;
        }
    </style>
@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">
                            Leave Request
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Leave Request</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-md-12">
                <div class="card">
                    <div class="card-body">
                        <form method="GET">
                            <div class="row">
                                @hasanyrole('admin')
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label>Division / Departement</label>
                                        <select class="select1 form-control custom-select required" style="width: 100%"
                                            name="id_unit_kerja">
                                            <option value="">-- Select --</option>
                                            @foreach ($ref_unit_kerja as $item)
                                                <option class="l{{ $item->level }}" value="{{ $item->id }}"
                                                    {{ isset($_GET['id_unit_kerja']) ? ($_GET['id_unit_kerja'] == $item->id ? 'selected' : null) : null }}>
                                                    {{ $item->nama }}</option>
                                                @if ($item->children)
                                                    @foreach ($item->children as $item)
                                                        <option class="l{{ $item->level }}" value="{{ $item->id }}"
                                                            {{ isset($_GET['id_unit_kerja']) ? ($_GET['id_unit_kerja'] == $item->id ? 'selected' : null) : null }}>
                                                            {{ $item->nama }}</option>
                                                        @if ($item->children)
                                                            @foreach ($item->children as $item)
                                                                <option class="l{{ $item->level }}"
                                                                    value="{{ $item->id }}"
                                                                    {{ isset($_GET['id_unit_kerja']) ? ($_GET['id_unit_kerja'] == $item->id ? 'selected' : null) : null }}>
                                                                    {{ $item->nama }}
                                                                </option>
                                                            @endforeach
                                                        @endif
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                 @endhasanyrole
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label>Month</label>
                                        <select class="form-select" name="month">
                                            <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>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label>Year</label>
                                        <select class="form-select" name="year">
                                            <option value="">-- Select --</option>
                                            @for ($i = 2022; $i <= date('Y'); $i++)
                                                <option value="{{ $i }}"
                                                    {{ $year == $i ? 'selected' : null }}>
                                                    {{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label for="">Leave Type</label>
                                        <select name="id_ref_absensi" class="form-select" id="">
                                            <option value="">-- Select --</option>
                                            @foreach ($ref_absensi as $item)
                                                <option value="{{$item->id}}" {{ $id_ref_absensi == $item->id ? 'selected' : null }}>{{$item->nama}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3" style="margin-top: 25px;">
                                        <button class="btn btn-outline-primary d-grid gap-2"> Filter </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <section id="tabs">
            <div class="card">
                <div class="card-body">
                    <!-- Nav tabs -->
                    <div class="d-flex justify-content-between">
                        <h4>Leave Request</h4>
                        <button class="btn btn-primary" type="button" onclick="createLeaveRequest()">+ Create Leave Request</button>
                    </div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#menunggu" role="tab">
                                <span>In Process <span
                                        class="badge ms-auto bg-warning" style="background-color: #D4A216 !important;">{{ $periksa->count() }}</span></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#diverifikasi" role="tab">
                                <span>Approved <span
                                        class="badge ms-auto bg-primary">{{ $verif->count() }}</span></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#ditolak" role="tab">
                                <span>Rejected <span class="badge ms-auto bg-danger" style="background-color: #961331 !important;">{{ $tolak->count() }}</span> </span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#batal" role="tab">
                                <span>Cancelled <span class="badge ms-auto bg-danger" style="background-color: #ABB1BB !important;">{{ $batal->count() }}</span> </span>
                            </a>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane p-3 mt-3 active" id="menunggu" role="tabpanel">
                            <div class="table-responsive">
                                <table
                                    id="menunggu-table"
                                    class="
                                        table
                                        mb-0
                                        text-nowrap
                                        varient-table
                                        align-middle
                                        fs-3
                                    ">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="text-muted">Name</th>
                                            <th scope="col" class="text-muted">Leave Request</th>
                                            <th scope="col" class="text-muted">Date of Leave Request</th>
                                            <th scope="col" class="text-muted text-end">
                                                Status
                                            </th>
                                            <th scope="col" class="text-muted text-end">
                                                Option
                                            </th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($periksa as $item)
                                            {{-- @hasanyrole('user')
                                                @if($item->pegawai->id_user != Auth::user()->id)
                                                    @break
                                                @endif
                                            @endhasanyrole --}}
                                            <tr>
                                                <td class="px-0">
                                                    <div class="d-flex align-items-center">
                                                        @php
                                                            $path = asset('back/images/users/1.jpg');
                                                            if ($item->pegawai->foto != null) {
                                                                if (Storage::exists($item->pegawai->foto)) {
                                                                    $path = Storage::url($item->pegawai->foto);
                                                                } else {
                                                                    $path = asset($item->pegawai->foto);
                                                                }
                                                            }
                                                        @endphp
                                                        <img src="{{ $item->pegawai->foto_storage }}" class="rounded-circle"
                                                            width="35" height="35" style="object-fit: cover"
                                                            alt="flexy" />
                                                        <div class="ms-3">
                                                            <h6 class="mb-0 fw-bold">
                                                                {{ $item->pegawai->nama_lengkap ? $item->pegawai->nama_lengkap : '' }}
                                                            </h6>
                                                            <span
                                                                class="text-muted fs-9">{{ $item->pegawai->jabatan ? $item->pegawai->jabatan->nama : '' }}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-dark font-weight-medium ">{{ $item->absen ? $item->absen->nama : '' }}
                                                </td>
                                                <td class="px-0">
                                                    {{ date('d M Y', strtotime($item->tanggal_awal)) }} -
                                                    {{ date('d M Y', strtotime($item->tanggal_akhir)) }}
                                                </td>
                                                <td class="text-dark font-weight-medium text-end">
                                                    <span class="badge bg-warning" style="background-color: #D4A216 !important;">In Process </span>
                                                </td>
                                                <td class="text-dark font-weight-medium text-end">
                                                    <a href="javascript:void(0)"
                                                        onclick="detailPengajuanAbsen({{ $item->id }}, 'periksa')"
                                                        aria-controls="detailPengajuanAbsen" class="text-info edit ">
                                                    <span class="fa fa-eye"></span>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane p-3 mt-3" id="diverifikasi" role="tabpanel">
                            <div class="table-responsive ">
                                <table
                                    id="diverifikasi-table"
                                    class="
                                            table
                                            mb-0
                                            text-nowrap
                                            varient-table
                                            align-middle
                                            fs-3
                                        ">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="text-muted">Name</th>
                                            <th scope="col" class="text-muted">Leave Request</th>
                                            <th scope="col" class="text-muted">Date of Leave Request</th>
                                            <th scope="col" class="text-muted text-end">
                                                Status
                                            </th>
                                            <th scope="col" class="text-muted text-end">
                                                Option
                                            </th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($verif as $item)
                                                {{-- @hasanyrole('user')
                                                    @if($item->pegawai->id_user != Auth::user()->id)
                                                        @break
                                                    @endif
                                                @endhasanyrole --}}
                                            <tr>
                                                <td class="px-0">
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ $item->pegawai->foto_storage }}" class="rounded-circle" width="35"
                                                            height="35" style="object-fit: cover" alt="flexy" />
                                                        <div class="ms-3">
                                                            <h6 class="mb-0 fw-bold">
                                                                {{ $item->pegawai->nama_lengkap }}
                                                            </h6>
                                                            <span
                                                                class="text-muted fs-9">{{ $item->pegawai->jabatan ? $item->pegawai->jabatan->nama : '' }}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-dark font-weight-medium ">{{ $item->absen->nama }}
                                                </td>
                                                <td class="px-0">
                                                    {{ date('d M Y', strtotime($item->tanggal_awal)) }} -
                                                    {{ date('d M Y', strtotime($item->tanggal_akhir)) }}
                                                </td>
                                                <td class="text-dark font-weight-medium text-end">
                                                    <span class="badge bg-primary">Approved</span>
                                                </td>
                                                <td class="text-dark font-weight-medium text-end">
                                                    <a href="javascript:void(0)"
                                                        onclick="detailPengajuanAbsen({{ $item->id }}, 'verif')"
                                                        aria-controls="detailPengajuanAbsen" class="text-info edit ">
                                                    <span class="fa fa-eye"></span>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                        </div>
                        <div class="tab-pane p-3 mt-3" id="ditolak" role="tabpanel">
                            <div class="table-responsive ">
                                <table
                                    id="ditolak-table"
                                    class="
                                        table
                                        mb-0
                                        text-nowrap
                                        varient-table
                                        align-middle
                                        fs-3
                                    ">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="text-muted">No.</th>
                                            <th scope="col" class="text-muted">Employee</th>
                                            <th scope="col" class="text-muted">Date of Report</th>
                                            <th scope="col" class="text-muted">
                                                Status
                                            </th>
                                            <th scope="col" class="text-muted text-end">
                                                Option
                                            </th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($tolak as $item)
                                                {{-- @hasanyrole('user')
                                                    @if($item->pegawai->id_user != Auth::user()->id)
                                                        @break
                                                    @endif
                                                @endhasanyrole --}}
                                            <tr>
                                                <td class="px-0">
                                                    <div class="d-flex align-items-center">
                                                        @php
                                                            $path = asset('back/images/users/1.jpg');
                                                            if ($item->pegawai->foto != null) {
                                                                if (Storage::exists($item->pegawai->foto)) {
                                                                    $path = Storage::url($item->pegawai->foto);
                                                                } else {
                                                                    $path = asset($item->pegawai->foto);
                                                                }
                                                            }
                                                        @endphp
                                                        <img src="{{ $path }}" class="rounded-circle" width="35"
                                                            height="35" style="object-fit: cover" alt="flexy" />
                                                        <div class="ms-3">
                                                            <h6 class="mb-0 fw-bold">
                                                                {{ $item->pegawai->nama_lengkap }}
                                                            </h6>
                                                            <span
                                                                class="text-muted fs-9">{{ $item->pegawai->jabatan ? $item->pegawai->jabatan->nama : '' }}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-dark font-weight-medium ">{{ $item->absen->nama }}
                                                </td>
                                                <td class="px-0">
                                                    {{ date('d M Y', strtotime($item->tanggal_awal)) }} -
                                                    {{ date('d M Y', strtotime($item->tanggal_akhir)) }}
                                                </td>
                                                <td class="text-dark font-weight-medium text-end">
                                                    <span class="badge bg-danger" style="background-color: #961331 !important;">Rejected</span>
                                                </td>
                                                <td class="text-dark font-weight-medium text-end">
                                                    <a href="javascript:void(0)"
                                                        onclick="detailPengajuanAbsen({{ $item->id }}, 'tolak')"
                                                        aria-controls="detailPengajuanAbsen" class="text-info edit ">
                                                    <span class="fa fa-eye"></span>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>

                                </table>
                            </div>
                        </div>
                        <div class="tab-pane p-3 mt-3" id="batal" role="tabpanel">
                            <div class="table-responsive ">
                                <table
                                    id="batal-table"
                                    class="
                                        table
                                        mb-0
                                        text-nowrap
                                        varient-table
                                        align-middle
                                        fs-3
                                    ">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="text-muted">No.</th>
                                            <th scope="col" class="text-muted">Employee</th>
                                            <th scope="col" class="text-muted">Date of Report</th>
                                            <th scope="col" class="text-muted">
                                                Status
                                            </th>
                                            <th scope="col" class="text-muted text-end">
                                                Option
                                            </th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($batal as $item)
                                                {{-- @hasanyrole('user')
                                                    @if($item->pegawai->id_user != Auth::user()->id)
                                                        @break
                                                    @endif
                                                @endhasanyrole --}}
                                            <tr>
                                                <td class="px-0">
                                                    <div class="d-flex align-items-center">
                                                        @php
                                                            $path = asset('back/images/users/1.jpg');
                                                            if ($item->pegawai->foto != null) {
                                                                if (Storage::exists($item->pegawai->foto)) {
                                                                    $path = Storage::url($item->pegawai->foto);
                                                                } else {
                                                                    $path = asset($item->pegawai->foto);
                                                                }
                                                            }
                                                        @endphp
                                                        <img src="{{ $path }}" class="rounded-circle" width="35"
                                                            height="35" style="object-fit: cover" alt="flexy" />
                                                        <div class="ms-3">
                                                            <h6 class="mb-0 fw-bold">
                                                                {{ $item->pegawai->nama_lengkap }}
                                                            </h6>
                                                            <span
                                                                class="text-muted fs-9">{{ $item->pegawai->jabatan ? $item->pegawai->jabatan->nama : '' }}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-dark font-weight-medium ">{{ $item->absen->nama }}
                                                </td>
                                                <td class="px-0">
                                                    {{ date('d M Y', strtotime($item->tanggal_awal)) }} -
                                                    {{ date('d M Y', strtotime($item->tanggal_akhir)) }}
                                                </td>
                                                <td class="text-dark font-weight-medium text-end">
                                                    <span class="badge bg-danger" style="background-color: #ABB1BB !important;">Cancelled</span>
                                                </td>
                                                <td class="text-dark font-weight-medium text-end">
                                                    <a href="javascript:void(0)"
                                                        onclick="detailPengajuanAbsen({{ $item->id }}, 'batal')"
                                                        aria-controls="detailPengajuanAbsen" class="text-info edit ">
                                                    <span class="fa fa-eye"></span>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>

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

        </section>


        <div class="offcanvas offcanvas-end" tabindex="-1" id="detailPengajuanAbsen"
            aria-labelledby="detailPengajuanAbsenLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                    Detail Leave Request
                </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 id="myCarousel" class="carousel slide" data-ride="carousel">
                                <!-- Carousel items -->

                                <input type="hidden" id="id_pengajuan_absen" value="">
                                <input type="hidden" id="id_pegawai" value="">
                                
                                <div class="carousel-item flex-column active">
                                    <div class="d-flex no-block al me-3ign-items-center border-bottom"
                                        style="padding-bottom: 20px;">
                                        <img src="{{ asset('back') }}/images/users/1.jpg" class="rounded-3 mr-3"
                                            width="35" height="35" style="object-fit: cover;" id="foto_canvas" />
                                        <div class="mt-2" style="margin-left:5px">
                                            <h5 class=" font-weight-bold" id="nama_lengkap_canvas">
                                                Gia
                                            </h5>
                                            {{-- <h6 class="" id="jabatan_canvas">Dokter Umum</h6> --}}
                                        </div>
                                        <div class="ms-auto" id="status_canvas">

                                        </div>

                                    </div>
                                    <div class="row text-center  mt-4">
                                        <h6 class="">Date of Leave Request</h6>
                                        <div class="col-6 border-end">
                                            <span class="fs-3">Date Start</span>
                                            <p class="
                                                    font-weight-medium
                                                    d-flex
                                                    align-items-center
                                                    justify-content-center
                                                "
                                                id="tanggal_awal_canvas">
                                                20 Nov 2021
                                            </p>
                                        </div>
                                        <div class="col-6">
                                            <span class="fs-3">Date End</span>
                                            <p class="
                                                    font-weight-medium
                                                    d-flex
                                                    align-items-center
                                                    justify-content-center
                                                "
                                                id="tanggal_akhir_canvas">
                                                21 Nov 2021
                                            </p>
                                        </div>

                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-12 border-top" style="padding-top:10px;">
                                            <span class="fs-3 ">Leave Request Type :</span>
                                            <p class="
                                                    font-weight-medium
                                                    d-flex
                                                    align-items-center
                                                    
                                                "
                                                id="absensi_canvas">
                                                Izin
                                            </p>
                                        </div>

                                        <div class="col-12 border-top" style="padding-top:10px;">
                                            <span class="fs-3 ">Reason of Leave Request :</span>
                                            <p class="
                                                        font-weight-medium
                                                        d-flex
                                                        align-items-center
                                                        
                                                    "
                                                id="alasan_izin_canvas">
                                                ada keperluan keluarga
                                            </p>
                                        </div>

                                        <div class="col-12 border-top mt-3">
                                            <span class="fs-3 mt-3">Attachment :</span>
                                            <p
                                                class="
                                                        font-weight-medium
                                                        d-flex
                                                        align-items-center
                                                    
                                                    ">
                                                <i class="bi bi-file-earmark-minus mt-3"></i>
                                                <a href="#" class="mt-3" id="lampiran_canvas" download>Download
                                                    Attachment</a>
                                            </p>
                                        </div>

                                        <div class="col-12 border-top mt-3">
                                            <span class="fs-3 mt-3">Verificator :</span>
                                            <div id="verifikator_all" class="mt-3">
                                                
                                            </div>
                                        </div>
                                        
                                        <div class="col-12 border-top mt-3" id="permissionWrap">
                                            <span class="fs-3 mt-3">Permission: </span>
                                            <div class="d-flex mt-2">
                                                    <div id="userPermission" style="display: none">
                                                        <button class="btn btn-success" type="button" onclick="cancelCanvas()" style="background-color: #ABB1BB !important;border-color: #ABB1BB !important;">Cancel</button>
                                                    </div>
                                                    <div id="executivePermission" style="display: none">
                                                        <button class="btn btn-primary" type="button" onclick="approve()" id="approveButton">Approve</button>
                                                        <button class="btn btn-danger" style="margin-left: 20px; background-color: #961331 !important; border-color: #961331" type="button" onclick="rejectCanvas()" id="rejectButton">Reject</button>
                                                    </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                          </div>
                        </div>
                    </div>
                </div>
                <div class="card" id="verifikator" style="display: none">
                    <div class="card-body">
                        <h4>Detail Verifikator</h4>
                        <div class="profiletimeline">
                            <div class="sl-item">
                                <div class="sl-left">
                                    <img src="{{ asset('back') }}/images/users/1.jpg" alt="user" class="rounded-circle"
                                        width="35" height="35" style="object-fit: cover;" id="verifikator_foto" />
                                </div>
                                <div class="sl-right">
                                    <div>
                                        <a href="javascript:void(0)" class="link" id="verifikator_nama"></a><br>
                                        <span class="sl-date" id="verifikator_tanggal"></span>
                                        <p class="mt-2 text-secondary" id="verifikator_status">
                                        </p>
                                        <h6 class="text-secondary" id="verifikator_catatan"></h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>

    <div class="offcanvas offcanvas-end" id="createLeaveRequestModal" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                Add Leave Request
            </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="pengajuanAbsenForm" enctype="multipart/form-data">
                            
                            <input type="hidden" name="status_mandatory" id="status_mandatory" value="">

                            @hasanyrole('admin')
                                <div class="mb-2">
                                    <label for="example-text-input" class="col-form-label">Employee <span class="text-danger">*</span></label>
                                    <select name="id_pegawai" id="id_pegawai" class="form-select">
                                        <option value="">-Choose Employee-</option>
                                        @foreach ($pegawai as $item)
                                            <option value="{{$item->id}}">{{$item->nama_lengkap}}</option>
                                        @endforeach
                                    </select>
                                    <small id="id_pegawai_validation" class="text-danger"></small>
                                </div>
                            @else
                                <input type="hidden" name="id_pegawai" value="{{ Auth::user()->pegawai ? Auth::user()->pegawai->id : '' }}">
                            @endhasanyrole

                            <div class="mb-2">
                                <label for="example-text-input" class="col-form-label">Leave Type <span class="text-danger">*</span></label>
                                <select name="id_ref_absensi" id="id_ref_absensi" class="form-select" onchange="mandatoryCheck(this.value)">
                                    <option value="">-Choose Leave Type-</option>
                                    @foreach ($ref_absensi as $item)
                                        <option value="{{$item->id}}">{{$item->nama}}</option>
                                    @endforeach
                                </select>
                                <small id="id_ref_absensi_validation" class="text-danger"></small>
                            </div>

                            <div class="mb-2">
                                <label for="example-text-input" class="col-form-label">Description <span class="text-danger" id="alasanIzinMandatory" style="display:none">*</span></label></label>
                                <textarea name="alasan_izin" id="alasan_izin" class="form-control" cols="30" rows="5" placeholder="Reason of Leave"></textarea>
                                <small id="alasan_izin_validation" class="text-danger"></small>
                            </div>

                            <div class="mb-2">
                                <label for="example-text-input" class="col-form-label">Attachment <span class="text-danger" id="lampiranMandatory" style="display:none">*</span></label></label>
                                <input type="file" name="lampiran" class="form-control">
                                <small id="lampiran_validation" class="text-danger"></small>
                            </div>
                            
                            <div class="mb-2">
                                <label for="example-text-input" class="col-form-label">Start Date <span class="text-danger">*</span></label>
                                <input type="date" name="tanggal_awal" class="form-control" placeholder="Start Date">
                                <small id="tanggal_awal_validation" class="text-danger"></small>
                            </div>

                            <div class="mb-2">
                                <label for="example-text-input" class="col-form-label">End Date <span class="text-danger">*</span></label>
                                <input type="date" name="tanggal_akhir" class="form-control" placeholder="End Date">
                                <small id="tanggal_akhir_validation" class="text-danger"></small>
                            </div>
                            
                            <div class="form-actions">
                                <div class="card-body border-top">
                                    <button type="button" class="
                                                btn btn-outline-secondary
                                                rounded-pill
                                                px-4
                                                ms-2
                                            " data-bs-dismiss="offcanvas">
                                        Cancel
                                    </button>

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

    <div class="offcanvas offcanvas-end" id="rejectLeaveRequestModal" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                Reject Leave Request
            </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 id="rejectForm">
                            <div class="mb-2">
                                <label for="example-text-input" class="col-form-label">Description <sup class="text-danger">*</sup> </label>
                                <textarea name="catatan_penolakan" id="alasan_penolakan" class="form-control" cols="30" rows="5" placeholder="Reason for Refusal" required></textarea>
                            </div>
                            
                            <div class="form-actions">
                                <div class="card-body border-top">
                                    <button type="button" class="
                                                btn btn-outline-secondary
                                                rounded-pill
                                                px-4
                                                ms-2
                                            " data-bs-dismiss="offcanvas">
                                        Cancel
                                    </button>

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

    <div class="offcanvas offcanvas-end" id="cancelLeaveRequestModal" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                Cancel Leave Request
            </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 id="cancelForm">
                            <div class="mb-2">
                                <label for="example-text-input" class="col-form-label">Description <sup class="text-danger">*</sup> </label>
                                <textarea name="catatan" id="alasan_pembatalan" class="form-control" cols="30" rows="5" placeholder="Enter Reason for Cancellation"></textarea>
                            </div>
                            
                            <div class="form-actions">
                                <div class="card-body border-top">
                                    <button type="button" class="
                                                btn btn-outline-secondary
                                                rounded-pill
                                                px-4
                                                ms-2
                                            " data-bs-dismiss="offcanvas">
                                        Cancel
                                    </button>

                                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                                        <div class="d-flex align-items-center">
                                            Send
                                        </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') }}/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>
    <script src="{{ asset('back') }}/assets/extra-libs/prism/prism.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js"></script>

    <script>
        let mandatory = 'N';
        function mandatoryCheck(id_absen) {
            $.ajax({
                     url: "{{ route('pengajuan-absen.get-ref-absen') }}",
                     method: "POST",
                     data: {
                         "_token": "{{ csrf_token() }}",
                         id_absen: id_absen
                     },
                     success: function (data) {
                        if(data.is_mandatory == 'Y') {
                            mandatory = 'Y';
                            $("#alasanIzinMandatory").show();
                            $("#lampiranMandatory").show();
                        } else if(data.is_mandatory == 'T') {
                            mandatory = 'N';
                            $("#alasanIzinMandatory").hide();
                            $("#lampiranMandatory").hide()
                        } else {
                            mandatory = 'N';
                            $("#alasanIzinMandatory").hide();
                            $("#lampiranMandatory").hide()
                        }

                        $('#alasan_izin').attr('placeholder', data.placeholder_description)
                     }
                 });
        }

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

        var offCanvasLeave = document.getElementById("createLeaveRequestModal");
        var canvasLeave = new bootstrap.Offcanvas(offCanvasLeave, {
            backdrop: true
        });

        function createLeaveRequest() {
            canvasLeave.show()
        }

        var pengajuanAbsenForm = document.getElementById('pengajuanAbsenForm');
        pengajuanAbsenForm.addEventListener('submit', function(e) {
            e.preventDefault();

            Swal.fire({
              title: 'Loading...',
              allowOutsideClick: false,
              showConfirmButton: false,
              didOpen: () => {
                Swal.showLoading();
              }
            });
            
            let id_pegawai = pengajuanAbsenForm.id_pegawai.value;
            let id_ref_absensi = pengajuanAbsenForm.id_ref_absensi.value;
            let alasan_izin = pengajuanAbsenForm.alasan_izin.value;
            let lampiran = pengajuanAbsenForm.lampiran?.files[0];
            let tanggal_awal = pengajuanAbsenForm.tanggal_awal.value;
            let tanggal_akhir = pengajuanAbsenForm.tanggal_akhir.value;

            let formData = new FormData();
            formData.append('id_pegawai', id_pegawai);
            formData.append('id_ref_absensi', id_ref_absensi);
            formData.append('mandatory', mandatory);
            formData.append('alasan_izin', alasan_izin);
            formData.append('lampiran', lampiran??'');
            formData.append('tanggal_awal', tanggal_awal);
            formData.append('tanggal_akhir', tanggal_akhir);

            fetch('{{route("pengajuan-absen.tambah")}}',{
                  method: "POST",
                  body: formData,
                  headers: {
                      "X-CSRF-TOKEN": "{{csrf_token()}}"
                  }
              })
            .then(response => response.json())
            .then(resp => {
                Swal.close();
                if (resp.status == true) {
                    hideValidation()
                    Swal.fire('Leave request created !', '', 'success')

                    setInterval(() => {
                        location.reload()
                    }, 1000);
                }else if (resp.status == false){
                    if (resp.data) {
                        var error = Object.entries(resp.data);
                        hideValidation()
                        error.forEach((key,value) => {
                            $('#'+key[0]+'_validation').show();
                            if(key[1].length > 1){
                                $('#'+key[0]+'_validation').html(key[1].join("<br> "));
                            }else{
                                $('#'+key[0]+'_validation').html(key[1]);
                            }
                        });
                    }
                    if (resp.messages){
                        Swal.fire('Failed', resp.messages, 'error')
                    }
                }
            }).catch(error => {
                Swal.close();

                console.error(error);
            })

        })

        $(document).ready(function () {

            $("#rejectForm").validate({
                rules: {
                    catatan_penolakan: {
                        required: true,
                    },
                },
                messages: {
                    catatan_penolakan: {
                        required: "Description is required"
                    }
                },
                submitHandler: function (form) {
                    reject();
                }
            });

        });

        $(document).ready(function () {

            $("#cancelForm").validate({
                rules: {
                    catatan: {
                        required: true,
                    },
                },
                messages: {
                    catatan: {
                        required: "Description is required"
                    }
                },
                submitHandler: function (form) {
                    cancel();
                }
            });

        });
        
        function approve() {
            Swal.fire({
             title: "Approve this leave request?",
             text: `Are you sure to approve this leave request?`,
             icon: "warning",
             showCancelButton: !0,
             confirmButtonColor: "rgb(11, 42, 151)",
             cancelButtonColor: "rgb(209, 207, 207)",
             confirmButtonText: "Yes, approve!",
             cancelButtonText: "Cancel"
         }).then(function (t) {
             if (t.value) {
                 Swal.fire({
                 title: 'Loading...',
                 allowOutsideClick: false,
                 showConfirmButton: false,
                 didOpen: () => {
                     Swal.showLoading();
                 }
                 });
                $("#approveButton").prop('disabled', true);
                var id_pegawai = $("#id_pegawai").val();
                var id_pengajuan_absen = $("#id_pengajuan_absen").val();
                 $.ajax({
                     url: "{{ route('pengajuan-absen.approve') }}",
                     method: "POST",
                     data: {
                         "_token": "{{ csrf_token() }}",
                         id_pegawai: id_pegawai,
                         id_pengajuan_absen: id_pengajuan_absen,
                         status: "verif"
                     },
                     success: function (data) {
                        Swal.close();
                        if(data == 'success') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: 'Leave Request has been successfully approved!',
                            }).then(function () {
                                location.reload();
                            });
                        } else if(data == 'error') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Leave Request is failed!',
                            }).then(function () {
                                location.reload();
                            });
                        } else if(data == 'other_1') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: "Leave Request doesn't exists!",
                            }).then(function () {
                                location.reload();
                            });
                        } else if(data == 'other_2') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: "User doesn't exists in employee database!",
                            }).then(function () {
                                location.reload();
                            });
                        }
                     }
                 });
             }
         });
        }

        function rejectCanvas() {
            var offCanvasReject = document.getElementById("rejectLeaveRequestModal");
            var canvasReject = new bootstrap.Offcanvas(offCanvasReject, {
                backdrop: true
            });

            canvasReject.show();
        }
        
        function reject() {
            Swal.fire({
             title: "Reject this leave request?",
             text: `Are you sure to reject this leave request?`,
             icon: "warning",
             showCancelButton: !0,
             confirmButtonColor: "rgb(11, 42, 151)",
             cancelButtonColor: "rgb(209, 207, 207)",
             confirmButtonText: "Yes, reject!",
             cancelButtonText: "Cancel"
         }).then(function (t) {
             if (t.value) {
                 Swal.fire({
                 title: 'Loading...',
                 allowOutsideClick: false,
                 showConfirmButton: false,
                 didOpen: () => {
                     Swal.showLoading();
                 }
                 });
                $("#rejectButton").prop('disabled', true);
                var id_pegawai = $("#id_pegawai").val();
                var id_pengajuan_absen = $("#id_pengajuan_absen").val();
                var alasan = $("#alasan_penolakan").val()
                 $.ajax({
                     url: "{{ route('pengajuan-absen.approve') }}",
                     method: "POST",
                     data: {
                         "_token": "{{ csrf_token() }}",
                         id_pegawai: id_pegawai,
                         id_pengajuan_absen: id_pengajuan_absen,
                         catatan: alasan,
                         status: "tolak"
                     },
                     success: function (data) {
                        Swal.close();
                        if(data == 'success') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: 'Leave Request has been successfully rejected!',
                            }).then(function () {
                                location.reload();
                            });
                        } else if(data == 'error') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Leave Request is failed!',
                            }).then(function () {
                                location.reload();
                            });
                        } else if(data == 'other_1') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: "Leave Request doesn't exists!",
                            }).then(function () {
                                location.reload();
                            });
                        } else if(data == 'other_2') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: "User doesn't exists in employee database!",
                            }).then(function () {
                                location.reload();
                            });
                        }
                     }
                 });
             }
         });
        }

        function cancelCanvas() {
            var offCanvasCancel = document.getElementById("cancelLeaveRequestModal");
            var canvasCancel = new bootstrap.Offcanvas(offCanvasCancel, {
                backdrop: true
            });

            canvasCancel.show();
        }
        
        function cancel() {
            Swal.fire({
             title: "Cancel this leave request?",
             text: `Are you sure to cancel this leave request?`,
             icon: "warning",
             showCancelButton: !0,
             confirmButtonColor: "rgb(11, 42, 151)",
             cancelButtonColor: "rgb(209, 207, 207)",
             confirmButtonText: "Yes, cancel!",
             cancelButtonText: "Cancel"
         }).then(function (t) {
             if (t.value) {
                 Swal.fire({
                 title: 'Loading...',
                 allowOutsideClick: false,
                 showConfirmButton: false,
                 didOpen: () => {
                     Swal.showLoading();
                 }
                 });
                var id_pegawai = $("#id_pegawai").val();
                var id_pengajuan_absen = $("#id_pengajuan_absen").val();
                var alasan = $("#alasan_pembatalan").val()
                 $.ajax({
                     url: "{{ route('pengajuan-absen.approve') }}",
                     method: "POST",
                     data: {
                         "_token": "{{ csrf_token() }}",
                         id_pegawai: id_pegawai,
                         id_pengajuan_absen: id_pengajuan_absen,
                         catatan: alasan,
                         status: "batal"
                     },
                     success: function (data) {
                        Swal.close();
                        if(data == 'success') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: 'Leave Request has been successfully cancelled!',
                            }).then(function () {
                                location.reload();
                            });
                        } else if(data == 'error') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Leave Request is failed!',
                            }).then(function () {
                                location.reload();
                            });
                        } else if(data == 'other_1') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: "Leave Request doesn't exists!",
                            }).then(function () {
                                location.reload();
                            });
                        } else if(data == 'other_2') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: "User doesn't exists in employee database!",
                            }).then(function () {
                                location.reload();
                            });
                        }
                     }
                 });
             }
         });
        }
    </script>
    <script>
        $('.select1').select2({
            templateResult: function(data) {
                if (!data.element) {
                    return data.text;
                }

                var $element = $(data.element);

                var $wrapper = $('<span></span>');
                $wrapper.addClass($element[0].className);

                $wrapper.text(data.text);

                return $wrapper;
            }
        });

        //Edit Data

        var offCanvasdetailPengajuanAbsen = document.getElementById("detailPengajuanAbsen");
        var offCanvasEdit = new bootstrap.Offcanvas(offCanvasdetailPengajuanAbsen, {
            backdrop: true
        });

        function detailPengajuanAbsen(id, statusTable) {
            $('#verifikator').hide();

            fetch("{{ url('pengajuan-absen-detail') }}/" + id).then(function(response) {
                response.json().then(function(resp) {

                    var id_absen = resp.data.id;
                    var id_pegawai = resp.data.pegawai.id;
                    var nama_lengkap = resp.data.pegawai.nama_lengkap;
                    var foto = resp.data.pegawai.foto;
                    var tanggal_awal = resp.data.tanggal_awal;
                    var tanggal_akhir = resp.data.tanggal_akhir;
                    var alasan_izin = resp.data.alasan_izin;
                    var uraian = resp.data.uraian ? resp.data.uraian : '';
                    var lampiran = resp.data.lampiran ? resp.data.lampiran : '';
                    var status = resp.data.status;
                    var status_canvas = '';
                    var status_detail = '';
                    var absensi = resp.data.absen.nama;
                    var id_verifikator = resp.data.verifikator;
                    var alasan_penolakan = resp.data.alasan_penolakan ? resp.data.alasan_penolakan : ''; 
                    var alasan_pembatalan = resp.data.alasan_pembatalan ? resp.data.alasan_pembatalan : ''; 
                    var created_at = resp.data.tanggal_pengajuan;
                    var role = resp.data.role;
                    var auth_id_pegawai = "{{Auth::user()->pegawai ? Auth::user()->pegawai->id : null}}";
                    var verifikator_admin = resp.data.verifikator;

                    $('#id_pengajuan_absen').val(id_absen);
                    $('#id_pegawai').val(id_pegawai);
                    $('#nama_lengkap_canvas').html(nama_lengkap);
                    $('#tanggal_awal_canvas').html(tanggal_awal);
                    $('#tanggal_akhir_canvas').html(tanggal_akhir);
                    $('#foto_canvas').attr('src', foto);
                    $('#alasan_izin_canvas').html(alasan_izin);
                    $('#absensi_canvas').html(absensi);
                    $('#created_at_canvas').html(created_at);
                    if (lampiran) {
                        $('#lampiran_canvas').show();
                        $('#lampiran_canvas').attr('href', lampiran);
                    }else{
                        $('#lampiran_canvas').hide();
                    }

                    if (role == 'executive') {
                        $('#executivePermission').show();
                        $('#userPermission').hide();
                        if(statusTable == 'verif') {
                            $("#approveButton").css('display', 'none');
                            $("#rejectButton").css('display', 'block');
                            $("#rejectButton").css('margin-left', '0px');
                        } else if(statusTable == 'tolak') {
                            $("#approveButton").css('display', 'block');
                            $("#rejectButton").css('display', 'none');
                        } else if(statusTable == 'batal') {
                            $("#permissionWrap").css('display', 'none');
                        } else {
                            $("#rejectButton").css('margin-left', '13px');
                            $("#approveButton").css('display', 'initial');
                            $("#rejectButton").css('display', 'initial');
                        }
                    }else {
                        $("#permissionWrap").css('display', 'block');
                        $('#userPermission').show();
                        $('#executivePermission').hide();
                        if(statusTable == 'verif') {
                            $("#permissionWrap").css('display', 'none');
                        } else if(statusTable == 'tolak') {
                            $("#permissionWrap").css('display', 'none');
                        } else if(statusTable == 'batal') {
                            $("#permissionWrap").css('display', 'none');
                        }
                    }

                    if (status != 'periksa') {

                        if (status == 'verif') {
                            status_canvas = '<span class="badge bg-primary">Approved</span>';
                            status_detail = 'Menyetujui Pengajuan Izin';
                        } else if(status == 'tolak') {
                            status_canvas = '<span class="badge bg-danger" style="background-color: #961331 !important;">Rejected</span>';
                            status_detail = 'Menolak Pengajuan Izin <p><small></small></p>';
                        } else if(status == 'batal') {
                            status_canvas = '<span class="badge bg-danger" style="background-color: #ABB1BB !important;">Cancelled</span>';
                            status_detail = 'Menolak Pengajuan Izin <p><small>Cancelled</small></p>';
                        }

                        // document.getElementById('verifikator').style.display = 'block';

                        var nama_lengkap_varifikator = '';
                        var foto_verifikasi = '';
                        var tanggal_verifikasi = '';
                        if (id_verifikator != null) {
                            console.log(id_verifikator);
                            nama_lengkap_varifikator = resp.data.verifikators.name;
                            foto_verifikasi = resp.data.verifikators.photos_storage;
                            tanggal_verifikasi = resp.data.tanggal_verifikasi;
                        }

                        // $('#nama_lengkap_canvas_2').html(nama_lengkap);
                        // $('#foto_canvas_2').attr('src', foto);
                        // $('#nama_lengkap_canvas_varifikator').html(nama_lengkap_varifikator);
                        // $('#foto_canvas_verifikasi').attr('src', foto_verifikasi);
                        // $('#tanggal_canvas_verifikasi').html(tanggal_verifikasi);
                        // $('#status_detail').html(status_detail);

                        if (status == 'verif') {
                            $('#status_canvas').html(
                                '<span class=" badge bg-light-primary text-success ounded-pill ont-weight-medium fs-1 py-1 ">Approved</span>'
                            );
                        } else if(status == 'tolak') {
                            $('#status_canvas').html(
                                '<span class=" badge bg-light-danger text-danger ounded-pill ont-weight-medium fs-1 py-1">Rejected</span>'
                            );
                        } else if(status == 'batal') {
                            $('#status_canvas').html(
                                '<span class=" badge bg-light-danger text-danger ounded-pill ont-weight-medium fs-1 py-1 ">Cancelled</span>'
                            );
                        }
                    } else {
                        status_canvas = '<span class="badge bg-warning">In Process</span>';
                        document.getElementById('verifikator').style.display = 'none';
                    }

                    let verifikator_all = resp.data.verifikator_all;
                    let html_verifikator_all = '';

                    if(id_verifikator != null){
                        let alasan = '';
                        if(status == 'batal'){
                            alasan = `<p>${alasan_pembatalan}</p>`
                        }
                        if(status == 'tolak'){
                            alasan = `<p>${alasan_penolakan}</p>`
                        }
                        html_verifikator_all = `<div class="d-flex no-block al me-3ign-items-center mb-1">
                                    <img src="${foto_verifikasi}" class=" rounded-3 mr-3"
                                        width="20" height="20" style="object-fit: cover;" />
                                    <div class="" style="margin-left:5px">
                                        <h6 class=" font-weight-bold" style="cursor: pointer">
                                            ${nama_lengkap_varifikator}
                                        </h6>
                                        ${alasan}
                                    </div>
                                    <div class="ms-auto">
                                            <small>${tanggal_verifikasi}</small>
                                    </div>
                                </div>`;
                    }else{
                            verifikator_all.forEach((e,i) => {
                                html_verifikator_all += `<div class="d-flex no-block al me-3ign-items-center mb-1">
                                        <img src="${e.foto}" class=" rounded-3 mr-3"
                                            width="25" height="25" style="object-fit: cover;" />
                                        <div class="" style="margin-left:5px">
                                            <h6 class=" font-weight-bold" style="cursor: pointer" onclick="detailVerifikator(${e.id})" >
                                                ${e.nama}
                                                <br>
                                                <small class="text-muted">${e.jabatan}</small>
                                            </h6>
                                        </div>
                                        <div class="ms-auto">
                                            <span class="badge bg-${e.statusColor} badge-xs">${e.status}</span>
                                        </div>
                                    </div>`
                                if (auth_id_pegawai == e.idPegawai && e.status == 'Approved') {
                                    $("#approveButton").css('display', 'none');
                                }
                            });
                    }

                    $('#verifikator_all').html(html_verifikator_all);

                    $('#status_canvas').html(status_canvas);

                });
            });

            offCanvasEdit.show();
        }

        function detailVerifikator(id) {
            $('#verifikator').show();
            fetch("{{ url('pengajuan-absen-verifikasi-detail') }}/" + id).then(function(response) {
                response.json().then(function(resp) {
                    $('#verifikator_foto').attr('src', resp.data.foto);
                    $('#verifikator_nama').html(resp.data.nama);
                    $('#verifikator_tanggal').html(resp.data.tanggal_verifikasi);
                    let status = ''
                    if (resp.data.nama == 'tolak') {
                        status = '<span class=" badge bg-light-danger text-danger ounded-pill ont-weight-medium fs-1 py-1 ">Rejected</span>';
                    }else if(resp.data.nama == 'verif'){
                        status = '<span class=" badge bg-light-primary text-success ounded-pill ont-weight-medium fs-1 py-1 ">Approved</span>';
                    }
                    $('#verifikator_status').html(status);
                    $('#verifikator_catatan').html(resp.data.catatan);
                })
            });
        }

        $('#menunggu-table').dataTable();
        $('#diverifikasi-table').dataTable();
        $('#ditolak-table').dataTable();
        $('#batal-table').dataTable();

    </script>


@endsection