@extends('dashboard.layouts.app')

@section('content')

    @include('components.alert')

    <div class="mt-3">
        <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap mb-3">
            <div class="d-flex align-items-center gap-2">
                <div class="fw-bold">Staff Basic Information</div>
                @if($applicant->candidateUser)
                    @if($applicant->candidateUser->isCandidate())
                        <span class="badge bg-info">Candidate Account Active</span>
                    @elseif($applicant->candidateUser->user_type === 'deactivated')
                        <span class="badge bg-secondary">Candidate Account Deactivated</span>
                        <button type="button" class="btn btn-sm btn-outline-success p-2"
                                onclick="resendCredentials({{ $applicant->id }})">
                            <i class="ri-mail-send-line"></i> Resend Credentials
                        </button>
                    @endif
                @endif
            </div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <a href="{{ route('applicants.myAssigned') }}" class="btn btn-outline-secondary btn-sm p-3">
                    My Assigned Applicants
                </a>
                <a href="{{ $applicant->recruitment?->request_id ? route('showApplicants', $applicant->recruitment->request_id) : '#' }}" class="btn btn-outline-primary btn-sm p-3">
                    Back to Request Applicants
                </a>
            </div>
        </div>

        <div class="bg-white p-3 rounded shadow-sm">
            <div class="">
                <div class="row mb-3">
                    <div class="col-md-6 mb-3">
                        <div class="text-muted small fw-semibold">Full Name</div>
                        <div class="fs-6">{{ $applicant->full_name }}</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="text-muted small fw-semibold">Email</div>
                        <div class="fs-6">{{ $applicant->email }}</div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6 mb-3">
                        <div class="text-muted small fw-semibold">Contact Number</div>
                        <div class="fs-6">{{ $applicant->contact_number }}</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="text-muted small fw-semibold">Source</div>
                        <div class="fs-6">{{ $applicant->source ?? '-' }}</div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6 mb-3">
                        <div class="text-muted small fw-semibold">Qualifications</div>
                        <div class="fs-6">{{ $applicant->qualifications ?? '-' }}</div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="text-muted small fw-semibold">Years of Experience</div>
                        <div class="fs-6">{{ $applicant->years_of_experience ?? '-' }}</div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="text-muted small fw-semibold">Interview Date</div>
                        <div class="fs-6">{{ optional($applicant->interview_date)->format('Y-m-d') ?? '-' }}</div>
                    </div>
                </div>

                <div class="row mb-2">
                    <div class="col-md-6 mb-3">
                        <div class="text-muted small fw-semibold">Resume</div>
                        @if($applicant->resume)
                            <a href="{{ asset($applicant->resume) }}" target="_blank"
                                class="btn btn-outline-primary btn-sm d-inline-flex align-items-center gap-1">
                                <i class="bi bi-file-earmark-arrow-down"></i> View Resume
                            </a>
                        @else
                            <span class="text-muted">No Resume Uploaded</span>
                        @endif
                    </div>

                    <div class="col-md-6 mb-3">
                        <div class="text-muted small fw-semibold">Created At</div>
                        <div class="fs-6">{{ $applicant->created_at ?? '-' }}</div>
                    </div>
                </div>

                <div class="row mb-2">
                    <div class="col-md-6 mb-3">
                        <div class="text-muted small fw-semibold">Created By</div>
                        <div class="fs-6">{{ $applicant->createdBy->full_name ?? '-' }}</div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <div class="d-flex align-items-center justify-content-between gap-2">
                            <div class="text-muted small fw-semibold">Assigned To</div>
                            @include('dashboard.requests.applicants.applicant-logs', ['applicant' => $applicant, 'field' => 'assigned_staff'])
                        </div>
                        <div class="fs-6">
                            {{ $applicant->assignedStaff->full_name ?? optional(optional($applicant->createdBy)->staff)->full_name ?? $applicant->createdBy->full_name ?? '-' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-3 bg-white p-3 shadow-sm {{ !$canUpdateStatuses ? 'applicant-readonly' : '' }}">
        <div class="mb-3 fw-bold">Edit Applicant: {{ $applicant->full_name }}</div>

        @if (!$canUpdateStatuses)
            <div class="alert alert-warning border-0">
                Status updates are limited to
                <strong>{{ $applicant->assignedStaff->full_name ?? optional(optional($applicant->createdBy)->staff)->full_name ?? $applicant->createdBy->full_name ?? 'the assigned employee' }}</strong>.
                @if ($canReassign)
                    You currently have manager access for reassignment only.
                @endif
            </div>
        @endif

        @if ($canReassign)
            <div class="bg-white p-3 rounded shadow-sm mb-3">
                <div class="">
                    <div class="fw-bold mb-1">Reassign Applicant Owner</div>
                    <div class="text-muted small mb-3">Only the department manager can move this applicant to another employee in the same department.</div>
                    <form action="{{ route('applicants.reassign', $applicant->id) }}" method="POST" class="row g-3 align-items-end">
                        @csrf
                        <div class="col-md-8">
                            <label for="assigned_staff_id" class="form-label fw-bold mb-2">Responsible Employee</label>
                            <select name="assigned_staff_id" id="assigned_staff_id" class="form-select" required>
                                @foreach ($reassignableStaff as $staffOption)
                                    <option value="{{ $staffOption->id }}"
                                        {{ (string) old('assigned_staff_id', $applicant->assigned_staff_id ?? optional(optional($applicant->createdBy)->staff)->id) === (string) $staffOption->id ? 'selected' : '' }}>
                                        {{ $staffOption->full_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-primary w-100">Save Assignment</button>
                        </div>
                    </form>
                </div>
            </div>
        @endif

        @include('dashboard.requests.applicants.partials.workflow-timeline')

        <div id="stageTableContainer" class="mt-4" style="display: none;">
            <div class="fw-bold mb-3">Stage Schedule</div>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <button type="button" id="prevWeekStage" class="btn btn-outline-secondary btn-sm">&laquo; Prev</button>
                <div id="stageWeekRange" class="fw-bold"></div>
                <button type="button" id="nextWeekStage" class="btn btn-outline-secondary btn-sm">Next &raquo;</button>
            </div>
            <div id="stageSessionsContainer" class="table-responsive"></div>
        </div>
    </div>

    <!-- Demo Scheduling Status Modal -->
    <div class="modal fade" id="demoScheduleModal" tabindex="-1" aria-labelledby="demoScheduleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content border-0 shadow-sm">
                <div class="modal-header">
                    <div class="modal-title" id="demoScheduleModalLabel">Demo Scheduling</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <button id="prevWeek" class="btn btn-outline-secondary btn-sm">&laquo; Prev</button>
                        <div id="weekRange" class="fw-bold"></div>
                        <button id="nextWeek" class="btn btn-outline-secondary btn-sm">Next &raquo;</button>
                    </div>
                    <div id="sessions-container" class="table-responsive"></div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>




@endsection



@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const canUpdateStatuses = @json($canUpdateStatuses);
            const today = dayjs().startOf('day');
            const applicantStageStatus = "{{ $applicant->stage_status }}";
            const workflowCurrentStage = @json($workflow['current_stage'] ?? null);

            window.openDemoSchedule = function () {
                const modal = new bootstrap.Modal(document.getElementById('demoScheduleModal'));
                modal.show();
            };

            window.openStageSchedule = function (type = applicantStageStatus) {
                $('#stageTableContainer').show();
                loadStageWeeklyData(type || applicantStageStatus);
                document.getElementById('stageTableContainer')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
            };

            // startOfWeek as Monday
            let currentStartOfWeek = dayjs().startOf('week').add(1, 'day'); // Monday

            function loadWeeklyData(type) {
                const start = currentStartOfWeek.format('YYYY-MM-DD');
                const end = currentStartOfWeek.add(6, 'day').format('YYYY-MM-DD');

                // update header
                $('#weekRange').text(`${currentStartOfWeek.format('MMM D')} - ${currentStartOfWeek.add(6, 'day').format('MMM D, YYYY')}`);

                // Show loader
                $('#sessions-container').html(`
                    <div class="d-flex justify-content-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                `);

                $.ajax({
                    url: "{{ route('staff-session-slots.all') }}",
                    type: "GET",
                    data: { start, end, type },
                    dataType: 'json',
                    success: function (res) {
                        renderWeeklyTable(res.data, currentStartOfWeek);
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                        $('#weeklyTable tbody').html('<tr><td colspan="8" class="text-center text-danger">Failed to load data</td></tr>');
                    }
                });
            }


            function renderWeeklyTable(staffs, startOfWeek) {
                let container = $("#sessions-container");
                container.empty();

                let table = `
                    <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                        <thead>
                            <tr>
                                <th>Staff Name</th>
                                ${[...Array(7).keys()].map(i => `<th>${startOfWeek.add(i, 'day').format('ddd D/M')}</th>`).join('')}
                            </tr>
                        </thead>
                        <tbody id="weeklyTableBody"></tbody>
                    </table>
                    `;
                container.html(table);

                let tbody = $("#weeklyTableBody");
                if (!Array.isArray(staffs) || staffs.length === 0) {
                    tbody.append('<tr><td colspan="8" class="text-center text-muted py-3">No sessions found</td></tr>');
                    return;
                }

                staffs.forEach(staff => {
                    let row = `<tr><td class="text-start fw-semibold">${staff.first_name} ${staff.last_name}</td>`;
                    for (let i = 0; i < 7; i++) {
                        const day = startOfWeek.add(i, 'day').format('YYYY-MM-DD');
                        const isPast = dayjs(day).isBefore(today);
                        const sessions = (staff.staff_session_slot || []).filter(s => s.date === day);

                        if (sessions.length > 0) {
                            const content = sessions.map(s => {
                                const isClickable = canUpdateStatuses && !isPast && s.status === 'pending';
                                return `
                                    <div class="p-1 mb-1 bg-light rounded small border session-slot-modal" 
                                        data-id="${s.id}" 
                                        data-status="${s.status}" 
                                        style="cursor:${isClickable ? 'pointer' : 'not-allowed'}; opacity:${isClickable ? '1' : '0.5'};">
                                        ${(s.scheduled_by) ? `<div>Scheduled By: ${s.scheduled_by?.full_name ?? ''} ${s.scheduled_at ? ` - at: ${s.scheduled_at}` : ''}</div>` : ''}
                                        <div>${s.start_time} - ${s.end_time}</div>
                                        <div><span class="badge ${s.status === 'pending' ? 'bg-warning text-dark' : s.status === 'completed' ? 'bg-success' : 'bg-secondary'}">${s.status}</span></div>
                                    </div>
                                `;
                            }).join('');

                            row += `<td>${content}</td>`;
                        } else {
                            row += `<td class="text-muted small">—</td>`;
                        }

                    }
                    row += '</tr>';
                    tbody.append(row);
                });
            }


            $('#prevWeek').on('click', function () {
                currentStartOfWeek = currentStartOfWeek.subtract(7, 'day');
                loadWeeklyData('demo');
            });
            $('#nextWeek').on('click', function () {
                currentStartOfWeek = currentStartOfWeek.add(7, 'day');
                loadWeeklyData('demo');
            });

            loadWeeklyData('demo');


            $(document).on('click', '.session-slot-modal', function () {
                if (!canUpdateStatuses) return;

                const slotId = $(this).data('id');
                const currentStatus = $(this).data('status');

                if (currentStatus !== 'pending') return;

                $.ajax({
                    url: `/staff-session-slots-status/${slotId}`,
                    type: 'PUT',
                    data: {
                        status: 'scheduled',
                        applicant_id: {{ $applicant->id }},
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (res) {
                        if (res.status) {
                            // toastr.success('Slot booked successfully!');
                            location.reload();

                            loadWeeklyData('demo');

                            const modalEl = document.getElementById('demoScheduleModal');
                            const modal = bootstrap.Modal.getInstance(modalEl);
                            if (modal) {
                                modal.hide();
                            }

                        } else {
                            toastr.error(res.message);
                        }
                    },
                    error: function (err) {
                        toastr.error(err.responseText);
                    }
                });

            });
            $(document).on('click', '.session-slot-stage', function () {
                if (!canUpdateStatuses) return;

                const slotId = $(this).data('id');
                const currentStatus = $(this).data('status');

                if (currentStatus !== 'pending' && currentStatus !== "{{ $applicant->stage_status }}") {
                    toastr.warning('This slot is reserved for ' + currentStatus);
                    return;
                }

                $.ajax({
                    url: `/applicants/add-session/${slotId}`,
                    type: 'POST',
                    data: {
                        applicant_id: {{ $applicant->id }},
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (res) {
                        if (res.status) {
                            // toastr.success('Slot booked successfully!');
                            location.reload();

                            loadStageWeeklyData(applicantStageStatus);

                            const modalEl = document.getElementById('demoScheduleModal');
                            const modal = bootstrap.Modal.getInstance(modalEl);
                            if (modal) {
                                modal.hide();
                            }

                        } else {
                            toastr.error(res.message);
                        }
                    },
                    error: function (err) {
                        toastr.error(err.responseText);
                    }
                });

            });


            function showStageTableIfNeeded() {
                const stageStatus = "{{ $applicant->stage_status }}";
                const isSchedulingStage = workflowCurrentStage === 'induction_scheduling'
                    || workflowCurrentStage === 'training_scheduling';

                if (isSchedulingStage && (stageStatus === 'induction' || stageStatus === 'training')) {
                    $('#stageTableContainer').show();
                    loadStageWeeklyData(stageStatus);
                } else {
                    $('#stageTableContainer').hide();
                }
            }


            let currentStartOfStageWeek = dayjs().startOf('week').add(1, 'day'); // Monday

            function loadStageWeeklyData(type = 'demo') {
                const start = currentStartOfStageWeek.clone().format('YYYY-MM-DD');
                const end = currentStartOfStageWeek.clone().add(6, 'day').format('YYYY-MM-DD');

                $('#stageWeekRange').text(
                    `${currentStartOfStageWeek.clone().format('MMM D')} - ${currentStartOfStageWeek.clone().add(6, 'day').format('MMM D, YYYY')}`
                );

                // Show loader
                $('#stageSessionsContainer').html(`
                    <div class="d-flex justify-content-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                `);

                $.ajax({
                    url: "{{ route('staff-session-slots.all') }}",
                    type: "GET",
                    data: { start, end, type },
                    dataType: 'json',
                    success: function (res) {
                        renderStageWeeklyTable(res.data, currentStartOfStageWeek.clone());
                    },
                    error: function () {
                        $('#stageSessionsContainer').html('<div class="text-center text-danger">Failed to load stage schedule</div>');
                    }
                });
            }


            function renderStageWeeklyTable(staffs, startOfWeek) {
                let container = $("#stageSessionsContainer");
                container.empty();

                let table = `
                    <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                        <thead>
                            <tr>
                                <th class="text-center">Staff Name</th>
                                ${[...Array(7).keys()].map(i => `<th class="text-center">${startOfWeek.add(i, 'day').format('ddd D/M')}</th>`).join('')}
                            </tr>
                        </thead>
                        <tbody id="stageWeeklyTableBody"></tbody>
                    </table>
                `;
                container.html(table);

                let tbody = $("#stageWeeklyTableBody");
                if (!Array.isArray(staffs) || staffs.length === 0) {
                    tbody.append('<tr><td colspan="8" class="text-center text-muted py-3">No sessions found</td></tr>');
                    return;
                }

                staffs.forEach(staff => {
                    let row = `<tr><td class="text-start fw-semibold">${staff.first_name} ${staff.last_name}</td>`;
                    for (let i = 0; i < 7; i++) {
                        const day = startOfWeek.add(i, 'day').format('YYYY-MM-DD');
                        const isPast = dayjs(day).isBefore(today);
                        const sessions = (staff.staff_session_slot || []).filter(s => s.date === day);

                        if (sessions.length > 0) {
                            const content = sessions.map(s => {
                                const applicantStage = "{{ $applicant->stage_status }}";
                                const applicantId = {{ $applicant->id }};
                                const alreadyBooked = s.applicants && s.applicants.some(a => a.id === applicantId);

                                const isPrivateLocked = s.is_private && (s.applicants && s.applicants.length > 0);

                                const isClickable = canUpdateStatuses
                                    && !isPast
                                    && !alreadyBooked
                                    && !isPrivateLocked
                                    && (s.status === 'pending' || s.status === applicantStage);

                                return `
                                    <div class="p-1 mb-1 bg-light rounded small border session-slot-stage" 
                                        data-id="${s.id}" 
                                        data-status="${s.status}" 
                                        style="cursor:${isClickable ? 'pointer' : 'not-allowed'}; opacity:${isClickable ? '1' : '0.5'}; border-color: ${alreadyBooked ? '#198754 !important' : ''}">
                                        ${(s.scheduled_by) ? `<div>Scheduled By: ${s.scheduled_by?.full_name ?? ''} ${s.scheduled_at ? ` - at: ${s.scheduled_at}` : ''}</div>` : ''}
                                        <div>${s.start_time} - ${s.end_time}</div>
                                        <div>
                                            <span class="badge ${s.status === 'pending' ? 'bg-warning text-dark' : s.status === 'completed' ? 'bg-success' : 'bg-secondary'}">${s.status}</span>
                                            ${alreadyBooked ? '' : ''}
                                            ${isPrivateLocked && !alreadyBooked ? '' : ''}
                                        </div>
                                    </div>
                                    `;
                            }).join('');

                            row += `<td>${content}</td>`;
                        } else {
                            row += `<td class="text-muted small">—</td>`;
                        }

                    }
                    row += '</tr>';
                    tbody.append(row);
                });
            }

            $('#prevWeekStage').on('click', function () {
                currentStartOfStageWeek = currentStartOfStageWeek.subtract(7, 'day');
                loadStageWeeklyData(applicantStageStatus);
            });
            $('#nextWeekStage').on('click', function () {
                currentStartOfStageWeek = currentStartOfStageWeek.add(7, 'day');
                loadStageWeeklyData(applicantStageStatus);
            });

            showStageTableIfNeeded();

        });

        function resendCredentials(applicantId) {
            if (!confirm('Are you sure you want to resend the candidate credentials? A new password will be generated and emailed.')) {
                return;
            }

            $.ajax({
                url: '/applicants/' + applicantId + '/resend-credentials',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    alert(response.message);
                    location.reload();
                },
                error: function (xhr) {
                    const msg = xhr.responseJSON?.message || 'Failed to resend credentials.';
                    alert(msg);
                }
            });
        }

    </script>

@endpush