@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" style="display: none">
                <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-6">
            <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" style="text-align: center">Kelengkapan Data</h4>
                        <div>
                            
                        </div>
                    </div>
                </div>
                {{-- style="height: calc(100vh - 120px); overflow: auto;" --}}
                <div class="card-body" style="height: calc(100vh - 120px); overflow: auto;">
                    <ul class="list-group list-group-flush">
                        
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm">
                                        <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                            <i data-feather="user" class="text-info"></i>   
                                        </span> 
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-1 fs-14"><a href="{{ route('manajemen.pegawai.show',[$prods->id]) }}"> Data Pribadi </a></h5>
                                    <p class="text-muted mb-0"></p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm">
                                        @if ($data_pribadi==1)
                                            <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                                <i data-feather="check" class="text-info"></i>   
                                            </span>
                                        @else
                                            <span class="avatar-title bg-soft-danger rounded-circle fs-2">
                                                <i data-feather="x" class="text-danger"></i>
                                            </span>    
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm">
                                        <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                            <i data-feather="users" class="text-info"></i>   
                                        </span> 
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-1 fs-14">
                                        <a href="{{ $data_pribadi == 1 ? route('manajemen.pegawai.keluarga', [$prods->id]) : '#' }}"
                                            style="color: {{ $data_pribadi == 1 ? 'primary' : 'grey' }}">
                                             Data Keluarga    
                                         </a>                                         
                                    </h5>
                                    <p class="text-muted mb-0"></p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm">
                                        @if ($data_keluarga==1)
                                            <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                                <i data-feather="check" class="text-info"></i>   
                                            </span>
                                        @else
                                            <span class="avatar-title bg-soft-danger rounded-circle fs-2">
                                                <i data-feather="x" class="text-danger"></i>
                                            </span>    
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm">
                                        <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                            <i data-feather="award" class="text-info"></i>   
                                        </span> 
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-1 fs-14">
                                        <a href="{{ $data_keluarga == 1 ? route('manajemen.pegawai.riwayatpendidikan', [$prods->id]) : '#' }}"
                                            style="color: {{ $data_keluarga == 1 ? 'primary' : 'grey' }}">
                                             Data Pendidikan    
                                        </a>
                                    </h5>
                                    <p class="text-muted mb-0"></p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm">
                                        @if ($riwayat_pendidikan==1)
                                            <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                                <i data-feather="check" class="text-info"></i>   
                                            </span>
                                        @else
                                            <span class="avatar-title bg-soft-danger rounded-circle fs-2">
                                                <i data-feather="x" class="text-danger"></i>
                                            </span>    
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm">
                                        <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                            <i data-feather="message-circle" class="text-info"></i>   
                                        </span> 
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-1 fs-14">
                                        <a href="{{ $riwayat_pendidikan == 1 ? route('manajemen.pegawai.aktivitassosial', [$prods->id]) : '#' }}"
                                            style="color: {{ $riwayat_pendidikan == 1 ? 'primary' : 'grey' }}">
                                                Aktivitas Sosial    
                                        </a>
                                    </h5>
                                    <p class="text-muted mb-0"></p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm">
                                        @if ($aktivitas_sosial==1)
                                            <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                                <i data-feather="check" class="text-info"></i>   
                                            </span>
                                        @else
                                            <span class="avatar-title bg-soft-danger rounded-circle fs-2">
                                                <i data-feather="x" class="text-danger"></i>
                                            </span>    
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm">
                                        <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                            <i data-feather="globe" class="text-info"></i>   
                                        </span> 
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-1 fs-14">
                                        <a href="{{ $aktivitas_sosial == 1 ? route('manajemen.pegawai.bahasa', [$prods->id]) : '#' }}"
                                            style="color: {{ $aktivitas_sosial == 1 ? 'primary' : 'grey' }}">
                                                Bahasa Yang Dikuasai 
                                        </a>
                                    </h5>
                                    <p class="text-muted mb-0"></p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm">
                                        @if ($bahasa_yang_dikuasai==1)
                                            <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                                <i data-feather="check" class="text-info"></i>   
                                            </span>
                                        @else
                                            <span class="avatar-title bg-soft-danger rounded-circle fs-2">
                                                <i data-feather="x" class="text-danger"></i>
                                            </span>    
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm">
                                        <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                            <i data-feather="link" class="text-info"></i>   
                                        </span> 
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-1 fs-14">
                                        <a href="{{ $bahasa_yang_dikuasai == 1 ? route('manajemen.pegawai.referensipegawai', [$prods->id]) : '#' }}"
                                            style="color: {{ $bahasa_yang_dikuasai == 1 ? 'primary' : 'grey' }}">
                                                Referensi
                                        </a>
                                    </h5>
                                    <p class="text-muted mb-0"></p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm">
                                        @if ($bahasa_yang_dikuasai==1)
                                            <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                                {{-- <i data-feather="check" class="text-info"></i>    --}}
                                                <span class="text-info"> ! </span>
                                            </span>
                                        @else
                                            <span class="avatar-title bg-soft-danger rounded-circle fs-2">
                                                {{-- <i data-feather="x" class="text-danger"></i> --}}
                                                <span class="text-danger"> ! </span>
                                            </span>    
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm">
                                        <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                            <i class="text-info ri-building-line"></i>   
                                        </span> 
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-1 fs-14">
                                        <a href="{{ $bahasa_yang_dikuasai == 1 ? route('manajemen.pegawai.riwayatpekerjaan', [$prods->id]) : '#' }}"
                                            style="color: {{ $bahasa_yang_dikuasai == 1 ? 'primary' : 'grey' }}">
                                                Riwayat Pekerjaan
                                        </a>
                                    </h5>
                                    <p class="text-muted mb-0"></p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm">
                                        @if ($bahasa_yang_dikuasai==1)
                                            <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                                {{-- <i data-feather="check" class="text-info"></i>    --}}
                                                <span class="text-info"> ! </span>
                                            </span>
                                        @else
                                            <span class="avatar-title bg-soft-danger rounded-circle fs-2">
                                                {{-- <i data-feather="x" class="text-danger"></i> --}}
                                                <span class="text-danger"> ! </span>
                                            </span>    
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm">
                                        <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                            <i class="text-info  ri-questionnaire-line"></i>   
                                        </span> 
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-1 fs-14">
                                        <a href="{{ $bahasa_yang_dikuasai == 1 ? route('manajemen.pegawai.pertanyaan', [$prods->id]) : '#' }}"
                                            style="color: {{ $bahasa_yang_dikuasai == 1 ? 'primary' : 'grey' }}">
                                                Pertanyaan
                                        </a>
                                    </h5>
                                    <p class="text-muted mb-0"></p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm">
                                        @if ($pertanyaan==1)
                                            <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                                <i data-feather="check" class="text-info"></i>   
                                            </span>
                                        @else
                                            <span class="avatar-title bg-soft-danger rounded-circle fs-2">
                                                <i data-feather="x" class="text-danger"></i>
                                            </span>    
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm">
                                        <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                            <i data-feather="file-text" class="text-info"></i>   
                                        </span> 
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-1 fs-14">
                                        <a href="{{ $pertanyaan == 1 ? '#modal' : '#' }}"
                                        style="color: {{ $pertanyaan == 1 ? 'primary' : 'grey' }}; {{ $pertanyaan == 0 ? 'pointer-events: none; cursor: default;' : '' }}"
                                        class="{{ $pertanyaan == 0 ? 'disabled' : '' }}"
                                        @if($pertanyaan == 1)
                                            data-bs-toggle="modal" data-bs-target="#modal"
                                        @endif>
                                            Pernyataan Kebenaran Data
                                        </a>
                                        @if ($data_pribadi==1 && $data_keluarga==1 && $riwayat_pendidikan==1 && $aktivitas_sosial==1 && $bahasa_yang_dikuasai==1 && $pertanyaan==1)
                                            <br>
                                            <small>Klik pada pernyataan kebenaran data untuk melihat detail</small>
                                        @endif
                                    

                                    </h5>
                                    <p class="text-muted mb-0"></p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm">
                                        @if ($pernyataan_kebenaran_data==1)
                                            <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                                <i data-feather="check" class="text-info"></i>   
                                            </span>
                                        @else
                                            <span class="avatar-title bg-soft-danger rounded-circle fs-2">
                                                <i data-feather="x" class="text-danger"></i>
                                            </span>    
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <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" style="text-align: center">Status Tahapan Proses Rekrutmen </h4>
                        <div>
                            
                        </div>
                    </div>
                </div>
                {{-- style="height: calc(100vh - 120px); overflow: auto;" --}}
                <div class="card-body" style="height: calc(100vh - 120px); overflow: auto;">
                    
                    @foreach ($tahapan as $index => $step)

                                        <h2 style="text-align: center">
                                            {{ $step['nama_tahapan'] }}
                                        </h2>
                                        <div>
                                            <p style="text-align: justify">
                                                {!! $step['keterangan'] !!}
                                            </p>
                                        </div>
                    @endforeach
                    
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">
                    Pernyataan Kebenaran Data </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>
            <div class="modal-body">
                <form action="">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" @if ($pernyataan_kebenaran_data==1)
                            checked disabled
                        @endif>
                        <label class="form-check-label" for="flexCheckDefault">
                        Saya menyatakan bahwa data yang saya berikan adalah benar dan dapat dipertanggung jawabkan. <br>
                        Jika terdapat data palsu, saya bertanggung jawab sepenuhnya.
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="btnsetuju" @if ($pernyataan_kebenaran_data==1)
                disabled
            @endif>Setuju</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </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);
            }
        });
    
});





</script>

<script>
    $(document).ready(function () {
        $('#btnsetuju').click(function () {
            if ($('#flexCheckDefault').is(':checked')) {
                $("#btnsetuju").html("loading...");
                $.ajax({
                    url: "{{ route('staff.simpan.pernyataan') }}",
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        pernyataan: true
                    },
                    success: function (response) {
                        
                        // $('#modal').modal('hide'); // Tutup modal

                        // Reload halaman setelah 1.5 detik (1500 ms)
                        setTimeout(function () {
                            alert('Pernyataan berhasil disimpan!');
                            location.reload();
                        }, 1000);
                    },
                    error: function () {
                        alert('Terjadi kesalahan saat menyimpan.');
                    }
                });
            } else {
                alert('Silakan centang pernyataan terlebih dahulu.');
            }
        });
    });
</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