@extends('layouts.master')
@section('content')
    <section class="section">
        <div class="container">
            @if(session('success'))
                <div class="alert alert-success" style="margin-top:25px;">
                    {{ session('success') }}
                </div>
                <script>
                    setTimeout(function() {
                        $('.alert-success').fadeOut('fast');
                    }, 30000); // 30 seconds
                </script>
            @endif
            @if(session('error'))
                <div class="alert alert-danger" style="margin-top:25px;">
                    {{ session('error') }}
                </div>
                <script>
                    setTimeout(function() {
                        $('.alert-danger').fadeOut('fast');
                    }, 30000); // 30 seconds
                </script>
            @endif
            <br><br>
    <h4>Bulk SMS </h4>
    <p>Here you can select multiple dates to send SMS campaigns to your desired phone  numbers. </p>
        <br>
    <form method="post" action="{{route('send_sms')}}">
   <div class="form-group">

       <div class="colRow">
           <div class="col col-md-3">
               <label>Select Audience</label>
               <select class="form-select" name="audience">
                       <option value="order">Order</option>
                       <option value="customer">Customer</option>
                       <option value="abandoned_cart">Abandoned Cart</option>
               </select>
           </div>
           <div class="col col-md-3">
               <label>Subscription Status</label>
               <select class="form-select" name="subscription_status">
                   <option value="all">All</option>
                   <option value="subscribed">Subscribed</option>
                   <option value="not_subscribed">Not Subscribed</option>
               </select>
           </div>

       </div><br><br>
       <label>Select Range</label>
       <input type="text" name="daterange" class="range" />
   </div>
    <br><br><br>
<div class="form-group col-md-3">
    <button type="submit" class="btn btn-primary">Filter</button>
</div>
    </form>
        </div>
    </section>
@endsection
@section('last_scripts')
    <script>
        $(function() {
            $('input[name="daterange"]').daterangepicker({
                timePicker: false,
                startDate: moment().startOf('hour'),
                endDate: moment().startOf('hour').add(32, 'hour'),
                maxDate: moment(), // setting the maximum date to today
                locale: {
                    format: 'YYYY-MM-DD'
                }
            });
        });
    </script>
<style>
    .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date{
        display: none; !important;
    }
</style>
@endsection