@extends('layouts.app')

@section('title', 'Attendance Regularizations')
@section('heading', 'Attendance Regularizations')

@section('content')
    @include('attendance.top-submenu')
    @php
        $showBulkToolbar = count($canApproveIds ?? []) > 0
            && (! request()->filled('status') || request('status') === 'pending');
        $tableColspan = $showBulkToolbar ? 7 : 6;
    @endphp
    <x-card>
        <div class="mb-4 flex flex-wrap justify-between items-center gap-2">
            <p class="text-slate-600 text-sm">Request or review attendance corrections. Viewing {{ \Carbon\Carbon::createFromDate($year ?? now()->year, $month ?? now()->month, 1)->format('F Y') }}.</p>
            @if(auth()->user()->hasPermission('attendances_view') && auth()->user()->isWorkforceMember())
            <a href="{{ route('attendance-regularizations.create') }}" class="inline-flex items-center rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700"><i class="bi bi-plus-lg me-1"></i>New Request</a>
            @endif
        </div>
        @if(($pendingRemoteAttendances ?? collect())->isNotEmpty())
        <div class="mb-6 rounded-lg border border-amber-200 bg-amber-50/60 p-4">
            <h3 class="text-sm font-semibold text-amber-900">Pending remote attendance</h3>
            <ul class="mt-3 space-y-2">
                @foreach($pendingRemoteAttendances as $remoteAttendance)
                    <li class="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-white px-3 py-2 text-sm">
                        <span>{{ $remoteAttendance->user?->name }} · {{ optional($remoteAttendance->date)->format('M d, Y') }} · {{ $remoteAttendance->clock_in_date_time?->format('g:i A') }}{{ $remoteAttendance->remote_reason ? ' · '.$remoteAttendance->remote_reason : '' }}</span>
                        @if(in_array($remoteAttendance->id, $canApproveRemoteIds ?? [], true))
                            <span class="flex gap-2">
                                <form action="{{ route('attendance.remote.approve', $remoteAttendance) }}" method="post">
                                    @csrf
                                    <button class="text-emerald-700 hover:underline" type="submit">Approve</button>
                                </form>
                                <form action="{{ route('attendance.remote.reject', $remoteAttendance) }}" method="post">
                                    @csrf
                                    <button class="text-red-700 hover:underline" type="submit">Reject</button>
                                </form>
                            </span>
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>
        @endif
        @if(count($canApproveIds ?? []) > 0)
        <p class="mb-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">{{ count($canApproveIds) }} request(s) pending your approval.</p>
        @endif
        <form method="GET" class="mb-6 flex flex-wrap gap-4 rounded-lg border border-slate-200 bg-slate-50 p-4 justify-end">
            <div class="flex flex-col">
                <label class="text-sm text-slate-600 mb-1">Month</label>
                <select name="month"
                    class="rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2"
                    style="width: 150px"
                    onchange="this.form.submit()">
                    @foreach(range(1, 12) as $m)
                        <option value="{{ $m }}" {{ (int)($month ?? now()->month) === $m ? 'selected' : '' }}>
                            {{ date('F', mktime(0, 0, 0, $m, 1)) }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-col">
                    <label class="text-sm text-slate-600 mb-1">Year</label>
                    <select name="year" class="rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2" style="width: 150px" onchange="this.form.submit()">
                        @foreach(range(date('Y'), date('Y') - 5) as $y)
                            <option value="{{ $y }}" {{ (int)($year ?? now()->year) === (int)$y ? 'selected' : '' }}>{{ $y }}</option>
                        @endforeach
                    </select>
            </div>
                
            <div class="flex flex-col">
                <label class="text-sm text-slate-600 mb-1">Status</label>
                <select name="status"
                    class="rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2"
                    style="width: 150px"
                    onchange="this.form.submit()">
                    <option value="">All statuses</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>Approved</option>
                    <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                </select>
            </div>
        </form>

        @if($showBulkToolbar)
        <form
            id="bulk-review-form"
            method="post"
            action="{{ route('attendance-regularizations.bulk-review') }}"
            class="mb-4 flex flex-wrap items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3"
            x-data="{
                toggleAll(checked) {
                    document.querySelectorAll('.bulk-reg-checkbox').forEach(cb => { cb.checked = checked; });
                }
            }"
        >
            @csrf
            <input type="hidden" name="year" value="{{ $year }}">
            <input type="hidden" name="month" value="{{ $month }}">
            @if(request()->filled('status'))
                <input type="hidden" name="status" value="{{ request('status') }}">
            @endif
            <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                <input
                    type="checkbox"
                    class="rounded border-slate-300"
                    x-on:change="toggleAll($event.target.checked)"
                >
                Select all on page
            </label>
            <input
                type="text"
                name="review_remarks"
                placeholder="Shared remarks (optional)"
                class="min-w-[12rem] flex-1 rounded border border-slate-300 px-2 py-1.5 text-sm"
            >
            <button
                type="submit"
                name="action"
                value="approve"
                class="inline-flex items-center rounded-lg bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-700"
            >Bulk Approve</button>
            <button
                type="submit"
                name="action"
                value="reject"
                class="inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-700"
            >Bulk Reject</button>
        </form>
        @endif

        <x-table>
            <x-slot name="head">
                <tr>
                    @if($showBulkToolbar)
                    <th class="w-10 px-4 py-3 text-left text-xs font-medium uppercase text-slate-500"></th>
                    @endif
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Date</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Employee</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500 whitespace-nowrap">Requested In/Out</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Reason</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Actions</th>
                </tr>
            </x-slot>
            @forelse($regularizations as $r)
                @php
                    $canApproveRow = $r->status === 'pending' && in_array($r->id, $canApproveIds ?? []);
                @endphp
                <tr>
                    @if($showBulkToolbar)
                    <td class="px-4 py-3">
                        @if($canApproveRow)
                        <input
                            type="checkbox"
                            name="ids[]"
                            value="{{ $r->id }}"
                            form="bulk-review-form"
                            class="bulk-reg-checkbox rounded border-slate-300"
                        >
                        @endif
                    </td>
                    @endif
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-900">{{ $r->date->format('d M Y') }}</td>
                    <td class="whitespace-nowrap px-4 py-3">
                        <div class="flex items-center gap-3">
                            @if($r->user)
                                <x-user-avatar :user="$r->user" size="sm" class="shrink-0" />
                            @endif
                            <span class="text-slate-600">{{ $r->user?->name ?? '—' }}</span>
                        </div>
                    </td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">
                        {{ $r->requested_clock_in ? $r->requested_clock_in->format('H:i') : '—' }} / {{ $r->requested_clock_out ? $r->requested_clock_out->format('H:i') : '—' }}
                    </td>
                    <td class="px-4 py-3 text-sm text-slate-600">{{ Str::limit($r->reason, 40) }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm">
                        @if($r->status === 'approved')<span class="rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800">Approved</span>
                        @elseif($r->status === 'rejected')<span class="rounded bg-red-100 px-2 py-0.5 text-xs text-red-800">Rejected</span>
                        @else<span class="rounded bg-amber-100 px-2 py-0.5 text-xs text-amber-800">Pending</span>@endif
                    </td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm">
                        @if($canApproveRow)
                        <form action="{{ route('attendance-regularizations.approve', $r) }}" method="post" class="inline">
                            @csrf
                            <input type="hidden" name="year" value="{{ $year }}">
                            <input type="hidden" name="month" value="{{ $month }}">
                            @if(request()->filled('status'))
                                <input type="hidden" name="status" value="{{ request('status') }}">
                            @endif
                            <input type="text" name="review_remarks" placeholder="Remarks" class="mr-1 w-24 rounded border border-slate-300 px-2 py-1 text-xs">
                            <button type="submit" class="text-emerald-600 hover:underline text-xs">Approve</button>
                        </form>
                        <form action="{{ route('attendance-regularizations.reject', $r) }}" method="post" class="inline ml-1">
                            @csrf
                            <input type="hidden" name="year" value="{{ $year }}">
                            <input type="hidden" name="month" value="{{ $month }}">
                            @if(request()->filled('status'))
                                <input type="hidden" name="status" value="{{ request('status') }}">
                            @endif
                            <input type="text" name="review_remarks" placeholder="Remarks (optional)" class="mr-1 w-24 rounded border border-slate-300 px-2 py-1 text-xs">
                            <button type="submit" class="text-red-600 hover:underline text-xs">Reject</button>
                        </form>
                        @else
                        —
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="{{ $tableColspan }}" class="px-4 py-8 text-center text-sm text-slate-500">No regularization requests.</td></tr>
            @endforelse
        </x-table>
        @if($regularizations->hasPages())<div class="mt-4">{{ $regularizations->links() }}</div>@endif
    </x-card>
@endsection