@extends('layouts.admin')

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

@section('content')
<x-admin.form-page
    title="Create SMS Template"
    :crumbs="[['label' => 'SMS Templates', 'url' => route('admin.sms-templates.index')], 'Create']"
    :back-url="route('admin.sms-templates.index')"
    :action="route('admin.sms-templates.store')"
    form-id="smsTemplateForm"
    submit-label="Create SMS Template"
>
    <section class="pp-card">
        <div class="pp-card__head">
            <span class="pp-card__icon"><i class="bi bi-chat-dots"></i></span>
            <div>
                <h2 class="pp-card__title">Template Details</h2>
                <p class="pp-card__sub">Identifier, body text and DLT configuration</p>
            </div>
        </div>
        <div class="pp-card__body">
            <div class="pp-field">
                <label for="create_identifier">Identifier <span class="pp-req">*</span></label>
                <input type="text" class="form-control" id="create_identifier" name="identifier" required
                       value="{{ old('identifier') }}"
                       placeholder="e.g. order_placement, welcome_sms"
                       pattern="[a-z0-9_]+">
                <span class="pp-hint">Lowercase letters, numbers and underscores only. Used internally.</span>
                @error('identifier')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="pp-field mt-3">
                <label for="create_name">Name <span class="pp-req">*</span></label>
                <input type="text" class="form-control" id="create_name" name="name" required
                       value="{{ old('name') }}"
                       placeholder="e.g. Order Placement">
                <span class="pp-hint">Display name shown in the sidebar</span>
                @error('name')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="pp-field mt-3">
                <label for="create_body">SMS Body</label>
                <textarea class="form-control" id="create_body" name="body" rows="4"
                          placeholder="Use [[placeholder_name]] for dynamic values">{{ old('body') }}</textarea>
                @error('body')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="pp-field mt-3">
                <label for="create_template_id">Template ID</label>
                <input type="text" class="form-control" id="create_template_id" name="template_id"
                       value="{{ old('template_id') }}"
                       placeholder="DLT Template ID">
                @error('template_id')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="pp-toggles mt-3">
                <label class="pp-toggle" for="create_active">
                    <input type="checkbox" name="is_active" value="1"
                           id="create_active" {{ old('is_active', true) ? 'checked' : '' }}>
                    Active
                </label>
            </div>
        </div>
    </section>

    @if($templates->isNotEmpty())
    <x-slot:aside>
        <section class="pp-card">
            <div class="pp-card__head">
                <span class="pp-card__icon pp-card__icon--summary"><i class="bi bi-list-ul"></i></span>
                <div>
                    <h2 class="pp-card__title">Existing Templates</h2>
                </div>
            </div>
            <div class="pp-card__body">
                <ul class="list-unstyled mb-3">
                    @foreach($templates as $t)
                        <li class="py-2 border-bottom border-light">
                            <a href="{{ route('admin.sms-templates.show', ['identifier' => $t->identifier]) }}" class="text-decoration-none">
                                {{ $t->name }} <small class="text-muted">({{ $t->identifier }})</small>
                            </a>
                        </li>
                    @endforeach
                </ul>
                <button type="submit" form="smsTemplateForm" class="pp-btn pp-btn--primary pp-btn--block">
                    <i class="bi bi-plus-lg"></i> Create SMS Template
                </button>
            </div>
        </section>
    </x-slot:aside>
    @endif
</x-admin.form-page>
@endsection