@extends('layout.mainlayout')

@section('content')
    @include('attendance.approval._reject-js')

    <div class="page-wrapper">
        <div class="content">

            <div class="page-header">
                <h3 class="page-title">Domestic Attendance Approval</h3>
            </div>

            <form method="POST" action="{{ route('attendance.approve') }}" id="approveForm">
                @csrf
                <input type="hidden" name="role" id="actionRole">
                <button type="submit" class="d-none" id="approveFormSubmitter" tabindex="-1"
                    aria-hidden="true"></button>

                <div class="card">
                    <div class="card-body table-responsive">
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Filter by User</label>
                                <select id="userFilter" class="form-control select2">
                                    <option value="">All Users</option>
                                </select>
                            </div>
                        </div>


                        {{-- ACTION BAR --}}
                        <div class="d-flex justify-content-between mb-3">
                            <div>
                                @can('attendance-approve-lead')
                                    <button type="button" class="btn btn-success approve-trigger" data-role="lead">
                                        Approve as Lead
                                    </button>
                                @endcan

                                @can('attendance-approve-manager')
                                    <button type="button" class="btn btn-success approve-trigger" data-role="manager">
                                        Approve as Manager
                                    </button>
                                @endcan

                                @can('attendance-reject-lead')
                                    <button type="button" class="btn btn-danger" onclick="openReject('lead')">
                                        Reject as Lead
                                    </button>
                                @endcan

                                @can('attendance-reject-manager')
                                    <button type="button" class="btn btn-danger" onclick="openReject('manager')">
                                        Reject as Manager
                                    </button>
                                @endcan
                            </div>
                        </div>

                        {{-- TABLE --}}
                        <table class="table table-bordered table-striped align-middle" id="DomesticApprovalTable">

                            <thead class="table-light">
                                <tr>
                                    <th width="30">
                                        <input type="checkbox" id="selectAll">
                                    </th>
                                    <th>Name</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Days</th>
                                    <th>Project</th>
                                    <th>Location</th>
                                    <th>Travelling</th>
                                    <th>Mode</th>
                                    <th>Biometric Data</th>
                                    <th>Remarks</th>
                                    <th>Lead/Manager</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($records as $r)
                                    <tr>
                                        <td>
                                            <input type="checkbox" name="attendance_ids[]" value="{{ $r->id }}"
                                                class="row-checkbox">
                                        </td>

                                        <td>
                                            {{ $r->user->name }}
                                            <div class="text-muted small">{{ $r->user->email ?? '-' }}</div>
                                        </td>

                                        <td>{{ $r->start_date->format('d M Y') }}</td>

                                        <td>{{ $r->end_date->format('d M Y') }}</td>

                                        <td>{{ $r->total_days }}</td>

                                        <td>{{ optional($r->project)->name ?? '-' }}</td>

                                        <td>{{ optional($r->location)->name ?? '-' }}</td>

                                        <td>
                                            {{ $r->getForm('is_travelling') == 1 ? 'Yes' : 'No' }}
                                        </td>
                                        <td>
                                            <span class="badge {{ $r->attendance_mode === 'biometric' ? 'bg-info' : 'bg-secondary' }}">
                                                {{ ucfirst($r->attendance_mode ?? 'manual') }}
                                            </span>
                                        </td>
                                        <td>
                                            @if ($r->attendance_mode === 'biometric')
                                                <div><strong>IN:</strong> {{ $r->getForm('biometric_in_time', '-') }}</div>
                                                <div><strong>OUT:</strong> {{ $r->getForm('biometric_out_time', '-') }}</div>
                                                <div><strong>Hrs:</strong> {{ $r->getForm('biometric_working_hours', '-') }}</div>
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td>{{ $r->getForm('remark', '-') }}</td>
                                        <td>
                                            {{ optional($r->localLead)->name ?? '-' }} /
                                            {{ optional($r->manager)->name ?? '-' }}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>

                        </table>

                    </div>
                </div>

            </form>

            {{-- REJECT MODAL --}}
            @include('attendance.approval.partials.reject-modal')

            <div class="modal fade" id="approveConfirmModal" tabindex="-1" aria-labelledby="approveConfirmModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="approveConfirmModalLabel">Confirm Attendance Approval</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p class="mb-2">
                                Are you proceeding with these selected attendance rows?
                            </p>
                            <div class="border rounded p-3 bg-light mb-3">
                                <ul class="mb-0 ps-3" id="approveSelectionList"></ul>
                            </div>

                            <label class="form-label fw-bold">Do you want to deduct half day leave for every selected day?</label>
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="bulk_halfday_deduction_choice"
                                        id="bulkHalfdayYes" value="yes">
                                    <label class="form-check-label" for="bulkHalfdayYes">Yes</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="bulk_halfday_deduction_choice"
                                        id="bulkHalfdayNo" value="no">
                                    <label class="form-check-label" for="bulkHalfdayNo">No</label>
                                </div>
                            </div>
                            <small class="text-muted d-block mt-2">
                                Leave deduction or reset handling will be processed automatically for each selected attendance.
                            </small>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-success" id="confirmApproveBtn">Proceed</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // Initialize DataTable
            const table = $('#DomesticApprovalTable').DataTable({
                order: [
                    [1, 'asc']
                ], // sort by Name
                pageLength: 25
            });

            // Populate User Filter dropdown from Name column (index 1)
            const userColumnIndex = 1;
            const userFilter = $('#userFilter');

            let users = new Set();
            let selectedUser = '';

            const normalizeUserCell = (value) => {
                const text = $('<div>').html(value).text().replace(/\s+/g, ' ').trim();
                const emailMatch = text.match(/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/i);

                if (!emailMatch) return text;

                const email = emailMatch[0];
                const name = text.replace(email, '').trim();

                return name ? `${name} (${email})` : email;
            };

            table.column(userColumnIndex).data().each(function(value) {
                users.add(normalizeUserCell(value));
            });

            [...users].sort().forEach(name => {
                userFilter.append(
                    `<option value="${name}">${name}</option>`
                );
            });

            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                if (settings.nTable !== table.table().node()) {
                    return true;
                }

                if (!selectedUser) {
                    return true;
                }

                const cellValue = table.cell(dataIndex, userColumnIndex).data();
                return normalizeUserCell(cellValue) === selectedUser;
            });

            // Apply filter
            userFilter.on('change', function() {
                selectedUser = $(this).val();
                table.draw();
            });

            // Select All checkbox
            document.getElementById('selectAll').addEventListener('change', function() {
                document.querySelectorAll('.row-checkbox')
                    .forEach(cb => cb.checked = this.checked);
            });

            const approveForm = document.getElementById('approveForm');
            const approveModalElement = document.getElementById('approveConfirmModal');
            const approveModal = new bootstrap.Modal(approveModalElement);
            const selectionList = document.getElementById('approveSelectionList');
            const confirmApproveBtn = document.getElementById('confirmApproveBtn');
            const actionRoleInput = document.getElementById('actionRole');
            const approveFormSubmitter = document.getElementById('approveFormSubmitter');
            let pendingApproveRole = '';

            document.querySelectorAll('.approve-trigger').forEach(button => {
                button.addEventListener('click', function() {
                    const checkedRows = Array.from(document.querySelectorAll('.row-checkbox:checked'));

                    if (!checkedRows.length) {
                        alert('Select at least one attendance row to approve.');
                        return;
                    }

                    pendingApproveRole = this.dataset.role;
                    selectionList.innerHTML = '';

                    checkedRows.forEach(cb => {
                        const row = cb.closest('tr');
                        if (!row) {
                            return;
                        }

                        const cells = row.querySelectorAll('td');
                        const item = document.createElement('li');
                        item.textContent = `${cells[1]?.innerText.trim() || 'Unknown'} | ${cells[2]?.innerText.trim() || '-'} to ${cells[3]?.innerText.trim() || '-'} | ${cells[6]?.innerText.trim() || '-'}`;
                        selectionList.appendChild(item);
                    });

                    document.querySelectorAll('input[name="bulk_halfday_deduction_choice"]').forEach(input => {
                        input.checked = false;
                    });

                    confirmApproveBtn.disabled = false;
                    approveModal.show();
                });
            });

            confirmApproveBtn.addEventListener('click', function() {
                const checkedRows = Array.from(document.querySelectorAll('.row-checkbox:checked'));
                const selectedChoice = document.querySelector('input[name="bulk_halfday_deduction_choice"]:checked');

                if (!checkedRows.length) {
                    approveModal.hide();
                    alert('Select at least one attendance row to approve.');
                    return;
                }

                if (!selectedChoice) {
                    alert('Select Yes or No for half day leave deduction.');
                    return;
                }

                actionRoleInput.value = pendingApproveRole;
                confirmApproveBtn.disabled = true;

                approveForm.querySelectorAll('.bulk-deduction-input').forEach(input => input.remove());

                checkedRows.forEach(cb => {
                    const hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = `late_policy_halfday_deduction[${cb.value}]`;
                    hiddenInput.value = selectedChoice.value;
                    hiddenInput.classList.add('bulk-deduction-input');
                    approveForm.appendChild(hiddenInput);
                });

                approveModal.hide();
                approveForm.requestSubmit(approveFormSubmitter);
            });

        });
    </script>
@endpush