@extends('layouts.backend.index')
@section('title', $label)

@section('content')
    <div class="card">
        <div class="card-body">
            <x-section-header action="list" :icon="$icon" :label="$label" />

            <form method="get">
            <div class="row mt-4">
                <div class="col-sm-6 col-md-3">
                    <x-form.date-picker id="year" label="Tahun" name='year' picker-type="year" :old="$year" />
                </div>
            </div>
            <button type="submit" id="btn-search" class="btn btn-dark btn-sm">
                <i class="mdi mdi-magnify"></i> &nbsp;SEARCH
            </button>
        </form>
        <hr />
        <div class="row">
            <div class="col-sm-6 col-md-4 stretch-card grid-margin">
                <div class="card bg-primary card-img-holder text-white" id="counter-kehadiran">
                    <div class="card-body p-3" style="cursor: pointer;">
                        <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                        <h4 class="font-weight-normal mb-3">
                            <i class="mdi mdi-location-enter card-icon float-right"></i>
                            <b>Persentasi Kehadiran</b>
                        </h4>
                        <h2 class="counter-number counters" data-from="0" data-to="{{ $persentase['kehadiran'] }}"
                            data-number="{{ $persentase['kehadiran'] }}">
                            {{ $persentase['kehadiran']}}%</h2>

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

            <div class="col-sm-6 col-md-4 stretch-card grid-margin">
                <div class="card bg-danger card-img-holder text-white" id="counter-absen">
                    <div class="card-body p-3" style="cursor: pointer;">
                        <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                        <h4 class="font-weight-normal mb-3">
                            <i class="mdi mdi-clock-time-three-outline card-icon float-right"></i>
                            <b>Persentasi Absen</b>
                        </h4>
                        <h2 class="counter-number counters" data-from="0" data-to="{{ $persentase['absen'] }}"
                            data-number="{{ $persentase['absen'] }}">
                            {{ $persentase['absen'] }}%</h2>

                    </div>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table" id="table-payroll">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Tanggal</th>
                        <th>Persentasi Kehadiran</th>
                        <th>Persentasi Absen</th>
                        <th>&nbsp;</th>

                    </tr>
                </thead>
                <tbody>
                    @foreach ($month as $key => $month_)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td>{{ $month_ }}</td>
                            <td>{{ @$monthData[$key]['persentasi_presence'] ?? 0 }}%</td>
                            <td>{{ @$monthData[$key]['persentasi_absen'] ?? 0 }}%</td>
                            <td><a class='btn
                                @if (empty($links[$key])) btn-secondary
                                @else
                                    btn-dark @endif
                                 btn-xs set-tooltip mr-1'
                                    href="{{ @$links[$key] ?? '' }}"><i class='mdi mdi-magnify'><i>&nbsp;Lihat</a></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        </div>
    </div>

@endsection

@push('styles')
    <link href="{{ asset('vendor/datatables.net/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endpush