@extends('backEnd.layouts.master')
@section('title', 'WhatsApp Templates')

@section('content')
<div class="page-header">
    <div>
        <h4><i class="fab fa-whatsapp me-2 text-success"></i>WhatsApp Templates</h4>
        <p class="text-muted mb-0 small">Order notification ও marketing message — Customer list থেকে template select করে পাঠান</p>
    </div>
    <a href="{{ route('admin.customers.index') }}" class="btn btn-outline-success btn-sm">
        <i class="fas fa-users me-1"></i> Customer List
    </a>
</div>

<form method="POST" action="{{ route('admin.social.whatsapp.update') }}" id="waTemplateForm">
    @csrf

    <div class="admin-card mb-4">
        <div class="admin-card-header"><h5 class="mb-0">Default Variables</h5></div>
        <div class="admin-card-body row g-3">
            <div class="col-md-6">
                <label class="form-label small fw-semibold"><code>{offer}</code> default</label>
                <input type="text" name="default_offer" class="form-control form-control-sm"
                       value="{{ setting('whatsapp_default_offer', '২০% ছাড় + Free Delivery') }}">
            </div>
            <div class="col-md-6">
                <label class="form-label small fw-semibold"><code>{festival}</code> default</label>
                <input type="text" name="default_festival" class="form-control form-control-sm"
                       value="{{ setting('whatsapp_default_festival', 'বিশেষ দিন') }}">
            </div>
        </div>
    </div>

    <ul class="nav nav-tabs mb-3" id="waTemplateTabs">
        @php $firstTab = true; @endphp
        @foreach($groups as $groupKey => $groupLabel)
            @if(collect($templates)->contains(fn ($t) => ($t['group'] ?? '') === $groupKey))
            <li class="nav-item">
                <button class="nav-link {{ $firstTab ? 'active' : '' }}" type="button"
                        data-bs-toggle="tab" data-bs-target="#tab-{{ $groupKey }}">
                    {{ $groupLabel }}
                </button>
            </li>
            @php if ($firstTab) { $firstTab = false; } @endphp
            @endif
        @endforeach
        <li class="nav-item">
            <button class="nav-link" type="button" data-bs-toggle="tab" data-bs-target="#tab-create">
                <i class="fas fa-plus me-1"></i> Create New
            </button>
        </li>
    </ul>

    <div class="tab-content">
        @php $firstPane = true; @endphp
        @foreach($groups as $groupKey => $groupLabel)
            @php $groupTemplates = collect($templates)->filter(fn ($t, $k) => ($t['group'] ?? '') === $groupKey); @endphp
            @if($groupTemplates->isNotEmpty())
            <div class="tab-pane fade {{ $firstPane ? 'show active' : '' }}" id="tab-{{ $groupKey }}">
                <div class="row g-3">
                    @foreach($groupTemplates as $key => $info)
                    <div class="col-lg-6">
                        <div class="admin-card h-100">
                            <div class="admin-card-header d-flex justify-content-between align-items-center">
                                <span class="fw-semibold">
                                    <i class="fab fa-whatsapp text-success me-2"></i>{{ $info['label'] }}
                                </span>
                                <div class="d-flex align-items-center gap-2">
                                    @if(str_starts_with($key, 'custom_'))
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-delete-custom"
                                            data-key="{{ $key }}" title="Delete template">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    @endif
                                    <span class="badge bg-light text-muted">{{ $key }}</span>
                                </div>
                            </div>
                            <div class="admin-card-body">
                                <textarea name="templates[{{ $key }}]" id="tpl-{{ $key }}"
                                          class="form-control wa-template-body font-monospace" rows="6"
                                          style="font-size:13px;">{{ $saved[$key] ?? $info['default'] }}</textarea>
                                <div class="d-flex flex-wrap gap-1 mt-2">
                                    @foreach($variables as $var => $desc)
                                    <button type="button" class="btn btn-sm btn-outline-secondary insert-var"
                                            data-target="tpl-{{ $key }}" data-var="{{ $var }}" title="{{ $desc }}">{{ $var }}</button>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @php if ($firstPane) { $firstPane = false; } @endphp
            @endif
        @endforeach

        <div class="tab-pane fade" id="tab-create">
            <div class="admin-card">
                <div class="admin-card-header"><h5 class="mb-0">Create Custom Template</h5></div>
                <div class="admin-card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Template Name</label>
                            <input type="text" name="new_template[label]" class="form-control"
                                   placeholder="e.g. Eid Offer 2026">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Type</label>
                            <select name="new_template[group]" class="form-select">
                                <option value="marketing">Marketing</option>
                                <option value="custom">Custom</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Message Body</label>
                            <textarea name="new_template[body]" id="new-template-body" class="form-control wa-template-body" rows="6"
                                      placeholder="আসসালামুয়ালাইকুম {name}! ..."></textarea>
                            <div class="d-flex flex-wrap gap-1 mt-2">
                                @foreach($variables as $var => $desc)
                                <button type="button" class="btn btn-sm btn-outline-secondary insert-var"
                                        data-target="new-template-body" data-var="{{ $var }}" title="{{ $desc }}">{{ $var }}</button>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <p class="small text-muted mt-3 mb-0">
                        Save করলে template তৈরি হবে এবং Customer list-এ select option-এ দেখাবে।
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="sticky-bottom-bar mt-4 p-3 bg-white border rounded shadow-sm d-flex gap-2">
        <button type="submit" class="btn btn-success">
            <i class="fas fa-save me-1"></i> Save Templates
        </button>
        <a href="{{ route('admin.customers.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-paper-plane me-1"></i> Go to Customers
        </a>
    </div>
</form>

<form id="deleteCustomForm" method="POST" class="d-none">
    @csrf
    @method('DELETE')
</form>
@endsection

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

document.querySelectorAll('.btn-delete-custom').forEach(btn => {
    btn.addEventListener('click', function () {
        if (!confirm('Delete this custom template?')) return;
        const form = document.getElementById('deleteCustomForm');
        form.action = @json(url('admin/social/whatsapp/templates')) + '/' + this.dataset.key;
        form.submit();
    });
});
</script>
@endpush