@extends('root')
@section('title', 'Test Send Template - Reseller')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Test Send Template',
        'links' => [
            ['url' => route('reseller.dashboard'), 'label' => 'Dashboard Reseller'],
            ['url' => route('reseller.templates.index'), 'label' => 'Templates'],
        ],
        'current' => 'Test Send'
    ])

    <div class="card card-body mb-3">
        <h4 class="mb-1">Test kirim template</h4>
        <p class="text-muted small mb-0">
            Isi nomor WhatsApp tujuan dan parameter sesuai placeholder template. Hanya template berstatus <span class="badge bg-success">approved</span> yang dapat diuji.
        </p>
    </div>

    <div class="row g-3">
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-body">
                    <h6 class="text-uppercase text-muted small">Info Template</h6>
                    <div class="mb-2">
                        <div class="text-muted small">Nama</div>
                        <strong>{{ $template->effectiveTemplateName() }}</strong>
                    </div>
                    <div class="mb-2">
                        <div class="text-muted small">Display</div>
                        <span>{{ $template->display_name ?? '-' }}</span>
                    </div>
                    <div class="mb-2">
                        <div class="text-muted small">Kategori / Type</div>
                        <span class="badge bg-light text-dark">{{ ucfirst($template->effectiveType()) }}</span>
                    </div>
                    <div class="mb-2">
                        <div class="text-muted small">Bahasa</div>
                        <span class="badge bg-secondary">{{ $template->language }}</span>
                    </div>
                    <div class="mb-2">
                        <div class="text-muted small">Status</div>
                        <span class="badge bg-success">approved</span>
                    </div>
                    <div>
                        <div class="text-muted small">WABA</div>
                        <span>{{ $template->wabaPool->phone_number ?? '-' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <form id="r-form-test-send" action="{{ route('reseller.templates.test-send', $template) }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">WhatsApp Number</label>
                            <input type="text" name="phone_number" class="form-control" placeholder="Contoh: 6281234567890" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Template Name</label>
                            <input type="text" class="form-control" value="{{ $template->effectiveTemplateName() }}" readonly>
                        </div>

                        @if ($headerInfo['type'] === 'text')
                            <div class="mb-3">
                                <label class="form-label">Header Parameter</label>
                                <input type="text" name="header_params[]" class="form-control" placeholder="Isi nilai header (text)" required>
                            </div>
                        @elseif ($headerInfo['type'] === 'media')
                            <div class="mb-3">
                                <label class="form-label">Header Media URL</label>
                                <input type="url" name="header_media_url" class="form-control" placeholder="https://example.com/image.jpg" required>
                                <small class="text-muted">Format: {{ $headerInfo['format'] ?? 'IMAGE' }}</small>
                            </div>
                        @endif

                        @if (count($placeholders))
                            <div class="mb-3">
                                <label class="form-label">Body Parameters</label>
                                @foreach($placeholders as $index => $ph)
                                    <div class="input-group mb-2">
                                        <span class="input-group-text">{{ $ph }}</span>
                                        <input type="text" class="form-control" name="body_params[]" placeholder="Isi nilai untuk {{ $ph }}" required>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{{ route('reseller.templates.index') }}" class="btn btn-light">Kembali</a>
                            <button type="submit" class="btn btn-primary">
                                <span class="btn-text">Send Test</span>
                                <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                            </button>
                        </div>
                    </form>

                    <div class="alert mt-3 d-none" id="r-test-send-result"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    const $form = $('#r-form-test-send');
    const $btn = $form.find('button[type="submit"]');
    const $spinner = $btn.find('.spinner-border');
    const $btnText = $btn.find('.btn-text');
    const $result = $('#r-test-send-result');

    $form.on('submit', function (e) {
        e.preventDefault();
        $result.addClass('d-none').removeClass('alert-success alert-danger').text('');
        $btn.prop('disabled', true);
        $spinner.removeClass('d-none');
        $btnText.text('Sending...');

        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: $form.serialize(),
            success: function (resp) {
                $result.removeClass('d-none').addClass('alert alert-success')
                    .text('Berhasil: message_id ' + (resp.data?.messages?.[0]?.id || '-') );
            },
            error: function (xhr) {
                const msg = xhr.responseJSON?.meta?.message || xhr.responseJSON?.message || 'Gagal mengirim test';
                $result.removeClass('d-none').addClass('alert alert-danger').text(msg);
            },
            complete: function () {
                $btn.prop('disabled', false);
                $spinner.addClass('d-none');
                $btnText.text('Send Test');
            }
        });
    });
});
</script>
@endpush