@extends('layouts.main')

@section('content')

<div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Send Schedule 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-schedule-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>
                                    <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}}">{{$code->country_name}}
                                                ({{$code->country_code}})
                                            </option>
                                        @endforeach
                                    </select>
                                    <input type="text" name="phone" placeholder="Phone digits after country code"
                                           class="form-control" value="{{old('phone')}}" required>
                                </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="<%Phone_Number%>">Phone Number</option>
                                        <option value="<%Email_Address%>">Email Address</option>
                                        <option value="<%User_Name%>">User Name</option>
                                        <option value="<%Company%>">Company</option>
                                        <option value="<%First_Name%>">First Name</option>
                                        <option value="<%Last_Name%>">Last Name</option>
                                    </select>
                                </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</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/*"
                                                                                   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="schedule_time">
                                    <div class="form-group">
                                        <label>Schedule Time</label>
                                        <input type="datetime-local" class="form-control dateTimePicker" name="schedule_time"
                                               value="{{old('schedule_time')}}">
                                    </div>
                                </div>


                                <button type="submit" class="btn btn-success btn-sm"><i
                                            class="fa fa-send"></i> Send
                                </button>

                            </form>

                        </div>
                    </div>
                </div>

            </div>

        </div>

@endsection

{{--External Style Section--}}
@section('script')
   

    <script>
        $(document).ready(function () {
            // $('#example').datetimepicker();
            fileUploadVisibility();

            $("#whatsapp_template").change(function () {
                var id = $(this).val();
                var dataString = 'wt_id=' + id;
                $.ajax
                ({
                    type: "POST",
                    url: _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();
            }
        }

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