@extends('layouts.main')

@section('content')

<div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-8 col-xl-6">
                    <div class="card s-custom-card">
                        <div class="card-header">
                            <h3 class="card-title">Send Bulk Whatsapp</h3>
                            <p class="error" style="color: red"><b>@if($client_device =='') You are not eligible to use this feature!@endif</b></p>
                        </div>
                        <div class="card-body">

                            <form role="form" method="post" action="{{url('save-send-bulk-whatsapp')}}" enctype="multipart/form-data">
                                {{ csrf_field() }}

                                <div class="form-group">
                                    <label>Device Id</label>
                                    <input type="text" name="device" class="form-control" required value="@if($client_device!='') {{$client_device->phone_number}} @endif"  readonly>
                                </div>

                                <div class="form-group">
                                    <label>Campaign Title</label>
                                    <input type="text" name="campaign_name" class="form-control" required value="{{old('campaign_name')}}">
                                </div>

                                <div class="form-group contact-list-area" id="group-list">
                                    <label>Group List</label>
                                    <select name="group_list_id[]" class="select2bs4 select_contact_group" multiple="multiple"
                                        data-placeholder="Select a Group" style="width: 100%;" required>
                                        @foreach($groups as $group)
                                            <option value="{{$group->id}}">{{$group->name}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>Send Type</label>
                                    <select class="selectpicker form-control send_type" name="send_type" id="send_type" onchange="scheduleTimeVisibility()">
                                        <option value="regular">Regular</option>
                                        <option value="scheduled">Schedule</option>
                                    </select>
                                </div>

                                <div class="form-group" id="schedule_time">
                                            <label>Schedule Time</label>
                                            <input type="datetime-local" class="form-control" name="schedule_time"  value="{{old('schedule_time')}}">
                                </div>
                                <!-- <div class="form-group">
                                    <label>Insert Merge Filed</label>
                                    <select class="form-control selectpicker" id="merge_value" name="merge_value">
                                        <option value="" disabled selected style="display:none;">Select Merge Field</option>
                                        <option value="<%First_Name%>">Name</option>
                                        <option value="<%Gender%>">Gender</option>
                                        <option value="<%Phone_Number%>">Phone Number</option>
                                        <option value="<%Email_Address%>">Email Address</option>
                                        <option value="<%Club_Account%>">Club Account</option>
                                    </select>
                                </div> -->
                                <div class="form-group">
                                    <label>Message</label>
                                    <textarea class="form-control" name="message" rows="5" id="message" style="resize: none;" required>{{old('message')}}</textarea>
                                </div>

                                <div class="form-group">
                                    <label>Message Type</label>
                                    <select class="selectpicker form-control message_type" name="message_type" id="message_type" onchange="fileUploadVisibility()">
                                        <option value="plain">Plain</option>
                                        <option value="media">Audio/Image/Pdf/Doc</option>
                                    </select>
                                </div>

                                

                                <div class="form-group" id="file-upload" style="display:none">
                                    <label>Select File</label>
                                    <div class="form-group input-group input-media-file">
                                        <span class="input-group-btn">
                                            <span class="btn btn-primary btn-file">
                                            Browse <input type="file" class="form-control" name="media" accept="audio/*,video/*,image/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" value="{{old('media')}}" id="the-media-file">
                                            </span>
                                        </span>
                                        <input type="text" class="form-control" name="media_file" readonly value="{{old('media_file')}}" id="the-media-file-name">
                                    </div>
                                </div>


                                <div class="s-custom-card-footer"><button type="submit" class="btn btn-success btn-sm"><i class="fa fa-send"></i> Send </button></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('script')
    

    <script>

$(document).ready(function () {
    $('.select2bs4').select2({
            theme: 'bootstrap4'
        });

            fileUploadVisibility();

            $("#whatsapp_template").change(function () {
                var id = $(this).val();
                var dataString = 'wt_id=' + id;
                $.ajax
                ({
                    type: "POST",
                    url: BASE_URL + '/whatsapp/user/get-template-info',
                    data: dataString,
                    cache: false,
                    success: function (data) {
                        console.log(data.message);
                        $('#message').val(data.message);
                        //$('.message').html(data);
                    }
                });
            });

            var $get_msg = $('#message');

            $('#merge_value').on('change', function () {
                var caretPos = $get_msg[0].selectionStart;
                var textAreaTxt = $get_msg.val();
                var txtToAdd = this.value;

                $get_msg.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
            });
        });

        function fileUploadVisibility(){

            var messageTypeValue= $("#message_type").val();
            // console.log(messageTypeValue);
            if(messageTypeValue=="plain"){
                $( "#file-upload" ).hide();
            }else{
                $( "#file-upload" ).show();
            }
        }
        scheduleTimeVisibility();
        function scheduleTimeVisibility(){
            var messageTypeValue= $("#send_type").val();
            // console.log(messageTypeValue);
            if(messageTypeValue=="regular"){
                $( "#schedule_time" ).hide();
            }else{
                $( "#schedule_time" ).show();
            }
        }

        $("#the-media-file").on('change',function(){
            $("#the-media-file-name").val($(this).val())
        })
    </script>
@endsection