@extends('layouts.app')

@section('title', $template ? 'Edit SMS Template' : 'New SMS Template')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0">
        <i class="bi bi-chat-square-text me-2"></i>
        {{ $template ? 'Edit Template: ' . $template->name : 'New SMS Template' }}
    </h4>
    <a href="{{ route('sms.templates.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Back
    </a>
</div>

@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST"
      action="{{ $template ? route('sms.templates.update', $template) : route('sms.templates.store') }}">
    @csrf
    @if($template) @method('PUT') @endif

    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Template Name *</label>
                    <input type="text" name="name" class="form-control" required maxlength="255"
                           value="{{ old('name', $template?->name) }}" placeholder="e.g., Pre-Due Reminder">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Type *</label>
                    <select name="type" class="form-select" required>
                        @foreach ($types as $value => $label)
                            <option value="{{ $value }}" {{ old('type', $template?->type) === $value ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Options</label>
                    <div class="mt-2">
                        <div class="form-check form-check-inline">
                            <input type="hidden" name="is_unicode" value="0">
                            <input class="form-check-input" type="checkbox" name="is_unicode" value="1" id="isUnicode"
                                   {{ old('is_unicode', $template?->is_unicode) ? 'checked' : '' }}>
                            <label class="form-check-label" for="isUnicode">Unicode (বাংলা)</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="hidden" name="is_active" value="0">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="isActive"
                                   {{ old('is_active', $template ? $template->is_active : true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="isActive">Active</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Message Body *</label>
                <textarea name="body" class="form-control" rows="5" required maxlength="1000"
                          id="messageBody" placeholder="Type your message. Use {{placeholders}} for merge fields.">{{ old('body', $template?->body) }}</textarea>
                <div class="d-flex justify-content-between mt-1">
                    <small class="text-muted">
                        Available placeholders:
                        <code>{{customer_name}}</code>,
                        <code>{{amount}}</code>,
                        <code>{{due_date}}</code>,
                        <code>{{flat_no}}</code>,
                        <code>{{receipt_number}}</code>,
                        <code>{{remaining}}</code>,
                        <code>{{installment_number}}</code>,
                        <code>{{project_name}}</code>,
                        <code>{{late_fee}}</code>,
                        <code>{{payment_date}}</code>,
                        <code>{{payment_method}}</code>
                    </small>
                    <small id="charCount" class="text-muted">0 chars | 0 SMS</small>
                </div>
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary">
        <i class="bi bi-check-lg me-1"></i>{{ $template ? 'Update Template' : 'Create Template' }}
    </button>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const body = document.getElementById('messageBody');
    const countEl = document.getElementById('charCount');
    const unicodeCheck = document.getElementById('isUnicode');

    function updateCount() {
        const len = body.value.length;
        const limit = unicodeCheck.checked ? 70 : 160;
        const smsCount = Math.max(1, Math.ceil(len / limit));
        countEl.textContent = len + ' chars | ' + smsCount + ' SMS';
    }

    body.addEventListener('input', updateCount);
    unicodeCheck.addEventListener('change', updateCount);
    updateCount();
});
</script>
@endsection