@extends('layouts.index')
@section('title')
    Attendance Summary
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/extra-libs/prism/prism.css" />
    <link href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .l2 {
            padding-left: 1em;
        }

        .l3 {
            padding-left: 2em;
        }

    </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Attendance Summary
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Attendance Summary</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form method="GET">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label>Division / Departement</label>
                                        <select class="select1 form-control custom-select required" style="width: 100%"
                                            name="id_unit_kerja">
                                            <option value="">-- Select --</option>
                                            @foreach ($ref_unit_kerja as $item)
                                                <option class="l{{ $item->level }}" value="{{ $item->id }}"
                                                    {{ isset($_GET['id_unit_kerja']) ? ($_GET['id_unit_kerja'] == $item->id ? 'selected' : null) : null }}>
                                                    {{ $item->nama }}</option>
                                                @if ($item->children)
                                                    @foreach ($item->children as $item)
                                                        <option class="l{{ $item->level }}" value="{{ $item->id }}"
                                                            {{ isset($_GET['id_unit_kerja']) ? ($_GET['id_unit_kerja'] == $item->id ? 'selected' : null) : null }}>
                                                            {{ $item->nama }}</option>
                                                        @if ($item->children)
                                                            @foreach ($item->children as $item)
                                                                <option class="l{{ $item->level }}"
                                                                    value="{{ $item->id }}"
                                                                    {{ isset($_GET['id_unit_kerja']) ? ($_GET['id_unit_kerja'] == $item->id ? 'selected' : null) : null }}>
                                                                    {{ $item->nama }}
                                                                </option>
                                                            @endforeach
                                                        @endif
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label>Day</label>
                                        <select class="form-select" name="day">
                                            <option value="">-- Select --</option>
                                            @for ($i = 1; $i <= 31; $i++)
                                                <option value="{{$i}}" {{isset($_GET['day']) ? ($_GET['day'] == $i ? 'selected' : null) : null}}>{{$i}}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label>Month</label>
                                        <select class="form-select" name="month">
                                            <option value="">-- Select --</option>
                                            @php
                                                $arrMonth = ['January', 'February', 'March', 'April', 'Mei', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
                                            @endphp
                                            @foreach ($arrMonth as $item)
                                                <option value="{{ $loop->iteration }}"
                                                    {{ $month == $loop->iteration ? 'selected' : null }}>
                                                    {{ $item }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label>Year</label>
                                        <select class="form-select" name="year">
                                            <option value="">-- Select --</option>
                                            @for ($i = 2023; $i <= date('Y'); $i++)
                                                <option value="{{ $i }}"
                                                    {{ $year == $i ? 'selected' : null }}>
                                                    {{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label for="">Type</label>
                                        <select class="form-select" name="type">
                                            <option value="">-- Select --</option>
                                            <option value="weekday" {{isset($_GET['type']) ? ($_GET['type'] == 'weekday' ? 'selected' : null) : null}}>Weekday</option>
                                            <option value="weekend" {{isset($_GET['type']) ? ($_GET['type'] == 'weekend' ? 'selected' : null) : null}}>Weekend</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="mb-3" style="margin-top: 25px;">
                                        <button class="btn btn-outline-primary d-grid gap-2"> Filter </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body table-responsive">
                        <div class="row mb-3">
                            <div class="text-end">
                                <a href="{{route('rekap-absensi.export', ['id_unit_kerja' => $id_unit_kerja, 'month' => $month, 'year' => $year, 'type' => $type, 'day' => $day])}}" class="btn btn-outline-success"><i class="fa fa-file-excel"></i> Export Excel</a>
                            </div>
                        </div>
                        <table class="table" id="zero_config" width="100%">
                            <thead>
                                <tr>
                                    <th rowspan="2">No</th>
                                    <th rowspan="2">Name</th>
                                    <th class="text-center" colspan="4">Total Day</th>
                                    <th colspan="3" style="text-align:center">Total Working Time</th>
                                    <!-- <th rowspan="2" style="text-align:center">Total Waktu Kerja</th> -->
                                    <th rowspan="2" style="text-align:center" width="300px">Action</th>
                                </tr>
                                <tr class="text-center">
                                    <th><span data-bs-toggle="tooltip" data-bs-placement="top" title="Present">Present</span></th>
                                    <th><span data-bs-toggle="tooltip" data-bs-placement="top" title="No Checking Out">No Checking Out</span></th>
                                    <th><span data-bs-toggle="tooltip" data-bs-placement="top" title="Without Explanation">Without Explanation</span></th>
                                    <th><span data-bs-toggle="tooltip" data-bs-placement="top" title="Leave">Leave</span></th>
                                    <th><span data-bs-toggle="tooltip" data-bs-placement="top" title="Working Time">Working Time</span></th>
                                    <th><span data-bs-toggle="tooltip" data-bs-placement="top" title="Pause Time">Pause Time</span></th>
                                    <th><span data-bs-toggle="tooltip" data-bs-placement="top" title="Total">Total</span></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($absen as $item)
                                    <tr>
                                        <td align="center">{{$loop->iteration}}</td>

                                        <td style="width: 450px;">
                                            <div class="d-flex align-items-center">
                                                @php
                                                    $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);
                                                            }else{
                                                                $path = $item->pegawai->foto_storage;
                                                            }
                                                        }
                                                    }
                                                @endphp
                                                <img src="{{$path}}" class="rounded-circle"
                                                width="35" height="35" style="min-height:35px;min-width:35px;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 align="center" style="color: #39cb7f;">{{$item->hadir}}</td>
                                        <td align="center" style="color: #fdc90f;">{{$item->tap}}</td>
                                        <td align="center" style="color: #47030c;">{{$item->tanpa_keterangan}}</td>
                                        <td align="center" style="color: #eb001f;">{{$item->pengajuan_absen_total_dash ?: 0}}</td>
                                        <td align="center">{{convert_minute($item->waktu_kerja)}}</td>
                                        <td align="center">{{convert_minute($item->pause_time)}}</td>
                                        <td align="center">{{$item->waktu_kerja ? convert_minute($item->waktu_kerja - $item->pause_time) : '-'}}</td>
                                        <td class="text-center">
                                            <div class=" align-items-center">
                                                <a href="{{ url('rekap-absensi/detail/'.$item->id_pegawai.'?month='.$month.'&year='.$year.'&type='.$type) }}" class="btn btn-outline-cyan btn-sm me-3">
                                                    Detail
                                                </a>
                                                {{-- <a href="" class="text-muted">
                                                    <i data-feather="download" class="feather-sm"></i>
                                                </a> --}}
                                            </div>
                                        </td>

                                    </tr>
                                @empty 
                                    <tr>
                                        <td colspan="100%">
                                            <b>Data tidak terseida</b>
                                        </td>
                                    </tr>
                                @endforelse
                                {{-- <tr>
                                    <td align="center">1</td>

                                    <td style="width: 450px;">
                                        <div class="d-flex align-items-center">
                                            <img src="{{asset('back/images/users/1.jpg')}}" class="rounded-circle"
                                            width="35" height="35" style="min-height:35px;min-width:35px;object-fit: cover" alt="flexy">
                                            <div class="ms-3">
                                                <h6 class="mb-0 fw-bold">Ikbal Malik Ramadhan</h6>
                                                <span class="text-muted fs-9">IT Support</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td align="center" style="color: #39cb7f;">12</td>
                                    <td align="center" style="color: #fdc90f;">13</td>
                                    <td align="center" style="color: #47030c;">5</td>
                                    <td align="center">0</td>
                                    <td align="center">0</td>
                                    @foreach ($ref_absen as $i)
                                        <td class="">{{$item->$i}}</td>
                                    @endforeach
                                    <td align="center">68 Jam</td>
                                    <td class="text-center">
                                            <a href="{{ url('rekap-absensi/detail-test') }}" class="text-muted me-3">
                                                <i data-feather="eye" class="feather-sm"></i>
                                            </a>
                                            <a href="" class="text-muted">
                                                <i data-feather="download" class="feather-sm"></i>
                                            </a>
                                    </td>

                                </tr> --}}
                            </tbody>
                        </table>

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

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

@endsection
@section('js')
    <!--This page plugins -->
    <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>

    <script src="{{ asset('back') }}/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>
    <script src="{{ asset('back') }}/assets/extra-libs/prism/prism.js"></script>

    <script>
        $('.select1').select2({
            templateResult: function(data) {
                if (!data.element) {
                    return data.text;
                }

                var $element = $(data.element);

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

                $wrapper.text(data.text);

                return $wrapper;
            }
        });

        function dayType(val) {
            var url = document.location.href+"&type="+val;
            document.location = url;
        }

        $('#zero_config').DataTable();
    </script>

@endsection