{{-- admin/tasks/create.blade.php | Obrempong | Jcode --}}
@extends('layouts.admin')
@section('title', isset($task) ? 'Edit Task' : 'Create Task')
@section('content')
<div class="grid-side">
    <div class="card">
        <div class="card-header"><h3>{{ isset($task) ? 'Edit Task' : 'New Task' }}</h3></div>
        <div class="card-body">
            <form method="POST" action="{{ isset($task) ? route('admin.tasks.update',$task) : route('admin.tasks.store') }}" enctype="multipart/form-data">
                @csrf
                @if(isset($task)) @method('PUT') @endif

                <div class="form-row cols-2">
                    <div class="form-group"><label class="form-label">Task Title *</label><input type="text" name="title" class="form-control" value="{{ old('title',$task->title??'') }}" required placeholder="e.g. Watch Our Video"></div>
                    <div class="form-group">
                        <label class="form-label">Task Type *</label>
                        <select name="type" class="form-control" required onchange="toggleFields()">
                            @foreach(['video'=>'Video Watch','visit'=>'Website Visit','daily'=>'Daily Check-In','game'=>'Play Game','quiz'=>'Math Quiz','offer'=>'Offerwall','custom'=>'Custom Task'] as $k=>$v)
                            <option value="{{ $k }}" {{ old('type',$task->type??'')===$k?'selected':'' }}>{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group"><label class="form-label">Description</label><textarea name="description" class="form-control" rows="3">{{ old('description',$task->description??'') }}</textarea></div>

                <div class="form-row cols-3">
                    <div class="form-group"><label class="form-label">Points Reward *</label><input type="number" name="points" class="form-control" value="{{ old('points',$task->points??10) }}" min="1" required></div>
                    <div class="form-group"><label class="form-label">Daily Limit</label><input type="number" name="daily_limit" class="form-control" value="{{ old('daily_limit',$task->daily_limit??1) }}" min="1"></div>
                    <div class="form-group"><label class="form-label">Sort Order</label><input type="number" name="sort_order" class="form-control" value="{{ old('sort_order',$task->sort_order??0) }}"></div>
                </div>

                <div id="url-field" class="form-group">
                    <label class="form-label">Task URL</label>
                    <input type="url" name="url" class="form-control" value="{{ old('url',$task->url??'') }}" placeholder="https://...">
                </div>

                <div id="duration-field" class="form-group">
                    <label class="form-label">Required Duration (seconds)</label>
                    <input type="number" name="duration_seconds" class="form-control" value="{{ old('duration_seconds',$task->duration_seconds??30) }}" min="5">
                    <span class="form-hint">How long user must stay on the page/video</span>
                </div>

                <div class="form-group"><label class="form-label">Geo Target (optional)</label><input type="text" name="geo_target" class="form-control" value="{{ old('geo_target',$task->geo_target??'') }}" placeholder="GH,NG,US – leave blank for all countries"></div>

                <div class="form-group"><label class="form-label">Task Image (optional)</label><input type="file" name="image" class="form-control" accept="image/*"></div>

                <div class="form-row cols-2" style="margin-top:8px;">
                    <div class="form-group">
                        <label class="form-switch"><input type="checkbox" name="requires_proof" value="1" {{ old('requires_proof',$task->requires_proof??false)?'checked':'' }}><span class="switch"></span> Requires Proof Upload</label>
                    </div>
                    <div class="form-group">
                        <label class="form-switch"><input type="checkbox" name="status" value="1" {{ old('status', $task->status??true)?'checked':'' }}><span class="switch"></span> Active</label>
                    </div>
                </div>

                <div style="display:flex;gap:10px;border-top:1px solid var(--border);padding-top:16px;margin-top:8px;">
                    <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> {{ isset($task)?'Update Task':'Create Task' }}</button>
                    <a href="{{ route('admin.tasks') }}" class="btn btn-outline">Cancel</a>
                </div>
            </form>
        </div>
    </div>

    {{-- Help Card --}}
    <div>
        <div class="card" style="position:sticky;top:80px;">
            <div class="card-header"><h3>Task Types Guide</h3></div>
            <div class="card-body" style="font-size:13px;line-height:1.8;">
                <strong>Video</strong> – User watches a video URL for required duration<br>
                <strong>Visit</strong> – User visits a website for required duration<br>
                <strong>Daily</strong> – User claims once per day (no URL needed)<br>
                <strong>Game</strong> – User plays a built-in game<br>
                <strong>Quiz</strong> – Math/trivia quiz task<br>
                <strong>Offer</strong> – Links to offerwall<br>
                <strong>Custom</strong> – Any task with optional proof upload
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
function toggleFields(){
    const t=document.querySelector('[name=type]').value;
    const showUrl=['video','visit','offer','custom'];
    const showDur=['video','visit'];
    document.getElementById('url-field').style.display=showUrl.includes(t)?'block':'none';
    document.getElementById('duration-field').style.display=showDur.includes(t)?'block':'none';
}
toggleFields();
</script>
@endpush