@extends('layouts.app')

@section('title', $isTypist ? 'My Tasks' : 'Tasks & Approvals')

@section('content')
<div class="space-y-5" x-data="{ taskForm: {{ $errors->any() ? 'true' : 'false' }}, approvalForm: false }">
    @include('tenant.partials.typist-page-nav')

    <section class="rounded-[28px] border border-emerald-100 bg-gradient-to-br from-white via-emerald-50 to-sky-50 p-6 shadow-sm sm:p-8">
        <div class="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
            <div><span class="text-[11px] font-bold uppercase tracking-[0.18em] text-emerald-700">{{ $isTypist ? 'Personal worklist' : 'Controlled operational work' }}</span><h1 class="mt-2 text-2xl font-bold tracking-tight text-slate-950 sm:text-3xl">{{ $isTypist ? 'My Tasks' : 'Tasks & Approval Center' }}</h1><p class="mt-2 max-w-2xl text-sm text-slate-600">{{ $isTypist ? 'Only work assigned to you is shown here. Update progress as you complete each customer action.' : 'Assign accountable work and retain an auditable decision trail for sensitive exceptions.' }}</p></div>
            <div class="flex flex-wrap gap-2">
                @if(auth()->user()->hasPermission('approvals.view'))<button type="button" @click="approvalForm = !approvalForm" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-xs font-bold text-slate-700 shadow-sm">Request approval</button>@endif
                @if(auth()->user()->hasPermission('tasks.manage'))<button type="button" @click="taskForm = !taskForm" class="rounded-xl bg-emerald-600 px-4 py-2.5 text-xs font-bold text-white shadow-sm">+ New task</button>@endif
            </div>
        </div>
    </section>

    <section class="grid gap-3 sm:grid-cols-2 {{ auth()->user()->hasPermission('approvals.view') ? 'xl:grid-cols-4' : 'xl:grid-cols-3' }}">
        @php $openCount = ($taskCounts['open'] ?? 0) + ($taskCounts['in_progress'] ?? 0) + ($taskCounts['waiting'] ?? 0); @endphp
        @foreach([
            ['Open work', $openCount, 'bg-sky-100 text-sky-700'],
            ['Overdue', $overdueTasks, 'bg-red-100 text-red-700'],
            ['Completed', $taskCounts['completed'] ?? 0, 'bg-emerald-100 text-emerald-700'],
        ] as [$label, $value, $tone])
            <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><div class="flex items-center justify-between"><span class="text-xs font-bold text-slate-600">{{ $label }}</span><span class="grid h-9 w-9 place-items-center rounded-xl {{ $tone }}">●</span></div><strong class="mt-4 block text-2xl text-slate-950">{{ number_format($value) }}</strong></article>
        @endforeach
        @if(auth()->user()->hasPermission('approvals.view'))<article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><div class="flex items-center justify-between"><span class="text-xs font-bold text-slate-600">Pending approvals</span><span class="grid h-9 w-9 place-items-center rounded-xl bg-orange-100 text-orange-700">◆</span></div><strong class="mt-4 block text-2xl text-slate-950">{{ number_format($approvalCounts['pending'] ?? 0) }}</strong></article>@endif
    </section>

    @if(auth()->user()->hasPermission('tasks.manage'))
        <section x-show="taskForm" x-transition class="rounded-3xl border border-emerald-200 bg-white p-5 shadow-sm sm:p-6">
            <div class="flex items-center justify-between"><div><h2 class="font-bold text-slate-950">Create {{ $isTypist ? 'a personal' : 'an operational' }} task</h2><p class="mt-1 text-xs text-slate-500">Add a clear action, deadline and linked record.</p></div><button type="button" @click="taskForm = false" class="grid h-9 w-9 place-items-center rounded-xl bg-slate-100 text-slate-500">×</button></div>
            <form method="POST" action="{{ route('app.tasks.store') }}" class="mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
                @csrf
                <input name="title" value="{{ old('title') }}" required placeholder="Task title *" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs xl:col-span-2">
                <select name="priority" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs"><option value="normal">Normal</option><option value="high">High</option><option value="urgent">Urgent</option><option value="critical">Critical</option></select>
                <input name="due_at" type="datetime-local" value="{{ old('due_at') }}" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs">
                <textarea name="description" rows="3" placeholder="Instructions and expected outcome" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs md:col-span-2 xl:col-span-4">{{ old('description') }}</textarea>
                @unless($isTypist)
                    <select name="assigned_user_id" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs"><option value="">Unassigned</option>@foreach($users as $user)<option value="{{ $user->id }}">{{ $user->name }}</option>@endforeach</select>
                    <select name="branch_id" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs"><option value="">Default branch</option>@foreach($branches as $branch)<option value="{{ $branch->id }}">{{ $branch->name }}</option>@endforeach</select>
                @endunless
                <select name="source_type" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs"><option value="">General task</option><option value="application">Application</option><option value="renewal">Renewal</option><option value="customer">Customer</option><option value="document">Document</option><option value="payment">Payment</option><option value="corporate">Corporate</option></select>
                <input name="source_id" type="number" min="1" placeholder="Linked record ID" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs">
                <button class="rounded-xl bg-emerald-600 px-5 py-3 text-xs font-bold text-white {{ $isTypist ? 'md:col-span-2 xl:col-span-2' : 'xl:col-span-4' }}">Create task</button>
            </form>
        </section>
    @endif

    <form method="GET" class="grid gap-3 rounded-3xl border border-slate-200 bg-white p-4 shadow-sm md:grid-cols-[minmax(0,1fr)_220px_auto]">
        <input name="q" value="{{ request('q') }}" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-2.5 text-xs" placeholder="Search task number or title">
        <select name="task_status" class="rounded-xl border-slate-200 bg-slate-50 px-3 py-2.5 text-xs"><option value="">Any task status</option>@foreach(['open','in_progress','waiting','completed','cancelled'] as $status)<option value="{{ $status }}" @selected(request('task_status') === $status)>{{ str($status)->replace('_',' ')->title() }}</option>@endforeach</select>
        <div class="flex gap-2"><button class="rounded-xl bg-slate-900 px-5 py-2.5 text-xs font-bold text-white">Filter</button><a href="{{ route('app.tasks.index', $isTypist ? ['scope' => 'mine'] : []) }}" class="rounded-xl border border-slate-200 px-3 py-2.5 text-xs font-bold text-slate-500">Reset</a></div>
    </form>

    <section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">
        <div class="border-b border-slate-100 px-5 py-4"><h2 class="font-bold text-slate-950">{{ $isTypist ? 'Assigned to me' : 'Task board' }}</h2><p class="mt-1 text-xs text-slate-500">Priority-sorted actions with accountable ownership and due dates.</p></div>
        <div class="overflow-x-auto"><table class="w-full min-w-[920px] text-left text-xs"><thead class="border-b border-slate-200 bg-slate-50 text-[10px] font-bold uppercase tracking-wider text-slate-500"><tr><th class="px-5 py-4">Task</th><th class="px-5 py-4">Priority</th><th class="px-5 py-4">Linked work</th><th class="px-5 py-4">Owner</th><th class="px-5 py-4">Due</th><th class="px-5 py-4">Status / action</th></tr></thead><tbody class="divide-y divide-slate-100">
            @forelse($tasks as $task)
                @php
                    $overdue = $task->due_at?->isPast() && !in_array($task->status, ['completed','cancelled']);
                    $priorityTone = in_array($task->priority, ['urgent','critical']) ? 'bg-red-100 text-red-700' : ($task->priority === 'high' ? 'bg-orange-100 text-orange-700' : 'bg-slate-100 text-slate-600');
                @endphp
                <tr class="hover:bg-emerald-50/30"><td class="px-5 py-4"><strong class="block text-slate-900">{{ $task->task_number }} · {{ $task->title }}</strong><span class="mt-1 block max-w-sm text-[10px] leading-4 text-slate-500">{{ str($task->description)->limit(95) }}</span></td><td class="px-5 py-4"><span class="rounded-full px-2.5 py-1 text-[9px] font-bold uppercase {{ $priorityTone }}">{{ $task->priority }}</span></td><td class="px-5 py-4"><strong class="block text-slate-800">{{ $task->source_type ? str($task->source_type)->title() : 'General' }}</strong><span class="mt-1 block text-[10px] text-slate-400">{{ $task->source_id ? '#'.$task->source_id : ($task->branch?->name ?? 'No linked record') }}</span></td><td class="px-5 py-4"><strong class="block text-slate-800">{{ $task->assignedUser?->name ?? 'Unassigned' }}</strong><span class="mt-1 block text-[10px] text-slate-400">Created by {{ $task->creator?->name ?? 'System' }}</span></td><td class="px-5 py-4"><strong class="block {{ $overdue ? 'text-red-600' : 'text-slate-800' }}">{{ $task->due_at?->format('d M Y, h:i A') ?? 'No deadline' }}</strong>@if($task->due_at)<span class="mt-1 block text-[10px] {{ $overdue ? 'text-red-500' : 'text-slate-400' }}">{{ $task->due_at->diffForHumans() }}</span>@endif</td><td class="px-5 py-4">@if(auth()->user()->hasPermission('tasks.manage') && !in_array($task->status, ['completed','cancelled']))<form method="POST" action="{{ route('app.tasks.status', $task->id) }}" class="flex gap-2">@csrf<select name="status" class="rounded-lg border-slate-200 bg-slate-50 py-2 pl-3 pr-8 text-[10px]"><option value="open" @selected($task->status === 'open')>Open</option><option value="in_progress" @selected($task->status === 'in_progress')>In progress</option><option value="waiting" @selected($task->status === 'waiting')>Waiting</option><option value="completed">Complete</option><option value="cancelled">Cancel</option></select><button class="rounded-lg bg-slate-900 px-3 text-[10px] font-bold text-white">Update</button></form>@else<span class="rounded-full bg-slate-100 px-2.5 py-1 text-[9px] font-bold uppercase text-slate-600">{{ str($task->status)->replace('_',' ') }}</span>@endif</td></tr>
            @empty
                <tr><td colspan="6" class="px-6 py-16 text-center"><strong class="block text-base text-slate-700">No assigned tasks</strong><span class="mt-2 block text-sm text-slate-400">Your workflow tasks and renewal follow-ups will appear here.</span></td></tr>
            @endforelse
        </tbody></table></div>
        @if($tasks->hasPages())<div class="border-t border-slate-100 px-5 py-4">{{ $tasks->links() }}</div>@endif
    </section>

    @if(auth()->user()->hasPermission('approvals.view'))
        <section x-show="approvalForm" x-transition class="rounded-3xl border border-orange-200 bg-white p-5 shadow-sm sm:p-6">
            <div class="flex items-center justify-between"><div><h2 class="font-bold text-slate-950">Request approval</h2><p class="mt-1 text-xs text-slate-500">Submit exceptions for an authorized decision.</p></div><button type="button" @click="approvalForm = false" class="grid h-9 w-9 place-items-center rounded-xl bg-slate-100 text-slate-500">×</button></div>
            <form method="POST" action="{{ route('app.approvals.store') }}" class="mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-4">@csrf<select name="type" required class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs"><option value="discount">Discount</option><option value="fee_override">Fee override</option><option value="refund">Refund</option><option value="document_exception">Document exception</option><option value="application_reopen">Application reopen</option><option value="stage_skip">Stage skip</option></select><input name="amount" type="number" min="0" step="0.01" placeholder="Amount AED" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs"><select name="assigned_to" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs"><option value="">Approval pool</option>@foreach($users as $user)<option value="{{ $user->id }}">{{ $user->name }}</option>@endforeach</select><input name="expires_at" type="datetime-local" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs"><textarea name="reason" required rows="3" placeholder="Business reason *" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-3 text-xs md:col-span-2 xl:col-span-4"></textarea><button class="rounded-xl bg-orange-600 px-5 py-3 text-xs font-bold text-white md:col-span-2 xl:col-span-4">Submit request</button></form>
        </section>

        <section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm"><div class="border-b border-slate-100 px-5 py-4"><h2 class="font-bold text-slate-950">Approval inbox</h2><p class="mt-1 text-xs text-slate-500">Permission-controlled decisions with permanent audit history.</p></div><div class="overflow-x-auto"><table class="w-full min-w-[900px] text-left text-xs"><thead class="border-b border-slate-200 bg-slate-50 text-[10px] font-bold uppercase tracking-wider text-slate-500"><tr><th class="px-5 py-4">Request</th><th class="px-5 py-4">Type / amount</th><th class="px-5 py-4">Requested by</th><th class="px-5 py-4">Reason</th><th class="px-5 py-4">Status</th><th class="px-5 py-4">Decision</th></tr></thead><tbody class="divide-y divide-slate-100">@forelse($approvals as $approval)<tr><td class="px-5 py-4"><strong>{{ $approval->approval_number }}</strong><span class="mt-1 block text-[10px] text-slate-400">{{ $approval->created_at->format('d M Y, h:i A') }}</span></td><td class="px-5 py-4"><strong>{{ str($approval->type)->replace('_',' ')->title() }}</strong><span class="mt-1 block text-[10px] text-slate-400">{{ $approval->amount !== null ? 'AED '.number_format((float) $approval->amount, 2) : 'No amount' }}</span></td><td class="px-5 py-4">{{ $approval->requester?->name }}</td><td class="max-w-xs px-5 py-4 text-slate-600">{{ str($approval->reason)->limit(110) }}</td><td class="px-5 py-4"><span class="rounded-full bg-orange-100 px-2.5 py-1 text-[9px] font-bold uppercase text-orange-700">{{ $approval->status }}</span></td><td class="px-5 py-4">@if(auth()->user()->hasPermission('approvals.manage') && $approval->status === 'pending')<details><summary class="cursor-pointer font-bold text-orange-600">Review</summary><form method="POST" action="{{ route('app.approvals.decision', $approval->id) }}" class="mt-2 space-y-2">@csrf<select name="decision" class="w-full rounded-lg border-slate-200 text-xs"><option value="approved">Approve</option><option value="rejected">Reject</option></select><input name="decision_notes" required placeholder="Decision notes" class="w-full rounded-lg border-slate-200 text-xs"><button class="w-full rounded-lg bg-orange-600 py-2 text-[10px] font-bold text-white">Record decision</button></form></details>@else<span class="text-slate-400">{{ $approval->decision_notes ?: 'No action' }}</span>@endif</td></tr>@empty<tr><td colspan="6" class="px-6 py-12 text-center text-slate-400">No approval requests.</td></tr>@endforelse</tbody></table></div>@if($approvals->hasPages())<div class="border-t border-slate-100 px-5 py-4">{{ $approvals->links() }}</div>@endif</section>
    @endif
</div>
@endsection