@extends('layouts.main')

@section('title', 'Dashboard Andalan')

@section('css')
    @php
        $dashboardCssPath = public_path('assets/css/dashboard.css');
        $dashboardCssVersion = file_exists($dashboardCssPath) ? filemtime($dashboardCssPath) : time();
    @endphp
    <link rel="stylesheet" href="{{ asset('assets/css/dashboard.css') }}?v={{ $dashboardCssVersion }}">
@endsection

@section('navbarTitle', 'Overview')

@section('content')
@include('director_attendance.layout.navbar')

@php
    $finishedTaskItems = collect($overtimeTaskItems['finished'] ?? []);
    $pendingTaskItems = collect($overtimeTaskItems['pending'] ?? []);
    $taskItems = $finishedTaskItems->merge($pendingTaskItems)->values();
    $taskItemPayload = $taskItems->keyBy('id')->toArray();
    $approvedStartValue = ($overtimeDetail['approved_start_time'] ?? '-') !== '-'
        ? $overtimeDetail['approved_start_time']
        : (($overtimeDetail['actual_start_time'] ?? '-') !== '-'
            ? $overtimeDetail['actual_start_time']
            : '');
    $approvedEndValue = ($overtimeDetail['approved_end_time'] ?? '-') !== '-'
        ? $overtimeDetail['approved_end_time']
        : (($overtimeDetail['actual_end_time'] ?? '-') !== '-'
            ? $overtimeDetail['actual_end_time']
            : '');
    $directorApprovalStatus = $overtimeDetail['director_approval_status'] ?? 'pending';
    $canUpdateDirectorApproval = ($overtimeDetail['can_update_director_approval'] ?? false) === true;
@endphp

<div class="col-lg-12">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">Overtime</h5>
    </div>
</div>

<div class="row">
    <div class="col-md-5">
        <div class="card">
            <div class="card-header border-0 pb-0">
                <div>
                    <h4 class="card-title"><span class="fw-bold">{{ $overtimeDetail['staff_name'] ?? '[Name]' }}</span> Extra Mile</h4>
                    <p class="fs-13 mb-0">Here is a breakdown overtime shift, the tasks, and reward details.</p>
                </div>
            </div>
            <div class="card-body">
                <div class="row py-2">
                    <div class="col-md-6 col-12">
                        <span class="fw-semibold">Employee Profile</span>
                    </div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Record ID</span></div>
                    <div class="col-md-6 col-12"><span class="text-gray fw-semibold">{{ $overtimeDetail['record_number'] ?? '#OVT' }}</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Full Name</span></div>
                    <div class="col-md-6 col-12"><span class="text-gray fw-semibold">{{ $overtimeDetail['staff_name'] ?? '-' }}</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Supervisor</span></div>
                    <div class="col-md-6 col-12"><span class="text-gray fw-semibold">{{ $overtimeDetail['supervisor_name'] ?? '-' }}</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span class="fw-semibold">Overtime Log ({{ $overtimeDetail['log_status'] ?? '-' }})</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Date</span></div>
                    <div class="col-md-6 col-12"><span class="text-gray">{{ $overtimeDetail['overtime_date'] ?? '-' }}</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Time</span></div>
                    <div class="col-md-6 col-12">
                        @if (($overtimeDetail['is_task_hours_verified'] ?? false) && ($overtimeDetail['approved_time_range'] ?? '-') !== '-')
                            <span class="text-gray text-decoration-line-through">{{ $overtimeDetail['actual_time_range'] ?? '-' }}</span>
                            <span class="text-gray">, {{ $overtimeDetail['approved_time_range'] ?? '-' }}</span>
                        @else
                            <span class="text-gray">{{ $overtimeDetail['actual_time_range'] ?? '-' }}</span>
                        @endif
                    </div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Total Duration</span></div>
                    <div class="col-md-6 col-12">
                        @if (($overtimeDetail['is_task_hours_verified'] ?? false) && ($overtimeDetail['approved_duration'] ?? '-') !== '-')
                            <span class="text-gray text-decoration-line-through">{{ $overtimeDetail['actual_duration'] ?? '-' }}</span>
                            <span class="text-gray">, {{ $overtimeDetail['approved_duration'] ?? '-' }}</span>
                        @else
                            <span class="text-gray">{{ $overtimeDetail['actual_duration'] ?? '-' }}</span>
                        @endif
                    </div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Brief and Instructions</span></div>
                    <div class="col-md-6 col-12"><span class="text-gray">{{ $overtimeDetail['instruction'] ?? '-' }}</span></div>
                </div>
                <hr>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span class="fw-semibold">Compensation & Payroll Details</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Compensation Type</span></div>
                    <div class="col-md-6 col-12"><span class="text-gray fw-semibold">Overtime Pay</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Rate Multiplier</span></div>
                    <div class="col-md-6 col-12">
                        <span class="text-gray fw-semibold text-decoration-line-through">-</span>
                    </div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Estimated Calculated Earnings</span></div>
                    <div class="col-md-6 col-12"><span class="text-gray fw-semibold text-decoration-line-through">-</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Payout Period</span></div>
                    <div class="col-md-6 col-12"><span class="text-gray fw-semibold">{{ $overtimeDetail['payout_period'] ?? '-' }}</span></div>
                </div>
                <hr>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span class="fw-semibold">Approval Trail</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Verified by System</span></div>
                    <div class="col-md-6 col-12">
                        <span class="text-gray">{{ $overtimeDetail['verified_note'] ?? '-' }}</span><br>
                        <span class="text-gray">{{ $overtimeDetail['verified_datetime'] ?? '-' }}</span>
                    </div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Approved by Supervisor</span></div>
                    <div class="col-md-6 col-12">
                        <span class="text-gray">{{ $overtimeDetail['supervisor_approver'] ?? '-' }}</span><br>
                        <span class="text-gray">{{ $overtimeDetail['supervisor_datetime'] ?? '-' }}</span>
                    </div>
                </div>
                <div class="row py-2">
                    <div class="col-md-6 col-12"><span>Approved by Director</span></div>
                    <div class="col-md-6 col-12">
                        <span class="text-gray">{{ $overtimeDetail['director_approver'] ?? '-' }}</span><br>
                        <span class="text-gray">{{ $overtimeDetail['director_datetime'] ?? '-' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-7">
        <div class="row g-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header border-0 pb-3">
                        <div>
                            <h4 class="card-title">Overtime Verification</h4>
                            <p class="fs-13 mb-0">Please review the submitted task details and for compliance.</p>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="d-flex gap-3 align-items-center avatar-info p-4">
                            <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-info text-white flex-shrink-0" style="width: 51px; height: 51px;">
                                <i class="fa-solid fa-person-biking"></i>
                            </div>
                            <div>
                                <h6 class="fs-16 text-black mb-0">Monitoring the Extra Mile</h6>
                                <span class="fs-12">Verify the session to ensure staff overtime are recorded accurately for compensation.</span>
                            </div>
                        </div>
                        <div class="d-flex gap-3 justify-content-between flex-wrap p-4 pb-2">
                            <div class="text-center">
                                <p class="fs-14 mb-2">Start</p>
                                <span class="fs-20 text-black">{{ $overtimeDetail['verification_start_time'] ?? '-' }}</span>
                            </div>
                            <div class="text-center">
                                <p class="fs-14 mb-2">Duration</p>
                                <span class="fs-20 text-black">{{ $overtimeDetail['verification_duration'] ?? '-' }}</span>
                            </div>
                            <div class="text-center">
                                <p class="fs-14 mb-2">End</p>
                                <span class="fs-20 text-black">{{ $overtimeDetail['verification_end_time'] ?? '-' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3"></div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header border-0 pb-3">
                        <div>
                            <h4 class="card-title">Review Overtime Session</h4>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="row ps-4 pe-4">
                            <div class="col-md-6">
                                <label class="form-label">Staff Start ClockIn</label>
                                <p class="fs-14 mb-0">{{ $overtimeDetail['actual_start_time'] ?? '-' }}</p>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Staff Start ClockOut</label>
                                <p class="fs-14 mb-0">{{ $overtimeDetail['actual_end_time'] ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="row p-4 pb-2">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Approved Start <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control" value="{{ $approvedStartValue }}" disabled>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Approved End <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control" value="{{ $approvedEndValue }}" disabled>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn light btn-success m-3 mb-2 btn-lg" disabled>Approve Overtime Session</button>
                    <div class="mb-3"></div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card overflow-hidden">
                    <div class="card-header">
                        <h4 class="card-title">{{ $overtimeDetail['staff_name'] ?? '[Name]' }} Task Items</h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="list-group list-group-flush dz-draggable dropzoneContainer dz-scroll height400">
                            @forelse ($taskItems as $index => $taskItem)
                                <div class="list-group-item draggable p-3 director-overtime-task-detail" role="button" tabindex="0" data-bs-toggle="modal" data-bs-target="#directorTaskDetailModal" data-task-id="{{ $taskItem['id'] ?? '' }}">
                                    <div class="d-flex justify-content-between flex-wrap">
                                        <div class="d-flex gap-3">
                                            <div class="draggable-handle">
                                                <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    @for ($column = 0; $column < 3; $column++)
                                                        @for ($row = 0; $row < 6; $row++)
                                                            <rect x="{{ $column * 4 }}" y="{{ $row * 3 }}" width="1" height="1" fill="var(--bs-body-color)"></rect>
                                                        @endfor
                                                    @endfor
                                                </svg>
                                            </div>
                                            <div class="clearfix">
                                                <div class="form-check {{ ($taskItem['checked'] ?? false) ? 'custom-checkbox checkbox-success' : '' }}">
                                                    <input class="form-check-input" type="checkbox" id="directorOvertimeTask{{ $index }}" @checked($taskItem['checked'] ?? false) disabled>
                                                    <label class="form-check-label text-black" for="directorOvertimeTask{{ $index }}">{{ $taskItem['title'] ?? 'Untitled Task' }}</label>
                                                </div>
                                                <span>{{ $taskItem['date_label'] ?? '-' }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="list-group-item p-4 text-center text-muted">
                                    No task items available for this overtime.
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <form method="POST" action="{{ route('director-attendance.overtime.approval', ['uid' => $overtime->id]) }}">
                        @csrf
                        @method('PATCH')
                        <div class="card-header border-0 pb-0">
                            <div>
                                <h4 class="card-title">Confirm Overtime</h4>
                                <p class="fs-13 mb-0">Ensure overtime schedule, task details, and attachments are accurate.</p>
                            </div>
                        </div>
                        <div class="card-body">
                            <label class="form-label fw-semibold">Approval Status <span class="text-danger">*</span></label>
                            <div class="d-flex align-items-center gap-3 flex-wrap mb-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" @checked($directorApprovalStatus === 'pending') disabled>
                                    <label class="form-check-label text-warning fw-semibold">Pending</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="director_approval_status" value="approved" @checked(old('director_approval_status', $directorApprovalStatus) === 'approved') @disabled(! $canUpdateDirectorApproval)>
                                    <label class="form-check-label text-success fw-semibold">Approve</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="director_approval_status" value="rejected" @checked(old('director_approval_status', $directorApprovalStatus) === 'rejected') @disabled(! $canUpdateDirectorApproval)>
                                    <label class="form-check-label text-danger fw-semibold">Reject</label>
                                </div>
                            </div>
                            @error('director_approval_status', 'directorOvertimeApproval')
                                <div class="text-danger fs-12 mb-3">{{ $message }}</div>
                            @enderror
                            <hr>
                            <div class="row py-2">
                                <div class="col-md-6 col-12"><span>Overtime Type</span></div>
                                <div class="col-md-6 col-12"><span class="text-gray">Standard Weekday Overtime</span></div>
                            </div>
                            <div class="row py-2">
                                <div class="col-md-6 col-12"><span>Date</span></div>
                                <div class="col-md-6 col-12"><span class="text-gray">{{ $overtimeDetail['overtime_date'] ?? '-' }}</span></div>
                            </div>
                            <div class="row py-2">
                                <div class="col-md-6 col-12"><span>Staff Time</span></div>
                                <div class="col-md-6 col-12"><span class="text-gray">{{ $overtimeDetail['actual_time_range'] ?? '-' }}</span></div>
                            </div>
                            <div class="row py-2">
                                <div class="col-md-6 col-12"><span>Approved Time</span></div>
                                <div class="col-md-6 col-12"><span class="text-gray">{{ $overtimeDetail['approved_time_range'] ?? '-' }}</span></div>
                            </div>
                            <div class="row py-2">
                                <div class="col-md-6 col-12"><span>Instruction</span></div>
                                <div class="col-md-6 col-12"><span class="text-gray">{{ $overtimeDetail['instruction'] ?? '-' }}</span></div>
                            </div>
                            <div class="row py-2">
                                <div class="col-md-6 col-12"><span>Attachment</span></div>
                                <div class="col-md-6 col-12"><span class="text-gray">-</span></div>
                            </div>
                        </div>
                        <button type="submit" class="btn light btn-success m-3 mt-0 btn-lg" @disabled(! $canUpdateDirectorApproval)>Update Overtime Request</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="directorTaskDetailModal" tabindex="-1" aria-labelledby="directorTaskDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="directorTaskDetailModalLabel">Task Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row py-2">
                    <div class="col-4"><span>Task Name</span></div>
                    <div class="col-8"><span class="text-gray fw-semibold" id="directorTaskDetailTitle">-</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-4"><span>Task Description</span></div>
                    <div class="col-8"><span class="text-gray fw-normal" id="directorTaskDetailDescription">-</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-4"><span>Date - Due Date</span></div>
                    <div class="col-8"><span class="text-gray fw-semibold" id="directorTaskDetailDate">-</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-4"><span>Attachment</span></div>
                    <div class="col-8"><span class="text-gray fw-semibold" id="directorTaskDetailAttachment">No attachment</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-4"><span>Blockers</span></div>
                    <div class="col-8"><span class="text-gray fw-normal" id="directorTaskDetailBlockers">-</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-4"><span>Task Category</span></div>
                    <div class="col-8">
                        <span class="text-gray fw-semibold" id="directorTaskDetailCategory">-</span><br>
                        <span class="text-gray fw-normal" id="directorTaskDetailProject">-</span>
                    </div>
                </div>
                <div class="row py-2">
                    <div class="col-4"><span>Assigned by</span></div>
                    <div class="col-8"><span class="text-primary fw-semibold" id="directorTaskDetailAssignedBy">-</span></div>
                </div>
                <div class="row py-2">
                    <div class="col-4"><span>Task Status</span></div>
                    <div class="col-8"><span class="fw-semibold" id="directorTaskDetailStatus">-</span></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
    @php
        $dashboardJsPath = public_path('assets/js/dashboard.js');
        $dashboardJsVersion = file_exists($dashboardJsPath) ? filemtime($dashboardJsPath) : time();
    @endphp
    <script src="{{ asset('assets/js/dashboard.js') }}?v={{ $dashboardJsVersion }}"></script>
    <script>
        (function ($) {
            var taskItemsById = @js($taskItemPayload ?? []);

            function nullableTaskText(value) {
                return value ? value : '-';
            }

            function nullableTaskValue(value) {
                if (value === null || typeof value === 'undefined') {
                    return '';
                }

                return String(value).trim();
            }

            function renderTaskAttachment(selector, attachmentPath) {
                var attachmentValue = nullableTaskValue(attachmentPath);
                var attachmentElement = $(selector);

                if (attachmentValue === '') {
                    attachmentElement.text('No attachment');
                    return;
                }

                attachmentElement
                    .empty()
                    .append($('<a>', {
                        href: attachmentValue,
                        class: 'text-primary',
                        target: '_blank',
                        rel: 'noopener noreferrer',
                        text: 'Open attachment'
                    }));
            }

            function taskStatusLabel(value, isChecked) {
                if (isChecked) {
                    return 'Completed';
                }

                switch ((value || '').toString().toLowerCase()) {
                    case 'in_progress':
                        return 'On Progress';
                    case 'completed':
                        return 'Completed';
                    case 'cancelled':
                        return 'Cancelled';
                    default:
                        return 'To Do';
                }
            }

            function taskPriorityLabel(value) {
                switch ((value || '').toString().toLowerCase()) {
                    case 'high':
                        return 'High';
                    case 'low':
                        return 'Low';
                    default:
                        return 'Medium';
                }
            }

            function openTaskDetailModal(event) {
                if ($(event.target).closest('button, a, input').length) {
                    return;
                }

                var taskId = $(event.currentTarget).data('task-id');
                var taskItem = taskItemsById[taskId];

                if (!taskItem) {
                    return;
                }

                $('#directorTaskDetailTitle').text(nullableTaskText(taskItem.title));
                $('#directorTaskDetailDescription').text(nullableTaskText(taskItem.description));
                $('#directorTaskDetailDate').text(nullableTaskText(taskItem.date_range_label));
                $('#directorTaskDetailBlockers').text(nullableTaskText(taskItem.blockers));
                $('#directorTaskDetailCategory').text(nullableTaskText(taskItem.task_category_label));
                $('#directorTaskDetailProject').text(nullableTaskText(taskItem.project_name));
                $('#directorTaskDetailAssignedBy').text('@' + (nullableTaskValue(taskItem.assigned_by) || 'self'));
                $('#directorTaskDetailStatus')
                    .removeClass('text-danger text-success text-warning')
                    .addClass(taskItem.status_class || 'text-warning')
                    .text(nullableTaskValue(taskItem.status_label) || taskStatusLabel(taskItem.status_value, taskItem.checked === true));
                renderTaskAttachment('#directorTaskDetailAttachment', taskItem.attachment_path);
            }

            function openTaskDetailModalFromKeyboard(event) {
                if (event.key !== 'Enter' && event.key !== ' ') {
                    return;
                }

                event.preventDefault();
                $(event.currentTarget).trigger('click');
            }

            $('.director-overtime-task-detail').on('click', openTaskDetailModal);
            $('.director-overtime-task-detail').on('keydown', openTaskDetailModalFromKeyboard);
        })(jQuery);
    </script>
@endsection