@extends(resolve_layout())

@section('content')
    
    <!-- Main content-->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="view-header">
                        <div class="header-icon">
                            <i class="pe page-header-icon pe-7s-paper-plane"></i>
                        </div>
                        <div class="header-title">
                            <h3>Bulk Messages</h3>
                            <small>
                                Send SMS
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row col-md-6">
                <div class="col-lg-4 col-xs-6 pl-0">
                    <div class="panel panel-filled mb-0">
                        
                        <div class="panel-body">
                            <h2 class="m-b-none">{{ $dailyLimit }}</h2>
                            <div class="small">Daily limit</div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-xs-6">
                    <div class="panel panel-filled mb-0">
                        
                        <div class="panel-body">
                            <h2 class="m-b-none">{{ $sentToday }}</h2>
                            <div class="small">Sent today</div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-xs-6">
                    <div class="panel panel-filled mb-0">
                        
                        <div class="panel-body">
                            <h2 class="m-b-none">{{ max(0, $dailyLimit - $sentToday) }}</h2>
                            <div class="small">Remaining</div>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-filled">
                        <div class="panel-body">
                            <div class="loader">
                                <div class="loader-bar"></div>
                            </div>
                            <div id="form-alert"></div>
                            <form id="frm-send">
                                <div class="form-group">
                                    <label for="from">From <span class="text-danger">*</span></label>
                                    <select id="from" class="form-control" name="from" style="width: 100%">
                                        <option></option>
                                        @foreach($numbers as $n)
                                            <option value="{{ $n->number }}">{{ $n->number }} ({{ $n->domain }})</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="groups">Groups <span class="text-danger">*</span></label>
                                    <select id="groups" class="form-control" name="group_ids[]" multiple style="width: 100%">
                                        @foreach($groups as $g)
                                            <option value="{{ $g->id }}" data-count="{{ $g->contacts_count }}">{{ $g->name }} ({{ $g->contacts_count }} contacts)</option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">If a number belongs to several selected groups, the message is sent to it only once.</small>
                                </div>
                                <div class="form-group">
                                    <label for="text">Message Text <span class="text-danger">*</span></label>
                                    <textarea id="text" class="form-control" name="text" rows="5" maxlength="1600"></textarea>
                                    <small class="text-muted"><span id="char-count">0</span> / 1600</small>
                                </div>
                                <div id="recipient-summary" class="text-muted m-b-sm"></div>
                                <button type="button" class="btn btn-accent btn-send">Send</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End main content-->
    
    <script>
        function showNotify(target, type, message) {
            const bg = type === 'success' ? '#2ecc71' : (type === 'error' ? '#e74c3c' : '#3498db');
            const $target = $(target);
            $target.find('.inline-notify').remove();
            const html = '<div class="inline-notify" style="background:' + bg + ';color:#fff;padding:10px 34px 10px 14px;border-radius:4px;margin-bottom:15px;font-size:14px;position:relative;line-height:1.4;">'
                + message
                + '</div>';
            $target.prepend(html);
            if (type === 'success') {
                setTimeout(function () {
                    $target.find('.inline-notify').fadeOut(400, function () { $(this).remove(); });
                }, 4000);
            }
        }

        $(document).ready(function () {

            $('#from').select2({
                placeholder: 'Search number...',
                width: '100%'
            });

            $('#groups').select2({
                placeholder: 'Search and select group(s)...',
                width: '100%'
            });

            function updateSummary() {
                let total = 0;
                $('#groups option:selected').each(function () {
                    total += parseInt($(this).data('count')) || 0;
                });
                $('#recipient-summary').text(
                    total > 0 ? 'Selected groups contain up to ' + total + ' number(s) (duplicates across groups are sent only once).' : ''
                );
            }

            $('#groups').on('change', updateSummary);

            $('#text').on('input', function () {
                $('#char-count').text($(this).val().length);
            });

            $('.btn-send').click(function () {
                const from = $('#from').val();
                const groupIds = $('#groups').val();
                const text = $('#text').val();

                if (!from) {
                    showNotify('#form-alert', 'error', 'Please select a From number.');
                    return;
                }
                if (!groupIds || groupIds.length === 0) {
                    showNotify('#form-alert', 'error', 'Please select at least one group.');
                    return;
                }
                if (!text || !text.trim()) {
                    showNotify('#form-alert', 'error', 'Please enter a message text.');
                    return;
                }

                overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');
                $('.panel-filled').toggleClass('ld-loading');

                $.ajax({
                    type: "POST",
                    url: "{{ route('api.bulk.send') }}?api_token={{auth()->user()->api_token}}",
                    headers: {
                        'Authorization': `Bearer {{auth()->user()->api_token}}`,
                    },
                    data: {
                        from: from,
                        group_ids: groupIds,
                        text: text
                    },
                    success: function (data, status, jqXHR) {
                        overlay.remove();
                        $('.panel-filled').toggleClass('ld-loading');

                        showNotify('#form-alert', 'success', 'Message queued for ' + data.total_numbers + ' number(s). Sending in the background.');

                        if (typeof data.remaining_today !== 'undefined') {
                            $('#remaining-value').text(data.remaining_today);
                            $('#sent-today-value').text(data.daily_limit - data.remaining_today);
                        }

                        // Reset the form so the user can immediately send another message.
                        $('#from').val(null).trigger('change');
                        $('#groups').val(null).trigger('change');
                        $('#text').val('');
                        $('#char-count').text('0');
                        $('#recipient-summary').text('');
                    },
                    error: function (jqXHR, status) {
                        overlay.remove();
                        $('.panel-filled').toggleClass('ld-loading');

                        showNotify('#form-alert', 'error', jqXHR.responseJSON.message);
                    }
                });
            });
        });
    </script>
@endsection