@extends('layout.layout')

@section('content')
    @include('components.alert')

    @php
        $pageTitle = request('type') ? \Illuminate\Support\Str::headline(request('type')) . ' Products' : 'Activities';

        $preserveQuery = [
            'type' => request('type'),
        ];
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title :title="$pageTitle"
                    description="Review scheduled products, student capacity, teacher assignment, and meeting access." />

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        @php
                            $filteredProductsCount = method_exists($staffScheduleds, 'total')
                                ? $staffScheduleds->total()
                                : $staffScheduleds->count();
                            $visibleProductsCount = method_exists($staffScheduleds, 'count')
                                ? $staffScheduleds->count()
                                : 0;
                        @endphp
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            {{-- <div class="d-flex align-items-center gap-2 flex-wrap" style="margin-right: auto;">
                                <h6 class="mb-0 ui-title">Filters</h6>
                                <span class="ui-pill ui-pill--info">
                                    {{ number_format($filteredProductsCount) }} {{ \Illuminate\Support\Str::plural('product', $filteredProductsCount) }}
                                </span>
                                @if (method_exists($staffScheduleds, 'total') && $staffScheduleds->lastPage() > 1)
                                    <span class="ui-muted small">
                                        Showing {{ number_format($visibleProductsCount) }} on this page
                                    </span>
                                @endif
                            </div> --}}

                            <x-table-controls :action="route('getAllProducts')" searchName="name" searchPlaceholder="Activity Name"
                                :export="true" :exportRoute="route('products.export')" :saveRoute="route('products.saveFilteredTable')" :date="true"
                                startDateName="start_date" endDateName="end_date" formId="products-table-controls"
                                :preserveQuery="$preserveQuery" :filters="array_filter([
                                    'category_id' => $categories->pluck('name_en', 'id')->toArray(),

                                    'leader_id' =>
                                        $is_manager && $staff_under_me->isNotEmpty()
                                            ? $staff_under_me
                                                ->mapWithKeys(
                                                    fn($s) => [
                                                        $s->id => trim(
                                                            ($s->first_name ?? '') . ' ' . ($s->last_name ?? ''),
                                                        ),
                                                    ],
                                                )
                                                ->toArray()
                                            : null,

                                    'retention_admin_id' =>
                                        $staff_under_me->isNotEmpty() && ($is_manager || $is_retention_leader)
                                            ? $retention_admins
                                                ->mapWithKeys(
                                                    fn($admin) => [
                                                        $admin->user_id =>
                                                            $admin->full_name ?:
                                                            trim(
                                                                ($admin->first_name ?? '') .
                                                                    ' ' .
                                                                    ($admin->last_name ?? ''),
                                                            ),
                                                    ],
                                                )
                                                ->toArray()
                                            : null,
                                ])" :filterLabels="[
                                    'category_id' => 'Category',
                                    'leader_id' => 'Leader',
                                    'retention_admin_id' => 'Retention Admin',
                                ]" />
                        </div>
                    </div>

                    <div id="global-loader">
                        <div class="loader"></div>
                    </div>

                    <x-table :headers="[
                        'ID',
                        'Activity',
                        'Date',
                        'Day',
                        'Instructor',
                        'Supervisor',
                        'Retention Admin',
                        'Team Leader',
                        'Created By',
                        'Student Name',
                        'Student Count',
                        'Actions',
                    ]" :paginator="$staffScheduleds" emptyMessage="No scheduled products available.">
                        @foreach ($staffScheduleds as $course)
                            @php
                                $primaryAssignment = $course->courseAdmins->first();
                                $primaryAdminStaff = $primaryAssignment?->admin?->staff;
                                $primaryTeamLeader = $primaryAdminStaff?->manager;
                                $hasDelayedWhiteboard = $course->scheduledSessions->contains(function ($session) {
                                    if (empty($session->session_date) || empty($session->end_time)) {
                                        return false;
                                    }

                                    $sessionEndDateTime = \Carbon\Carbon::parse($session->session_date . ' ' . $session->end_time);
                                    if (!empty($session->start_time) && $sessionEndDateTime->lessThanOrEqualTo(\Carbon\Carbon::parse($session->session_date . ' ' . $session->start_time))) {
                                        $sessionEndDateTime->addDay();
                                    }
                                    return now()->greaterThan($sessionEndDateTime->copy()->addHours(12)) && empty($session->extra_file);
                                });
                            @endphp
                            <tr>
                                <td class="ui-id text-center">{{ $course->id }}</td>
                                <td class="ui-title text-center">
                                    @if($hasDelayedWhiteboard)
                                        <span class="badge bg-danger me-1">Delayed Board</span>
                                    @endif
                                    {{ $course->academyCategoryProduct->name_en ?? '-' }}
                                </td>
                                <td class="ui-muted text-center">{{ $course->start_date ?? '-' }}</td>

                                <td class="text-center">
                                    <div class="d-flex flex-wrap justify-content-center gap-1">
                                        @foreach ($course->scheduledSessions->pluck('session_date')->map(fn($d) => \Carbon\Carbon::parse($d)->dayName)->unique() as $day)
                                            <span class="ui-pill ui-pill--info">{{ $day }}</span>
                                        @endforeach
                                        @if ($course->scheduledSessions->isEmpty())
                                            <span class="ui-muted">-</span>
                                        @endif
                                    </div>
                                </td>

                                <td class="ui-title text-center">
                                    <a href="{{ config('app.HR_URL') . 'staffs/' . ($course->staff->id ?? '#') }}"
                                        class="text-decoration-none">
                                        {{ trim(($course->staff->first_name ?? '') . ' ' . ($course->staff->last_name ?? '')) ?: '-' }}
                                    </a>
                                </td>

                                <td class="text-center">
                                    <a href="{{ config('app.HR_URL') . 'staffs/' . ($course->staff->manager->id ?? '#') }}"
                                        class="text-decoration-none">
                                        {{ optional($course->staff->manager)->full_name ??
                                        trim(
                                            (optional($course->staff->manager)->first_name ?? '') . ' ' . (optional($course->staff->manager)->last_name ?? ''),
                                        ) ?:
                                            '-' }}
                                    </a>
                                </td>

                                <td class="text-center">
                                    @if ($primaryAssignment && $primaryAdminStaff)
                                        <a href="{{ config('app.HR_URL') . 'staffs/' . ($primaryAdminStaff->id ?? '#') }}"
                                            class="text-decoration-none">
                                            {{ $primaryAssignment->admin?->full_name ?: trim(($primaryAdminStaff->first_name ?? '') . ' ' . ($primaryAdminStaff->last_name ?? '')) }}
                                        </a>
                                    @else
                                        <span class="ui-muted">-</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @if ($primaryAssignment && $primaryTeamLeader)
                                        <a href="{{ config('app.HR_URL') . 'staffs/' . ($primaryTeamLeader->id ?? '#') }}"
                                            class="text-decoration-none">
                                            {{ $primaryTeamLeader->full_name ?: trim(($primaryTeamLeader->first_name ?? '') . ' ' . ($primaryTeamLeader->last_name ?? '')) }}
                                        </a>
                                    @else
                                        <span class="ui-muted">-</span>
                                    @endif
                                </td>

                                <td class="text-center ui-muted">
                                    {{ optional($course->createdBy?->staff)->full_name ?:
                                        trim(
                                            (optional($course->createdBy?->staff)->first_name ?? '') .
                                                ' ' .
                                                (optional($course->createdBy?->staff)->last_name ?? ''),
                                        ) ?:
                                        $course->createdBy?->full_name ?? '-' }}
                                </td>

                                <td class="text-center">
                                    <div class="d-flex flex-wrap justify-content-center gap-1">
                                        @forelse ($course->courseStudent as $item)
                                            <span class="ui-pill ui-pill--neutral">
                                                <a href="{{ route('students.show', optional($item->student)->id ?? '#') }}"
                                                    class="text-decoration-none">
                                                    {{ optional($item->student)->full_name ??
                                                    trim((optional($item->student)->first_name ?? '') . ' ' . (optional($item->student)->last_name ?? '')) ?:
                                                        'Student' }}
                                                </a>
                                            </span>
                                        @empty
                                            <span class="ui-muted">-</span>
                                        @endforelse
                                    </div>
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--warn">
                                        {{ $course->courseStudent->count() }} /
                                        {{ $course->academyProduct->count_of_students ?? 0 }}
                                    </span>
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">
                                        <x-table-action type="edit" :url="route('showProduct', [
                                            'id' => $course->id,
                                            'type' => request('type'),
                                        ])" title="Open Product" />

                                        @php
                                            $firstSession = $course->scheduledSessions->first();
                                            $sessionMeetingUrl = $course->hasPaidStudentInvoice() && $firstSession
                                                ? route('courses.sessions.bbb.join', ['course' => $course->id, 'session' => $firstSession->id])
                                                : null;
                                        @endphp

                                        @if ($sessionMeetingUrl)
                                            <a href="{{ $sessionMeetingUrl }}" target="_blank"
                                                class="btn btn-outline-primary btn-sm radius-8" title="Join Meeting">
                                                <iconify-icon class="text-lg" icon="lucide:video"></iconify-icon>
                                            </a>
                                            <x-bbb-teacher-media-status :session="$firstSession" :teacher="$firstSession->staff ?? $course->staff" />
                                        @else
                                            <button class="btn btn-outline-secondary btn-sm radius-8"
                                                style="cursor: not-allowed" title="No Meeting" disabled>
                                                <iconify-icon class="text-lg" icon="lucide:video"></iconify-icon>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        #global-loader {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(2px);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }

        .loader {
            border: 6px solid #e3e3e3;
            border-top: 6px solid #0d6efd;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 0.9s linear infinite;
        }

        .select2-container--default .select2-selection--single {
            width: 100% !important;
        }

        @keyframes spin {
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        function showLoader() {
            $("#global-loader").fadeIn(150);
        }

        function hideLoader() {
            $("#global-loader").fadeOut(150);
        }

        $(document).ready(function() {
            showLoader();
            setTimeout(hideLoader, 800);

            $(document).ajaxStart(function() {
                showLoader();
            });

            $(document).ajaxStop(function() {
                hideLoader();
            });
        });

        $(document).ready(function() {
            const selectedRetentionAdmin = '{{ request()->get('retention_admin_id') }}';
            const retentionAdminSelect = $('select[name="retention_admin_id"]');
            const defaultRetentionAdminOptions = retentionAdminSelect.html();

            function loadRetentionAdmins(leaderId) {
                if (!retentionAdminSelect.length) {
                    return;
                }

                if (!leaderId) {
                    retentionAdminSelect.prop('disabled', false).html(defaultRetentionAdminOptions);
                    if (selectedRetentionAdmin) {
                        retentionAdminSelect.val(selectedRetentionAdmin);
                    }
                    return;
                }

                retentionAdminSelect.prop('disabled', true).html('<option>Loading...</option>');

                $.ajax({
                    url: '{{ route('retention.admins', ':id') }}'.replace(':id', leaderId),
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(res) {
                        retentionAdminSelect.empty().append('<option value="">select admin</option>');
                        var list = Array.isArray(res) ? res : (res.data || []);

                        list.forEach(function(item) {
                            retentionAdminSelect.append(
                                '<option value="' + item.user_id + '">' +
                                (item.first_name || '') + ' ' + (item.last_name || '') +
                                '</option>'
                            );
                        });

                        if (selectedRetentionAdmin) {
                            retentionAdminSelect.val(selectedRetentionAdmin).trigger('change');
                        }

                        retentionAdminSelect.prop('disabled', false);
                    },
                    error: function() {
                        retentionAdminSelect.empty()
                            .append('<option value="">select admin</option>')
                            .prop('disabled', false);
                    }
                });
            }

            $('select[name="leader_id"]').on('change', function() {
                loadRetentionAdmins($(this).val());
            });

            let initialLeader = $('select[name="leader_id"]').val();
            loadRetentionAdmins(initialLeader);
        });
    </script>
@endpush