@extends('layouts.master')
@section('content')
    <section class="section">
        <div class="container">
            @php
                $phoneNumbersStr = implode(',',$phone_numbers)
            @endphp
                <div class="error"></div>
                <br><br>
            @if(count($phone_numbers)==0)
                <div class="alert alert-danger">
                    <strong>No orders found in these dates</strong>
                </div>
            @endif
            <div class="alert alert-success" id="successMsg" style="display:none"></div>
            <div class="alert alert-danger" id="errorMsg" style="display:none"></div>
            <h4>Send Bulk SMS</h4>
            <br><br>
            <form method="post" action="{{route('send_bulk_messages')}}" id="bulk_sms">
                <div class="colRow">
                    <div class="col col-md-3">
                        <label>Select Account</label>
                        <select class="form-select" name="account_id">
                            @foreach($accounts as $account)
                                <option
                                        value="{{$account->id}}">{{$account->login_credentials['twilio_phone_no']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <br><br>
                <div>
                <label for="exampleFormControlTextarea1">Phone Numbers</label>
                </div>
                <input type="text"  class="w-100" name="phone_numbers" data-role="tagsinput" style="width: 100% !important" id="tagPlaces" value="{{ $phoneNumbersStr }}" />
                <div class="error-container"></div>
                <div class="alert alert-warning" role="alert" style="margin-top:25px;">
                    <strong>Number of duplicate phone numbers:</strong> {{ $duplicates }}
                </div>
                <div class="alert alert-info" role="alert">
                    <strong>Total phone numbers:</strong> {{ count($phone_numbers)}}
                </div>
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">Message Title</label>
                    <textarea class="form-control" id="title" name="title" rows="1" required></textarea>
                </div>
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">Message Body</label>
                    <textarea class="form-control" id="text_area" name="message_body" rows="3" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Send SMS</button>
            </form>
        </div>
    </section>
@endsection
@section('last_scripts')
<script>
    $('input').tagsinput({
        allowDuplicates: true
    });
    $(document).ready(function() {
        // Attach a submit event handler to the form
        $('#bulk_sms').submit(function(event) {
            // Prevent the form from submitting normally
            event.preventDefault();
            show_loading_img();
            // Send an AJAX request to the server to submit the form data
            $.ajax({
                type: 'POST',
                url: '{{route('send_bulk_messages')}}', // Replace with the URL of your server-side script
                data: $(this).serialize(), // Serialize the form data
                success: function(response) {
                    // If the server responds with a success message, show it
                    var error=response.error;
                    var success=response.success;
                    console.log(success);
                    if (error){
                        var errors=JSON.parse(response.error);
                        var error_message='<ul>'
                        error_message += Object.entries(errors).map(err => '<li>'+ err[0]+'</li>')
                        error_message +='</ul>'
                        hide_loading_img();
                        $(window).scrollTop(0);
                        $('#errorMsg').html(error_message);
                        $('#errorMsg').show();}
                    $('#successMsg').hide();
                    if (success){
                        var successes=JSON.parse(response.success);
                        var success_message='<ul>'
                        success_message += Object.entries(successes).map(err => '<li>'+ err[0]+'</li>')
                        success_message +='</ul>'
                        hide_loading_img();
                        $(window).scrollTop(0);
                        $('#successMsg').html(response.message);
                        $('#successMsg').show();
                    }
                },
                error: function(response) {
                    // If the server responds with an error message, sshow it
                    // $('#errorMsg').show();
                    hide_loading_img();
                    console.log(response.message);
                    $(window).scrollTop(0);
                    $('#errorMsg').html(response.error);
                }
            });
        });
    });
</script>
@endsection