@extends('admin.layouts.main')
@section('title', $template->exists ? 'Edit SMS Template' : 'Create SMS Template')
@section('menu', 'Settings')

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption"><span class="caption-subject theme-font bold uppercase">{{ $template->exists ? 'Edit' : 'Create' }} SMS Template</span></div>
            </div>
            <form action="{{ $template->exists ? route('admin.sms-templates.update', $template) : route('admin.sms-templates.store') }}" method="POST">
                @csrf
                @if($template->exists) @method('PUT') @endif
                <div class="portlet-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control" value="{{ old('name', $template->name) }}" required>
                                @if($errors->has('name'))<span class="help-block text-danger">{{ $errors->first('name') }}</span>@endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Slug @if(!$template->exists)<span class="text-danger">*</span>@endif</label>
                                <input type="text" name="slug" class="form-control" value="{{ old('slug', $template->slug) }}" placeholder="Auto-generated from name" {{ $template->exists ? 'disabled' : '' }}>
                                @if($errors->has('slug'))<span class="help-block text-danger">{{ $errors->first('slug') }}</span>@endif
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Message Body <span class="text-danger">*</span></label>
                        <textarea name="body" class="form-control" rows="5" maxlength="1000" id="smsBody" required>{{ old('body', $template->body) }}</textarea>
                        <small class="form-text font-grey-mint">
                            <span id="charCount">0</span>/1000 characters.
                            Use <code>@{{variable_name}}</code> for dynamic content.
                        </small>
                        @if($errors->has('body'))<span class="help-block text-danger">{{ $errors->first('body') }}</span>@endif
                    </div>
                    <div class="form-group">
                        <label>Variables (comma-separated)</label>
                        <input type="text" name="variables" class="form-control" value="{{ old('variables', $template->variables ? implode(', ', $template->variables) : '') }}" placeholder="e.g. client_name, invoice_number, invoice_total">
                        <small class="form-text font-grey-mint">List of variable names that can be used in the body with @{{variable}} syntax.</small>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="hidden" name="is_active" value="0">
                            <input type="checkbox" name="is_active" value="1" {{ old('is_active', $template->is_active ?? true) ? 'checked' : '' }}>
                            Active
                        </label>
                    </div>
                </div>
                <div class="panel-footer">
                    <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> {{ $template->exists ? 'Update' : 'Create' }}</button>
                    <a href="{{ route('admin.sms-templates.index') }}" class="btn btn-default">Cancel</a>
                </div>
            </form>
        </div>
    </div>

    <div class="col-md-4">
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption"><span class="caption-subject theme-font bold uppercase">Available Variables</span></div>
            </div>
            <div class="portlet-body">
                <p class="font-grey-mint" style="font-size:12px;">Click to insert into message body:</p>
                @php
                    $availableVars = ['client_name', 'client_first_name', 'invoice_number', 'invoice_total', 'invoice_balance', 'invoice_due_date', 'currency', 'company_name', 'days_overdue', 'days_until_due', 'due_label'];
                @endphp
                @foreach($availableVars as $var)
                    <button type="button" class="btn btn-xs btn-default" style="margin:2px;" onclick="insertVar('{{ $var }}')"><code>@{{{{ $var }}}}</code></button>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    var $body = $('#smsBody');
    function updateCount() { $('#charCount').text($body.val().length); }
    $body.on('input', updateCount);
    updateCount();
});
function insertVar(name) {
    var $body = $('#smsBody');
    var val = $body.val();
    var pos = $body[0].selectionStart || val.length;
    var tag = '{{' + name + '}}';
    $body.val(val.substring(0, pos) + tag + val.substring(pos));
    $body.focus();
    $body[0].selectionStart = $body[0].selectionEnd = pos + tag.length;
    $('#charCount').text($body.val().length);
}
</script>
@endpush