@extends('dashboard.layouts.master')

@section('title', 'Send SMS | ' . env('APP_NAME'))
@section('description', 'Send an SMS message to any number in the world')

@section('main-content')
    <h4 class="mb-4">Send SMS</h4>

    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="ri ri-send-plane-line me-2"></i>Compose Message
                    </h5>
                </div>
                <div class="card-body">
                    <form id="admin_send_SMS">
                        @csrf
                        <div class="mb-3">
                            <label for="admin_from" class="form-label">From <span class="text-muted small">(sender name or number)</span></label>
                            <input type="text" id="admin_from" class="form-control" placeholder="e.g. CoinsSafe or +447000000000" required>
                        </div>

                        <div class="mb-3">
                            <label for="admin_to" class="form-label">To <span class="text-muted small">(recipient number with country code)</span></label>
                            <input type="text" id="admin_to" class="form-control" placeholder="e.g. 447911123456" required>
                        </div>

                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="admin_flash">
                                <label class="form-check-label" for="admin_flash">Flash message</label>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="admin_sms_text" class="form-label">Message</label>
                            <textarea id="admin_sms_text" class="form-control" rows="5" placeholder="Type your message here..." required></textarea>
                            <div class="form-text text-end">
                                <span id="admin_sms_char_count">0</span> / 160 characters
                            </div>
                        </div>

                        <div class="d-grid">
                            <button type="submit" id="admin_submit_SMS_btn" class="btn btn-primary">
                                <span id="admin_submit_sms_btn_txt">
                                    <i class="ri ri-send-plane-fill me-1"></i> Send Message
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script>
        $(document).ready(function () {
            $("#admin-send-sms-page").addClass('active');

            // Character counter
            $("#admin_sms_text").on("input", function () {
                $("#admin_sms_char_count").text($(this).val().length);
            });

        });

        function containsLink(text) {
            return /(https?:\/\/|ftp:\/\/|www\.)/i.test(text);
        }

        $("#admin_send_SMS").submit(function (event) {
            event.preventDefault();

            const message = $("#admin_sms_text").val();
            if (containsLink(message)) {
                Swal.fire({
                    icon: 'error',
                    title: 'Links Not Allowed',
                    text: 'Your message cannot contain links or URLs.',
                });
                return false;
            }

            $("#admin_submit_SMS_btn").attr("disabled", true);
            $("#admin_submit_sms_btn_txt").html('Please wait... <span class="spinner-border spinner-border-sm"></span>');

            var ajax_data = new FormData();
            ajax_data.append('_token', $('meta[name="csrf-token"]').attr('content'));
            ajax_data.append('from',  $("#admin_from").val());
            ajax_data.append('to',    $("#admin_to").val());
            ajax_data.append('flash', $("#admin_flash").prop("checked"));
            ajax_data.append('text',  $("#admin_sms_text").val());

            $.ajax({
                url: '{{ route("admin_send_api_sms") }}',
                type: "POST",
                processData: false,
                contentType: false,
                data: ajax_data,
                success: function (data) {
                    if (data.status == "true" || data.status === true) {
                        Swal.fire({
                            icon: data.icon,
                            title: 'Success',
                            text: data.message,
                        }).then(() => {
                            $("#admin_send_SMS").trigger('reset');
                            $("#admin_sms_char_count").text('0');
                        });
                    } else {
                        Swal.fire({
                            icon: data.icon,
                            title: 'Failed',
                            text: data.message,
                        });
                    }
                    $("#admin_submit_SMS_btn").attr("disabled", false);
                    $("#admin_submit_sms_btn_txt").html('<i class="ri ri-send-plane-fill me-1"></i> Send Message');
                },
                error: function (xhr) {
                    Swal.fire({ icon: 'error', title: 'Error', text: 'Request failed. Please try again.' });
                    $("#admin_submit_SMS_btn").attr("disabled", false);
                    $("#admin_submit_sms_btn_txt").html('<i class="ri ri-send-plane-fill me-1"></i> Send Message');
                }
            });
        });
    </script>
@endsection