@extends('layouts.app')

@section('title', 'Create Form')

@section('content')
<div class="content-header">
    <div>
        <h1 style="display:flex; align-items:center; gap:10px;">
            <span style="display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15));">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent-primary)" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            </span>
            Create New Form
        </h1>
        <p class="text-secondary">Choose a template or start from scratch</p>
    </div>
    <a href="{{ route('form-builder.index') }}" class="btn btn-ghost">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
        Back
    </a>
</div>

<form action="{{ route('form-builder.store') }}" method="POST" class="fb-create-form">
    @csrf
    <div class="fb-create-card" style="animation-delay: 0s;">
        <div class="fb-create-section">
            <h3>Form Details</h3>
            <div class="form-group">
                <label class="form-label">Title *</label>
                <input type="text" name="title" class="form-input" placeholder="e.g. Bug Report Form" required value="{{ old('title') }}" style="border-color:rgba(99,102,241,0.1);">
            </div>
            <div class="form-group">
                <label class="form-label">Description</label>
                <textarea name="description" class="form-input" rows="3" placeholder="What is this form for?" style="border-color:rgba(99,102,241,0.1);">{{ old('description') }}</textarea>
            </div>
            <div class="form-row">
                <div class="form-group" style="flex:1;">
                    <label class="form-label">Project (optional)</label>
                    <select name="project_id" class="form-input" style="border-color:rgba(99,102,241,0.1);">
                        <option value="">No project</option>
                        @foreach($projects as $project)
                        <option value="{{ $project->id }}">{{ $project->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group" style="flex:0 0 auto;">
                    <label class="form-label">Public Access</label>
                    <label class="toggle-switch" style="margin-top:8px;">
                        <input type="checkbox" name="is_public" value="1">
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="fb-create-card" style="animation-delay: 0.1s;">
        <div class="fb-create-section">
            <h3>Start from Template</h3>
            <p class="text-secondary" style="margin-bottom:18px; font-size:0.85rem;">Choose a template or create a blank form</p>
            <div class="fb-template-grid">
                <label class="fb-template-card selected">
                    <input type="radio" name="template" value="" checked>
                    <div class="fb-template-icon">📄</div>
                    <div class="fb-template-name">Blank Form</div>
                    <div class="fb-template-desc">Start from scratch</div>
                </label>
                @foreach($templates as $key => $tmpl)
                <label class="fb-template-card">
                    <input type="radio" name="template" value="{{ $key }}">
                    <div class="fb-template-icon">{{ $tmpl['icon'] }}</div>
                    <div class="fb-template-name">{{ $tmpl['title'] }}</div>
                    <div class="fb-template-desc">{{ $tmpl['description'] }}</div>
                </label>
                @endforeach
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary" style="width:100%; background:linear-gradient(135deg, var(--accent-primary), #a78bfa); border:none; padding:14px; font-size:1rem; font-weight:700; border-radius:12px; box-shadow:0 4px 16px rgba(99,102,241,0.2); transition:all .3s;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Create Form
    </button>
</form>

<script>
document.querySelectorAll('.fb-template-card input[type=radio]').forEach(r => {
    r.addEventListener('change', () => {
        document.querySelectorAll('.fb-template-card').forEach(c => c.classList.remove('selected'));
        r.closest('.fb-template-card').classList.add('selected');
    });
});
</script>
@endsection