@extends('backEnd.layouts.master')
@section('title', isset($template) ? 'Edit Template' : 'New Template')

@section('content')
<div class="page-header">
    <div>
        <h4><i class="fas fa-file-alt me-2 text-success"></i>{{ isset($template) ? 'Edit Template' : 'New Template' }}</h4>
    </div>
    <a href="{{ route('admin.sms.templates.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
</div>

@include('backEnd.sms.partials.subnav')

<div class="row g-4">
    <div class="col-lg-8">
        <div class="admin-card">
            <div class="admin-card-body">
                <form method="POST" action="{{ isset($template) ? route('admin.sms.templates.update', $template) : route('admin.sms.templates.store') }}">
                    @csrf
                    @if(isset($template)) @method('PUT') @endif

                    <div class="mb-3">
                        <label class="form-label">Template Name</label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name', $template->name ?? '') }}" required>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Category</label>
                        <select name="category" class="form-select" required>
                            @foreach($categories as $key => $label)
                                <option value="{{ $key }}" @selected(old('category', $template->category ?? 'general') === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Message Body</label>
                        <textarea name="body" id="template-body" class="form-control @error('body') is-invalid @enderror" rows="6" required>{{ old('body', $template->body ?? '') }}</textarea>
                        @error('body')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-check form-switch mb-4">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" id="isActive"
                               @checked(old('is_active', $template->is_active ?? true))>
                        <label class="form-check-label" for="isActive">Active</label>
                    </div>

                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i> Save Template
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="admin-card">
            <div class="admin-card-header"><h5 class="mb-0">Available Variables</h5></div>
            <div class="admin-card-body">
                <p class="small text-muted">Click to insert into message:</p>
                @foreach($availableVars as $var => $desc)
                    <button type="button" class="btn btn-sm btn-outline-secondary mb-2 me-1 insert-var" data-var="{{ $var }}">{{ $var }}</button>
                    <div class="small text-muted mb-2">{{ $desc }}</div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.insert-var').forEach(btn => {
    btn.addEventListener('click', function () {
        const ta = document.getElementById('template-body');
        const varText = this.dataset.var;
        const start = ta.selectionStart;
        const end = ta.selectionEnd;
        ta.value = ta.value.substring(0, start) + varText + ta.value.substring(end);
        ta.focus();
    });
});
</script>
@endpush