@extends('layouts.app')
@section('title', 'Task Types')
@section('breadcrumb')<a href="{{ route('settings.index') }}" class="hover:text-white">Settings</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i><span class="text-white">Task Types</span>@endsection

@section('content')
<div x-data="{ showModal: false, editing: null, form: { name:'', task_category:'processor', description:'', is_active:true } }">

<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="mb-1">Staff Task Types</h1>
        <p>Define task types that staff select when tracking time</p>
    </div>
    <button @click="editing=null; form={name:'',task_category:'processor',description:'',is_active:true}; showModal=true" class="btn btn-primary">
        <i class="fas fa-plus"></i> Add Task Type
    </button>
</div>

@if(session('success'))
<div class="card p-4 mb-4 border-green-600 bg-green-900/20 text-green-300 flex items-center gap-2">
    <i class="fas fa-check-circle"></i> {{ session('success') }}
</div>
@endif

<!-- Processor Tasks -->
<div class="mb-6">
    <h3 class="mb-3 text-blue-300"><i class="fas fa-industry mr-2"></i>Processor Tasks</h3>
    <div class="card overflow-hidden">
        <table class="w-full">
            <thead><tr class="text-xs text-slate-400 uppercase border-b border-slate-700">
                <th class="px-5 py-3 text-left">Name</th>
                <th class="px-5 py-3 text-left">Description</th>
                <th class="px-5 py-3 text-left">Status</th>
                <th class="px-5 py-3 text-left">Created By</th>
                <th class="px-5 py-3"></th>
            </tr></thead>
            <tbody>
                @foreach($taskTypes->where('task_category','processor') as $task)
                <tr class="table-row">
                    <td class="px-5 py-3 text-sm font-medium text-white">{{ $task->name }}</td>
                    <td class="px-5 py-3 text-sm text-slate-400">{{ $task->description ?? '—' }}</td>
                    <td class="px-5 py-3">
                        <span class="badge {{ $task->is_active ? 'badge-green' : 'badge-gray' }}">{{ $task->is_active ? 'Active' : 'Inactive' }}</span>
                    </td>
                    <td class="px-5 py-3 text-sm text-slate-400">{{ $task->creator?->name ?? '—' }}</td>
                    <td class="px-5 py-3">
                        <div class="flex gap-2">
                            <button @click="editing={{ $task->id }}; form={name:'{{ addslashes($task->name) }}',task_category:'{{ $task->task_category }}',description:'{{ addslashes($task->description ?? '') }}',is_active:{{ $task->is_active ? 'true':'false' }}}; showModal=true"
                                class="text-slate-400 hover:text-blue-400 text-xs px-2 py-1 rounded hover:bg-slate-700">
                                <i class="fas fa-edit"></i>
                            </button>
                            <form method="POST" action="{{ route('staff-tasks.destroy', $task) }}" onsubmit="return confirm('Delete this task type?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-slate-400 hover:text-red-400 text-xs px-2 py-1 rounded hover:bg-slate-700"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
                @if($taskTypes->where('task_category','processor')->isEmpty())
                <tr><td colspan="5" class="px-5 py-6 text-center text-slate-500">No processor task types yet.</td></tr>
                @endif
            </tbody>
        </table>
    </div>
</div>

<!-- Employee Tasks -->
<div>
    <h3 class="mb-3 text-green-300"><i class="fas fa-hard-hat mr-2"></i>Employee Tasks</h3>
    <div class="card overflow-hidden">
        <table class="w-full">
            <thead><tr class="text-xs text-slate-400 uppercase border-b border-slate-700">
                <th class="px-5 py-3 text-left">Name</th>
                <th class="px-5 py-3 text-left">Description</th>
                <th class="px-5 py-3 text-left">Status</th>
                <th class="px-5 py-3 text-left">Created By</th>
                <th class="px-5 py-3"></th>
            </tr></thead>
            <tbody>
                @foreach($taskTypes->where('task_category','employee') as $task)
                <tr class="table-row">
                    <td class="px-5 py-3 text-sm font-medium text-white">{{ $task->name }}</td>
                    <td class="px-5 py-3 text-sm text-slate-400">{{ $task->description ?? '—' }}</td>
                    <td class="px-5 py-3">
                        <span class="badge {{ $task->is_active ? 'badge-green' : 'badge-gray' }}">{{ $task->is_active ? 'Active' : 'Inactive' }}</span>
                    </td>
                    <td class="px-5 py-3 text-sm text-slate-400">{{ $task->creator?->name ?? '—' }}</td>
                    <td class="px-5 py-3">
                        <div class="flex gap-2">
                            <button @click="editing={{ $task->id }}; form={name:'{{ addslashes($task->name) }}',task_category:'{{ $task->task_category }}',description:'{{ addslashes($task->description ?? '') }}',is_active:{{ $task->is_active ? 'true':'false' }}}; showModal=true"
                                class="text-slate-400 hover:text-blue-400 text-xs px-2 py-1 rounded hover:bg-slate-700">
                                <i class="fas fa-edit"></i>
                            </button>
                            <form method="POST" action="{{ route('staff-tasks.destroy', $task) }}" onsubmit="return confirm('Delete this task type?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-slate-400 hover:text-red-400 text-xs px-2 py-1 rounded hover:bg-slate-700"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
                @if($taskTypes->where('task_category','employee')->isEmpty())
                <tr><td colspan="5" class="px-5 py-6 text-center text-slate-500">No employee task types yet.</td></tr>
                @endif
            </tbody>
        </table>
    </div>
</div>

<!-- Add/Edit Modal -->
<div x-show="showModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60" style="display:none">
    <div class="card p-6 w-full max-w-md mx-4">
        <h3 class="mb-4" x-text="editing ? 'Edit Task Type' : 'Add Task Type'"></h3>

        <!-- Create Form -->
        <form x-show="!editing" method="POST" action="{{ route('staff-tasks.store') }}" class="space-y-4">
            @csrf
            <div>
                <label>Name</label>
                <input type="text" name="name" class="input" x-model="form.name" required placeholder="e.g. Cabinet Assembly">
            </div>
            <div>
                <label>Category</label>
                <select name="task_category" class="input" x-model="form.task_category">
                    <option value="processor">Processor Task</option>
                    <option value="employee">Employee Task</option>
                </select>
            </div>
            <div>
                <label>Description (optional)</label>
                <textarea name="description" class="input" rows="2" x-model="form.description"></textarea>
            </div>
            <div class="flex items-center gap-2">
                <input type="checkbox" name="is_active" value="1" id="is_active_c" checked class="w-4 h-4">
                <label for="is_active_c" class="mb-0">Active</label>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="btn btn-primary flex-1">Create</button>
                <button type="button" @click="showModal=false" class="btn btn-secondary flex-1">Cancel</button>
            </div>
        </form>

        <!-- Edit Forms -->
        @foreach($taskTypes as $task)
        <form x-show="editing == {{ $task->id }}" method="POST" action="{{ route('staff-tasks.update', $task) }}" class="space-y-4">
            @csrf @method('PUT')
            <div>
                <label>Name</label>
                <input type="text" name="name" class="input" value="{{ $task->name }}" required>
            </div>
            <div>
                <label>Category</label>
                <select name="task_category" class="input">
                    <option value="processor" {{ $task->task_category === 'processor' ? 'selected' : '' }}>Processor Task</option>
                    <option value="employee" {{ $task->task_category === 'employee' ? 'selected' : '' }}>Employee Task</option>
                </select>
            </div>
            <div>
                <label>Description (optional)</label>
                <textarea name="description" class="input" rows="2">{{ $task->description }}</textarea>
            </div>
            <div class="flex items-center gap-2">
                <input type="checkbox" name="is_active" value="1" {{ $task->is_active ? 'checked' : '' }} class="w-4 h-4">
                <label class="mb-0">Active</label>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="btn btn-primary flex-1">Save</button>
                <button type="button" @click="showModal=false" class="btn btn-secondary flex-1">Cancel</button>
            </div>
        </form>
        @endforeach
    </div>
</div>

</div>
@endsection