@extends('layouts.admin')

@section('title', 'Create Response Template')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Create Response Template</h3>
                    <div class="card-tools">
                        <a href="{{ route('admin.response-templates.index') }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>

                <form action="{{ route('admin.response-templates.store') }}" method="POST">
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label for="name">Template Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="category">Category <span class="text-danger">*</span></label>
                            <select name="category" id="category" class="form-control @error('category') is-invalid @enderror" required>
                                <option value="">Select a category</option>
                                @foreach($categories as $category)
                                <option value="{{ $category }}" {{ old('category') == $category ? 'selected' : '' }}>
                                    {{ ucfirst($category) }}
                                </option>
                                @endforeach
                                <option value="new">+ Add New Category</option>
                            </select>
                            @error('category')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group" id="new-category-group" style="display: none;">
                            <label for="new_category">New Category Name</label>
                            <input type="text" name="new_category" id="new_category" class="form-control" placeholder="Enter new category name">
                        </div>

                        <div class="form-group">
                            <label for="subject">Email Subject <span class="text-danger">*</span></label>
                            <input type="text" name="subject" id="subject" class="form-control @error('subject') is-invalid @enderror" value="{{ old('subject') }}" required>
                            @error('subject')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">You can use placeholders like {name}, {company}, etc.</small>
                        </div>

                        <div class="form-group">
                            <label for="content">Template Content <span class="text-danger">*</span></label>
                            <textarea name="content" id="content" class="form-control @error('content') is-invalid @enderror" rows="12" required>{{ old('content') }}</textarea>
                            @error('content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Available placeholders: {name}, {company}, {email}, {phone}, {subject}, {service_interest}, {budget_range}, {timeline}
                            </small>
                        </div>

                        <div class="form-group">
                            <div class="custom-control custom-checkbox">
                                <input class="custom-control-input" type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                <label for="is_active" class="custom-control-label">
                                    Active (Template will be available for use)
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Create Template
                        </button>
                        <a href="{{ route('admin.response-templates.index') }}" class="btn btn-secondary">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('category').addEventListener('change', function() {
    const newCategoryGroup = document.getElementById('new-category-group');
    const newCategoryInput = document.getElementById('new_category');

    if (this.value === 'new') {
        newCategoryGroup.style.display = 'block';
        newCategoryInput.required = true;
    } else {
        newCategoryGroup.style.display = 'none';
        newCategoryInput.required = false;
        newCategoryInput.value = '';
    }
});
</script>
@endsection