@extends('business::layouts.app')

@section('title', 'New Template — BizWap')

@section('content')
<div class="d-flex align-items-center mb-4">
    <a href="{{ route('business.templates.index') }}" class="btn btn-sm btn-outline-secondary me-3">
        <i class="bi bi-arrow-left"></i>
    </a>
    <div>
        <h4 class="fw-bold mb-0">New Template</h4>
        <p class="text-muted small mb-0">Templates will be reviewed by our team before being submitted to Meta.</p>
    </div>
</div>

<form action="{{ route('business.templates.store') }}" method="POST" id="templateForm" novalidate>
    @csrf

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
            <strong>Please fix the following errors:</strong>
            <ul class="mb-0 mt-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-4">

        {{-- LEFT: Main content --}}
        <div class="col-lg-8">

            {{-- Basic Info --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">Basic Info</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Template Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name') }}" placeholder="e.g. order_confirmation"
                               pattern="[a-z0-9_]+" title="Lowercase letters, numbers, underscores only">
                        <div class="form-text">Lowercase letters, numbers, and underscores only.</div>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Category <span class="text-danger">*</span></label>
                            <select name="category" class="form-select @error('category') is-invalid @enderror">
                                <option value="">Select category</option>
                                @foreach(['MARKETING', 'UTILITY', 'AUTHENTICATION'] as $cat)
                                    <option value="{{ $cat }}" {{ old('category') === $cat ? 'selected' : '' }}>{{ $cat }}</option>
                                @endforeach
                            </select>
                            @error('category')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Language <span class="text-danger">*</span></label>
                            <select name="language" class="form-select @error('language') is-invalid @enderror">
                                <option value="">Select language</option>
                                @foreach([
                                    'en'    => 'English',
                                    'en_US' => 'English (US)',
                                    'en_GB' => 'English (UK)',
                                    'hi'    => 'Hindi',
                                    'mr'    => 'Marathi',
                                    'gu'    => 'Gujarati',
                                    'ta'    => 'Tamil',
                                    'te'    => 'Telugu',
                                    'bn'    => 'Bengali',
                                    'kn'    => 'Kannada',
                                    'ml'    => 'Malayalam',
                                    'pa'    => 'Punjabi',
                                    'ur'    => 'Urdu',
                                ] as $code => $label)
                                    <option value="{{ $code }}" {{ old('language') === $code ? 'selected' : '' }}>{{ $label }} ({{ $code }})</option>
                                @endforeach
                            </select>
                            @error('language')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            </div>

            {{-- Header --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">
                    Header
                    <span class="text-muted fw-normal small ms-1">— optional, text only</span>
                </div>
                <div class="card-body">
                    <input type="text" name="header_text" class="form-control @error('header_text') is-invalid @enderror"
                           value="{{ old('header_text') }}" placeholder="e.g. Hello @{{1}} or plain text"
                           maxlength="60" id="headerTextInput">
                    <div class="d-flex justify-content-between mt-1">
                        <div class="form-text">Use <code>@{{1}}</code> for one variable. Max 60 chars.</div>
                        <span class="text-muted small" id="headerCharCount">0 / 60</span>
                    </div>
                    @error('header_text')<div class="invalid-feedback">{{ $message }}</div>@enderror

                    {{-- Header example --}}
                    <div class="mt-3" id="headerExampleSection" style="display:none;">
                        <label class="form-label small text-muted">Example value for <code>@{{1}}</code></label>
                        <input type="text" name="header_examples[]" class="form-control form-control-sm"
                               placeholder="e.g. John" maxlength="60">
                    </div>
                </div>
            </div>

            {{-- Body --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">
                    Body <span class="text-danger">*</span>
                </div>
                <div class="card-body">
                    <textarea name="body" id="bodyText" rows="5"
                              class="form-control @error('body') is-invalid @enderror"
                              placeholder="Enter your message. Use @{{1}}, @{{2}} for variables." maxlength="1024">{{ old('body') }}</textarea>
                    <div class="d-flex justify-content-between mt-1">
                        <div class="form-text">Variables: <code>@{{1}}</code>, <code>@{{2}}</code>, … (sequential, starting from 1)</div>
                        <span class="text-muted small" id="bodyCharCount">0 / 1024</span>
                    </div>
                    @error('body')<div class="invalid-feedback">{{ $message }}</div>@enderror

                    {{-- Body variable examples --}}
                    <div class="mt-3" id="bodyExamplesSection">
                        <p class="small text-muted mb-2">Example values for variables (required by Meta for review):</p>
                        <div id="bodyExamplesList"></div>
                    </div>
                </div>
            </div>

            {{-- Footer --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">
                    Footer
                    <span class="text-muted fw-normal small ms-1">— optional, plain text</span>
                </div>
                <div class="card-body">
                    <input type="text" name="footer" class="form-control @error('footer') is-invalid @enderror"
                           value="{{ old('footer') }}" placeholder="e.g. Thank you for shopping with us."
                           maxlength="60" id="footerInput">
                    <div class="d-flex justify-content-between mt-1">
                        <span></span>
                        <span class="text-muted small" id="footerCharCount">0 / 60</span>
                    </div>
                    @error('footer')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>

            {{-- Buttons --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">
                    Buttons
                    <span class="text-muted fw-normal small ms-1">— optional, max 3</span>
                </div>
                <div class="card-body">
                    <div id="buttonsList"></div>
                    <button type="button" class="btn btn-sm btn-outline-secondary mt-2" id="addButtonBtn">
                        <i class="bi bi-plus-lg me-1"></i> Add Button
                    </button>
                    @error('buttons')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>
            </div>

        </div>

        {{-- RIGHT: Preview --}}
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm sticky-top" style="top: 80px;">
                <div class="card-header bg-transparent border-bottom fw-semibold">Preview</div>
                <div class="card-body">
                    <div class="whatsapp-bubble p-3 rounded-3" style="background: #dcf8c6; font-size: 0.9rem; min-height: 80px; word-break: break-word;">
                        <div id="previewHeader" class="fw-bold mb-1" style="display:none; color: #111827;"></div>
                        <div id="previewBody" style="color: #111827;"></div>
                        <div id="previewFooter" class="small mt-1" style="display:none; color: #6b7280;"></div>
                    </div>
                    <div id="previewButtons" class="mt-2 d-grid gap-1"></div>
                </div>
            </div>
        </div>

    </div>

    <div class="d-flex gap-2 justify-content-end mt-2 pb-4">
        <a href="{{ route('business.templates.index') }}" class="btn btn-outline-secondary">Cancel</a>
        <button type="submit" class="btn btn-success">Save Template</button>
    </div>

</form>
@endsection

@push('scripts')
<script>
(function () {
    // Char counters
    function charCounter(inputId, counterId, max) {
        const el = document.getElementById(inputId);
        const counter = document.getElementById(counterId);
        if (!el || !counter) return;
        const update = () => counter.textContent = `${el.value.length} / ${max}`;
        el.addEventListener('input', update);
        update();
    }
    charCounter('headerTextInput', 'headerCharCount', 60);
    charCounter('bodyText', 'bodyCharCount', 1024);
    charCounter('footerInput', 'footerCharCount', 60);

    // Header variable detection
    const headerInput = document.getElementById('headerTextInput');
    const headerExSection = document.getElementById('headerExampleSection');
    headerInput.addEventListener('input', function () {
        headerExSection.style.display = /\{\{1\}\}/.test(this.value) ? 'block' : 'none';
    });

    // Body variable examples
    const bodyText = document.getElementById('bodyText');
    const bodyExList = document.getElementById('bodyExamplesSection');

    function updateBodyExamples() {
        const text = bodyText.value;
        const matches = [...new Set(text.match(/\{\{\d+\}\}/g) || [])];
        const sorted = matches.sort((a, b) => parseInt(a.match(/\d+/)) - parseInt(b.match(/\d+/)));
        const container = document.getElementById('bodyExamplesList');
        container.innerHTML = '';
        if (sorted.length === 0) {
            bodyExList.style.display = 'none';
            return;
        }
        bodyExList.style.display = 'block';
        sorted.forEach(v => {
            const idx = v.match(/\d+/)[0];
            const row = document.createElement('div');
            row.className = 'mb-2';
            row.innerHTML = `
                <label class="form-label small text-muted mb-1">Example for ${v}</label>
                <input type="text" name="body_examples[]" class="form-control form-control-sm"
                       placeholder="e.g. sample value for ${v}" maxlength="255">
            `;
            container.appendChild(row);
        });
    }
    bodyText.addEventListener('input', updateBodyExamples);

    // Live preview
    function updatePreview() {
        const header = document.getElementById('headerTextInput').value.trim();
        const body = document.getElementById('bodyText').value.trim();
        const footer = document.getElementById('footerInput').value.trim();

        const phdr = document.getElementById('previewHeader');
        const pbdy = document.getElementById('previewBody');
        const pftr = document.getElementById('previewFooter');

        if (header) { phdr.textContent = header; phdr.style.display = 'block'; }
        else { phdr.style.display = 'none'; }

        pbdy.textContent = body || '';

        if (footer) { pftr.textContent = footer; pftr.style.display = 'block'; }
        else { pftr.style.display = 'none'; }
    }
    document.getElementById('headerTextInput').addEventListener('input', updatePreview);
    document.getElementById('bodyText').addEventListener('input', updatePreview);
    document.getElementById('footerInput').addEventListener('input', updatePreview);

    // Buttons builder
    let buttonCount = 0;
    const buttonsList = document.getElementById('buttonsList');
    const addBtn = document.getElementById('addButtonBtn');
    const previewButtons = document.getElementById('previewButtons');

    addBtn.addEventListener('click', function () {
        if (buttonCount >= 3) return;
        const i = buttonCount++;
        const row = document.createElement('div');
        row.className = 'border rounded p-3 mb-2 position-relative';
        row.id = `btnRow${i}`;
        row.innerHTML = `
            <button type="button" class="btn-close position-absolute top-0 end-0 m-2"
                    onclick="removeButton(${i})"></button>
            <div class="row g-2">
                <div class="col-md-4">
                    <label class="form-label small">Type</label>
                    <select name="buttons[${i}][type]" class="form-select form-select-sm"
                            onchange="toggleButtonFields(${i}, this.value)">
                        <option value="QUICK_REPLY">Quick Reply</option>
                        <option value="URL">URL</option>
                        <option value="PHONE_NUMBER">Phone Number</option>
                    </select>
                </div>
                <div class="col-md-8">
                    <label class="form-label small">Button Text</label>
                    <input type="text" name="buttons[${i}][text]" class="form-control form-control-sm"
                           placeholder="Button label" maxlength="25">
                </div>
                <div class="col-12 url-field-${i}" style="display:none;">
                    <label class="form-label small">URL</label>
                    <input type="text" name="buttons[${i}][url]" class="form-control form-control-sm"
                           placeholder="https://example.com/{{1}}" maxlength="2000">
                    <div class="form-text">Use <code>&#123;&#123;1&#125;&#125;</code> for a dynamic URL parameter.</div>
                </div>
                <div class="col-12 phone-field-${i}" style="display:none;">
                    <label class="form-label small">Phone Number</label>
                    <input type="text" name="buttons[${i}][phone_number]" class="form-control form-control-sm"
                           placeholder="+919876543210" maxlength="20">
                    <div class="form-text">Include country code, e.g. +919876543210</div>
                </div>
            </div>
        `;
        buttonsList.appendChild(row);
        if (buttonCount >= 3) addBtn.disabled = true;
    });

    window.removeButton = function (i) {
        const row = document.getElementById(`btnRow${i}`);
        if (row) row.remove();
        buttonCount--;
        addBtn.disabled = false;
    };

    window.toggleButtonFields = function (i, type) {
        const urlField   = document.querySelector(`.url-field-${i}`);
        const phoneField = document.querySelector(`.phone-field-${i}`);
        if (urlField)   urlField.style.display   = type === 'URL'          ? 'block' : 'none';
        if (phoneField) phoneField.style.display = type === 'PHONE_NUMBER' ? 'block' : 'none';
    };
})();
</script>
@endpush