@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.css">
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{ trans('master/master.punch_summary_report') }}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="home">{{ trans('common/common.home') }}</a></li>
                    <li class="breadcrumb-item active">{{ trans('master/master.punch_summary_report') }}</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="column-search-datatable">
        <!-- Filter toggle button -->
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2"></div>
            <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
                <button class="btn btn-primary btn-sm btn-round" type="button" data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasEnd">
                    <i data-feather="filter"></i>
                </button>
            </div>
        </div>

        <!-- Offcanvas Filters -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">{{ trans('common/common.filter') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>

            <div class="offcanvas-body">
                <form>
                    <label class="form-label" for="date_range">Date range</label>
                    <input type="text" id="date_range" name="date_range" value="{{ $dateRange }}"
                        class="form-control daterangebg"> {!! $errors->first('date_range', '<label class="control-label error" for="date_range">:message</label>') !!}

                    <label class="form-label mt-2" for="area_id">{{ trans('master/master.employees') }}</label>
                    <select class="form-control mb-2 select2" id="employee_id" name="employee_id[]" multiple>
                        <option value="">Select Employee</option>
                        {{-- Rest will be set by JS --}}
                    </select>

                    <button type="submit" class="btn btn-primary mt-2 w-100" data-bs-dismiss="offcanvas">
                        <i data-feather="search" class="me-2"></i>{{ trans('common/common.search') }}
                    </button>
                </form>
            </div>
        </div>

        <!-- Table Section -->
        <div class="row mt-2">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom">
                        <div class="head-label">
                            <h6 class="mb-0">Listing</h6>
                        </div>
                        <div class="dt-action-buttons text-end">
                            <div class="dt-buttons d-inline-flex">
                                <div class="mx-1">
                                    <div class="dropdown">
                                        <button
                                            class="px-2 btn-icon btn btn-secondary btn-round dropdown-toggle waves-effect waves-float waves-light"
                                            type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">Export</button>
                                        <div class="dropdown-menu" style="">
                                            <a class="dropdown-item" target="_blank"
                                                href="{!! route('attendance-checkin-summary', ['alias' => $alias, 'export' => 'excel'] + request()->query()) !!}">
                                                <span>{{ trans('common/common.excel') }}</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-datatable">
                        @include('attendance-report.check-in-summary.table', ['groups' => $groups, 'records' => $records])
                        <div class="d-flex justify-content-end">
                            <div class="px-3 py-1">
                                {{ $groups->appends(request()->except('page'))->links('pagination::bootstrap-4') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    </form>
@endsection

@push('footer-script')
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

    <script type="text/javascript" src="/assets/js/moment.min.js"></script>
    <script type="text/javascript" src="/assets/js/daterangepicker.js"></script>

    <script>
        $(document).ready(function() {
            $('.select2').select2();

            $('input[name="date_range"]').daterangepicker({
                opens: 'left',
            });

            var selectedEmployeeIds = JSON.parse('{!! json_encode($employeeIds) !!}');

            function initializeSelect2(selector, preSelectedIds, url, flag) {
                $(selector).select2({
                    multiple: true,
                    ajax: {
                        url: url,
                        dataType: 'json',
                        data: function(params) {
                            return {
                                alias: '{!! $alias !!}',
                                exclude_user_id: '',
                                has_contractor_employees: true,
                                search: params.term,
                                is_manager: flag,
                                only_current_organization: true
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: $.map(data.data, function(item) {
                                    return {
                                        id: item.id,
                                        text: item.name + ' (' + (item.employee_code || '') +
                                            ')' +
                                            ' (' + item.email + ')',
                                    };
                                })
                            };
                        },
                        cache: true
                    },
                    placeholder: 'Search with name',
                    minimumInputLength: 1,
                    allowClear: true
                });

                function loadPreSelectedOptions() {
                    if (preSelectedIds.length > 0) {
                        $.ajax({
                            url: url,
                            data: {
                                alias: '{!! $alias !!}',
                                employee_ids: preSelectedIds
                            },
                            success: function(data) {
                                data.data.forEach(function(item) {
                                    var option = new Option(
                                        item.name + ' (' + (item.employee_code || '') +
                                        ')' +
                                        ' (' + item.email + ')', item.id, true, true
                                    );
                                    $(selector).append(option).trigger('change');
                                });
                            }
                        });
                    }
                }

                loadPreSelectedOptions();
            }

            // Initialize Select2 for employee_id and manager_id
            initializeSelect2('#employee_id', selectedEmployeeIds, '/ajax/hod-list', 0);
        });
    </script>
@endpush