@if(isset($config) && $config == false)
@include('ecommerce::schedule.sms.config')
@endif

{{ Form::bsBoxOpen() }}
    {{ Form::bsText('Tên chiến dịch','title', @$sms['title'] , ['data-seo' => 'title'], 'required') }}
    <label class="pull-right">
        <span id="count_meta_description">0</span>/160 ký tự
    </label>
    {{ Form::bsTextArea('Nội dung tin nhắn','content', @$sms['content'] , ['data-seo' => 'content', 'class' => 'form-control sms-content'], 'required') }}
    @php
    if(!empty(@$sms['schedule'])){
        echo '<div class="alert alert-success" role="alert">Tin nhắn này đã được lên lịch để gửi đi vào lúc <strong class="text-danger">'.date('d-m-Y H:i', strtotime($sms['schedule'])).'.</strong> Bạn có thể điều chỉnh lại thời gian gửi ở bên dưới.</div>';
    }

    @endphp
    <div class="row">
        <div class="col-sx-12 col-sm-4 col-md-4">
            <div class="form-group">
                <label>Ngày gửi:</label>
                <input type="text" class="form-control" name="schedule" value="{{ @$sms['schedule'] }}" id="date-input" required>
                <span class="help-block"></span>
            </div>
        </div>
        <div class="col-sx-12 col-sm-2 col-md-2">
            <div class="form-group">
                <label>Giờ gửi:</label>
                <select class="form-control" name="hours" id="hours">
                    @for($i = 0; $i < 24; $i++)
                    <option value="{{ $i }}">{{ $i }}</option>
                    @endfor
                </select>
            </div>
        </div>
        <div class="col-sx-12 col-sm-2 col-md-2">
            <div class="form-group">
                <label>Phút gửi:</label>
                <select class="form-control" name="minutes" id="minutes">
                    @for($i = 0; $i < 60; $i++)
                    <option value="{{ $i }}">{{ $i }}</option>
                    @endfor
                </select>
            </div>
        </div>
        <div class="col-sx-12 col-sm-2 col-md-2"></div>
    </div>
    <div>
        @if($api == 'vietguys')
        <p>
            <strong>Lưu ý:</strong> Thời gian tạo tin nhắn phải cách thời đểm hiện tại 10p. Thời gian gửi tin nhắn thành công có thể chênh lệch vài phút tùy thuộc vào hệ thống của VietGuys.
        </p>
        @else
            <p>
                <strong>Lưu ý:</strong> Thời gian tạo tin nhắn phải cách thời đểm hiện tại 2 tiếng. Thời gian gửi tin nhắn thành công có thể chênh lệch vài phút tùy thuộc vào hệ thống của VMG. Tin nhắn gửi ngoài giờ làm việc, sẽ có được xác nhận thông tin vào ngày làm việc kế tiếp.
            </p>
            <div>
                <div class="alert alert-warning" role="alert">
                    <strong class="glyphicon glyphicon-warning-sign"></strong>
                    <strong>Lưu ý:</strong> <strong>VMG</strong> chưa hỗ trợ xóa lịch hẹn từ hệ thống website iTop. Bạn vui lòng truy cập <a href="http://portal.brandsms.vn/Default.aspx?portalid=72&cmd=EditMtWaitingCSKH" target="_blank">trình quản lý SMS của VMG</a> để xóa nếu cần.
                </div>
            </div>
        @endif
    </div>
    <div class="form-group">
        <label class="checkbox-inline">
            <input bs-type="checkbox" {{ empty($sms['status']) ? '' : 'checked' }} name="status" type="checkbox" value="1">
            Gửi lịch hẹn (để trống nếu muốn lưu nháp).
        </label>
    </div>
    <div class="form-group">
        <ul class="list-inline">
            <li>
                {{Form::bsSelectItem('Chọn khách hàng', 'customer_select', 'user')}} 
            </li>
            <li>
                <a class="btn btn-default heading-btn" id="list-item-customer">Chọn tất cả</a>
            </li>
        </ul>
    </div>
    <div>
        <table class="table" id="table-user">
            <thead>
                <tr>
                    <th>Khách hàng</th>
                    <th>Điện thoại</th>
                    <th>Email</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
{{ Form::bsBoxClose() }}

@section('scripts')
<script>
    var interval = null;
    function setTimeAutoUpdate(date, addTime){
        let generatedTime=date.getTime();
        if(addTime.minutes) generatedTime+=1000*60*addTime.minutes;
        if(addTime.hours) generatedTime+=1000*60*60*addTime.hours; 
        return new Date(generatedTime);
    }
    function getValueOptionTime(id , number, change = false){
        number = parseInt(number);
        $.each($("#"+id+" option"), function(){           
            var value_item = parseInt($(this).val());
            $(this).attr('selected', false);
            if(value_item == number){
                $(this).attr('selected', true);
            }
            if(value_item < number && change == false){
                $(this).attr('disabled', true);
            }
        });
    }
    jQuery(document).ready(function($) {
        var today = new Date();
        $('#date-input').daterangepicker({
            "singleDatePicker": true,
            "showWeekNumbers": true,
            "showISOWeekNumbers": true,
            "timePicker": false,
            "timePicker24Hour": false,
            "drops": "up",
            "locale": {
              "format": 'DD-MM-YYYY'
          },
          "minDate": today,
      }, function(start, end, label) {
        var date_today = Date.parse(new Date());
        if(start > date_today){
            $.each($("#minutes option"), function(){   
                $(this).attr('disabled', false);
            });
            $.each($("#hours option"), function(){   
                $(this).attr('disabled', false);
            });
            getValueOptionTime('hours', 0);
            getValueOptionTime('minutes', 0);
            clearInterval(interval);
        }
        else
        {
            var time =  new Date(setTimeAutoUpdate(new Date(), {minutes: 10}));
            getValueOptionTime('hours', time.getHours());
            getValueOptionTime('minutes', time.getMinutes());
            interval = setInterval(function(){
                var time =  new Date(setTimeAutoUpdate(new Date(), {minutes: 10}));
                getValueOptionTime('hours', time.getHours());
                getValueOptionTime('minutes', time.getMinutes());
            }, 5000);

        }
      });

        var time =  new Date(setTimeAutoUpdate(new Date(), {minutes: 10}));
        getValueOptionTime('hours', time.getHours());
        getValueOptionTime('minutes', time.getMinutes());

        interval = setInterval(function(){
            var time =  new Date(setTimeAutoUpdate(new Date(), {minutes: 10}));
            getValueOptionTime('hours', time.getHours());
            getValueOptionTime('minutes', time.getMinutes());
        }, 5000);

        $('#hours').on('change', function() {
            var time =  new Date();
            $.each($("#minutes option"), function(){   
                $(this).attr('disabled', false);
            });
            if(parseInt(time.getHours()) == parseInt($(this).val())){
                var time =  new Date(setTimeAutoUpdate(new Date(), {minutes: 10}));
                getValueOptionTime('hours', time.getHours());
                getValueOptionTime('minutes', time.getMinutes());
                interval = setInterval(function(){
                    var time =  new Date(setTimeAutoUpdate(new Date(), {minutes: 10}));
                    getValueOptionTime('hours', time.getHours());
                    getValueOptionTime('minutes', time.getMinutes());
                }, 5000);
            }
            else{
                getValueOptionTime('minutes', 0);
                clearInterval(interval);
            }
        });

        $("textarea").keyup(function(e){
            $('#count_meta_description').text($(this).val().length);
        });
        var i = 1;
        var item = [];
        var user_all = {!! (!empty($users) && $sms['user_ids'] != 'all') ? json_encode($users) : "[]" !!};
        if(!user_all.length){
            $('#table-user tbody').append('<tr id="all"><th colspan="4" class="text-center">Đã chọn tất cả khách hàng<input type="hidden" name="user_all" value="all" /></th></tr>');
        }
        else{
            for (var i = 0; i < user_all.length; i++) {
                var html = '<tr>';
                var id_item = user_all[i]["id"];
                html += '<td>'+user_all[i]["fullname"]+'</td>';
                html += '<td>'+user_all[i]["phone"]+'</td>';
                html += '<td>';
                html += user_all[i]["email"]+'<input type="hidden" name="user_id[]" value="'+id_item+'">';
                html += '</td><td><a><i class="fa fa-trash text-danger remove" data-id="'+id_item+'"></i></a></td>';
                html += '</tr>';
                item.push(id_item);
                $('#table-user tbody').append(html);
            }
        }
        i = i+1;
        $('#list-item-customer').on('click', function(event) {
            event.preventDefault();
            item = [];
            $('#table-user tbody tr').remove();
            $('#table-user tbody').append('<tr id="all"><th colspan="4" class="text-center">Đã chọn tất cả khách hàng<input type="hidden" name="user_all" value="all" /></th></tr>');
        });
        $('#customer_select').on('click', 'tr', function() {
            var id_item = $(this).data("id");
            if(jQuery.inArray(id_item, item) !== -1) {
                alert('Khách hàng đã có trong danh sách');
                return;
            }
            var html = '<tr>';
            html += '<td>'+$(this).data("fullname")+'</td>';
            html += '<td>'+$(this).data("phone")+'</td>';
            html += '<td>';
            html += $(this).data("email")+'<input type="hidden" name="user_id[]" value="'+id_item+'">';
            html += '</td><td><a><i class="fa fa-trash text-danger remove" data-id="'+id_item+'"></i></a></td>';
            html += '</tr>';
            $(this).remove();
            i = i + 1;
            item.push(id_item);
            $('#table-user tbody').find('#all').remove();
            $('#table-user tbody').append(html);
        });
        $('#table-user').on('click', 'tr td .remove', function() {
            $(this).parents('tr').remove();
            var id = $(this).attr('data-id');
            for (var i = 0; i < item.length; i++) {
                if(item[i] == id){
                    item.splice(i , 1);
                    item.push();
                    return ;
                }
            }
        });
    });
</script>

@endsection