@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 Quick 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 class="" role="form" method="post"
                                  action="{{url('save-send-quick-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>Phone</label>
                                    <div style="width:100%;">
                                        <select class="selectpicker form-control" name="country_code"
                                                data-live-search="true">
                                            <!-- <option value="">Choose country code</option> -->
                                            @foreach($country_code as $code)
                                                <option value="{{$code->country_code}}" @if($code->country_code=='880') selected @endif>{{$code->country_name}}
                                                    ({{$code->country_code}})
                                                </option>
                                            @endforeach
                                        </select>
                                        <div>
                                            <textarea class="form-control" name="phone" rows="3" id="phone" placeholder="Ex: 167000000, 191000000"
                                                      style="resize: none;" required>{{old('phone')}}</textarea>
                                            <!-- <input type="text" name="phone" placeholder="Phone digits after country code"
                                                   class="form-control" value="{{old('phone')}}" required> -->
                                            <p>***Please write phone number with comma separated</p>
                                        </div>
                                    </div>
                                </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>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">
                                    <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" id="file-upload">
                                    <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="" 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

{{--External Style Section--}}
@section('script')
    <script>
        $(document).ready(function () {
            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));
            });
        });
        scheduleTimeVisibility();
        function scheduleTimeVisibility(){
            var messageTypeValue= $("#send_type").val();
            // console.log(messageTypeValue);
            if(messageTypeValue=="regular"){
                $( "#schedule_time" ).hide();
            }else{
                $( "#schedule_time" ).show();
            }
        }
        function fileUploadVisibility() {

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

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