@extends('layouts.master')

@section('title', 'Attendance | Alboosh - Timeless authenticity, born of the desert')

@section('title-topbar', __('basic.attendance'))

<!-- css insert -->
@section('css')

<!-- select 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css"
    integrity="sha512-aD9ophpFQ61nFZP6hXYu4Q/b/USW7rpLCQLX6Bi0WJHXNO7Js/fUENpBQf/+P4NtpzNX0jSgR5zVvPOJp+W2Kg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- boostrap datepicker -->
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />

<!-- tables -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.2/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/autofill/2.3.9/css/autoFill.bootstrap5.min.css">
<link rel="stylesheet"
    href="https://nightly.datatables.net/fixedheader/css/fixedHeader.dataTables.css?_=f0de745b101295e88f1504c17177ff49.css"
    type="text/css" />

@endsection



<!-- session successful message -->
@if (Session::has('success'))
<div id="flash-msg" class="shadow pt-3">
    <div class="d-flex justify-content-between mb-2">
        <i class="fas fs-1 fa-check"></i>
        <a id="flash-msg-btn" class="text-blue-300 clickable-item-pointer"><i class="fas fa-times"></i></a>
    </div>
    <h3>Sent Successfully</h3>
    <p class="text-blue-300">{{ Session::get('success') }}</p>
</div>
@endif


<!-- content insert -->
@section('content')
<div class="container-fluid px-2 mt-3">

    <!-- page title link -->
    <div class="d-sm-flex align-items-center justify-content-between mb-3">
        <span class="mb-0">
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.home') }}">{{ __('basic.dashboard')}}
                |</a>
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.admin.index') }}">{{
                __('basic.users')}} | </a>
            <a class="text-gray-300"> {{ __('basic.attendance')}}</a>
        </span>
        <div class="d-flex justify-content-center">
            <div class="calendar-datepicker me-1">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text ps-3"><i class="bi bi-calendar2-week-fill"></i> </div>
                    </div>
                    <input id="calendar-date-input" type="text" class="form-control hasdatetimepicker"
                        placeholder="yyyy-mm-dd" value="{{ request()->date }}" style="width: 133px;">
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card shadow h-100 main-color-bg p-1 ">
                <div class="card-body p-2 px-5 px-md-4">
                    <div class="row align-items-center">
                        <p class="text-center text-xs fw-bold text-blue-200 px-0">{{ __('basic.attended') }}</p>
                        <div class="col me-2 p-0">
                            <div class="h3 mb-0 fw-bold text-white">
                                @if($atten)
                                {{ count($atten) }}
                                @endif
                            </div>
                            <div class="text-xxs text-blue-300 text-uppercase">
                                {{ __('basic.workers') }}</div>
                        </div>
                        <div class="col text-end p-0 text-white">
                            <i class="fas fa-user-check text-xl fs-1"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card shadow h-100 p-1 ">
                <div class="card-body p-2 px-5 px-md-4">
                    <div class="row align-items-center">
                        <p class="text-center text-xs fw-bold text-gray-400 px-0">
                            {{ __('basic.total workers')
                            }}</p>
                        <div class="col me-2 p-0">
                            <div class="h3 mb-0 fw-bold text-grat-800">
                                {{ $total_workers }}
                            </div>
                            <div class="text-xxs text-gray-400 text-uppercase">
                                {{ __('basic.workers') }}</div>

                        </div>
                        <div class="col text-end p-0 text-gray-300">
                            <i class="fas fa-users text-xl fs-1"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card shadow h-100 p-1 ">
                <div class="card-body p-2 px-5 px-md-4">
                    <div class="row align-items-center">
                        <p class="text-center text-xs fw-bold text-gray-400 px-0">
                            {{ __('basic.not attended')
                            }}</p>
                        <div class="col me-2 p-0">
                            <div class="h3 mb-0 fw-bold text-grat-800">
                                @if($not_attended)
                                {{ count($not_attended) }}
                                @endif
                            </div>
                            <div class="text-xxs text-gray-400 text-uppercase">
                                {{ __('basic.workers') }}</div>
                        </div>
                        <div class="col text-end p-0 text-gray-300">
                            <i class="fas fa-user-times text-xl fs-1"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card shadow h-100 p-1 ">
                <div class="card-body p-2 px-5 px-md-4">
                    <div class="row align-items-center">
                        <p class="text-center text-xs fw-bold text-gray-400 px-0">
                            {{ __('basic.vacation or sick leave')
                            }}</p>
                        <div class="col me-2 p-0">
                            <div class="h3 mb-0 fw-bold text-grat-800">
                                @if($vacation_sickleave)
                                {{ count($vacation_sickleave) }}
                                @endif
                            </div>
                            <div class="text-xxs text-gray-400 text-uppercase">
                                {{ __('basic.workers') }}</div>
                        </div>
                        <div class="col text-end p-0 text-gray-300">
                            <i class="fas fa-user-lock text-xl fs-1"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow mb-3 pb-2">
        <!-- Card Header - Dropdown -->
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 fw-bold text-gray-500"><i class="fas fa-user-check me-2"></i> {{ __('basic.attendance')}}
                <span class="text-gray-300 fw-normal">
                    @if (request()->date)
                    {{ request()->date }}
                    @else
                    tdoay {{ date('Y-m-d') }}
                    @endif
                </span>
            </h6>
            <div class="dropdown no-arrow">
                <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-300"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                    aria-labelledby="dropdownMenuLink">
                </div>
            </div>
        </div>

        <!-- Card Body -->
        <div class="card-body">
            <div class="table-responsive">
                <table class="table display datatable-modal" id="p-lab-table" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th class="text-xxs text-center">{{ __('basic.date') }}</th>
                            <th class="text-xxs text-center">{{ __('basic.branch') }}</th>
                            <th class="text-xxs text-center">{{ __('basic.worker') }}</th>
                            <th class="text-xxs text-center">{{ __('basic.start') }}</th>
                            <th class="text-xxs text-center">{{ __('basic.end') }}</th>
                            <th class="text-xxs text-center">{{ __('basic.working hours') }}</th>
                            <th class="text-xxs text-center">{{ __('basic.handle') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($atten as $item)
                        <tr>
                            <td class="text-center">
                                {{ date('d M Y', strtotime($item->arrived_time)) }}
                            </td>
                            <td class="text-center">
                                {{ $item->branch->name }}
                            </td>
                            <td class="text-center">
                                @if($item->worker)
                                {{ $item->worker->full_name }}
                                @endif
                            </td>
                            <td class="text-center">
                                {{ date('h:i A', strtotime($item->arrived_time)) }}
                            </td>
                            <td class="text-center">
                                @if($item->leave_time)
                                {{ date('h:i A', strtotime($item->leave_time)) }}
                                @endif
                            </td>
                            <td class="text-center fw-bold">
                                @php
                                $totalDuration = Carbon\Carbon::parse($item->leave_time)
                                ->diff($item->arrived_time)
                                ->format('%H hour %i minute');
                                $totalDuration_hours = Carbon\Carbon::parse($item->leave_time)
                                ->diff($item->arrived_time)
                                ->format('%H');
                                @endphp
                                @if ($totalDuration_hours >= $fixed_working_hours)
                                <i class="fas fa-check me-1 text-green"></i>
                                @endif {{ $totalDuration }}
                            </td>
                            <td class="text-center">
                                <a href="{{ route('sett.hr_edit_attendance', $item->id) }}"
                                    class="status-col-link main-color-btn text-white clickable-item-pointer shadow-sm b-r-l-cont rate-appointment p-2 px-3">
                                    <i class="fas fa-edit fa-sm"></i>
                                    {{ __('basic.edit') }}
                                </a>
                            </td>
                        </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-12 col-md-6">
            <div class="card shadow mb-3 pb-2">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 fw-bold text-gray-500"><i class="fas fa-user-times me-2"></i>
                        {{ __('basic.not attended')}}
                        <span class="text-gray-300 fw-normal">
                            @if (request()->date)
                            {{ request()->date }}
                            @else
                            tdoay {{ date('Y-m-d') }}
                            @endif
                        </span>
                    </h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-300"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                            aria-labelledby="dropdownMenuLink">
                        </div>
                    </div>
                </div>

                <!-- Card Body -->
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table display datatable-modal" id="not_attended-table" width="100%"
                            cellspacing="0">
                            <thead>
                                <tr>
                                    <th class="text-xxs">{{ __('basic.worker') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($not_attended as $item)
                                <tr>
                                    <td>
                                        {{ $item->full_name }}
                                    </td>
                                </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card shadow mb-3 pb-2">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 fw-bold text-gray-500"><i class="fas fa-user-lock me-2"></i>
                        {{ __('basic.vacation or sick leave')}}
                        <span class="text-gray-300 fw-normal">
                            @if (request()->date)
                            {{ request()->date }}
                            @else
                            tdoay {{ date('Y-m-d') }}
                            @endif
                        </span>
                    </h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-300"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                            aria-labelledby="dropdownMenuLink">
                        </div>
                    </div>
                </div>

                <!-- Card Body -->
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table display datatable-modal" id="vacation_sickleave-table" width="100%"
                            cellspacing="0">
                            <thead>
                                <tr>
                                    <th class="text-xxs">{{ __('basic.vacation or sick leave') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($vacation_sickleave as $item)
                                <tr>
                                    <td>
                                        @if($item->worker)
                                        {{ $item->worker->full_name }}
                                        @endif
                                    </td>
                                </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>

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



</div>
@endsection


<!-- js insert -->
@section('js')

<!-- select 2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"
    integrity="sha512-4MvcHwcbqXKUHB6Lx3Zb5CEAVoE9u84qN+ZSMM6s7z8IeJriExrV3ND5zRze9mxNlABJ6k864P/Vl8m0Sd3DtQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function() {
            $('.myselect2-insert-nosearch').select2({
                dropdownParent: $("#cancel_rate"),
                minimumResultsForSearch: -1
            });

            var logID = 'log',
                log = $('<div id="' + logID + '"></div>');
            $('body').append(log);
            $('[type*="radio"]').change(function() {
                var me = $(this);
                log.html(me.attr('value'));
            });

        });
</script>

<!-- jquery ui datepicker -->
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script>
    $(function() {
            $('.hasdatetimepicker').datepicker({
                todayHighlight: true,
                format: "yyyy-mm-dd",
            }).on('change', function(){
                $('.datepicker').hide();
            });
        });

        $(document).ready(function() {
            $(document).on('change', '#calendar-date-input', function() {
                var date = $(this).val();
                var url = "{{ route('sett.all_attendance', [':date']) }}";
                url = url.replace(':date', date);
                window.location.href = url;
            });
        })
</script>



<!-- -- datatables plugin -- -->
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>

<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.colVis.min.js"></script>
<script
    src="https://nightly.datatables.net/fixedheader/js/dataTables.fixedHeader.js?_=f0de745b101295e88f1504c17177ff49">
</script>

<script>
    var table = $('#p-lab-table').DataTable({
            lengthChange: false,
            "pageLength": 31,
            "order": [
                [5, "ASC"]
            ],
            buttons: {
                dom: {
                    button: {
                        className: 'btn btn-table-export me-0' //Primary class for all buttons
                    }
                },
                buttons: [{
                        extend: 'copyHtml5',
                        footer: true
                    },
                    {
                        extend: 'excelHtml5',
                        footer: true
                    },
                    {
                        extend: 'pdfHtml5',
                        footer: true
                    },
                    {
                        extend: 'print',
                        footer: true
                    }
                ]
            }
        });
        table.buttons().container()
            .appendTo('#p-lab-table_wrapper .col-md-6:eq(0)');

        var table = $('#not_attended-table').DataTable({
            lengthChange: false,
            "pageLength": 31,
            "order": [
                [0, "ASC"]
            ],
            buttons: {
                dom: {
                    button: {
                        className: 'btn btn-table-export me-0' //Primary class for all buttons
                    }
                },
                buttons: [{
                        extend: 'copyHtml5',
                        footer: true
                    },
                    {
                        extend: 'excelHtml5',
                        footer: true
                    },
                    {
                        extend: 'pdfHtml5',
                        footer: true
                    },
                    {
                        extend: 'print',
                        footer: true
                    }
                ]
            }
        });
        table.buttons().container()
            .appendTo('#not_attended-table_wrapper .col-md-6:eq(0)');


            var table = $('#vacation_sickleave-table').DataTable({
            lengthChange: false,
            "pageLength": 31,
            "order": [
                [0, "ASC"]
            ],
            buttons: {
                dom: {
                    button: {
                        className: 'btn btn-table-export me-0' //Primary class for all buttons
                    }
                },
                buttons: [{
                        extend: 'copyHtml5',
                        footer: true
                    },
                    {
                        extend: 'excelHtml5',
                        footer: true
                    },
                    {
                        extend: 'pdfHtml5',
                        footer: true
                    },
                    {
                        extend: 'print',
                        footer: true
                    }
                ]
            }
        });
        table.buttons().container()
            .appendTo('#vacation_sickleave-table_wrapper .col-md-6:eq(0)');


</script>


@endsection