@extends('layouts.index')
@section('title')
    Dashboard
@endsection
@section('css')
<link
rel="stylesheet"
href="{{asset('back')}}/libs/apexcharts/dist/apexcharts.css"
/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

<style>
  #mapStart {
    height: 400px;
  }
  #mapEnd {
    height: 400px;
  }
  .leaflet-marker-icon {
    border-radius: 50%;
  }
</style>
@php
    $pegawai_hari_ini = $pegawai_hadir_hari_ini_count->toJson();
    $yesterday = Carbon\Carbon::yesterday();
    if ($yesterday->format('l') == 'Sunday') {
        $yesterday = Carbon\Carbon::now()->subDays(3)->format('Y-m-d');
    }elseif ($yesterday->format('l') == 'Saturday') {
        $yesterday = Carbon\Carbon::now()->subDays(2)->format('Y-m-d');
    }else{
        $yesterday->format('Y-m-d');
    }
@endphp
@endsection
@section('content')
<div class="page-titles">
          <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
              <h4 class="text-muted mb-0 fw-normal">Dashboard</h4>
              <h1 class="mb-0 fw-bold">Employee</h1>
            </div>
            
          </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Container fluid  -->
        <!-- ============================================================== -->
        <div class="container-fluid">
          <!-- Row -->
          <div class="row">
            <!-- Column -->
            <div class="col-lg-6">
              <div class="card bg-primary">
                <div class="card-body">
                  <div
                    id=""
                    class="carousel slide"
                    data-ride="carousel"
                  >
                    <!-- Carousel items -->
                    <div class="carousel-inner">
                      <div class="carousel-item flex-column active">
                        <div class="d-flex no-block al me-3ign-items-center">
                          <i
                            class="fa fa-user text-white display-6 me-3"
                            title="User"
                          ></i>
                          <div class="mt-2">
                            <h5 class="text-white font-weight-medium">Employee Attendance Statistics</h5>
                            <h6 class="text-white">&nbsp;</h6>
                          </div>
                          <div class="ms-auto mt-3">
                            <div class="crypto"></div>
                          </div>
                        </div>
                        <div class="row text-center text-white">
                          <div class="col-3">
                            <span class="fs-3">No Checkout <br> {{date('l, d M Y')}}</span>
                            <p
                              class="
                                font-weight-medium
                                d-flex
                                align-item-center
                                justify-content-center
                              "
                              style="cursor: pointer"
                              onclick="seeDetail('today','start')"
                            >
                            {{$pegawai_absen_masuk_hari_ini_count ? count($pegawai_absen_masuk_hari_ini_count) : 0}}
                            </p>
                          </div>
                          <div class="col-3">
                            <span class="fs-3">Present <br> {{date('l, d M Y')}}</span>
                            <p
                              class="
                                font-weight-medium
                                d-flex
                                align-item-center
                                justify-content-center
                              "
                              style="cursor: pointer"
                              onclick="seeDetail('today','end')"
                            >
                            {{$pegawai_hadir_hari_ini_count ? count($pegawai_hadir_hari_ini_count) : 0}}
                            </p>
                          </div>
                          <div class="col-3">
                            <span class="fs-3">No Checkout <br> {{date('l, d M Y', strtotime($yesterday))}}</span>
                            <p
                              class="
                                font-weight-medium
                                d-flex
                                align-item-center
                                justify-content-center
                              "
                              style="cursor: pointer"
                              onclick="seeDetail('yesterday','start')"
                            >
                            {{$pegawai_absen_masuk_kemarin_count ? count($pegawai_absen_masuk_kemarin_count) : 0}}
                            </p>
                          </div>
                          <div class="col-3">
                            <span class="fs-3">Present <br> {{date('l, d M Y', strtotime($yesterday))}}</span>
                            <p
                              class="
                                font-weight-medium
                                d-flex
                                align-item-center
                                justify-content-center
                              "
                              style="cursor: pointer"
                              onclick="seeDetail('yesterday','end')"
                            >
                            {{$pegawai_hadir_kemarin_count ? count($pegawai_hadir_kemarin_count) : 0}}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="
                  card
                  welcome-card2
                  overflow-hidden
                  bg-light-info
                  border-0
                "
              >
              </div>
            </div>
            <div class="col-lg-6">
              <div class="card-group">
                <div class="card">
                  <div class="card-body">
                    <span
                      class="
                        btn btn-xl btn-light-info
                        text-info
                        btn-circle
                        d-flex
                        align-items-center
                        justify-content-center
                      "
                    >
                      <i data-feather="users"></i>
                    </span>
                    <h3 class="mt-3 pt-1 mb-0">
                      {{$pegawai_count}}
                    </h3>
                    <h6 class="text-muted mb-0 fw-normal">Total Employee</h6>
                  </div>
                </div>
                <div class="card">
                  <div class="card-body">
                    <span
                      class="
                        btn btn-xl btn-light-warning
                        text-warning
                        btn-circle
                        d-flex
                        align-items-center
                        justify-content-center
                      "
                    >
                      <i data-feather="package"></i>
                    </span>
                    <h3 class="mt-3 pt-1 mb-0">
                      {{$jabatan_count ?: 0}}
                      
                    </h3>
                    <h6 class="text-muted mb-0 fw-normal">Total Position</h6>
                  </div>
                </div>
                <div class="card">
                  <div class="card-body">
                    <span
                      class="
                        btn btn-xl btn-light-danger
                        text-danger
                        btn-circle
                        d-flex
                        align-items-center
                        justify-content-center
                      "
                    >
                      <i data-feather="bar-chart"></i>
                    </span>
                    <h3 class="mt-3 pt-1 mb-0 d-flex align-items-center">
                      {{$unit_kerja_count ?: 0}}
                    </h3>
                    <h6 class="text-muted mb-0 fw-normal">Division</h6>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-8 d-flex align-items-stretch">
              <div class="card w-100">
                <div class="card-body">
                <div class="d-md-flex align-items-center">
                    <div>
                      <h3 class="card-title">Attendance Chart </h3>
                      <h6 class="card-subtitle">In this year</h6>
                    </div>
                    <div class="ms-auto">
                      <ul class="list-style-none">
                        <li class="list-inline-item">
                          <i class="
                              ri-checkbox-blank-circle-fill
                              text-primary
                              fs-1
                              me-1
                            "></i>
                          Present
                        </li>
                        <li class="list-inline-item">
                          <i class="
                              ri-checkbox-blank-circle-fill
                              text-warning
                              fs-1
                              me-1
                            "></i>
                          Leave
                        </li>
                      </ul>
                    </div>
                  </div>
                      <div id="chartAbsensi" class="ps-3" style="height: 400px;"></div>
                    </div>
                  </div>
            </div>
            <!-- column -->
            <div class="col-lg-4 d-flex align-items-stretch">
              <div class="card w-100">
                <div class="card-body">
                  <div class="d-flex align-items-center pb-3 border-bottom">
                    <div>
                      <h3 class="card-title">Attendance Status </h3>
                      <h6 class="card-subtitle mb-0">In this year</h6>
                    </div>
                    <div class="ms-auto">
                      {{-- <select
                        class="form-select theme-select border-0"
                        aria-label="Default select example"
                      >
                        <option value="1">March 2021</option>
                        <option value="2">March 2022</option>
                        <option value="3">March 2023</option>
                      </select> --}}
                    </div>
                  </div>
                 
                  <div class="position-relative">
                    <div id="chartAttendanceStatus" class="mt-4 pt-2"></div>
                    
                  </div>
                  <ul
                    class="list-style-none d-flex justify-content-between mt-5"
                  >
                    <li class="list-inline-item">
                      <i
                        class="
                          ri-checkbox-blank-circle-fill
                          text-info
                          fs-1
                          me-1
                        "
                      ></i>
                      Present
                    </li>
                    <li class="list-inline-item">
                      <i
                        class="
                          ri-checkbox-blank-circle-fill
                          text-warning
                          fs-1
                          me-1
                        "
                      ></i
                      >Leave
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="card w-100">
                  <div class="card-body">
                    <div class="d-flex align-items-center pb-3 border-bottom">
                      <div>
                        <h3 class="card-title">Leave Chart </h3>
                        <h6 class="card-subtitle mb-0">In this year</h6>
                      </div>
                      <div class="ms-auto">
                        {{-- <select
                          class="form-select theme-select border-0"
                          aria-label="Default select example"
                        >
                          <option value="1">March 2021</option>
                          <option value="2">March 2022</option>
                          <option value="3">March 2023</option>
                        </select> --}}
                      </div>
                    </div>
                   
                    <div class="position-relative">
                      <div id="chartLeave" class="mt-4 pt-2"></div>
                      
                    </div>
                    <ul
                      class="list-style-none d-flex justify-content-between mt-5"
                    >
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="border-bottom title-part-padding">
                    <h4 class="mb-0">Today's Attendance Map (Start Work)</h4>
                  </div>
                  <div class="card-body">
                    <div id="mapStart"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="border-bottom title-part-padding">
                    <h4 class="mb-0">Today's Attendance Map (End Work)</h4>
                  </div>
                  <div class="card-body">
                    <div id="mapEnd"></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- column -->

            <div class="col-lg-6 d-flex align-items-stretch">
              <div class="card w-100">
                <div class="card-body">
                  <div class="d-flex align-items-center pb-3 border-bottom">
                    <div>
                      <h3 class="card-title">Gender</h3>
                        </div>
              
                  </div>
                 
                  <div class="position-relative">
                    <div id="charGender" class="mt-4 pt-2"></div>
                    
                  </div>
                </div>
              </div>
            </div>


            <div class="col-lg-6 d-flex align-items-stretch">
              <div class="card w-100">
                <div class="card-body">
                  <div class="d-flex align-items-center pb-3 border-bottom">
                    <div>
                      <h3 class="card-title">Employee Status</h3>
                        </div>
              
                  </div>
                 
                  <div class="position-relative">
                    <div id="chartStatus" class="mt-4 pt-2"></div>
                    
                  </div>
                </div>
              </div>
            </div>


            <div class="col-lg-8 d-flex align-items-stretch">
              <div class="card w-100">
                <div class="card-body">
                  <div class="d-md-flex align-items-center">
                    <div>
                      <h3 class="card-title">Leave Request</h3>
                      <h6 class="card-subtitle mb-0">
                        List of Employees submitting Leave
                      </h6>
                    </div>
                    {{-- <div class="ms-auto mt-3 mt-md-0">
                      <select
                        class="form-select theme-select border-0"
                        aria-label="Default select example"
                      >
                        <option value="1">March 2021</option>
                        <option value="2">March 2022</option>
                        <option value="3">March 2023</option>
                      </select>
                    </div> --}}
                  </div>
                  <div class="table-responsive mt-4">
                    <table
                      class="
                        table
                        mb-0
                        text-nowrap
                        varient-table
                        align-middle
                        fs-3
                      "
                    >
                      <thead>
                        <tr>
                          <th scope="col" class="px-0 text-muted">Name</th>
                          <th scope="col" class="px-0 text-muted">Request</th>
                          <th scope="col" class="px-0 text-muted">Date of Request </th>
                          <th scope="col" class="px-0 text-muted text-end">
                            Status
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        @if ($leave_request->isNotEmpty())
                          @foreach ($leave_request as $item)
                            @php

                            $colorImportant = null;
                            if ($item->status == 'periksa') {
                              $labelPengajuan = 'On Process';
                              $colorPengajuan = 'warning';
                            }else if ($item->status == 'verif'){
                              $labelPengajuan = 'Approved';
                              $colorPengajuan = 'primary';
                            }else if ($item->status == 'tolak'){
                              $labelPengajuan = 'Rejected';
                              $colorPengajuan = 'danger';
                              $colorImportant = 'style=background-color:#961331!important;';
                            }else {
                              $labelPengajuan = 'Cancelled';
                              $colorPengajuan = 'secondary';
                            }

                            $path = asset('back/images/users/3.jpg');
                            if ($item->pegawai) {
                              if ($item->pegawai->user) {
                                if (Storage::exists($item->pegawai->user->photos)) {
                                   $path = Storage::url($item->pegawai->user->photos);
                                }
                              }
                            }
                            @endphp
                          <tr>
                            <td class="px-0">
                              <div class="d-flex align-items-center">
                                <img src="{{$path}}" class="user-photo-small" width="35" height="35" style="object-fit: cover;"
                                  alt="flexy" />
                                <div class="ms-3">
                                  <h6 class="mb-0 fw-bold">{{$item->pegawai ? $item->pegawai->nama_lengkap : '-'}}</h6>
                                  <span
                                    class="text-muted fs-9">{{$item->pegawai ? (($item->pegawai->jabatan) ? $item->pegawai->jabatan->nama : '-') : '-'}}</span>
                                </div>
                              </div>
                            </td>
                            <td class="px-0 text-dark font-weight-medium ">{{$item->absen->nama}}</td>
                            <td class="px-0">
                              {{ date('d M Y', strtotime($item->tanggal_awal)) }} -
                              {{ date('d M Y', strtotime($item->tanggal_akhir)) }}
                            </td>
                            <td class="px-0 text-dark font-weight-medium text-end">
                              <span class="badge bg-{{$colorPengajuan}}">{{$labelPengajuan}}</span>
                            </td>
                          </tr>
                          @endforeach
                        @else
                          <tr>
                            <td colspan="100%">No data yet</td>
                          </tr>
                        @endif
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-4 d-flex align-items-stretch">
              <div class="card w-100">
                <div class="card-body">
                  <div class="d-flex align-items-start">
                    <div>
                      <h3 class="card-title">Log Acitivity</h3>
                      <h6 class="card-subtitle mb-0">Last</h6>
                    </div>
                   
                  </div>
                  <!-- timeline -->
                  <div
                    class="position-relative mt-5 scrollable"
                    style="height: 370px"
                  >
                    @php
                        $dateAttendance = null;
                    @endphp
                    @forelse ($log as $item)
                    
                        @if ($loop->first || date('Y-m-d', strtotime($item->created_at)) != date('Y-m-d', strtotime($log[$loop->index - 1]->created_at)))
                            <h6 class="text-info mb-2">{{Carbon\Carbon::create(date('Y-m-d', strtotime($item->created_at)))->isoFormat('D MMM YYYY')}}</h6>
                        @endif
                      <ul class="timeline-widget">
                        @php
                        $color = ['primary','success','danger','info','warning'];
                        @endphp
                        <li class="timeline-item mb-4">
                          <div class="timeline-time fw-bold text-dark fs-2 mt-n1">
                            {{date('H:i', strtotime($item->created_at))}}
                          </div>
                          <span class="
                                        timeline-badge
                                        me-3
                                        badge-{{Arr::random($color)}}
                                        flex-shrink-0
                                      "></span>
                          <div class="timeline-desc fs-3 text-muted mt-n1">
                            @php
                                $models = $item->subject_type;
                                $normalizedString = '';
                                if ($models) {
                                  $models = explode("\\", $item->subject_type);
                                  $words = preg_split('/(?=[A-Z])/', $models[2], -1, PREG_SPLIT_NO_EMPTY);
                                  $normalizedString = implode(' ', array_map('ucfirst', $words));
                                }
                            @endphp
                            {{$item->causer->name.' '.$item->description.' '.$normalizedString}}
                          </div>
                        </li>
                      </ul>
                    @empty
                      No activity yet
                    @endforelse
                  </div>
                </div>
              </div>
            </div>
            <div class="modal fade" id="modalId" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
              <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-md" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Modal title</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body" id="modalBody">
                    
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Row -->
        </div>
@endsection
@section('js')
<script src="{{asset('back')}}/libs/apexcharts/dist/apexcharts.min.js"></script>
<!-- Chart JS -->
<script src="{{asset('back')}}/js/pages/dashboards/dashboard1.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>


<script>
  var option_sales_overview = {
    series: [
      {
        name: "Visitor",
        data: [355, 390, 300, 350, 390, 180, 129, 292, 400, 270, 190, 200],
      },

      {
        name: "Page View",
        data: [200, 200, 150, 500, 300, 380, 129, 292, 200, 370, 200, 300],
      },

     
    ],

    chart: {
      type: "bar",
      height: 260,
      offsetX: -15,
      toolbar: {
        show: false,
      },
      foreColor: "#adb0bb",
      fontFamily: "DM sans",
      sparkline: {
        enabled: false,
      },
    },
    grid: {
      show: false,
      borderColor: "transparent",
      padding: {
        left: 0,
        right: 0,
        bottom: 0,
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: "42%",
        endingShape: "rounded",
        borderRadius: 5,
      },
    },

    colors: ["#15435A", "#a7e3f4"],
    fill: {
      type: "solid",
      opacity: 1,
    },
    dataLabels: {
      enabled: false,
    },
    markers: {
      size: 0,
    },
    legend: {
      show: false,
    },
    xaxis: {
      type: "category",
      categories: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Ags", "Sep", "Okt", "Nov", "Des" ],
    },
    yaxis: {
      show: true,
      min: 100,
      max: 400,
      tickAmount: 3,
    },
    stroke: {
      show: true,
      width: 5,
      lineCap: "butt",
      colors: ["transparent"],
    },
    tooltip: {
      theme: "dark",
    },
  };

  var chart_sales_overview = new ApexCharts(
    document.querySelector("#chartVisitor"),
    option_sales_overview
  );
  chart_sales_overview.render();
      
  var option_product_performance = {
    series: [
      {
        name: "Present",
        data: {!!$attendance_by_month_present!!},
      },
      {
        name: "Leave",
        data: {!!$attendance_by_month_leave!!},
      },
    ],

    chart: {
      type: "bar",
      height: 400,
      stacked: true,
      toolbar: {
        show: false,
      },
      foreColor: "#adb0bb",
      fontFamily: "DM sans",
      sparkline: {
        enabled: false,
      },
    },
    grid: {
      show: false,
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: "50%",
        borderRadius: 9,
      },
    },
    colors: ["#15435A", "#fec90f"],
    fill: {
      type: "solid",
      opacity: 1,
    },
    dataLabels: {
      enabled: false,
    },
    markers: {
      size: 0,
    },
    legend: {
      show: false,
    },
    xaxis: {
      type: "category",
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Ags", "Sep", "Okt", "Nov", "Des"],
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
    },
    yaxis: {
      show: true,
      tickAmount: 3,
    },
    stroke: {
      show: true,
      curve: "smooth",
      width: 5,
      lineCap: "round",
      colors: ["white"],
    },
    tooltip: {
      theme: "dark",
    },
  };

  var chart_product_performance = new ApexCharts(
    document.querySelector("#chartAbsensi"),
    option_product_performance
  );
  chart_product_performance.render();

  var option_attendance_status = {
    series: {{$attendance_status}},
    labels: ["Present", "Leave"],
    chart: {
      height: 280,
      type: "donut",
      foreColor: "#adb0bb",
      fontFamily: "DM sans",
    },
    colors: ["#15435A", "#fec90f"],
    dataLabels: {
      enabled: false,
    },
    legend: {
      show: false,
      // position: "bottom",
      // fontSize: "16px",
      // labels: {
      //   colors: ["#777e89"],
      // },
      // markers: {
      //   width: 8,
      //   height: 8,
      // },
    },
    grid: {
      show: false,
      borderColor: "transparent",
      padding: {
        top: 0,
        right: 0,
      },
    },
    stroke: {
      colors: ["transparent"],
    },
    plotOptions: {
      pie: {
        donut: {
          size: "78%",
          background: "transparent",
          labels: {
            show: false,
            name: {
              show: true,
              fontSize: "18px",
              color: undefined,
              offsetY: -10,
            },
            value: {
              show: false,
              color: "#98aab4",
            },
            total: {
              show: false,
              label: "Our Visitors",
              color: "#98aab4",
            },
          },
        },
      },
    },
    tooltip: {
      theme: "dark",
      fillSeriesColor: false,
    },
  };

  var chart_attendance_status = new ApexCharts(
    document.querySelector("#chartAttendanceStatus"),
    option_attendance_status
  );
  chart_attendance_status.render();

  var option_leave_status = {
    series: {{$employee_leaves}},
    labels: @json($employee_leave_keys),
    chart: {
      height: 320,
      type: "donut",
      foreColor: "#adb0bb",
      fontFamily: "DM sans",
    },
    // colors: ["#15435A", "#fec90f"],
    dataLabels: {
      enabled: false,
    },
    legend: {
      show: true,
      position: "bottom",
      fontSize: "16px",
      labels: {
        colors: ["#777e89"],
      },
      markers: {
        width: 8,
        height: 8,
      },
    },
    grid: {
      show: false,
      borderColor: "transparent",
      padding: {
        top: 0,
        right: 0,
      },
    },
    stroke: {
      colors: ["transparent"],
    },
    plotOptions: {
      pie: {
        donut: {
          size: "78%",
          background: "transparent",
          labels: {
            show: false,
            name: {
              show: true,
              fontSize: "18px",
              color: undefined,
              offsetY: -10,
            },
            value: {
              show: false,
              color: "#98aab4",
            },
            total: {
              show: false,
              label: "Our Visitors",
              color: "#98aab4",
            },
          },
        },
      },
    },
    tooltip: {
      theme: "dark",
      fillSeriesColor: false,
    },
  };

  var chart_leave_status = new ApexCharts(
    document.querySelector("#chartLeave"),
    option_leave_status
  );
  chart_leave_status.render();
        
  var option_genre = {
    series: {!!str_replace('"','',$employee_genders)!!},
    labels: ["Male", "Female", "Unkwown"],
    chart: {
      height: 330,
      type: "donut",
      foreColor: "#adb0bb",
      fontFamily: "DM sans",
    },
    colors: ["#15435A", "#fec90f", '#6c757d'],
    dataLabels: {
      enabled: false,
    },
    legend: {
      show: true,
      position: "bottom",
      fontSize: "16px",
      labels: {
        colors: ["#777e89"],
      },
      markers: {
        width: 8,
        height: 8,
      },
    },
    grid: {
      show: false,
      borderColor: "transparent",
      padding: {
        top: 0,
        right: 0,
      },
    },
    stroke: {
      colors: ["transparent"],
    },
    plotOptions: {
      pie: {
        donut: {
          size: "78%",
          background: "transparent",
          labels: {
            show: false,
            name: {
              show: true,
              fontSize: "18px",
              color: undefined,
              offsetY: -10,
            },
            value: {
              show: false,
              color: "#98aab4",
            },
            total: {
              show: false,
              label: "Our Visitors",
              color: "#98aab4",
            },
          },
        },
      },
    },
    tooltip: {
      theme: "dark",
      fillSeriesColor: false,
    },
  };

  var chart_genre = new ApexCharts(
    document.querySelector("#charGender"),
    option_genre
  );
  chart_genre.render();

  var option_status = {
    series: {!!str_replace('"','',$employee_status_values)!!},
    labels: {!!$employee_status_keys!!},
    chart: {
      height: 330,
      type: "donut",
      foreColor: "#adb0bb",
      fontFamily: "DM sans",
    },
    dataLabels: {
      enabled: false,
    },
    legend: {
      show: true,
      position: "bottom",
      fontSize: "16px",
      labels: {
        colors: ["#777e89"],
      },
      markers: {
        width: 8,
        height: 8,
      },
    },
    grid: {
      show: false,
      borderColor: "transparent",
      padding: {
        top: 0,
        right: 0,
      },
    },
    stroke: {
      colors: ["transparent"],
    },
    plotOptions: {
      pie: {
        donut: {
          size: "78%",
          background: "transparent",
          labels: {
            show: false,
            name: {
              show: true,
              fontSize: "18px",
              color: undefined,
              offsetY: -10,
            },
            value: {
              show: false,
              color: "#98aab4",
            },
            total: {
              show: false,
              label: "Our Visitors",
              color: "#98aab4",
            },
          },
        },
      },
    },
    tooltip: {
      theme: "dark",
      fillSeriesColor: false,
    },
  };

  var chart_status = new ApexCharts(
    document.querySelector("#chartStatus"),
    option_status
  );
  chart_status.render();

  var option_pendidikan = {
    series: {!! str_replace('"','',$religion_values)!!},
    labels: {!! $religion_keys !!},
    chart: {
      height: 330,
      type: "donut",
      foreColor: "#adb0bb",
      fontFamily: "DM sans",
    },
    dataLabels: {
      enabled: false,
    },
    legend: {
      show: true,
      position: "bottom",
      fontSize: "16px",
      labels: {
        colors: ["#777e89"],
      },
      markers: {
        width: 8,
        height: 8,
      },
    },
    grid: {
      show: false,
      borderColor: "transparent",
      padding: {
        top: 0,
        right: 0,
      },
    },
    stroke: {
      colors: ["transparent"],
    },
    plotOptions: {
      pie: {
        donut: {
          size: "78%",
          background: "transparent",
          labels: {
            show: false,
            name: {
              show: true,
              fontSize: "18px",
              color: undefined,
              offsetY: -10,
            },
            value: {
              show: false,
              color: "#98aab4",
            },
            total: {
              show: false,
              label: "Our Visitors",
              color: "#98aab4",
            },
          },
        },
      },
    },
    tooltip: {
      theme: "dark",
      fillSeriesColor: false,
    },
  };

  var chart_pendidikan = new ApexCharts(
    document.querySelector("#chartReligion"),
    option_pendidikan
  );
  chart_pendidikan.render();

  var mapStart = L.map('mapStart', {
    scrollWheelZoom: false
  }).setView([-6.119525201123704, 106.82246187472381], 8);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'United in Diversity'
  }).addTo(mapStart);

  var mapEnd = L.map('mapEnd', {
    scrollWheelZoom: false
  }).setView([-6.119525201123704, 106.82246187472381], 8);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'United in Diversity'
  }).addTo(mapEnd);

  var LeafIcon = L.Icon.extend({
      options: {
        iconSize: [38, 38],
        
      }
  });

  var greenIcon = new LeafIcon();

  var arrMarker = @json($todays_attendance_start_work);
  arrMarker.forEach((e,i) => {
    console.log(e.jam_masuk);

    greenIcon = new LeafIcon({
        iconUrl: e.pegawai?.foto_storage,
    })

    marker_masuk =  L.marker([e.latitude_masuk, e.longitude_masuk], {icon: greenIcon}).addTo(mapStart);
    marker_masuk.bindTooltip(`<b>${e.pegawai?.nama_lengkap}</b><br>Start work at ${e.jam_masuk}.`);

    if (e.jam_pulang) {
        marker_pulang =  L.marker([e.latitude_pulang, e.longitude_pulang], {icon: greenIcon}).addTo(mapEnd);
        marker_pulang.bindTooltip(`<b>${e.pegawai?.nama_lengkap}</b><br>End work at ${e.jam_pulang}.`);
    }

  });

  setInterval(function () {
      mapStart.invalidateSize();
      mapEnd.invalidateSize();
  }, 100);

  
  function seeDetail(date, type) {
    const myModal = new bootstrap.Modal(document.getElementById('modalId'), {})
    let list;
    let title;
    let html = '';

    if (date == 'today' && type == 'start') {
      title = "No Checkout Today";
      list = @json($pegawai_absen_masuk_hari_ini_count);
    } else if (date == 'today' && type == 'end') {
      title = "Present Today";
      list = @json($pegawai_hadir_hari_ini_count);
    } else if (date == 'yesterday' && type == 'start') {
      title = "No Checkout Yesterday";
      list = @json($pegawai_absen_masuk_kemarin_count);
    }else if (date == 'yesterday' && type == 'end') {
      title = "Present Yesterday";
      list = @json($pegawai_hadir_kemarin_count);
    }

    if (list.length > 0) {
      list.forEach((e,i) => {
        html += `
              <div class="d-flex align-items-center mb-3">
                <img src="${e.pegawai?.foto_storage}" class="user-photo-small" style="object-fit: cover;max-height:35px;max-width:35px;"
                  alt="flexy" />
                <div class="ms-3">
                  <h6 class="mb-0 fw-bold">${e.pegawai?.nama_lengkap}</h6>
                  <small>${e.jam_masuk} - ${e.jam_pulang}</small>
                </div>
              </div>
        `
      });
    }else{
      html = "Nothing"
    }

    $('#modalTitle').html(title);
    $('#modalBody').html(html);
    myModal.show();
  }

  </script>

      
@endsection