@extends('client')

{{--External Style Section--}}
@section('style')
    {!! Html::style("assets/libs/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css") !!}

    <style>
        .progress-bar-indeterminate {
            background: url('../assets/img/progress-bar-complete.svg') no-repeat top left;
            width: 100%;
            height: 100%;
            background-size: cover;
        }
    </style>

@endsection


@section('content')

    <section class="wrapper-bottom-sec">
        <div class="p-30">
            <h2 class="page-title">Send Bulk Schedule Whatsapp From File</h2>
        </div>
        <div class="p-30 p-t-none p-b-none">

            <div class="show_notification"></div>
            @include('notification.notify')
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-heading">
                            <h3 class="card-title">Send Bulk Schedule Whatsapp From File</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">
                            <div class="form-group">
                                <div class="form-group">
                                    <a href="{{url('whatsapp/user/download-sample-whatsapp-sms-file')}}" class="btn btn-complete"><i
                                                class="fa fa-download"></i> {{language_data('Download Sample File',Auth::guard('client')->user()->lan_id)}}
                                    </a>
                                </div>
                            </div>

                            <div id="send-sms-file-wrapper">
                                <form id="send-whatsapp-file-form" class="" role="form" method="post"
                                      action="{{url('whatsapp/user/save-send-schedule-whatsapp-from-file')}}" enctype="multipart/form-data">
                                    {{ csrf_field() }}

                                    <div class="form-group">
                                        <label>Campaign Title</label>
                                        {{--                                        <input type="text" name="campaign_name" class="form-control" required value="{{old('campaign_name')}}">--}}
                                        <select class="selectpicker form-control"
                                                data-live-search="true" name="campaign_name">
                                            <option value="">Select a Campaign</option>
                                            @foreach($whatsapp_campaigns as $whatsapp_campaign)
                                                <option value="{{$whatsapp_campaign->title}}">{{$whatsapp_campaign->title}}</option>
                                            @endforeach
                                        </select>
                                    </div>


                                    <div class="form-group">
                                        <label>{{language_data('Import Numbers',Auth::guard('client')->user()->lan_id)}}</label>
                                        <div class="form-group input-group input-group-file">
                                        <span class="input-group-btn">
                                            <span class="btn btn-primary btn-file">
                                                {{language_data('Browse',Auth::guard('client')->user()->lan_id)}} <input
                                                        type="file" class="form-control" name="import_numbers"
                                                        @change="handleImportNumbers">
                                            </span>
                                        </span>
                                            <input type="text" class="form-control" readonly name="file" value="{{old('file')}}">
                                        </div>

                                        <div class="coder-checkbox">
                                            <input type="checkbox" name="header_exist" :checked="form.header_exist"
                                                   v-model="form.header_exist">
                                            <span class="co-check-ui"></span>
                                            <label>{{language_data('First Row As Header',Auth::guard('client')->user()->lan_id)}}</label>
                                        </div>
                                    </div>

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

                                    <div class="form-group">
                                        <label>Whatsapp Template</label>
                                        <select class="selectpicker form-control"
                                                data-live-search="true" id="whatsapp_template" name="whatsapp_template">
                                            <option>{{language_data('Select Template',Auth::guard('client')->user()->lan_id)}}</option>
                                            @foreach($whatsapp_templates as $whatsapp_template)
                                                <option value="{{$whatsapp_template['id']}}">{{$whatsapp_template['template_name']}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label>{{language_data('Insert Merge Filed',Auth::guard('client')->user()->lan_id)}}</label>
                                        <select class="form-control selectpicker" id="merge_value" name="merge_value">
                                            <option value="" disabled selected style="display:none;">{{language_data('Select Merge Field',Auth::guard('client')->user()->lan_id)}}</option>
                                            <option value="<%Phone_Number%>">{{language_data('Phone Number',Auth::guard('client')->user()->lan_id)}}</option>
                                            <option value="<%Email_Address%>">{{language_data('Email')}} {{language_data('Address',Auth::guard('client')->user()->lan_id)}}</option>
                                            <option value="<%User_Name%>">{{language_data('User Name',Auth::guard('client')->user()->lan_id)}}</option>
                                            <option value="<%Company%>">{{language_data('Company',Auth::guard('client')->user()->lan_id)}}</option>
                                            <option value="<%First_Name%>">{{language_data('First Name',Auth::guard('client')->user()->lan_id)}}</option>
                                            <option value="<%Last_Name%>">{{language_data('Last Name',Auth::guard('client')->user()->lan_id)}}</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/Video/Image</option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label>{{language_data('Message',Auth::guard('client')->user()->lan_id)}}</label>
                                        <textarea class="form-control" name="message" rows="5" id="message"
                                                  ref="message">{{old('message')}}</textarea>
                                    </div>

                                    <div class="form-group" id="file-upload">
                                        <label>{{language_data('Select File')}}</label>
                                        <div class="form-group input-group input-media-file">
                                        <span class="input-group-btn">
                                            <span class="btn btn-primary btn-file">
                                                {{language_data('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="">
                                        <div class="form-group">
                                            <label>Schedule Time</label>
                                            <input type="text" class="form-control dateTimePicker" name="schedule_time" value="{{old('schedule_time')}}" required>
                                        </div>
                                    </div>





                                    <span class="text-uppercase text-complete help">{{language_data('After click on Send button, do not refresh your browser',Auth::guard('client')->user()->lan_id)}}</span>

                                    <button type="submit" id="submitContact" class="btn btn-success btn-sm pull-right">
                                        <i class="fa fa-send"></i> {{language_data('Send',Auth::guard('client')->user()->lan_id)}}
                                    </button>

                                </form>
                            </div>

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

            </div>

        </div>
    </section>

@endsection

{{--External Style Section--}}
@section('script')
    {!! Html::script("assets/libs/handlebars/handlebars.runtime.min.js")!!}
    {!! Html::script("assets/libs/moment/moment.min.js")!!}
    {!! Html::script("assets/libs/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js")!!}
    {!! Html::script("assets/js/vue.js") !!}
    {!! Html::script("assets/js/file_upload.js") !!}
    {!! Html::script("assets/js/form-elements-page.js")!!}

    <script>
        $(document).ready(function () {
            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();
            }
        }
    </script>
@endsection