@extends('layouts.app')

@section('content')
<div class="mb-6 flex justify-between items-end">
    <div>
        <h2 class="text-3xl font-bold text-gray-900 font-sans tracking-tight">Template Manager</h2>
        <p class="text-gray-500 mt-1 uppercase text-xs font-bold tracking-widest">Design, edit, and deploy standard performance evaluation forms.</p>
    </div>
    @if (!$is_edit)
        <button onclick="document.getElementById('addForm').classList.toggle('hidden')" class="px-6 py-2.5 bg-brand-600 hover:bg-brand-700 text-white font-bold rounded-xl shadow-md transition uppercase text-xs tracking-widest">
            + Create New Template
        </button>
    @endif
</div>

@if(session('success'))
    <div class="bg-green-50 text-green-700 p-4 rounded-xl border border-green-200 font-bold mb-6 shadow-sm">✅ {{ session('success') }}</div>
@endif

<div id="addForm" class="{{ $is_edit ? '' : 'hidden' }} bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-8">
    <h3 class="text-xl font-bold text-gray-900 font-sans mb-4 border-b pb-2">{{ $is_edit ? 'Edit Template' : 'New KPI Template' }}</h3>
    <form method="POST" action="{{ route('kpis.store') }}">
        @csrf
        <input type="hidden" name="action" value="{{ $is_edit ? 'edit_template' : 'create_template' }}">
        @if($is_edit) <input type="hidden" name="template_id" value="{{ $edit_template['id'] }}"> @endif
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-1">Template Title</label>
                <input type="text" name="title" required value="{{ $is_edit ? $edit_template['title'] : '' }}" placeholder="e.g. 2026 Developer KPI" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 outline-none">
            </div>
            
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-1">Valid From</label>
                    <input type="date" name="start_date" required value="{{ $is_edit ? $edit_template['start_date'] : '' }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 outline-none">
                </div>
                <div>
                    <label class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-1">Valid To</label>
                    <input type="date" name="end_date" required value="{{ $is_edit ? $edit_template['end_date'] : '' }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 outline-none">
                </div>
            </div>
        </div>

        <div class="mb-6 p-6 bg-gray-50 rounded-xl border border-gray-200">
            <label class="block text-sm font-bold text-gray-700 uppercase tracking-widest mb-3">Target Audience</label>
            <div class="flex flex-col md:flex-row gap-6 mb-4">
                <label class="flex items-center space-x-2 cursor-pointer"><input type="radio" name="target_audience" value="all" onchange="toggleAudience()" class="text-brand-600 focus:ring-brand-500 w-4 h-4 cursor-pointer" {{ (!$is_edit || $audience_type == 'all') ? 'checked' : '' }}> <span class="font-bold text-sm">All Employees</span></label>
                <label class="flex items-center space-x-2 cursor-pointer"><input type="radio" name="target_audience" value="department" onchange="toggleAudience()" class="text-brand-600 focus:ring-brand-500 w-4 h-4 cursor-pointer" {{ ($is_edit && $audience_type == 'department') ? 'checked' : '' }}> <span class="font-bold text-sm">Specific Department</span></label>
                <label class="flex items-center space-x-2 cursor-pointer"><input type="radio" name="target_audience" value="specific_employees" onchange="toggleAudience()" class="text-brand-600 focus:ring-brand-500 w-4 h-4 cursor-pointer" {{ ($is_edit && $audience_type == 'specific_employees') ? 'checked' : '' }}> <span class="font-bold text-sm">Specific Employees</span></label>
            </div>
            
            <select name="department_id" id="deptSelect" class="{{ ($is_edit && $audience_type == 'department') ? '' : 'hidden' }} w-full md:w-1/2 px-4 py-2 border border-gray-300 rounded-lg bg-white outline-none focus:ring-2 focus:ring-brand-500">
                <option value="" disabled selected>Select a Department...</option>
                @foreach($departments as $d)
                    <option value="{{ $d->id }}" {{ ($is_edit && $edit_template['department_id'] == $d->id) ? 'selected' : '' }}>{{ $d->name }}</option>
                @endforeach
            </select>
            
            <div class="{{ ($is_edit && $audience_type == 'specific_employees') ? '' : 'hidden' }} mt-4" id="specific_group">
                <div class="flex justify-between items-end mb-2">
                    <label class="block text-xs font-bold text-gray-500 uppercase tracking-widest">Select Employees</label>
                    <span id="selected-count" class="text-xs font-bold text-brand-600 bg-brand-50 px-2 py-1 rounded">{{ count($edit_employees) }} Selected</span>
                </div>
                
                <div class="relative mb-3">
                    <input type="text" id="emp_search" class="w-full pl-10 py-3 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-brand-500 bg-white" placeholder="Search by Name or Employee Code...">
                    <i class="fas fa-search absolute left-4 top-3.5 text-gray-400"></i>
                </div>

                <div class="border border-gray-300 rounded-lg max-h-64 overflow-y-auto bg-white shadow-inner" id="emp_list_container">
                    @foreach($employees as $emp)
                        @php $isChecked = ($is_edit && in_array($emp->id, $edit_employees)); @endphp
                        <label class="flex items-center p-3 border-b border-gray-100 cursor-pointer transition-colors emp-row {{ $isChecked ? 'bg-brand-50' : 'hover:bg-gray-50' }}">
                            <input type="checkbox" name="employee_ids[]" value="{{ $emp->id }}" class="emp-checkbox w-4 h-4 text-brand-600 bg-gray-100 border-gray-300 rounded focus:ring-brand-500 mr-3 shrink-0 cursor-pointer" {{ $isChecked ? 'checked' : '' }}>
                            <div class="flex flex-col min-w-0">
                                <span class="text-sm font-bold text-gray-900 emp-name truncate">{{ $emp->first_name }} {{ $emp->last_name }}</span>
                                <span class="text-[10px] text-gray-500 font-medium emp-code">Code: <span class="font-mono text-gray-700">{{ $emp->employee_number }}</span> &bull; {{ $emp->department->name ?? 'No Dept' }}</span>
                            </div>
                        </label>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="mb-6">
            <div class="flex justify-between items-center mb-3">
                <h4 class="text-lg font-bold text-gray-800 font-sans">Performance Indicators</h4>
                <button type="button" onclick="addIndicatorRow()" class="px-4 py-1.5 bg-gray-800 hover:bg-gray-900 text-white text-sm font-bold rounded-lg shadow-sm transition">+ Add Metric</button>
            </div>
            
            <div class="overflow-x-auto bg-white rounded-xl border border-gray-200">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="p-3 text-left text-xs font-bold text-gray-600 uppercase min-w-[200px]">Indicator Title</th>
                            <th class="p-3 text-left text-xs font-bold text-gray-600 uppercase min-w-[250px]">Detailed Target</th>
                            <th class="p-3 text-center text-xs font-bold text-gray-600 uppercase w-20">Max Score</th>
                            <th class="p-3 text-left text-xs font-bold text-gray-600 uppercase w-32">Evaluated By</th>
                            <th class="p-3 text-left text-xs font-bold text-gray-600 uppercase w-40">Cross Dept Route</th>
                            <th class="p-3"></th>
                        </tr>
                    </thead>
                    <tbody id="indicators_body" class="divide-y divide-gray-100">
                        @if ($is_edit && count($edit_indicators) > 0)
                            @foreach($edit_indicators as $ind)
                                <tr class="hover:bg-gray-50">
                                    <input type="hidden" name="indicator_ids[]" value="{{ $ind->id }}">
                                    <td class="p-3"><input type="text" name="indicator_titles[]" value="{{ $ind->title }}" required class="w-full px-3 py-2 border rounded outline-none focus:ring-1 focus:ring-brand-500"></td>
                                    <td class="p-3"><textarea name="expected_targets[]" required rows="2" class="w-full px-3 py-2 border rounded outline-none focus:ring-1 focus:ring-brand-500 text-sm">{{ $ind->expected_target }}</textarea></td>
                                    <td class="p-3"><input type="number" name="max_scores[]" value="{{ floatval($ind->max_score) }}" required min="1" max="100" class="w-20 px-3 py-2 border rounded outline-none text-center score-val"></td>
                                    <td class="p-3">
                                        <select name="evaluator_roles[]" onchange="toggleCrossDept(this)" class="w-full px-3 py-2 border rounded bg-white text-sm cursor-pointer">
                                            <option value="Manager" {{ $ind->evaluator_role == 'Manager' ? 'selected' : '' }}>Direct Manager</option>
                                            <option value="Cross_Dept" {{ $ind->evaluator_role == 'Cross_Dept' ? 'selected' : '' }}>Cross Dept</option>
                                        </select>
                                    </td>
                                    <td class="p-3">
                                        <select name="cross_dept_ids[]" class="w-full px-3 py-2 border rounded text-sm cursor-pointer cross-dept-select {{ $ind->evaluator_role == 'Cross_Dept' ? 'bg-white' : 'bg-gray-100 opacity-50 pointer-events-none' }}" {{ $ind->evaluator_role == 'Cross_Dept' ? 'required' : '' }}>
                                            <option value="">-- N/A --</option>
                                            @foreach($departments as $d)
                                                <option value="{{ $d->id }}" {{ $ind->cross_dept_id == $d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td class="p-3 text-center"><button type="button" onclick="this.closest('tr').remove(); calculateTotal();" class="text-red-500 font-bold hover:text-red-700 text-xl">&times;</button></td>
                                </tr>
                            @endforeach
                        @else
                            <tr class="hover:bg-gray-50">
                                <input type="hidden" name="indicator_ids[]" value="new">
                                <td class="p-3"><input type="text" name="indicator_titles[]" required class="w-full px-3 py-2 border rounded outline-none focus:ring-1 focus:ring-brand-500" placeholder="e.g. Sales KPI"></td>
                                <td class="p-3"><textarea name="expected_targets[]" required rows="2" class="w-full px-3 py-2 border rounded outline-none focus:ring-1 focus:ring-brand-500 text-sm" placeholder="Describe the target..."></textarea></td>
                                <td class="p-3"><input type="number" name="max_scores[]" required min="1" max="100" value="10" class="w-20 px-3 py-2 border rounded outline-none text-center score-val"></td>
                                <td class="p-3">
                                    <select name="evaluator_roles[]" onchange="toggleCrossDept(this)" class="w-full px-3 py-2 border rounded bg-white text-sm cursor-pointer">
                                        <option value="Manager">Direct Manager</option>
                                        <option value="Cross_Dept">Cross Dept</option>
                                    </select>
                                </td>
                                <td class="p-3">
                                    <select name="cross_dept_ids[]" class="w-full px-3 py-2 border rounded bg-gray-100 text-sm opacity-50 pointer-events-none cross-dept-select cursor-pointer">
                                        <option value="">-- N/A --</option>
                                        @foreach($departments as $d) <option value="{{ $d->id }}">{{ $d->name }}</option> @endforeach
                                    </select>
                                </td>
                                <td class="p-3 text-center"><button type="button" onclick="this.closest('tr').remove(); calculateTotal();" class="text-red-500 font-bold hover:text-red-700 text-xl">&times;</button></td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
            <div class="flex justify-between items-center mt-3 px-2">
                <span class="text-xs font-bold text-gray-500 uppercase">Ensure Max Scores total 100</span>
                <span class="text-sm font-bold text-brand-600 bg-brand-50 px-3 py-1 rounded" id="score_tracker">Total: 0</span>
            </div>
        </div>

        <div class="flex justify-end space-x-4 pt-4 border-t border-gray-100">
            @if ($is_edit) <a href="{{ route('kpis.index') }}" class="px-6 py-3 border border-gray-300 text-gray-700 font-bold rounded-xl hover:bg-gray-50 transition">Cancel</a> @endif
            <button type="submit" class="px-10 py-3 bg-brand-600 hover:bg-brand-700 text-white font-bold rounded-xl shadow-lg transition">Save Template</button>
        </div>
    </form>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Template Title</th>
                <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Target Scope</th>
                <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Validity Period</th>
                <th class="px-6 py-4 text-center text-xs font-bold text-gray-500 uppercase tracking-wider">Indicators</th>
                <th class="px-6 py-4 text-right text-xs font-bold text-gray-500 uppercase tracking-wider">Action</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 bg-white">
            @foreach ($templates as $t)
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 font-bold text-gray-900">{{ $t->title }}</td>
                    <td class="px-6 py-4 text-sm text-gray-600">
                        @if($t->department_id) <span class='bg-blue-50 text-blue-700 px-2.5 py-1 rounded-md text-xs font-bold'>Dept: {{ $t->department->name }}</span>
                        @else <span class='bg-gray-100 text-gray-700 px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wider'>Custom / All</span> @endif
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500">
                        <span class="bg-gray-50 border border-gray-200 px-2 py-1 rounded">{{ $t->start_date }} &rarr; {{ $t->end_date }}</span>
                    </td>
                    <td class="px-6 py-4 text-center font-bold text-brand-600 text-lg">{{ $t->indicators->count() }}</td>
                    <td class="px-6 py-4 text-right space-x-3">
                        <a href="?edit={{ $t->id }}" class="text-brand-600 hover:text-brand-800 font-bold text-sm">Edit</a>
                        <form action="{{ route('kpis.destroy', $t->id) }}" method="POST" class="inline">
                            @csrf @method('DELETE')
                            <button type="submit" onclick="return confirm('Delete template permanently?')" class="text-red-500 hover:text-red-700 font-bold text-sm">Delete</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<script>
    function toggleAudience() {
        const val = document.querySelector('input[name="target_audience"]:checked').value;
        const deptSelect = document.getElementById('deptSelect');
        const specificGroup = document.getElementById('specific_group');
        deptSelect.classList.toggle('hidden', val !== 'department');
        specificGroup.classList.toggle('hidden', val !== 'specific_employees');
    }

    function toggleCrossDept(selectElement) {
        const targetSelect = selectElement.closest('tr').querySelector('.cross-dept-select');
        if (selectElement.value === 'Cross_Dept') {
            targetSelect.classList.remove('opacity-50', 'pointer-events-none', 'bg-gray-100');
            targetSelect.classList.add('bg-white');
            targetSelect.required = true;
        } else {
            targetSelect.classList.add('opacity-50', 'pointer-events-none', 'bg-gray-100');
            targetSelect.classList.remove('bg-white');
            targetSelect.value = '';
            targetSelect.required = false;
        }
    }

    function addIndicatorRow() {
        const tbody = document.getElementById('indicators_body');
        const tr = document.createElement('tr');
        tr.className = "hover:bg-gray-50";
        tr.innerHTML = `
            <input type="hidden" name="indicator_ids[]" value="new">
            <td class="p-3"><input type="text" name="indicator_titles[]" required class="w-full px-3 py-2 border rounded outline-none focus:ring-1 focus:ring-brand-500"></td>
            <td class="p-3"><textarea name="expected_targets[]" required rows="2" class="w-full px-3 py-2 border rounded outline-none focus:ring-1 focus:ring-brand-500 text-sm"></textarea></td>
            <td class="p-3"><input type="number" name="max_scores[]" required min="1" max="100" class="w-20 px-3 py-2 border rounded outline-none text-center score-val"></td>
            <td class="p-3">
                <select name="evaluator_roles[]" onchange="toggleCrossDept(this)" class="w-full px-3 py-2 border rounded bg-white text-sm cursor-pointer">
                    <option value="Manager">Direct Manager</option>
                    <option value="Cross_Dept">Cross Dept</option>
                </select>
            </td>
            <td class="p-3">
                <select name="cross_dept_ids[]" class="w-full px-3 py-2 border rounded bg-gray-100 text-sm opacity-50 pointer-events-none cross-dept-select cursor-pointer">
                    <option value="">-- N/A --</option>
                    @foreach($departments as $d) <option value="{{ $d->id }}">{{ $d->name }}</option> @endforeach
                </select>
            </td>
            <td class="p-3 text-center"><button type="button" onclick="this.closest('tr').remove(); calculateTotal();" class="text-red-500 hover:text-red-700 font-bold text-xl">&times;</button></td>
        `;
        tbody.appendChild(tr);
        calculateTotal();
        tr.querySelector('.score-val').addEventListener('input', calculateTotal);
    }

    function calculateTotal() {
        let total = 0;
        document.querySelectorAll('.score-val').forEach(input => { total += parseInt(input.value) || 0; });
        const tracker = document.getElementById('score_tracker');
        tracker.innerText = 'Total: ' + total;
        tracker.className = (total === 100) ? "text-sm font-bold text-green-700 bg-green-100 px-3 py-1 rounded" : "text-sm font-bold text-brand-600 bg-brand-50 px-3 py-1 rounded";
    }

    document.addEventListener('DOMContentLoaded', function() {
        calculateTotal();
        document.querySelectorAll('.score-val').forEach(i => i.addEventListener('input', calculateTotal));
        
        // Search Logic
        document.getElementById('emp_search').addEventListener('input', function(e) {
            const term = e.target.value.toLowerCase().trim();
            document.querySelectorAll('.emp-row').forEach(row => {
                const text = row.innerText.toLowerCase();
                row.style.display = text.includes(term) ? 'flex' : 'none';
            });
        });

        // Checkbox count logic
        document.querySelectorAll('.emp-checkbox').forEach(cb => {
            cb.addEventListener('change', () => {
                const count = document.querySelectorAll('.emp-checkbox:checked').length;
                document.getElementById('selected-count').innerText = count + ' Selected';
                cb.closest('.emp-row').classList.toggle('bg-brand-50', cb.checked);
            });
        });
    });
</script>
@endsection