@extends('layouts.master')
@section('title')
    @lang('translation.dashboards')
@endsection
@section('css')
<link href="{{ URL::asset('build/libs/jsvectormap/css/jsvectormap.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('build/libs/swiper/swiper-bundle.min.css')}}" rel="stylesheet" type="text/css" />
<style>
    .box-dash-top {
        min-height: 200px !important
    }
</style>
@endsection
@section('content')
    <!-- Modal -->
    <div class="modal fade" id="addmemberModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0">

                <div class="modal-body">
                    <form action="{{ route('update_picture') }}" autocomplete="off" id="memberlist-form" class="needs-validation" enctype="multipart/form-data" method="POST">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="pegawais_id" value="{{ Auth::user()->pegawais_id }}">
                        <div class="row">
                            <div class="col-lg-12">
                                <input type="hidden" id="memberid-input" class="form-control" value="">
                                <div class="px-1 pt-1">
                                    <div class="modal-team-cover position-relative mb-0 mt-n4 mx-n4 rounded-top overflow-hidden">
                                        <img src="{{ URL::asset('images/profile/pegawai') }}/{{ $fotProfil}}" onerror="this.src='{{ URL::asset('images/user.png') }}'" alt="{{ Auth::user()->name }}" id="cover-img" class="img-fluid">

                                        <div class="d-flex position-absolute start-0 end-0 top-0 p-3">
                                            <div class="flex-grow-1">
                                                <h5 class="modal-title text-white" id="createMemberLabel">Ganti Foto</h5>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <div class="d-flex gap-3 align-items-center">
                                                    <div>
                                                        {{-- <label for="cover-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="top" title="Select Cover Image">
                                                            <div class="avatar-xs">
                                                                <div class="avatar-title bg-light border rounded-circle text-muted cursor-pointer">
                                                                    <i class="ri-image-fill"></i>
                                                                </div>
                                                            </div>
                                                        </label> --}}
                                                        {{-- <input class="form-control d-none" value="" id="cover-image-input" type="file" accept="image/png, image/gif, image/jpeg"> --}}
                                                    </div>
                                                    <button type="button" class="btn-close btn-close-white" id="createMemberBtn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center mb-4 mt-n5 pt-2">
                                    <div class="position-relative d-inline-block">
                                        <div class="position-absolute bottom-0 end-0">
                                            <label for="member-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Select Member Image">
                                                <div class="avatar-xs">
                                                    <div class="avatar-title bg-light border rounded-circle text-muted cursor-pointer">
                                                        <i class="ri-image-fill"></i>
                                                    </div>
                                                </div>
                                            </label>
                                            <input class="form-control d-none" value="" id="member-image-input" name="file" type="file" accept="image/png, image/gif, image/jpeg">
                                        </div>
                                        <div class="avatar-lg">
                                            <div class="avatar-title bg-light rounded-circle">
                                                <img src="{{ URL::asset('images/profile/pegawai') }}/{{ $fotProfil}}" onerror="this.src='{{ URL::asset('images/user.png') }}'" alt="{{ Auth::user()->name }}" id="member-img" class="avatar-md rounded-circle h-auto" />
                                            </div>
                                            @error('file') <span class="text-danger">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="hstack gap-2 justify-content-center">
                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-success" id="addNewMember">Update</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--end modal-content-->
        </div>
        <!--end modal-dialog-->
    </div>
    <!--end modal-->
    <div class="row">
        
            <div class="col-md-5">
                <div class="team-list grid-view-filter row" id="team-member-list">
                    <div class="card team-box">
                        <div class="team-cover">
                        <img src="{{ URL::asset('images/profile/pegawai') }}/{{ $fotProfil}}" onerror="this.src='{{ URL::asset('images/user.png') }}'" alt="{{ Auth::user()->name }}" class="img-fluid">
                        </div>
                        <div class="card-body p-4">
                        <div class="row align-items-center team-row">
                            <div class="col team-settings">
                            <div class="row">
                                <div class="col">
                                <div class="flex-shrink-0 me-2">
                                    <button type="button" class="btn btn-light btn-icon rounded-circle btn-sm favourite-btn ">
                                    <i class="ri-star-fill fs-14"></i>
                                    </button>
                                </div>
                                </div>
                                <div class="col text-end dropdown">
                                <a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="ri-more-fill fs-17"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li>
                                    <a class="dropdown-item edit-list" href="#addmemberModal" data-bs-toggle="modal" data-edit-id="12">
                                        <i class="ri-pencil-line me-2 align-bottom text-muted"></i>Edit </a>
                                    </li>
                                    {{-- <li>
                                    <a class="dropdown-item remove-list" href="#removeMemberModal" data-bs-toggle="modal" data-remove-id="12">
                                        <i class="ri-delete-bin-5-line me-2 align-bottom text-muted"></i>Remove </a>
                                    </li> --}}
                                </ul>
                                </div>
                            </div>
                            </div>
                            <div class="col-lg-4 col">
                            <div class="team-profile-img">
                                <div class="avatar-lg img-thumbnail rounded-circle flex-shrink-0">
                                <img src="{{ URL::asset('images/profile/pegawai') }}/{{ $fotProfil}}" onerror="this.src='{{ URL::asset('images/user.png') }}'" alt="{{ Auth::user()->name }}" class="member-img img-fluid d-block rounded-circle">
                                </div>
                                <div class="team-content">
                                <a class="member-name" data-bs-toggle="offcanvas" href="#member-overview" aria-controls="member-overview">
                                    <h5 class="fs-16 mb-1">{{ Auth::user()->name }}</h5>
                                </a>
                                <p class="text-muted member-designation mb-0"> @if(isset($peg)) {{ $peg['divisibidangkerja'] }}  {{ $peg['posisi'] }} @endif</p>
                                </div>
                            </div>
                            </div>
                            <div class="col-lg-4 col">
                            <div class="row text-muted text-center">
                                <div class="col-6 border-end border-end-dashed">
                                <h5 class="mb-1 projects-num">@if(isset($CtugasTambahan))  {{ $CtugasTambahan }} @endif</h5>
                                <p class="text-muted mb-0">Tugas Tambahan</p>
                                </div>
                                <div class="col-6">
                                <h5 class="mb-1 tasks-num">@if(isset($count_rewards)) {{ $count_rewards  }} @endif</h5>
                                <p class="text-muted mb-0">Rewards</p>
                                </div>
                            </div>
                            </div>
                            <div class="col-lg-2 col">
                            <div class="text-end">
                                <a href="/myprofile/update" class="btn btn-light view-btn">View Profile</a>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        {{-- <div class="col-md-6">
            <div class="">
                <div class="card box-dash-top">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="profile-user position-relative d-inline-block mx-auto  mb-4">
                                    <img src="{{ URL::asset('images/profile/pegawai') }}/{{ $fotProfil}}" onerror="this.src='{{ URL::asset('images/user.png') }}'"
                                        class="  rounded-circle avatar-xl img-thumbnail user-profile-image"
                                        alt="user-profile-image">
                                </div>
                            </div>
                            <div class="col-md-8">
                                <h5 class="fs-16 mb-1">{{ Auth::user()->name }}</h5>
                                <p class="text-muted mb-0">{{ $peg['divisibidangkerja'] }} <br>{{ $peg['posisi'] }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
        <div class="col-md-7">
            <div class="card">
                <div class="card-header">
                    <div class="border-0 align-items-center d-flex">
                        <h4 class="card-title mb-0 flex-grow-1">My Jobdesk</h4>
                        <div>
                            @php 
                                if(!empty($status_baca)){
                                    $class='success';
                                }else{
                                    $class='danger';
                                }
                            @endphp 
                            <button type="button" class="btn btn-soft-{{$class}} btn-sm">
                                Status : @if(!empty($status_baca)) Sudah Dibaca @else Belum Dibaca. <a href="javascript:void(0);" onclick="readmore()">Klik untuk membaca</a>@endif
                            </button>
                            
                        </div>
                    </div>
                </div>
                <div class="card-body" style="height: 350px; overflow:auto">
                   @if (!empty($getJobdesk))
                   
                    @php
                        $jobdesk = $getJobdesk->jobdesk;
                        $maxLength = 450;
                    @endphp

                    {{-- {!! Str::limit($jobdesk, $maxLength, ' ...') !!} --}}
                    <div id="shortJobdesk">{!! Str::limit($jobdesk, $maxLength, ' ...') !!}</div>

                    @if (Str::length($jobdesk) > $maxLength)
                        <span><a href="javascript:void(0);" onclick="readmore()"> Read more</a></span>
                    @endif


                   @endif
                </div>
            </div>
        </div>
    </div>
    {{-- Grafik, nama permission can_view_grafik --}}
    @can('can_view_grafik')
    <div class="row">
        <div class="col-md-5">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title mb-0 flex-grow-1">Grafik Jumlah Pegawai</h4>
                            <h4 class="mt-4 fs-22 ff-secondary fw-semibold"><span class="counter-value"
                                    data-target="{{$jumlah_pegawai}}"></span> Orang</h4>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                    <i data-feather="users" class="text-info"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                   <div id="simples_dount_chart"
                        data-colors='["#687df7", "#3bd288","#d2d23b"]'
                        class="apex-charts" dir="ltr"></div>
                </div><!-- end card body -->
            </div> <!-- end card-->
        </div> <!-- end col-->
        <div class="col-md-7">
            <div class="card">
                <div class="card-header">
                    <div class="border-0 align-items-center d-flex">
                        <h4 class="card-title mb-0 flex-grow-1">Rincian Jumlah Pegawai</h4>
                        <div>
                            
                            
                        </div>
                    </div>
                </div>
                <div class="card-body" style="height: 325px; overflow:auto">
                   <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Divisi</th>
                                <th>Bidang</th>
                                <th>Jumlah Pegawai</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($divisi as $item)
                                <tr>
                                    <td>{{$item->nama_divisi}}</td>
                                    <td></td>
                                    <td>{{$item->total_perdivisi}}</td>
                                </tr>
                                @foreach ($item->bidang as $bid)
                                    <tr>
                                        <td></td>
                                        <td>{{$bid->bidang}}</td>
                                        <td>{{$bid->total}}</td>
                                    </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                   </table>
                </div>
            </div>
        </div>
    </div>
    @endif
    {{-- Info Update Data --}}
    <div class="row">
        <div class="col">

            <div class="h-100">
                                {{-- @if(empty($status_baca)) --}}
                <div class="col-md-12 mb-4">
                    
                    <!-- Grids in modals -->
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalgrid" hidden>
                        Launch Demo Modal
                        </button>
                        {{-- @if (!empty($getJobdesk)) --}}
                        <div class="modal fade" id="exampleModalgrid" tabindex="-1" aria-labelledby="exampleModalgridLabel" aria-modal="true" data-bs-backdrop="static">
                        <!-- Scrollable Modal -->
                            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalgridLabel">Jobdesk @if(empty($status_baca)) {!! $getJobdesk->posisi !!} @endif </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="{{ route('dashboard.jobdesk.agree') }}" method="post">
                                            @csrf
                                            <input type="hidden" name="pegawais_id" value="{{ Auth::user()->pegawais_id }}">
                                        <div class="row g-3">
                                            <div class="col-lg-12">
                                                {{-- @if(empty($status_baca)) {!! $getJobdesk->jobdesk !!} @endif  --}}
                                                {!! $getJobdesk->jobdesk !!}

                                                {{-- @if (!empty($getJobdesk->tugas_tambahan))
                                                    <hr>
                                                    <h5>Tugas Tambahan</h5>
                                                    {!! $getJobdesk->tugas_tambahan !!}
                                                @endif --}}
                                                
                                            </div><!--end col-->
                                            @if(empty($status_baca))
                                            <div class="col-lg-12">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
                                                    <label class="form-check-label text-danger" for="invalidCheck2">
                                                         Saya telah membaca jobdesk pekerjaan ini
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <button type="submit" class="btn btn-primary">Save</button>
                                            </div>
                                            @else 
                                            <div class="col-lg-12">
                                                <div class="alert alert-info">
                                                    <input type="checkbox" checked readonly disabled> Saya menyatakan sudah membaca, memahami dan siap menjalankan tugas yang diamanahkan.<br>
                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tanggal membuat pernyataan:&nbsp;{{date('d-m-Y H:i:s',strtotime($status_baca->created_at))}} WIB.
                                                </div>
                                            </div>
                                            @endif
                                        </div><!--end row-->
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- @endif --}}
                </div>
                {{-- @endif --}}
                                <!--end row-->
                @if (!empty($info_rekomitmen))
                    @php
                        $tglawal = date('Y-m-d',strtotime($info_rekomitmen->tanggal_awal));
                        $tglakhir = date('Y-m-d',strtotime($info_rekomitmen->tanggal_akhir));
                        $tanggalAwal = \Carbon\Carbon::parse($tglawal); // Tanggal awal
                        $tanggalAkhir = \Carbon\Carbon::parse($tglakhir); // Tanggal akhir
                        $tanggalSekarang = \Carbon\Carbon::now()->format('Y-m-d'); // Tanggal saat ini
                    @endphp
                    
                    @if ($tanggalSekarang >= $tanggalAwal && $tanggalSekarang <= $tanggalAkhir)
                    @php
                        $class='success';
                    @endphp
                    @else
                    @php
                        $class='danger';
                    @endphp
                    @endif

                    @if ($tanggalSekarang == date('Y-m-d',strtotime($tanggalAkhir)) )
                                                <div class="row">
                            <div class="col-md-8">
                                <!-- Danger Alert -->
                                <div class="alert alert-danger alert-dismissible alert-outline fade show" role="alert">
                                    <strong> Perhatian ! </strong> - <b> Hari ini batas akhir periode untuk rekomitmen</b> 
                                    {{-- <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> --}}
                                </div>
                            </div>
                        </div>
                                            @endif
                    @if($namarole != 'superadmin' && $namarole != 'admin' ) 
                        @if ($tanggalSekarang >= $tanggalAwal && $tanggalSekarang <= $tanggalAkhir)
                        <div class="modal fade" id="rekomitmenModal" tabindex="-1" aria-labelledby="rekomitmenModalLabel" aria-hidden="true" onload="showModalOnLoad()">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header border-0 align-items-center">
                                        @if ($statuspegawai=='tetap')
                                            <h4 class="modal-title" id="rekomitmenModalLabel" style="width:100%;text-align: center !important">
                                                REKOMITMEN {{ $info_rekomitmen->ta->nama }} <br>
                                                (MELANJUTKAN / TIDAK MELANJUTKAN BERTUGAS DI YPII)
                                            </h4>
                                        @else
                                            <h4 class="modal-title" id="rekomitmenModalLabel" style="width:100%;text-align: center !important">
                                                PERMOHONAN MELANJUTKAN BERTUGAS DI YPII<br>
                                                    BAGI PEGAWAI PKWT<br>
                                                DI TAHUN PELAJARAN {{ $info_rekomitmen->ta->nama }}
                                            </h4>
                                        @endif
                                        {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                                    </div>
                                    <div class="modal-header p-0 border-0 bg-soft-light">
                                        <div class="row g-0 text-left">
                                            <div class="col-12 col-sm-12">

                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-body">
                                        @php
                                            $usia=\Carbon\Carbon::parse($pegs->tanggal_lahir)->age;
                                        @endphp
                                        @section('css-manual')
                                            <style>
                                                #table-kar tr td {
                                                    padding: 2pt;
                                                }

                                                #table-kar tr td p {
                                                    margin-top: 0;
                                                    margin-bottom: 0;
                                                    line-height: 20pt;
                                                    font-weight: 500;
                                                    font-family:inherit;
                                                }
                                            </style>
                                        @endsection
                                        <form action="{{ route('setuju.syarat') }}" method="POST" id="accsyarat">
                                            @csrf
                                            <input type="hidden" name="rekomitmen_master_id" value="{{ $info_rekomitmen->id }}">
                                            <input type="hidden" name="pegawai_id" value="{{ $pegs->id }}">
                                            <input type="hidden" name="status_pegawai" value="{{ $statuspegawai }}">
                                            @method('POST')
                                            <table id="table-kar">
                                                <tr>
                                                    <td style="width: 1%" align="center">1.</td>
                                                    <td style="width: 15%">Nama Pegawai </td>
                                                    <td style="width: 3%">:</td>
                                                    <td style="width: 81%">{{ isset($pegs->nama_depan) ? $pegs->nama_depan : '' }} {{ isset($pegs->nama_belakang) ? $pegs->nama_belakang : '' }} </td>
                                                </tr>
                                                <tr>
                                                    <td align="center">2.</td>
                                                    <td>Unit Kerja</td>
                                                    <td>:</td>
                                                    <td>{{ $peg['bidangkerja'] }}</td>
                                                </tr>
                                                <tr>
                                                    <td align="center">3.</td>
                                                    <td>Posisi / Jabatan</td>
                                                    <td>:</td>
                                                    <td>{{ $peg['posisi'] }}</td>
                                                </tr>
                                                <tr>
                                                    <td align="center">4.</td>
                                                    <td>Alamat KTP</td>
                                                    <td>:</td>
                                                    <td>{{ $pegs->alamat_ktp }}</td>
                                                </tr>
                                                @if($statuspegawai=='tetap')
                                                <tr>
                                                    <td align="center">5.</td>
                                                    <td colspan="3">Dengan ini saya menyatakan di tahun pelajaran {{ $info_rekomitmen->ta->nama }}</td>
                                                </tr>
                                                @else
                                                <tr>
                                                    <td align="center" valign="top">5.</td>
                                                    <td colspan="3">Setelah masa berakhirnya Perjanjian Kerja Waktu Tertentu (PKWT) saya saat ini, dengan ini saya mengajukan permohonan di Tahun Pelajaran {{ $info_rekomitmen->ta->nama }} diperkenankan untuk;</td>
                                                </tr>
                                                @endif 
                                                <tr>
                                                    <td></td>
                                                    <td colspan="3">
                                                        @php
                                                            if($statuspegawai=='tetap'){
                                                                $teksA='Akan tetap bergabung di Yayasan Pendidikan Islam Ibuku';
                                                                $teksB='Mengundurkan diri dari Yayasan Pendidikan Islam Ibuku';
                                                            }else{
                                                                $teksA='melanjutkan bertugas di YPII, apabila berdasarkan hasil evaluasi kinerja atasan disarankan untuk diperpanjang.';
                                                                $teksB='tidak melanjutkan bertugas di YPII.';
                                                            }
                                                        @endphp
                                                        <input type="radio" name="lanjutkan" value="melanjutkan" class="lanjutkan">&nbsp;A.&nbsp;{{ $teksA }}
                                                    </td>
                                                </tr>
                                                <tr id="teks_tetap_melanjutkan" style="display: none">
                                                    <td></td>
                                                    <td colspan="3" style="text-align: left;">
                                                        @if ($statuspegawai=='tetap')

                                                            @if($usia >= $info_rekomitmen->usia_pensiun )

                                                            {!! $info_rekomitmen->pensiun_lanjut !!}

                                                            @else 

                                                            {!! $info_rekomitmen->tetap_lanjut !!}

                                                            @endif

                                                            
                                                        @else 
                                                            {!! $info_rekomitmen->pkwt_lanjut  !!}
                                                        @endif
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td colspan="3">
                                                        <input type="radio" name="lanjutkan" value="tidak melanjutkan" class="lanjutkan">&nbsp;B.&nbsp;{{ $teksB }}
                                                    </td>
                                                </tr>
                                                <tr id="teks_tetap_tidak_melanjutkan" style="display: none">
                                                    <td></td>
                                                    <td colspan="3" style="text-align: left;">
                                                        @if ($statuspegawai=='tetap')
                                                            @if($usia >= $info_rekomitmen->usia_pensiun )

                                                            {!! $info_rekomitmen->pensiun_tidak_lanjut !!}

                                                            @else 

                                                            {!! $info_rekomitmen->tetap_tidak_lanjut !!}

                                                            @endif
                                                        @else 
                                                            {!! $info_rekomitmen->pkwt_tidak_lanjut  !!}
                                                        @endif
                                                        <br>
                                                        <label>Alasan Tidak Melanjutkan</label>
                                                        <textarea class="form-control" name="alasan_tidak_melanjutkan" id="" cols="30" rows="10"></textarea>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="4">
                                                        &nbsp;
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2">
                                                        &nbsp;
                                                    </td>
                                                    <td colspan="2">
                                                    </td>
                                                </tr>
                                                <tr class="clicksetujukomitmen">
                                                    <td colspan="4">
                                                        <input type="checkbox" name="setuju" value="1" required> Saya Menerima Seluruh Ketentuan dan Syarat
                                                    </td>
                                                </tr>
                                                <tr class="setujukomitmen">
                                                    <td colspan="4">
                                                        <small><i>Silahkan masukan tanda tangan anda di kotak bawah</i></small>
                                                        <div id="sig"></div>
                                                        <br/>
                                                        <button type="button" id="clear" class="btn btn-danger btn-sm">Clear Signature</button>
                                                        <button id="save" type="button" class="btn btn-success btn-sm">Submit</button>
                                                        <textarea id="signature64" name="signed" style="display: none"></textarea>
                                                        {{-- <button style="submit" class="btn btn-success btn-sm">Setujui</button> --}}
                                                    </td> 
                                                </tr>
                                            </table>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    @endif
                @endif
                @if (!empty($info_updated))
                    @php
                        $tglawal = date('Y-m-d',strtotime($info_updated->tanggal_awal));
                        $tglakhir = date('Y-m-d',strtotime($info_updated->tanggal_akhir));
                        $tanggalAwal = \Carbon\Carbon::parse($tglawal); // Tanggal awal
                        $tanggalAkhir = \Carbon\Carbon::parse($tglakhir); // Tanggal akhir
                        $tanggalSekarang = \Carbon\Carbon::now()->format('Y-m-d'); // Tanggal saat ini
                    @endphp
                    
                    @if ($tanggalSekarang >= $tanggalAwal && $tanggalSekarang <= $tanggalAkhir)
                    @php
                        $class='success';
                    @endphp
                    @else
                    @php
                        $class='danger';
                    @endphp
                    @endif

                    @if ($tanggalSekarang == date('Y-m-d',strtotime($tanggalAkhir)) )
                        <div class="row">
                            <div class="col-md-8">
                                <!-- Danger Alert -->
                                <div class="alert alert-danger alert-dismissible alert-outline fade show" role="alert">
                                    <strong> Perhatian ! </strong> - <b> Hari ini batas akhir periode untuk update data</b> 
                                </div>
                            </div>
                        </div>
                    @endif
                    @if ($tanggalSekarang >= $tanggalAwal && $tanggalSekarang <= $tanggalAkhir)
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card">
                                <div class="card-header border-0 align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Info Update Data</h4>
                                    <div>
                                        <button type="button" class="btn btn-soft-{{$class}} btn-sm">
                                            Periode {{ date('d F Y',strtotime($info_updated->tanggal_awal)) }} s.d {{ date('d F Y',strtotime($info_updated->tanggal_akhir)) }} 
                                        </button>
                                        
                                    </div>
                                </div><!-- end card header -->

                                <div class="card-header p-0 border-0 bg-soft-light">
                                    <div class="row g-0 text-left">
                                        <div class="col-12 col-sm-12">
                                            <div class="p-3 border border-dashed border-start-0">
                                                {{-- <h5 class="mb-1"><span class="counter-value" data-target="7585">0</span>
                                                </h5> --}}
                                                <p class="text-muted mb-0">{!! $info_updated->keterangan !!}</p>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div><!-- end card header -->

                                <div class="card-body p-0 pb-2">
                                    <div class="w-100">
                                        
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->

                    
                        <!-- end col -->
                    </div>
                    @endif
                @endif

               

            </div> <!-- end .h-100-->

        </div> <!-- end col -->

        <div class="col-auto layout-rightside-col d-none">
            <div class="overlay"></div>
            <div class="layout-rightside">
                <div class="card h-100 rounded-0">
                    <div class="card-body p-0">
                        <div class="p-3">
                            <h6 class="text-muted mb-0 text-uppercase fw-semibold">Recent Activity</h6>
                        </div>
                        <div data-simplebar style="max-height: 410px;" class="p-3 pt-0">
                            <div class="acitivity-timeline acitivity-main">
                                <div class="acitivity-item d-flex">
                                    <div class="flex-shrink-0 avatar-xs acitivity-avatar">
                                        <div class="avatar-title bg-soft-success text-success rounded-circle">
                                            <i class="ri-shopping-cart-2-line"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-1 lh-base">Purchase by James Price</h6>
                                        <p class="text-muted mb-1">Product noise evolve smartwatch </p>
                                        <small class="mb-0 text-muted">02:14 PM Today</small>
                                    </div>
                                </div>
                                <div class="acitivity-item py-3 d-flex">
                                    <div class="flex-shrink-0 avatar-xs acitivity-avatar">
                                        <div class="avatar-title bg-soft-danger text-danger rounded-circle">
                                            <i class="ri-stack-fill"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-1 lh-base">Added new <span class="fw-semibold">style
                                                collection</span></h6>
                                        <p class="text-muted mb-1">By Nesta Technologies</p>
                                        <div class="d-inline-flex gap-2 border border-dashed p-2 mb-2">
                                            <a href="apps-ecommerce-product-details" class="bg-light rounded p-1">
                                                <img src="{{ URL::asset('build/images/products/img-8.png') }}" alt=""
                                                    class="img-fluid d-block" />
                                            </a>
                                            <a href="apps-ecommerce-product-details" class="bg-light rounded p-1">
                                                <img src="{{ URL::asset('build/images/products/img-2.png') }}" alt=""
                                                    class="img-fluid d-block" />
                                            </a>
                                            <a href="apps-ecommerce-product-details" class="bg-light rounded p-1">
                                                <img src="{{ URL::asset('build/images/products/img-10.png') }}" alt=""
                                                    class="img-fluid d-block" />
                                            </a>
                                        </div>
                                        <p class="mb-0 text-muted"><small>9:47 PM Yesterday</small></p>
                                    </div>
                                </div>
                                <div class="acitivity-item py-3 d-flex">
                                    <div class="flex-shrink-0">
                                        <img src="{{ URL::asset('build/images/users/avatar-2.jpg') }}" alt=""
                                            class="avatar-xs rounded-circle acitivity-avatar">
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-1 lh-base">Natasha Carey have liked the products</h6>
                                        <p class="text-muted mb-1">Allow users to like products in your WooCommerce store.
                                        </p>
                                        <small class="mb-0 text-muted">25 Dec, 2021</small>
                                    </div>
                                </div>
                                <div class="acitivity-item py-3 d-flex">
                                    <div class="flex-shrink-0">
                                        <div class="avatar-xs acitivity-avatar">
                                            <div class="avatar-title rounded-circle bg-secondary">
                                                <i class="mdi mdi-sale fs-14"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-1 lh-base">Today offers by <a
                                                href="apps-ecommerce-seller-details" class="link-secondary">Digitech
                                                Galaxy</a></h6>
                                        <p class="text-muted mb-2">Offer is valid on orders of Rs.500 Or above for selected
                                            products only.</p>
                                        <small class="mb-0 text-muted">12 Dec, 2021</small>
                                    </div>
                                </div>
                                <div class="acitivity-item py-3 d-flex">
                                    <div class="flex-shrink-0">
                                        <div class="avatar-xs acitivity-avatar">
                                            <div class="avatar-title rounded-circle bg-soft-danger text-danger">
                                                <i class="ri-bookmark-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-1 lh-base">Favoried Product</h6>
                                        <p class="text-muted mb-2">Esther James have favorited product.</p>
                                        <small class="mb-0 text-muted">25 Nov, 2021</small>
                                    </div>
                                </div>
                                <div class="acitivity-item py-3 d-flex">
                                    <div class="flex-shrink-0">
                                        <div class="avatar-xs acitivity-avatar">
                                            <div class="avatar-title rounded-circle bg-secondary">
                                                <i class="mdi mdi-sale fs-14"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-1 lh-base">Flash sale starting <span
                                                class="text-primary">Tomorrow.</span></h6>
                                        <p class="text-muted mb-0">Flash sale by <a href="javascript:void(0);"
                                                class="link-secondary fw-medium">Zoetic Fashion</a></p>
                                        <small class="mb-0 text-muted">22 Oct, 2021</small>
                                    </div>
                                </div>
                                <div class="acitivity-item py-3 d-flex">
                                    <div class="flex-shrink-0">
                                        <div class="avatar-xs acitivity-avatar">
                                            <div class="avatar-title rounded-circle bg-soft-info text-info">
                                                <i class="ri-line-chart-line"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-1 lh-base">Monthly sales report</h6>
                                        <p class="text-muted mb-2"><span class="text-danger">2 days left</span>
                                            notification to submit the monthly sales report. <a href="javascript:void(0);"
                                                class="link-warning text-decoration-underline">Reports Builder</a></p>
                                        <small class="mb-0 text-muted">15 Oct</small>
                                    </div>
                                </div>
                                <div class="acitivity-item d-flex">
                                    <div class="flex-shrink-0">
                                        <img src="{{ URL::asset('build/images/users/avatar-3.jpg') }}" alt=""
                                            class="avatar-xs rounded-circle acitivity-avatar" />
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-1 lh-base">Frank Hook Commented</h6>
                                        <p class="text-muted mb-2 fst-italic">" A product that has reviews is more likable
                                            to be sold than a product. "</p>
                                        <small class="mb-0 text-muted">26 Aug, 2021</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="p-3 mt-2">
                            <h6 class="text-muted mb-3 text-uppercase fw-semibold">Top 10 Categories
                            </h6>

                            <ol class="ps-3 text-muted">
                                <li class="py-1">
                                    <a href="#" class="text-muted">Mobile & Accessories <span
                                            class="float-end">(10,294)</span></a>
                                </li>
                                <li class="py-1">
                                    <a href="#" class="text-muted">Desktop <span
                                            class="float-end">(6,256)</span></a>
                                </li>
                                <li class="py-1">
                                    <a href="#" class="text-muted">Electronics <span
                                            class="float-end">(3,479)</span></a>
                                </li>
                                <li class="py-1">
                                    <a href="#" class="text-muted">Home & Furniture <span
                                            class="float-end">(2,275)</span></a>
                                </li>
                                <li class="py-1">
                                    <a href="#" class="text-muted">Grocery <span
                                            class="float-end">(1,950)</span></a>
                                </li>
                                <li class="py-1">
                                    <a href="#" class="text-muted">Fashion <span
                                            class="float-end">(1,582)</span></a>
                                </li>
                                <li class="py-1">
                                    <a href="#" class="text-muted">Appliances <span
                                            class="float-end">(1,037)</span></a>
                                </li>
                                <li class="py-1">
                                    <a href="#" class="text-muted">Beauty, Toys & More <span
                                            class="float-end">(924)</span></a>
                                </li>
                                <li class="py-1">
                                    <a href="#" class="text-muted">Food & Drinks <span
                                            class="float-end">(701)</span></a>
                                </li>
                                <li class="py-1">
                                    <a href="#" class="text-muted">Toys & Games <span
                                            class="float-end">(239)</span></a>
                                </li>
                            </ol>
                            <div class="mt-3 text-center">
                                <a href="javascript:void(0);" class="text-muted text-decoration-underline">View all
                                    Categories</a>
                            </div>
                        </div>
                        <div class="p-3">
                            <h6 class="text-muted mb-3 text-uppercase fw-semibold">Products Reviews</h6>
                            <!-- Swiper -->
                            <div class="swiper vertical-swiper" style="height: 250px;">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="card border border-dashed shadow-none">
                                            <div class="card-body">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 avatar-sm">
                                                        <div class="avatar-title bg-light rounded">
                                                            <img src="{{ URL::asset('build/images/companies/img-1.png') }}" alt=""
                                                                height="30">
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <div>
                                                            <p class="text-muted mb-1 fst-italic text-truncate-two-lines">
                                                                " Great product and looks great, lots of features. "</p>
                                                            <div class="fs-11 align-middle text-warning">
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-fill"></i>
                                                            </div>
                                                        </div>
                                                        <div class="text-end mb-0 text-muted">
                                                            - by <cite title="Source Title">Force Medicines</cite>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="card border border-dashed shadow-none">
                                            <div class="card-body">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0">
                                                        <img src="{{ URL::asset('build/images/users/avatar-3.jpg') }}" alt=""
                                                            class="avatar-sm rounded">
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <div>
                                                            <p class="text-muted mb-1 fst-italic text-truncate-two-lines">
                                                                " Amazing template, very easy to understand and manipulate.
                                                                "</p>
                                                            <div class="fs-11 align-middle text-warning">
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-half-fill"></i>
                                                            </div>
                                                        </div>
                                                        <div class="text-end mb-0 text-muted">
                                                            - by <cite title="Source Title">Henry Baird</cite>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="card border border-dashed shadow-none">
                                            <div class="card-body">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 avatar-sm">
                                                        <div class="avatar-title bg-light rounded">
                                                            <img src="{{ URL::asset('build/images/companies/img-8.png') }}" alt=""
                                                                height="30">
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <div>
                                                            <p class="text-muted mb-1 fst-italic text-truncate-two-lines">
                                                                "Very beautiful product and Very helpful customer service."
                                                            </p>
                                                            <div class="fs-11 align-middle text-warning">
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-line"></i>
                                                                <i class="ri-star-line"></i>
                                                            </div>
                                                        </div>
                                                        <div class="text-end mb-0 text-muted">
                                                            - by <cite title="Source Title">Zoetic Fashion</cite>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="card border border-dashed shadow-none">
                                            <div class="card-body">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0">
                                                        <img src="{{ URL::asset('build/images/users/avatar-2.jpg') }}" alt=""
                                                            class="avatar-sm rounded">
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <div>
                                                            <p class="text-muted mb-1 fst-italic text-truncate-two-lines">"
                                                                The product is very beautiful. I like it. "</p>
                                                            <div class="fs-11 align-middle text-warning">
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-fill"></i>
                                                                <i class="ri-star-half-fill"></i>
                                                                <i class="ri-star-line"></i>
                                                            </div>
                                                        </div>
                                                        <div class="text-end mb-0 text-muted">
                                                            - by <cite title="Source Title">Nancy Martino</cite>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="p-3">
                            <h6 class="text-muted mb-3 text-uppercase fw-semibold">Customer Reviews</h6>
                            <div class="bg-light px-3 py-2 rounded-2 mb-2">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1">
                                        <div class="fs-16 align-middle text-warning">
                                            <i class="ri-star-fill"></i>
                                            <i class="ri-star-fill"></i>
                                            <i class="ri-star-fill"></i>
                                            <i class="ri-star-fill"></i>
                                            <i class="ri-star-half-fill"></i>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <h6 class="mb-0">4.5 out of 5</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center">
                                <div class="text-muted">Total <span class="fw-medium">5.50k</span> reviews</div>
                            </div>

                            <div class="mt-3">
                                <div class="row align-items-center g-2">
                                    <div class="col-auto">
                                        <div class="p-1">
                                            <h6 class="mb-0">5 star</h6>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="p-1">
                                            <div class="progress animated-progress progress-sm">
                                                <div class="progress-bar bg-success" role="progressbar"
                                                    style="width: 50.16%" aria-valuenow="50.16" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="p-1">
                                            <h6 class="mb-0 text-muted">2758</h6>
                                        </div>
                                    </div>
                                </div>
                                <!-- end row -->

                                <div class="row align-items-center g-2">
                                    <div class="col-auto">
                                        <div class="p-1">
                                            <h6 class="mb-0">4 star</h6>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="p-1">
                                            <div class="progress animated-progress progress-sm">
                                                <div class="progress-bar bg-success" role="progressbar"
                                                    style="width: 29.32%" aria-valuenow="29.32" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="p-1">
                                            <h6 class="mb-0 text-muted">1063</h6>
                                        </div>
                                    </div>
                                </div>
                                <!-- end row -->

                                <div class="row align-items-center g-2">
                                    <div class="col-auto">
                                        <div class="p-1">
                                            <h6 class="mb-0">3 star</h6>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="p-1">
                                            <div class="progress animated-progress progress-sm">
                                                <div class="progress-bar bg-warning" role="progressbar"
                                                    style="width: 18.12%" aria-valuenow="18.12" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="p-1">
                                            <h6 class="mb-0 text-muted">997</h6>
                                        </div>
                                    </div>
                                </div>
                                <!-- end row -->

                                <div class="row align-items-center g-2">
                                    <div class="col-auto">
                                        <div class="p-1">
                                            <h6 class="mb-0">2 star</h6>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="p-1">
                                            <div class="progress animated-progress progress-sm">
                                                <div class="progress-bar bg-success" role="progressbar"
                                                    style="width: 4.98%" aria-valuenow="4.98" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-auto">
                                        <div class="p-1">
                                            <h6 class="mb-0 text-muted">227</h6>
                                        </div>
                                    </div>
                                </div>
                                <!-- end row -->

                                <div class="row align-items-center g-2">
                                    <div class="col-auto">
                                        <div class="p-1">
                                            <h6 class="mb-0">1 star</h6>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="p-1">
                                            <div class="progress animated-progress progress-sm">
                                                <div class="progress-bar bg-danger" role="progressbar"
                                                    style="width: 7.42%" aria-valuenow="7.42" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="p-1">
                                            <h6 class="mb-0 text-muted">408</h6>
                                        </div>
                                    </div>
                                </div><!-- end row -->
                            </div>
                        </div>

                        <div class="card sidebar-alert bg-light border-0 text-center mx-4 mb-0 mt-3">
                            <div class="card-body">
                                <img src="{{ URL::asset('build/images/giftbox.png') }}" alt="">
                                <div class="mt-4">
                                    <h5>Invite New Seller</h5>
                                    <p class="text-muted lh-base">Refer a new seller to us and earn $100 per refer.</p>
                                    <button type="button" class="btn btn-primary btn-label rounded-pill"><i
                                            class="ri-mail-fill label-icon align-middle rounded-pill fs-16 me-2"></i>
                                        Invite Now</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div> <!-- end card-->
            </div> <!-- end .rightbar-->

        </div> <!-- end col -->
    </div>
    {{-- Jobdesk --}}
        <div class="row">
        <div class="col-md-12">
            <div class="card box-dash-top">
                <div class="card-header">
                    My Rewards
                </div>
                <div class="card-body">
                    @if (!empty($myrewards))
                        <span>{{$myrewards}}</span>
                    @else 
                    <span class="text-danger">Penghargaan Tidak Tersedia</span>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="border-0 align-items-center d-flex">
                        <h4 class="card-title mb-0 flex-grow-1">Tugas Tambahan</h4>
                        <div>
                            
                            
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if ($CtugasTambahan==0)
                        <span class="text-danger">Tugas Tambahan Tidak Tersedia</span>
                    @else 
                        @foreach ($tugasTambahan as $item)
                            {{ $item->namatugas->nama }},
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="row" hidden>
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="border-0 align-items-center d-flex">
                        <h4 class="card-title mb-0 flex-grow-1">Tugas Tambahan</h4>
                        <div>
                            
                            
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if ($CtugasTambahan==0)
                        <span class="text-danger">Tugas Tambahan Tidak Tersedia</span>
                    @else 
                        @foreach ($tugasTambahan as $item)
                            {{ $item->namatugas->nama }},
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
    @endsection
@section('script')
<!-- apexcharts -->
<script src="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ URL::asset('build/libs/jsvectormap/js/jsvectormap.min.js') }}"></script>
<script src="{{ URL::asset('build/libs/jsvectormap/maps/world-merc.js') }}"></script>
<script src="{{ URL::asset('build/libs/swiper/swiper-bundle.min.js')}}"></script>
<script src="{{ URL::asset('build/js/pages/apexcharts-pie.init.js') }}"></script>
<!-- dashboard init -->
<script src="{{ URL::asset('build/js/pages/dashboard-ecommerce.init.js') }}"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script src="{{ URL::asset('build/js/external/jquery364.min.js')}}"></script>

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{URL::asset('build/js/external/jquery.signature.js')}}"></script>

    <style>

        .kbw-signature { width: 100%; height: 200px;}

        #sig{

            width: 100% !important;

            height: 300px;
            border:1px solid rgb(0, 0, 0);

        }

        canvas {
            display: block;
        }

    </style>

<script type="text/javascript">

    var sig = $('#sig').signature({syncField: '#signature64', syncFormat: 'PNG'});

    $('#clear').click(function(e) {

        e.preventDefault();

        sig.signature('clear');

        $("#signature64").val('');

    });

    // Inisialisasi signature pad dengan jQuery Signature
$('#sig').signature({
    syncField: '#signature64', // Menyinkronkan ke textarea
    syncFormat: 'PNG' // Format gambar
});

// Tombol clear untuk membersihkan tanda tangan
document.getElementById('clear').addEventListener('click', () => {
    $('#sig').signature('clear');
});

// Tombol simpan untuk menyimpan tanda tangan
document.getElementById('save').addEventListener('click', () => {
    var signaturePad = $('#sig').signature();

        const signatureData = $('#signature64').val(); // Ambil base64 dari textarea
        // $("#accsyarat").submit();
        var formData = new FormData($('#accsyarat')[0]); // Ambil seluruh data form

        // Kirim data dengan AJAX
        $.ajax({
            url: $('#accsyarat').attr('action'), // URL dari form action
            type: $('#accsyarat').attr('method'), // Metode dari form method
            data: formData,
            processData: false, // Jangan proses data (karena kita pakai FormData)
            contentType: false, // Jangan atur contentType secara otomatis
            success: function(response) {
                // Tangani respons sukses
                alert('Data berhasil dikirim!');
                console.log(response);
            },
            error: function(xhr) {
                // Tangani error
                alert('Terjadi kesalahan. Silakan coba lagi.');
                console.error(xhr.responseText);
            }
        });
        $.ajax({
            url: '{{ route("setuju.upload") }}',  
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}', 
                signed: signatureData,  
                pegawai_id:'{{ isset($pegs->id) ? $pegs->id : 0 }}',      // Data base64 dari tanda tangan
                rekomitmen_master_id : '{{ isset($info_rekomitmen->id) ? $info_rekomitmen->id : 0 }}',
            },
            success: function (response) {
                
                window.location.href = response.redirect_url;
            },
            error: function (error) {
                alert('Failed to upload signature');
            }
        });
});


</script>
<script>
    var chartDonutBasicColors = getChartColorsArray("simples_dount_chart");
    if (chartDonutBasicColors) {
        var options = {
            series: [{{$jumlah_tetap}}, {{$jumlah_kontrak}}, {{$jumlah_tugas}}],
            labels: ['Pegawai Tetap ({{$jumlah_tetap}})', 'PKWT ({{$jumlah_kontrak}})','Perpanjangan Tugas ({{$jumlah_tugas}})'],
            chart: {
                height: 300,
                type: 'donut',
            },
            legend: {
                position: 'bottom'
            },
            dataLabels: {
                enabled: false,
                formatter: function (val) {
                    return val.toFixed(0); // Menampilkan angka tanpa desimal
                },
                dropShadow: {
                    enabled: false,
                }
            },
            colors: chartDonutBasicColors
        };

        var chart = new ApexCharts(document.querySelector("#simples_dount_chart"), options);
        chart.render();
    }
</script>



<script>
    window.addEventListener('DOMContentLoaded', function() {
        var modal = new bootstrap.Modal(document.getElementById('exampleModalgrid'));
        //modal.show();
        //alert('dad');
    });
</script>


<script>
    function readmore(){
        var modal = new bootstrap.Modal(document.getElementById('exampleModalgrid'));
        modal.show();
    }
</script>
@endsection
@section('script-bottom')
    <script>
       // check password change
       $(document).ready(function(){
            location = "{{ route('beranda.force-change-password.index') }}";
        });
    </script>
    @endsection