@extends('admin')

@section('styles')
    <link href="/assets/global/plugins/typeahead/typeahead.css" rel="stylesheet" type="text/css"/>
@endsection
@section('content')
    @if (session()->has('error'))
        <div class="alert alert-danger">{{ session()->get('error') }}</div>
    @endif
    @if (session()->has('success'))
        <div class="alert alert-success">{{ session()->get('success') }}</div>
    @endif
    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <!-- BEGIN SAMPLE FORM PORTLET-->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-red-sunglo">
                        <i class="icon-settings font-red-sunglo"></i>
                        <span class="caption-subject bold uppercase"> Gửi tin nhắn hệ thống</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    <form role="form" action="{{ url('admin/message/send') }}" method="post">
                        <div class="form-body">
                          {!! csrf_field() !!}
                            <div class="form-group">
                                <label>Chọn hình thức gửi</label>
                                <select class="form-control" name="type" required="" id="type">
                                    <option value="">Vui lòng chọn</option>
                                    <option value="all">Gửi cho tất cả chủ trọ và người thuê</option>
                                    <option value="owner">Gửi cho tất cả chủ trọ</option>
                                    <option value="renter">Gửi cho tất cả người thuê</option>
                                    <option value="exclude">Gửi cho user ngoại trừ các SĐT sau</option>
                                    <option value="include">Chỉ gửi cho các SĐT sau</option>
                                </select>
                            </div>
                            <div class="form-group" id="phone-select" style="display: none">
                                <label>SĐT</label>
                                <select class="form-control select2" multiple name="phones[]">
                                    <option value="">Vui lòng chọn</option>
@foreach($phones as $phone)
    <option value="{{ $phone }}"> {{ $phone }}</option>
    @endforeach
                                </select>
                            </div>


                            <div class="form-group">
                                <label>Nội dung</label>
                                <textarea name="content" class="form-control" required></textarea>
                            </div>

                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn blue">Gửi</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="/assets/global/plugins/typeahead/handlebars.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/typeahead/typeahead.bundle.min.js" type="text/javascript"></script>

<script>

    $('#type').change(function(e) {
       var type = $(this).val();
       if(type == 'include' || type == 'exclude')
       {
           $('#phone-select').show();
       } else {
           $('#phone-select').hide();
       }
    });

    {{--$('#phones').select2( {--}}
        {{--ajax: {--}}
            {{--url: '{{ url('admin/account/user-phone') }}',--}}
            {{--data: function (params) {--}}
                {{--var query = {--}}
                    {{--q: params.term,--}}
                {{--}--}}

                {{--// Query parameters will be ?search=[term]&type=public--}}
                {{--return query;--}}
            {{--}--}}
        {{--}--}}
    {{--});--}}

    {{--$("#phones").typeahead(null, {--}}
        {{--hint: true,--}}
        {{--highlight: true,--}}
        {{--name: "phones",--}}
        {{--displayKey: "phone",--}}
        {{--source: function (query, syncresults, process) {--}}
            {{--return $.ajax({--}}
                {{--url: '{{ url('admin/account/user-phone') }}',--}}
                {{--data: {q: query},--}}
                {{--dataType: 'json',--}}
                {{--type: 'get',--}}
                {{--success: function (response) {--}}
                    {{--return process(response)--}}
                {{--}--}}
            {{--});--}}
        {{--},--}}
        {{--templates: {--}}
            {{--empty: [--}}
{{--//                    '<div class="empty-message">',--}}
{{--//                    '</div>'--}}
            {{--].join('\n'),--}}
            {{--suggestion: function (data) {--}}
                {{--return '<div>' + data + '</div>';--}}
            {{--}--}}
        {{--},--}}
        {{--updater: function(item) {--}}
            {{--$('#phones').append(item, ' ');--}}
            {{--return '';--}}
        {{--}--}}
    {{--}) .on('typeahead:selected', function (obj, datum) {--}}

        {{--$('#phones').typeahead('val', datum);--}}
    {{--});--}}
</script>
@endpush