@extends('backend.layouts.app')

@section('title', 'Announcement')

@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">Announcement</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 block</label>
                                <div class="col-md-12">
                                    <div id="block-content">
                                    </div>
                                </div>
                            </div>
                            <hr />
                            <div class="form-group col-md-12 row">
                                <div class="col-md-3">
                                    <label for="ps_id" class="col-md-12 control-label">Test Email</label>
                                    <div class="col-md-12">
                                        <input type="text" class="form-control form-control-sm" id="email" placeholder="Email">
                                    </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="">-- Select Target User --</option>
                                            <option value="0">All</option>
                                            <option value="2">Corporate</option>
                                            <option value="3">Brand</option>
                                            <option value="4">Store Manager</option>
                                            <option value="5">Store Crew</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <br />
                        <div class="form-group col-md-12 row">
                            <div class="col-md-6">
                            </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.announcement.loading-modal')
<!--kt-container-->
@endsection

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