@extends('root')
@section('title', 'Kirim Pesan')

@section('content')
<script>
    window.CLIENT_API_KEY = @json($client->api_key);
</script>
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Kirim Pesan',
        'links' => [],
        'current' => 'Send Message'
    ])

    <div class="card card-body">
        <form id="client-send-message-form">
            @csrf
            <div class="mb-3">
                <label class="form-label">Tipe Pesan</label>
                <select name="category" class="form-control" required>
                    <option value="marketing">Marketing</option>
                    <option value="utility">Utility</option>
                    <option value="otp">OTP</option>
                      </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Tipe Konten</label>
                <select name="type" class="form-control" required>
                    <option value="text">Text</option>
                    <!-- ekstensi template/media bisa ditambahkan nanti -->
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Nomor Tujuan (msisdn)</label>
                <input type="text" name="to" class="form-control" placeholder="62xxxxxxxxxxx" required>
            </div>
            <div class="mb-3">
                <label class="form-label">Isi Pesan</label>
                <textarea name="message" class="form-control" rows="4" placeholder="Tulis pesan..." required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">
                <span class="btn-text">Kirim</span>
            </button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    $('#client-send-message-form').on('submit', function (e) {
        e.preventDefault();

        var $btn = $(this).find('button[type=submit]');
        var $text = $btn.find('.btn-text');
        var original = $text.text();
        $btn.prop('disabled', true);
        $text.text('Mengirim...');

        $.ajax({
            url: '{{ url('/api/client/send-message') }}',
            method: 'POST',
            data: $(this).serialize(),
            headers: {
                'Authorization': 'Bearer ' + (window.CLIENT_API_KEY || ''),
                'Accept': 'application/json',
            },
            success: function (res) {
                window.toastr && toastr.success('Pesan berhasil di-queue dengan ID: ' + res.message_id);
                $('#client-send-message-form')[0].reset();
            },
            error: function (xhr) {
                var msg = xhr.responseJSON && xhr.responseJSON.error
                    ? xhr.responseJSON.error
                    : 'Gagal mengirim pesan';
                window.toastr && toastr.error(msg);
            },
            complete: function () {
                $btn.prop('disabled', false);
                $text.text(original);
            }
        });
    });
});
</script>
@endpush