@extends('backend.layouts.app')

@section('title', 'Bulk SMS')
@section('page-title', 'Bulk SMS')
@section('page-breadcrumb', 'Bulk SMS')


@section('content')

<div class="col-md-12">


    <div class="card">
        <div class="card-header">
            <i class="fa fa-list font-green-sharp"></i>
            <strong>Bulk SMS</strong>

        </div>
        <!--Card content-->
        <form action="" method="post" id="SmsForm" class="form-horizontal">
            @csrf
            <div class="card-body">
                <h6 class="form-section mt-2"><b>Send SMS</b></h6>
                <hr />
                <div class="row">
                    <div class="form-group col-md-12 customRadio custom-control-inline">
                        <label class=" col-sm-2 col-form-label" for="UserType">User Type</label>
                        <div class="col-md-2">
                            <input type="radio" name="UserType" id="Single" value="Single">
                            <label for="Single">Single</label>
                        </div>
                        <div class="col-md-2">
                            <input type="radio" name="UserType" id="MultipleUsers" value="MultipleUsers" checked>
                            <label for="MultipleUsers">Multiple Users</label>
                        </div>
                    </div>


                    <div class="col-md-12" style="display: none" id="Mno">
                        <div class="form-group col-md-12 row">
                            <label class=" col-sm-2 col-form-label" for="MobileNumber">Mobile Number</label>
                            <div class="col-md-4">
                                <input type="text" id="MobileNumber" class="form-control" name="MobileNumber" placeholder="Enter Mobile Number">
                                <small>Enter mobile number with comman(,) seperate to send multiple users.</small>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12" id="users">
                        <div class="form-group col-md-12 row">
                            <label class=" col-sm-2 col-form-label" for="Message">Select Users</label>

                            <div class="col-md-10">
                                <div class="custom-control custom-checkbox custom-control-inline">
                                    <input type="checkbox" class="custom-control-input" id="retailer" value="0">
                                    <label class="custom-control-label" for="retailer">Retailer</label>
                                </div>

                                <div class="custom-control custom-checkbox custom-control-inline">
                                    <input type="checkbox" class="custom-control-input" id="distributer" value="1">
                                    <label class="custom-control-label" for="distributer">Distributer</label>
                                </div>

                                <div class="custom-control custom-checkbox custom-control-inline">
                                    <input type="checkbox" class="custom-control-input" id="master" value="2">
                                    <label class="custom-control-label" for="master">Master</label>
                                </div>

                                <div class="custom-control custom-checkbox custom-control-inline">
                                    <input type="checkbox" class="custom-control-input" id="chanelPatner" value="4">
                                    <label class="custom-control-label" for="chanelPatner">Channel Patner</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group col-md-12 row">
                            <label class=" col-sm-2 col-form-label" for="Message">Message</label>
                            <div class="col-md-4">
                                <textarea class="form-control" id="Message" name="Message"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="card-footer">
                <button type="button" id="send_sms_btn" class="btn btn-primary btn-sm waves-effect waves-light" onclick="SendSMS()">
                    Submit <i class="fa fa-arrow-circle-right fa-lg"></i>
                </button>
            </div>

        </form>
    </div>

</div>


@endsection


<!-- MultipleUsers -->

@section('self_script')

<script>
    $(function() {
        $('input[name="UserType"]').on('click', function() {
            if ($(this).val() == 'Single') {
                $('#Mno').show();
                $('#users').hide();
            } else {
                $('#Mno').hide();
                $('#users').show();
                $('#MobileNumber').val('');
            }
        });
    });

    
</script>



@endsection