@extends('layouts.adminLayouts')

@section('head')
    <!-- babakhani datepicker -->
    <link rel="stylesheet" href="{{url('/assets/admin/dist/css/persian-datepicker-0.4.5.min.css')}}"/>
    <link rel="stylesheet" href="/assets/admin/bower_components/select2/dist/css/select2.min.css">
    <link href="/css/bootstrap-treeview.css" rel="stylesheet">
    <link href="/css/select2totree.css" rel="stylesheet">
    <meta name="_token" content="{{csrf_token()}}">
    <link rel="stylesheet"
          href="{{url('/assets/admin/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css')}}">

@stop

@section('content-header')
    <section class="content-header">
        <h1>
            مدیریت پیام ها
        </h1>

        {{ Breadcrumbs::render('contacts.index') }}


    </section>
@stop

@section('content')

    <div class="margin" dir="ltr">

        {{--        <div class="btn-group">--}}
        {{--            <a href="#" class="btn btn-success"> <i class="fa fa-file-excel-o"></i> گرفتن خروجی</a>--}}
        {{--        </div>--}}

    </div>

    <!-- SELECT2 EXAMPLE -->
    <div class="box box-default">
        <!-- /.box-header -->
        <div class="box-body">
            <div class="row">
                <form onsubmit="return false" action="" id="searchContactForm">
                    <div class="col-md-6">

                        <div class="form-group">
                            <label class="col-sm-4 control-label">نام شهروند:</label>

                            <div class="col-sm-8">
                                <input name="name" type="text" class="form-control" autocomplete="off">
                            </div>
                        </div>
                        <br>

                        <div class="form-group">
                            <label class="col-sm-4 control-label">موبایل شهروند:</label>

                            <div class="col-sm-8">
                                <input name="mobile" type="text" class="form-control" autocomplete="off">
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">وضعیت پیام:</label>

                            <div class="col-sm-8">
                                <select class="form-control select2" style="width: 100%;" id="status" name="status"
                                        style="width:16em">
                                    <option value="">انتخاب کنید</option>
                                    <option value="0">در صف بررسی</option>
                                    <option value="2">در دست بررسی</option>
                                    <option value="1">حل شده</option>
                                    <option value="-1">هرزنامه</option>
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">نوع پیام:</label>

                            <div class="col-sm-8">
                                <select class="form-control select2" style="width: 100%;" id="type" name="type">
                                    <option value="">انتخاب کنید</option>
                                    <option value="137">سامانه 137</option>
                                    <option value="contact">تماس با ما</option>
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <label class="col-sm-4 control-label"> بطور مستقیم به پیام با کد: <span
                                    data-toggle="tooltip"
                                    title=""
                                    class="badge bg-light-blue"
                                    data-original-title="شما می توانید با وارد کردن کد پیام، آن را پیدا نمایید."><i
                                        class="fa fa-info"></i></span> </label>


                            <div class="col-sm-8">
                                <input type="text" name="code" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-md-6">


                        <div class="form-group">
                            <label class="col-sm-4 control-label"> ثبت شده از:</label>

                            <div class="col-sm-8">
                                <div class="input-group date">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" id="date_created_at" class="form-control pull-right" autocomplete="off">
                                    <input type="hidden" id="contact_created_at" name="contact_created_at" value=""
                                           class="form-control pull-right">
                                </div>
                            </div>
                        </div>

                        <br>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">ثبت شده تا:</label>

                            <div class="col-sm-8">
                                <div class="input-group date">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" id="date_created" class="form-control pull-right" autocomplete="off">
                                    <input type="hidden" id="contact_created" name="contact_created"
                                           class="form-control pull-right">
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">مرتب سازی بر اساس:</label>

                            <div class="col-sm-8">
                                <select class="form-control select2" style="width: 100%;" id="sort" name="sortBy"
                                        style="width:16em">
                                    <option value="">انتخاب کنید</option>
                                    <option value="new">جدید ترین</option>
                                    <option value="old">قدیمی ترین</option>
                                </select>
                            </div>
                        </div>

                        <br>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">فیلتر بر اساس:</label>

                            <div class="col-sm-8">
                                <select name="subject_id[]" id="subjects"  class="form-control select2tag" style="width: 100%;" multiple="multiple">
                                    <option value="">انتخاب کنید</option>
                                    @foreach($subjects as $subject)
                                        <option value="{{$subject->id}}">{{$subject->title}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>


                    </div>
                    <!-- /.col -->
                </form>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.box-body -->
        <div class="box-footer card-footer text-center">
            <div class="btn-group">
                <button onclick="searchContact();" type="button" class="btn btn-warning btn-lg"><i
                        class="fa fa-search"></i> جستجو
                </button>
            </div>
        </div>
    </div>
    <!-- /.box -->

    <!-- /.row -->
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">جدول پیام ها</h3>
                </div>
                <!-- /.box-header -->
                <div id="tbody_contacts">
                    @include('admin.contact.load')
                </div>

                <div class="overlay" style="display:none" id="loading">
                    <i class="fa fa-refresh fa-spin"></i>
                </div>
            </div>

            <!-- /.box -->
        </div>
    </div>



@stop

@section('footer')
    <!-- babakhani datepicker -->
    <!-- Select2 -->
    <script src="{{url('/assets/admin/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
    <script>

        $(function () {
            //Initialize Select2 Elements
            $('.select2').select2();
            $('.select2tag').select2({
                tags:true
            });
        })
    </script>
    <script src="{{url('/assets/admin/dist/js/persian-date-0.1.8.min.js')}}"></script>
    <script src="{{url('/assets/admin/dist/js/persian-datepicker-0.4.5.min.js')}}"></script>
    <script>
        $(document).ready(function () {
            $('#date_created_at').persianDatepicker({
                initialValue: false,
                altField: '#contact_created_at',
                altFormat: 'X',
                format: 'D MMMM YYYY HH:mm a',
                observer: true,
                timePicker: {
                    enabled: true
                },
            });

            $('#date_created').persianDatepicker({
                initialValue: false,
                altField: '#contact_created',
                altFormat: 'X',
                format: 'D MMMM YYYY HH:mm a',
                observer: true,
                timePicker: {
                    enabled: true
                },
            });
        });
    </script>
    <script>
        searchContact = function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $('#loading').show();
            data = $('#searchContactForm').serialize();

            $.ajax({
                url: '{{ url('/admin/contacts') }}',
                data: data,
                type: 'GET',
                success: function (response) {
                    $('#tbody_contacts').empty().html(response);
                    $('#loading').hide();
                },
                error: function (xhr) {
                    $('#loading').hide();
                    toastr.warning("لطفا دوباره امتحان کنید.", "خطا!");
                }
            });
        }
    </script>
@stop