@extends('layouts.admin')

@section('title', 'Add Template')
@section('page-title', 'Add Template')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="admin-card">
            <h5 class="mb-4">New Message Template Details</h5>
            <form action="{{ route('admin.notification-templates.store') }}" method="POST">
                @csrf
                <div class="mb-3">
                    <label class="form-label fw-bold">Template Title</label>
                    <input type="text" name="title" class="form-control" placeholder="e.g. Weather Holiday Circular" required>
                    @error('title')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                
                <div class="mb-3">
                    <label class="form-label fw-bold">Category</label>
                    <select name="category" class="form-select" required>
                        <option value="General">General</option>
                        <option value="PTM">PTM</option>
                        <option value="Exam">Exam</option>
                        <option value="Results">Results</option>
                        <option value="Emergency">Emergency</option>
                    </select>
                </div>

                <div class="mb-4">
                    <label class="form-label fw-bold">Template Body Content</label>
                    <textarea name="content" rows="6" class="form-control" placeholder="Write message body content. Use placeholder tokens like [DATE] or [TIME] to specify dynamic values." required></textarea>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Save Template</button>
                    <a href="{{ route('admin.notification-templates.index') }}" class="btn btn-outline-secondary rounded-pill px-4">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection