@extends('backend.layouts.app')

@section('title', 'Broadcast')

@section('content')
<style type="text/css">
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 14px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow:before {
        line-height: 30px !important;
    }

    .select2-container--default .select2-selection--single {
        height: 32px !important;
    }
</style>
<div class="kt-subheader">
    <div class="kt-container  kt-container--fluid ">
        <div class="kt-subheader__main">
            <h3 class="kt-subheader__title">Broadcast</h3>
            <span class="kt-subheader__separator kt-subheader__separator--v"></span>
            <div class="kt-subheader__group"></div>
        </div>
    </div>
</div>

<!-- begin:: Content -->
<div class="kt-container kt-container--fluid  kt-grid__item kt-grid__item--fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">

                    <strong>Block Messages</strong>

                    <form class="form-horizontal">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="block-content" class="col-md-3 control-label">Select Message</label>
                                <div class="col-md-12">
                                    <div id="block-content">
                                    </div>
                                </div>
                            </div>
                            <hr />
                            <br />
                            <div class="form-group col-md-12 row">
                                <div class="col-md-3">
                                    <label for="ps_id" class="col-md-12 control-label">FB First Name</label>
                                    <div class="col-md-12">
                                        <input type="text" class="form-control form-control-sm" id="fb_first_name" placeholder="FB First Name">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label for="ps_id" class="col-md-12 control-label">FB Last Name</label>
                                    <div class="col-md-12">
                                        <input type="text" class="form-control form-control-sm" id="fb_last_name" placeholder="FB Last Name">
                                    </div>
                                </div>
                            </div>
                            <hr />
                            <div class="form-group col-md-12 row">
                                <div class="col-md-3">
                                    <label for="fb_id" class="col-md-12 control-label">Target Users</label>
                                    <div class="col-md-12">
                                        <select id="target_users" class="form-control form-control-sm">
                                            <option value="">-- Please select type --</option>
                                            <option value="all_users">All Users</option>
                                            <option value="active_users">All Active Users</option>
                                            <option value="with_tokens">All With Token</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label for="fb_id" class="col-md-12 control-label">Gender</label>
                                    <div class="col-md-12">
                                        <select id="gender" class="form-control form-control-sm">
                                            <option selected="selected" value="">All</option>
                                            <option value="male">Male</option>
                                            <option value="female">Female</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label for="fb_id" class="col-md-12 control-label">Ages</label>
                                    <div class="col-md-12">
                                        <select id="age" class="form-control form-control-sm">
                                            <option selected="selected" value="">All</option>
                                            <option value="0-12">0-12</option>
                                            <option value="13-17">13-17</option>
                                            <option value="18-24">18-24</option>
                                            <option value="25-34">25-34</option>
                                            <option value="35-44">35-44</option>
                                            <option value="45-54">45-54</option>
                                            <option value="55-64">55-64</option>
                                            <option value="65-300">65+</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <br />
                        <div class="form-group col-md-12 row">
                            <div class="col-md-6">
                                <div class="row d-none">
                                    <div class="col d-none">
                                        <input type="text" class="form-control form-control-sm" id="tag" placeholder="Tag">
                                    </div>
                                    <div class="col">
                                        <input type="text" class="form-control form-control-sm" id="subscriber_id_from" placeholder="ID from">
                                    </div>
                                    <div class="col">
                                        <input type="text" class="form-control form-control-sm" id="subscriber_id_to" placeholder="ID to">
                                    </div>
                                    <div class="col">
                                        Add
                                    </div>
                                    <div class="col">
                                        <input type="text" class="form-control form-control-sm" value="200" id="increment_value" placeholder="200">
                                    </div>
                                    <div class="col">
                                        <button class="btn btn-info" id="btn_increment">GO</button>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 text-right">
                                <button id="broadcastOtn" title="Send to all OTN Subscribers" class="btn btn-info" data-loading-text="<i class='fa fa-spinner fa-spin'></i> SENDING..."><i class='fa fa-send'></i> BROADCAST NOW</button>

                                <button id="form_submit_test" type="button" title="Test Sending" class="btn btn-success" data-loading-text="<i class='fa fa-spinner fa-spin'></i> TEST SENDING...">TEST SEND</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@include('backend.broadcast.loading-modal')
<!--kt-container-->
@endsection

@section('after-scripts')
    <script src="{{ asset('js/broadcast/broadcast.js') }}" type="text/javascript"></script>
@endsection