@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">

    <!-- BEGIN: Page 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">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Attendance Summary</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/home' }}">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Attendance Summary {{ ucfirst(str_replace('-', ' ', $type)) }} Approval
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <button class="btn btn-primary btn-sm waves-effect waves-float waves-light" data-bs-target="#filter"
                data-bs-toggle="modal">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-filter">
                    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
                </svg> Filter
            </button>
        </div>
    </div>
@endpush
@section('content')
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-datatable">
                        <div class="card-header border-bottom p-1">
                            <div class="head-label">
                                <h6 class="mb-0">Attendances {{ ucfirst(str_replace('-', ' ', $type)) }}</h6>
                            </div>
                            <div class="dt-action-buttons text-end">
                                <div class="dt-buttons d-inline-flex">
                                    <div class="form-label-group me-2">
                                        <form method="GET">
                                            <input type="hidden" name="type" value="{{ request('type') }}">
                                            <input type="hidden" name="date_range" value="{{ request('date_range') }}">
                                            @foreach(request('employee_type', []) as $et)
                                                <input type="hidden" name="employee_type[]" value="{{ $et }}">
                                            @endforeach
                                            @foreach(request('employee_id', []) as $ei)
                                                <input type="hidden" name="employee_id[]" value="{{ $ei }}">
                                            @endforeach
                                            <input type="text" name="search" placeholder="Search by name / code" id="search"
                                                class="form-control" value="{{ $search }}">
                                        </form>
                                    </div>

                                </div>
                            </div>
                            <div class="content-header-right text-md-end col-md-6 col-12 d-md-block d-none">
                                <div class="mb-1 breadcrumb-right">
                                    <div class="dropdown">
                                        <button type="button" data-status = "approved" class="btn btn-primary btn-sm"
                                            id="approveAll"><i data-feather="check-circle"></i> Approve All</button>
                                        <button type="button" data-status = "unapproved" class="btn btn-primary btn-sm"
                                            id="unapproveAll"><i data-feather="check-circle"></i> Unapprove All</button>
                                        <a href="{{ $orgUrl . '/attendance-summary/approval/export?' . http_build_query(request()->all()) }}"
                                            class="btn btn-success btn-sm">
                                            <i data-feather="download"></i> Export
                                        </a>
                                        <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#importModal">
                                            <i data-feather="upload"></i> Import
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <table class="dt-column-search table table-responsive dataTable" id="dataTable" data-url="">
                            <thead>
                                <th>#</th>
                                <th class="pe-0">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check" type="checkbox" id="select-all">
                                    </div>
                                </th>
                                <th>Employee Code</th>
                                <th>Employee Name</th>
                                <th>Date</th>
                                <th>In Time</th>
                                <th>Out Time</th>
                                <th>Shift</th>
                                <th>Working Hours</th>
                                <th>Status</th>
                               
                            </thead>
                            <tbody>
                                @foreach ($attendanceSummaries as $key => $attendanceSummary)
                                    <tr class="even">
                                        <td class="sorting_1">{{ $loop->iteration }}</td>
                                        <td class="pe-0">
                                            <div class="form-check form-check-inline">
                                                <input class="checkbox" type="checkbox" data-id="{{ $attendanceSummary->id }}" id="approved-attendance-{{ $attendanceSummary->id }}">
                                            </div>
                                        </td>
                                        <td>{{ optional($attendanceSummary->employee)->employee_code ?? '-' }}</td>
                                        <td class="">
                                            <div class="d-flex flex-row">
                                                <div class="avatar me-75">
                                                    <img src="{{ optional($attendanceSummary->employee)->image ?? '' }}"
                                                        onerror="this.src='/assets/img/default-profile-3.png'"
                                                        width="32" height="32"
                                                        alt="{{ optional($attendanceSummary->employee)->name ?? '' }}">
                                                </div>
                                                <div class="my-auto">
                                                    <h6 class="mb-0 fw-bolder text-dark hr-dashfullemplname">
                                                        {{ optional($attendanceSummary->employee)->name ?? '' }}
                                                    </h6>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            {{ $attendanceSummary->attendance_date ? App\Helpers\GeneralHelper::dateFormat($attendanceSummary->attendance_date) : '-' }}
                                        </td>
                                        <td>
                                            {{ $attendanceSummary->in_time ? App\Helpers\GeneralHelper::timeFormat($attendanceSummary->in_time) : '-' }}
                                        </td>
                                        <td>
                                            {{ $attendanceSummary->out_time ? App\Helpers\GeneralHelper::timeFormat($attendanceSummary->out_time) : '-' }}
                                        </td>
                                        <td>{{ isset($attendanceSummary->shift->name) ? $attendanceSummary->shift->name.'('.$attendanceSummary->shift->start_time .'-'. $attendanceSummary->shift->end_time.')' : '' }}</td>
                                        <td>
                                            {{ $attendanceSummary->working_time }}
                                        </td>
                                        <td>
                                            @if($type === 'early-checkin')
                                                @if($attendanceSummary->early_checkin_approved)
                                                    Approved
                                                @else
                                                    Unapproved
                                                @endif
                                            @elseif($type === 'late-checkout')
                                                @if($attendanceSummary->late_checkout_approved)
                                                    Approved
                                                @else
                                                    Unapproved
                                                @endif
                                            @elseif($type === 'shift-production')
                                                @if($attendanceSummary->shift_production_approved)
                                                    Approved
                                                @else
                                                    Unapproved
                                                @endif
                                            @endif
                                        </td>

                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        @if (count($attendanceSummaries) == 0)
                            <div>
                                <center>No record(s) found!</center>
                            </div>
                        @endif

                        <div class="d-flex justify-content-between mx-0 row">
                            <div class="col-sm-12 col-md-6">
                                <div class="dataTables_info" id="organization_info" role="status" aria-live="polite">
                                    Showing
                                    {{ ($attendanceSummaries->currentpage() - 1) * $attendanceSummaries->perpage() + 1 }}
                                    to
                                    {{ ($attendanceSummaries->currentpage() - 1) * $attendanceSummaries->perpage() + $attendanceSummaries->count() }}
                                    of {{ $attendanceSummaries->total() }} entries</div>
                            </div>
                            <div class="col-sm-12 col-md-6">
                                {{ $attendanceSummaries->appends(request()->except('page'))->links('partials.pagination') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/ Column Search -->
    {{-- filter --}}
    <div class="modal modal-slide-in fade filterpopuplabel" id="filter">
        <div class="modal-dialog sidebar-sm">
            <form class="add-new-record modal-content pt-0" method="GET">
                <div class="modal-header mb-1">
                    <h5 class="modal-title" id="exampleModalLabel">Apply Filter</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body flex-grow-1">
                    <div class="mb-1">
                        <label class="form-label" for="fp-range">Select Date Range</label>
                        <input type="text" name="date_range" class="form-control flatpickr-range"
                            value="{{ Request::get('date_range') }}" placeholder="YYYY-MM-DD to YYYY-MM-DD" />
                    </div>

                    <label class="form-label mt-2">Employee Type</label>
                    @if (Auth::user()->is_contractor == 0)
                        <select class="form-control select2" id="employee_type" name="employee_type[]"
                            onchange="getEmployeeByType(this)" multiple>
                            @foreach ($employeeTypes as $empType)
                                <option value="{{ $empType }}" @if (in_array($empType, request()->input('employee_type', []))) selected @endif>
                                    {{ $empType }}
                                </option>
                            @endforeach
                        </select>
                    @else
                        <select class="form-control select2" id="employee_type" name="employee_type[]"
                            onchange="getEmployeeByType(this)" multiple>
                            <option value="{{ $employeeType }}" selected>
                                {{ $employeeType }}
                            </option>
                        </select>
                    @endif

                    <label class="form-label mt-2" for="area_id">{{ trans('master/master.employees') }}</label>
                    <select class="form-control mb-2 select2" name="employee_id[]" id="employee_id" multiple>
                        @foreach ($employees as $employee)
                            <option value="{{ $employee->id }}" @if ($employeeIds && in_array($employee->id, $employeeIds)) selected @endif>
                                {{ $employee->name }}({{ $employee->employee_code }})
                            </option>
                        @endforeach
                    </select>
                    <label class="form-label mt-2" for="approval_type">{{ trans('master/master.approval_type') }}</label>
                    <select class="form-control mb-2 select2" name="type" id="approval_type">
                        <option value="early-checkin" @if ($type == 'early-checkin') selected @endif>
                            Early Check-in
                        </option>
                        <option value="late-checkout" @if ($type == 'late-checkout') selected @endif>
                            Late Checkout
                        </option>
                        <option value="shift-production" @if ($type == 'shift-production') selected @endif>
                            Shift Production
                        </option>
                    </select>


                </div>
                <div class="modal-footer justify-content-start">
                    <button type="submit" class="btn btn-primary data-submit mr-1">Apply</button>
                    <a href="{{ $orgUrl . '/attendance-summary/approval' }}" class="btn btn-outline-secondary"
                        data-dismiss="modal">Clear</a>
                </div>
            </form>
        </div>
    </div>
    {{-- filter --}}
    {{-- import modal --}}
    <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importModalLabel">Import Approval Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted small mb-2">
                        First <a href="{{ $orgUrl . '/attendance-summary/approval/export?' . http_build_query(request()->all()) }}">export</a>
                        the data, update the <strong>Status (approved/unapproved)</strong> column, then upload the file here.
                    </p>
                    <div class="mb-1">
                        <label class="form-label">Excel / CSV File</label>
                        <input type="file" class="form-control" id="importFile" accept=".xlsx,.xls,.csv">
                    </div>
                    <div id="importErrors" class="mt-1" style="display:none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-warning" id="importSubmit">
                        <i data-feather="upload"></i> Import
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- /import modal --}}
@endsection
@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>


    <!-- BEGIN: Page JS-->
    <script src="{{ asset('js/common-script.js') }}"></script>
    <script src="{{ asset('js/sweetalert.js') }}"></script>

    <!-- END: Page JS-->

    <script>
        $("#search").change(function() {
            this.form.submit();
        });
        $(document).ready(function() {
            $('.select2').select2();
        });

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

        function getEmployeeByType(select) {
            var employeeTypes = [];
            $(select).find(':selected').each(function(key, option) {
                employeeTypes.push($(option).val());
            })
            var url = "{!! route('employees-by-type', ['alias' => $alias]) !!}?employee_type=" + employeeTypes;
            $.ajax({
                url: url,
                type: "GET",
                success: function(data) {
                    var op = '';
                    for (var i = 0; i < data.length; i++) {
                        op += '<option value="' + data[i].id + '"';

                        if (selectedEmployeeIds.includes((data[i].id).toString())) {
                            op += ' selected ';
                        }

                        op += ' >' + data[i].name + '(' + data[i]
                            .employee_code + ')</option>';
                    }
                    $('#employee_id').html(op).select2();
                }
            });
        }

        $('#employee_id, #employee_type').change(function() {
            selectedEmployeeIds = [];
            $('#employee_id').find(':selected').each(function(key, option) {
                selectedEmployeeIds.push($(option).val());
            })
        });
         var attendanceSummaries = {};
        $('.checkbox').on('change', function () {
            let id = $(this).data('id');
            if (this.checked) {
                attendanceSummaries[id] = id;
            } else {
                delete attendanceSummaries[id];
            }
        });
       
        
        $('#select-all').on('change', function () {
            attendanceSummaries = {};
            $('.checkbox').each(function () {
                this.checked = $('#select-all').prop('checked');
                let id = $(this).data('id');
                if (this.checked) {
                    attendanceSummaries[id] = id;
                }
            });
        });

        $('#approveAll, #unapproveAll').click(function () {

            if (!Object.keys(attendanceSummaries).length) {
                Swal.fire("Alert!", "Please select at least one row.", "warning");
                return false;
            }

            var orgUrl = '{{ $orgUrl }}';
            var url = orgUrl + '/attendance-summary/approval';

            $.ajax({
                url: url,
                type: "POST",
                data: {
                    _token: '{{ csrf_token() }}',
                    status: $(this).data("status"),
                    attendanceSummaries: attendanceSummaries,
                    type: '{{ $type }}'                },
                dataType: "JSON",
                success: function (response) {
                    Swal.fire("Success!", response.message, "success");
                    setTimeout(() => location.reload(), 2000);
                },
                error: function (response) {
                    Swal.fire(
                        "Error!",
                        response.responseJSON?.message || 'Something went wrong',
                        "error"
                    );                }
            });
        });

        // Import
        $('#importSubmit').click(function () {
            var file = $('#importFile')[0].files[0];
            if (!file) {
                Swal.fire("Alert!", "Please select a file to import.", "warning");
                return;
            }

            var formData = new FormData();
            formData.append('file', file);
            formData.append('type', '{{ $type }}');
            formData.append('_token', '{{ csrf_token() }}');

            $.ajax({
                url: '{{ $orgUrl }}/attendance-summary/approval/import',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    $('#importModal').modal('hide');
                    Swal.fire("Success!", response.message, "success");
                    setTimeout(() => location.reload(), 2000);
                },
                error: function (response) {
                    var res = response.responseJSON;
                    var html = '<div class="alert alert-danger"><strong>' + (res?.message || 'Import failed') + '</strong>';
                    if (res?.failures && res.failures.length) {
                        html += '<ul class="mb-0 mt-1">';
                        res.failures.forEach(function (f) {
                            html += '<li>Row ' + f.row + ': ' + f.message + '</li>';
                        });
                        html += '</ul>';
                    }
                    html += '</div>';
                    $('#importErrors').html(html).show();
                }
            });
        });

    </script>
@endpush