@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('New appraisal instance'))
@section('content')
    <style>
        .select2-selection__rendered { line-height: 31px !important; }
        .select2-container .select2-selection--single { height: 35px !important; }
        .select2-selection__arrow { height: 34px !important; }
        .pa-workflow-step { border-left: 3px solid #007bff; padding-left: 1rem; margin-bottom: 1rem; }
        .pa-workflow-step.is-self { border-left-color: #6c757d; }
        .pa-create-tabs .nav-link { font-weight: 700; border-radius: 10px 10px 0 0; }
        .pa-create-tabs .nav-link.active { color: #4f46e5; border-color: #edf0f6 #edf0f6 #fff; }
        .pa-bulk-toolbar { background: #f8fafc; border: 1px solid #edf0f6; border-radius: 12px; padding: 14px 16px; }
        .pa-bulk-stat { background: #fff; border: 1px solid #edf0f6; border-radius: 12px; padding: 12px 14px; height: 100%; }
        .pa-bulk-stat .val { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .pa-bulk-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
        .pa-staff-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; background: #fff; border-top: 0; }
        .pa-staff-table tbody tr { cursor: pointer; }
        .pa-staff-table tbody tr.selected { background: rgba(79,70,229,.06) !important; }
        .pa-staff-table tbody tr:hover { background: #fbfcff; }
        .pa-staff-table tbody tr.pa-hidden { display: none; }
        .pa-select-banner {
            display: none; align-items: center; gap: 12px; flex-wrap: wrap;
            background: linear-gradient(135deg, rgba(79,70,229,.08), rgba(34,197,94,.08));
            border: 1px solid rgba(79,70,229,.18); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px;
        }
        .pa-select-banner.show { display: flex; }
    </style>

    <div class="row mt-3 mb-3">
        <div class="col-lg-11 mx-auto">
            <div class="card">
                <div class="card-header bg-white">
                    <h5 class="mb-0">{{ __('New appraisal instance') }}</h5>
                    <p class="text-muted small mb-0">{{ __('Create for one employee with custom evaluators, or bulk-create by department / branch with supervisor-chain evaluators.') }}</p>
                </div>
                <div class="card-body">
                    <ul class="nav nav-tabs pa-create-tabs mb-3" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link @if(old('creation_mode') !== 'bulk') active @endif" data-toggle="tab" href="#pa_tab_single" role="tab">
                                <i class="mdi mdi-account-outline"></i> {{ __('Single employee') }}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link @if(old('creation_mode') === 'bulk') active @endif" data-toggle="tab" href="#pa_tab_bulk" role="tab">
                                <i class="mdi mdi-account-multiple-outline"></i> {{ __('Bulk (department / branch)') }}
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        {{-- Single --}}
                        <div class="tab-pane fade @if(old('creation_mode') !== 'bulk') show active @endif" id="pa_tab_single" role="tabpanel">
                            <form method="post" action="{{ route('pa.instances.store') }}" id="pa_instance_create_form">
                                @csrf
                                <input type="hidden" name="creation_mode" value="single">
                                <div class="form-group">
                                    <label>{{ __('Staff (appraisee)') }}</label>
                                    <select name="staff_id" id="staff_id" class="form-control select2" required>
                                        <option value="">{{ __('Select…') }}</option>
                                        @foreach($staffList as $s)
                                            <option value="{{ $s->id }}" @selected((string) old('staff_id') === (string) $s->id)>
                                                {{ $s->selectOptionLabel() }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                @include('admin.performance_appraisal.partials.instance_shared_fields', ['prefix' => 'single'])
                                <hr>
                                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                                    <div>
                                        <h6 class="mb-1">{{ __('Workflow — stage & evaluator assignment') }}</h6>
                                        <p class="small text-muted mb-0">{{ __('Required for each stage except self-assessment (always the appraisee).') }}</p>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btn_fill_supervisor_chain" disabled>
                                        {{ __('Suggest from supervisor chain') }}
                                    </button>
                                </div>
                                <div id="evaluator_suggest_notice" class="alert alert-info small d-none"></div>
                                @foreach($workflowStages as $step)
                                    <div class="pa-workflow-step {{ $step['is_self'] ? 'is-self' : '' }}">
                                        <div class="d-flex flex-wrap justify-content-between align-items-baseline mb-1">
                                            <label class="font-weight-bold mb-0">{{ $loop->iteration }}. {{ $step['label'] }}</label>
                                            @if($step['is_self'])
                                                <span class="badge badge-secondary">{{ __('Appraisee') }}</span>
                                            @endif
                                        </div>
                                        @if($step['is_self'])
                                            <p class="text-muted small mb-0" id="self_evaluator_label">{{ __('Select staff above') }}</p>
                                        @else
                                            <select name="evaluators[{{ $step['stage'] }}]" id="evaluator_{{ $step['stage'] }}" class="form-control select2 pa-evaluator-select" required>
                                                <option value="">{{ __('Select evaluator…') }}</option>
                                                @foreach($staffList as $s)
                                                    <option value="{{ $s->id }}" @selected((string) old('evaluators.'.$step['stage']) === (string) $s->id)>
                                                        {{ $s->selectOptionLabel() }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('evaluators.'.$step['stage'])
                                                <div class="text-danger small mt-1">{{ $message }}</div>
                                            @enderror
                                        @endif
                                    </div>
                                @endforeach
                                <button type="submit" class="btn btn-primary">{{ __('Create') }}</button>
                                <a href="{{ route('pa.instances.index') }}" class="btn btn-light">{{ __('Back') }}</a>
                            </form>
                        </div>

                        {{-- Bulk --}}
                        <div class="tab-pane fade @if(old('creation_mode') === 'bulk') show active @endif" id="pa_tab_bulk" role="tabpanel">
                            <form method="post" action="{{ route('pa.instances.store') }}" id="pa_instance_bulk_form">
                                @csrf
                                <input type="hidden" name="creation_mode" value="bulk">
                                <div id="pa_bulk_staff_ids_container"></div>

                                @include('admin.performance_appraisal.partials.instance_shared_fields', ['prefix' => 'bulk'])

                                <div class="alert alert-light border small">
                                    {{ __('Bulk create assigns evaluators automatically from each employee\'s supervisor chain. No manual stage mapping is needed.') }}
                                </div>

                                <hr>
                                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0">{{ __('Select employees') }}</h6>
                                    <span class="badge badge-primary badge-pill px-3 py-2" id="pa_bulk_selected_badge">0 {{ __('selected') }}</span>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-6 col-md-3 mb-2">
                                        <div class="pa-bulk-stat">
                                            <div class="lbl">{{ __('Available') }}</div>
                                            <div class="val text-primary" id="pa_stat_available">{{ count($staffOptions) }}</div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-3 mb-2">
                                        <div class="pa-bulk-stat">
                                            <div class="lbl">{{ __('Selected') }}</div>
                                            <div class="val text-success" id="pa_stat_selected">0</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="pa-bulk-toolbar mb-3">
                                    <div class="form-row align-items-end">
                                        <div class="form-group col-md-3 mb-md-0">
                                            <label class="font-weight-bold small text-uppercase">{{ __('Branch') }}</label>
                                            <select id="pa_filter_branch" class="form-control select2" data-placeholder="{{ __('All branches') }}">
                                                <option value="">{{ __('All branches') }}</option>
                                                @foreach($branches as $branch)
                                                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group col-md-3 mb-md-0">
                                            <label class="font-weight-bold small text-uppercase">{{ __('Department') }}</label>
                                            <select id="pa_filter_department" class="form-control select2" data-placeholder="{{ __('All departments') }}">
                                                <option value="">{{ __('All departments') }}</option>
                                                @foreach($departments as $dept)
                                                    <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group col-md-3 mb-md-0">
                                            <label class="font-weight-bold small text-uppercase">{{ __('Search') }}</label>
                                            <input type="search" id="pa_staff_search" class="form-control" placeholder="{{ __('Name, ID, department…') }}">
                                        </div>
                                        <div class="form-group col-md-3 mb-0">
                                            <label class="d-block font-weight-bold small text-uppercase mb-2">{{ __('Quick select') }}</label>
                                            <div class="btn-group btn-group-sm d-flex flex-wrap" style="gap:6px;">
                                                <button type="button" class="btn btn-outline-primary" id="pa_select_branch_all">{{ __('All in branch') }}</button>
                                                <button type="button" class="btn btn-outline-primary" id="pa_select_department_all">{{ __('All in department') }}</button>
                                                <button type="button" class="btn btn-outline-secondary" id="pa_clear_selection">{{ __('Clear') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 d-flex align-items-center flex-wrap" style="gap:10px;">
                                        <label class="mb-0 small font-weight-bold">
                                            <input type="checkbox" id="pa_select_all_visible" class="mr-1">
                                            {{ __('Select all visible') }}
                                        </label>
                                    </div>
                                </div>

                                <div class="pa-select-banner" id="pa_select_banner">
                                    <i class="mdi mdi-check-all text-primary" style="font-size:24px;"></i>
                                    <div>
                                        <div class="font-weight-bold" id="pa_banner_title">{{ __('Selection applied') }}</div>
                                        <div class="small text-muted" id="pa_banner_sub"></div>
                                    </div>
                                </div>

                                <div class="table-responsive" style="max-height:420px;overflow:auto;">
                                    <table class="table table-sm table-hover pa-staff-table mb-0">
                                        <thead class="thead-light" style="position:sticky;top:0;z-index:1;">
                                        <tr>
                                            <th style="width:40px;">
                                                <input type="checkbox" id="pa_check_all_header" title="{{ __('Select all visible') }}">
                                            </th>
                                            <th>{{ __('Employee') }}</th>
                                            <th>{{ __('Department') }}</th>
                                            <th>{{ __('Branch') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody id="pa_staff_body">
                                        @forelse($staffOptions as $row)
                                            <tr data-staff-id="{{ $row['staff_id'] }}"
                                                data-warehouse-id="{{ $row['warehouse_id'] ?? '' }}"
                                                data-department-id="{{ $row['department_id'] ?? '' }}"
                                                data-search="{{ strtolower($row['staff_name'].' '.$row['user_id'].' '.$row['department_name'].' '.$row['branch_name']) }}">
                                                <td onclick="event.stopPropagation();">
                                                    <input type="checkbox" class="pa-staff-check" value="{{ $row['staff_id'] }}">
                                                </td>
                                                <td>{{ $row['staff_name'] }} <span class="text-muted">({{ $row['user_id'] }})</span></td>
                                                <td>{{ $row['department_name'] }}</td>
                                                <td>{{ $row['branch_name'] }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4" class="text-center text-muted py-4">{{ __('No active staff found.') }}</td>
                                            </tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>

                                <div class="mt-3">
                                    <button type="submit" class="btn btn-primary" id="pa_bulk_submit" disabled>
                                        {{ __('Create for selected employees') }}
                                    </button>
                                    <a href="{{ route('pa.instances.index') }}" class="btn btn-light">{{ __('Back') }}</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
(function () {
    // --- Single mode ---
    var suggestUrl = @json(route('pa.instances.evaluator_suggestions'));
    var staffNames = @json($staffList->mapWithKeys(fn ($s) => [(string) $s->id => $s->selectOptionLabel()])->all());
    var $staff = $('#staff_id');
    var $btnFill = $('#btn_fill_supervisor_chain');
    var $notice = $('#evaluator_suggest_notice');
    var $selfLabel = $('#self_evaluator_label');

    function updateSelfLabel() {
        var id = $staff.val();
        $selfLabel.text(id && staffNames[id] ? staffNames[id] : @json(__('Select staff above')));
    }
    function toggleFillButton() {
        $btnFill.prop('disabled', !$staff.val());
    }
    $staff.on('change', function () {
        updateSelfLabel();
        toggleFillButton();
        $notice.addClass('d-none').empty();
    });
    $btnFill.on('click', function () {
        var staffId = $staff.val();
        if (!staffId) return;
        $btnFill.prop('disabled', true);
        $.get(suggestUrl, { staff_id: staffId })
            .done(function (data) {
                var evaluators = data.evaluators || {};
                $('.pa-evaluator-select').each(function () {
                    var stage = this.id.replace('evaluator_', '');
                    var val = evaluators[stage];
                    if (val) $(this).val(String(val)).trigger('change');
                });
                if (data.warnings && data.warnings.length) {
                    $notice.removeClass('d-none alert-info').addClass('alert-warning')
                        .html('<strong>' + @json(__('Review suggestions')) + ':</strong><ul class="mb-0 pl-3"><li>' + data.warnings.join('</li><li>') + '</li></ul>');
                } else {
                    $notice.removeClass('d-none alert-warning').addClass('alert-info')
                        .text(@json(__('Supervisor chain applied. Adjust any stage if needed.')));
                }
            })
            .fail(function () {
                $notice.removeClass('d-none').addClass('alert-danger')
                    .text(@json(__('Could not load supervisor suggestions.')));
            })
            .always(toggleFillButton);
    });
    updateSelfLabel();
    toggleFillButton();

    // --- Bulk mode ---
    var $body = $('#pa_staff_body');
    var $branch = $('#pa_filter_branch');
    var $department = $('#pa_filter_department');
    var $search = $('#pa_staff_search');
    var selected = new Set(@json(collect(old('staff_ids', []))->map(fn ($id) => (string) $id)->values()->all()));

    function visibleRows() {
        return $body.find('tr[data-staff-id]').filter(function () {
            return !$(this).hasClass('pa-hidden');
        });
    }

    function applyFilters() {
        var branchId = String($branch.val() || '');
        var deptId = String($department.val() || '');
        var q = ($search.val() || '').toLowerCase().trim();

        $body.find('tr[data-staff-id]').each(function () {
            var $row = $(this);
            var matchBranch = !branchId || String($row.data('warehouse-id')) === branchId;
            var matchDept = !deptId || String($row.data('department-id')) === deptId;
            var matchSearch = !q || String($row.data('search')).indexOf(q) !== -1;
            var visible = matchBranch && matchDept && matchSearch;
            $row.toggleClass('pa-hidden', !visible);
        });

        syncRowSelectionUi();
        syncSelectAllCheckbox();
    }

    function syncRowSelectionUi() {
        $body.find('tr[data-staff-id]').each(function () {
            var id = String($(this).data('staff-id'));
            var checked = selected.has(id);
            $(this).toggleClass('selected', checked);
            $(this).find('.pa-staff-check').prop('checked', checked);
        });
    }

    function updateBulkStats() {
        var count = selected.size;
        $('#pa_stat_selected').text(count);
        $('#pa_bulk_selected_badge').text(count + ' ' + @json(__('selected')));
        $('#pa_bulk_submit').prop('disabled', count === 0);

        var $container = $('#pa_bulk_staff_ids_container').empty();
        selected.forEach(function (id) {
            $container.append('<input type="hidden" name="staff_ids[]" value="' + id + '">');
        });
    }

    function syncSelectAllCheckbox() {
        var $visible = visibleRows();
        var allChecked = $visible.length > 0 && $visible.find('.pa-staff-check:checked').length === $visible.length;
        $('#pa_select_all_visible, #pa_check_all_header').prop('checked', allChecked);
    }

    function selectVisible(checked) {
        visibleRows().each(function () {
            var id = String($(this).data('staff-id'));
            if (checked) selected.add(id); else selected.delete(id);
        });
        syncRowSelectionUi();
        updateBulkStats();
        syncSelectAllCheckbox();
    }

    function showBanner(title, sub) {
        $('#pa_banner_title').text(title);
        $('#pa_banner_sub').text(sub || '');
        $('#pa_select_banner').addClass('show');
    }

    $branch.add($department).on('change', applyFilters);
    $search.on('input', applyFilters);

    $body.on('change', '.pa-staff-check', function () {
        var id = String($(this).val());
        if (this.checked) selected.add(id); else selected.delete(id);
        syncRowSelectionUi();
        updateBulkStats();
        syncSelectAllCheckbox();
        $('#pa_select_banner').removeClass('show');
    });

    $body.on('click', 'tr[data-staff-id]', function (e) {
        if ($(e.target).is('input')) return;
        var $cb = $(this).find('.pa-staff-check');
        $cb.prop('checked', !$cb.prop('checked')).trigger('change');
    });

    $('#pa_select_all_visible, #pa_check_all_header').on('change', function () {
        selectVisible(this.checked);
    });

    $('#pa_select_branch_all').on('click', function () {
        if (!$branch.val()) {
            alert(@json(__('Please select a branch first.')));
            return;
        }
        selectVisible(true);
        showBanner(@json(__('All employees in selected branch')), $branch.find('option:selected').text());
    });

    $('#pa_select_department_all').on('click', function () {
        if (!$department.val()) {
            alert(@json(__('Please select a department first.')));
            return;
        }
        selectVisible(true);
        showBanner(@json(__('All employees in selected department')), $department.find('option:selected').text());
    });

    $('#pa_clear_selection').on('click', function () {
        selected.clear();
        syncRowSelectionUi();
        updateBulkStats();
        syncSelectAllCheckbox();
        $('#pa_select_banner').removeClass('show');
    });

    $('#pa_instance_bulk_form').on('submit', function (e) {
        if (selected.size === 0) {
            e.preventDefault();
            alert(@json(__('Select at least one employee.')));
        }
    });

    applyFilters();
    updateBulkStats();
})();
</script>
@endsection