@extends('dashboard.layouts.app')

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

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="mb-0">Supervisor Session Slots</div>
        <div class="d-flex align-items-center gap-2">
            <form action="{{ route('supervisor-session-slots.index') }}" method="GET" class="d-flex align-items-center gap-2" id="filterForm">
                 <a href="{{ route('supervisor-session-slots.index', ['active_tab' => $activeTab]) }}" class="btn btn-sm btn-outline-secondary" title="Clear Filters">
                    <i class="ri-refresh-line"></i>
                </a>

                <input type="hidden" name="active_tab" id="active_tab_input" value="{{ $activeTab }}">
                
                <input type="date" name="date" class="form-control form-control-sm w-auto" value="{{ request('date') }}" onchange="this.form.submit()">

                @if(isset($supervisors) && $supervisors->count() > 0)
                    <select name="staff_id" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
                        <option value="">All Staff</option>
                        @foreach($supervisors as $supervisor)
                            <option value="{{ $supervisor->id }}" {{ request('staff_id') == $supervisor->id ? 'selected' : '' }}>
                                {{ $supervisor->first_name }} {{ $supervisor->last_name }}
                            </option>
                        @endforeach
                    </select>
                @endif

                <select name="status" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
                    <option value="">All Status</option>
                    @foreach(['pending', 'scheduled', 'completed','induction', 'canceled'] as $status)
                        <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>
                            {{ ucfirst($status) }}
                        </option>
                    @endforeach
                </select>

                <select name="per_page" id="per_page" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
                    @foreach ([5, 10, 25, 50, 100, 150] as $count)
                        <option value="{{ $count }}" {{ request('per_page', 10) == $count ? 'selected' : '' }}>
                            {{ $count }}
                        </option>
                    @endforeach
                </select>
            </form>
            @can('hr_supervisor_session_slots_create')
                <a href="{{ route('supervisor-session-slots.create') }}" class="btn btn-outline-primary">
                    <i class="bi bi-plus-lg"></i> Add New Slot
                </a>
            @endcan
        </div>
    </div>

    <div class="shadow-sm border-0" style="border-radius: 18px;">
        <div class="">
            <ul class="nav nav-tabs mb-3" id="sessionTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{ $activeTab == 'induction' ? 'active' : '' }}" id="induction-tab" data-bs-toggle="tab" data-bs-target="#induction" type="button" role="tab" aria-controls="induction" aria-selected="{{ $activeTab == 'induction' ? 'true' : 'false' }}">Induction</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{ $activeTab == 'demo' ? 'active' : '' }}" id="demo-tab" data-bs-toggle="tab" data-bs-target="#demo" type="button" role="tab" aria-controls="demo" aria-selected="{{ $activeTab == 'demo' ? 'true' : 'false' }}">Demo</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{ $activeTab == 'training' ? 'active' : '' }}" id="training-tab" data-bs-toggle="tab" data-bs-target="#training" type="button" role="tab" aria-controls="training" aria-selected="{{ $activeTab == 'training' ? 'true' : 'false' }}">Training</button>
                </li>
            </ul>

            <div class="tab-content" id="sessionTabsContent">
                
                {{-- Induction Tab --}}
                <div class="tab-pane fade {{ $activeTab == 'induction' ? 'show active' : '' }}" id="induction" role="tabpanel" aria-labelledby="induction-tab">
                    @include('dashboard.supervisor-session-slots.partials.table', ['sessions' => $inductionSessions, 'type' => 'induction'])
                </div>

                {{-- Demo Tab --}}
                <div class="tab-pane fade {{ $activeTab == 'demo' ? 'show active' : '' }}" id="demo" role="tabpanel" aria-labelledby="demo-tab">
                    @include('dashboard.supervisor-session-slots.partials.table', ['sessions' => $demoSessions, 'type' => 'demo'])
                </div>

                {{-- Training Tab --}}
                <div class="tab-pane fade {{ $activeTab == 'training' ? 'show active' : '' }}" id="training" role="tabpanel" aria-labelledby="training-tab">
                    @include('dashboard.supervisor-session-slots.partials.table', ['sessions' => $trainingSessions, 'type' => 'training'])
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const activeTabInput = document.getElementById('active_tab_input');
        const triggerTabList = [].slice.call(document.querySelectorAll('#sessionTabs button'));
        
        triggerTabList.forEach(function (triggerEl) {
            triggerEl.addEventListener('shown.bs.tab', function (event) {
                const targetId = event.target.getAttribute('data-bs-target').replace('#', '');
                activeTabInput.value = targetId;
            });
        });

        // AJAX update logic
        $(document).on('change', '.status-select', function () {
            const applicantId = $(this).data('applicant-id');
            const slotId = $(this).data('slot-id');
            const newStatus = $(this).val();
            const parent = $(this).closest('.status-wrapper');

            if (newStatus === 'rejected') {
                if (parent.find('.reject-reason-input').length === 0) {
                    parent.append(`
                        <input type="text" class="form-control form-control-sm mt-2 reject-reason-input" placeholder="Enter rejection reason">
                        <button class="btn btn-sm btn-danger mt-2 submit-reject-reason">Submit</button>
                    `);
                }
            } else {
                parent.find('.reject-reason-input, .submit-reject-reason').remove();
            }

            if (newStatus !== 'rejected' && applicantId) {
                $.ajax({
                    url: `/applicants/${applicantId}/update-status`,
                    method: 'POST',
                    data: {
                        stage_status: newStatus,
                        stage_note: $(this).closest('tr').find('.stage-note-input').val(),
                        slotId: slotId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function () {
                        toastr.success('Status updated successfully');
                    },
                    error: function () {
                        toastr.error('Failed to update status');
                    }
                });
            }
        });

        $(document).on('click', '.submit-reject-reason', function () {
            const parent = $(this).closest('.status-wrapper');
            const applicantId = parent.find('.status-select').data('applicant-id');
            const slotId = parent.find('.status-select').data('slot-id');
            const reason = parent.find('.reject-reason-input').val();

            if (!reason.trim()) {
                toastr.warning('Please enter a rejection reason');
                return;
            }

            $.ajax({
                url: `/applicants/${applicantId}/update-status`,
                method: 'POST',
                data: {
                    stage_status: 'rejected',
                    notes: reason,
                    slotId: slotId,
                    _token: "{{ csrf_token() }}"
                },
                success: function () {
                    toastr.success('Status updated successfully with reason');
                    parent.find('.reject-reason-input, .submit-reject-reason').remove();
                },
                error: function () {
                    toastr.error('Failed to update status');
                }
            });
        });

        $(document).on('change', '.stage_result', function () {
            const applicantId = $(this).data('applicant-id');
            const slotId = $(this).data('slot-id');
            const result = $(this).val();

            $.ajax({
                url: `/applicants/${applicantId}/update-status`,
                method: 'POST',
                data: {
                    stage_result: result,
                    slotId: slotId,
                    _token: "{{ csrf_token() }}"
                },
                success: function () {
                    toastr.success('Result updated successfully');
                },
                error: function () {
                    toastr.error('Failed to update result');
                }
            });
        });

        $(document).on('change', '.stage-note-input', function () {
            const applicantId = $(this).data('applicant-id');
            const slotId = $(this).data('slot-id');
            const stageNote = $(this).val();

            if (applicantId && slotId) {
                $.ajax({
                    url: `/applicants/${applicantId}/update-status`,
                    method: 'POST',
                    data: {
                        stage_note: stageNote,
                        slotId: slotId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function () {
                        toastr.success('Stage note updated');
                    },
                    error: function () {
                        toastr.error('Failed to update stage note');
                    }
                });
            }
        });

        $(document).on('change', '.session-note-input', function () {
            const applicantId = $(this).data('applicant-id');
            const slotId = $(this).data('slot-id');
            const sessionNote = $(this).val();

            if (applicantId && slotId) {
                $.ajax({
                    url: `/applicants/${applicantId}/update-status`,
                    method: 'POST',
                    data: {
                        session_note: sessionNote,
                        slotId: slotId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function () {
                        toastr.success('Session note updated');
                    },
                    error: function () {
                        toastr.error('Failed to update session note');
                    }
                });
            }
        });
    });
</script>
@endsection