@extends('layouts.admin')
@section('content')
<div class="container-fluid">
    <div class="row">
        @include('include.admin-sidebar')
        <div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 col-lg-10 col-lg-offset-2" id="page-wrapper">
        	<div class="page-title">
            	Contact Us Queries
            </div>
            @include('partials.alerts')
            {{ Form::open(['url' => 'admin/contact-us', 'method'=>'post']) }} 
            <div class="widget p-md pb-0">
            	<div class="row">
                	<div class="col-lg-4 col-md-6 col-sm-12">
                    	<div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class='input-group date' id='datetimepicker1'>
                                        <input type='text' class="form-control bottom-border-line inputNoEnter" name="start_date" Placeholder="Added Date From" value="{{ $start_date }}" id="start_date"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>                       
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class='input-group date' id='datetimepicker2'>
                                        <input type='text' class="form-control bottom-border-line inputNoEnter" name="end_date" Placeholder="Added Date To" value="{{ $end_date }}" id="end_date"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>                       
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <div class="form-group form-group-buttons">
                            <button type="submit" class="btn btn-sm btn-primary" onclick="return checkFields()">Search</button>
                            <a href="{{ url('admin/contact-us') }}" class="btn btn-sm btn-primary-outline">View All</a>
                        </div>
                    </div>
                </div>
            </div>
            {{Form::close()}}
            @if(sizeof($results))
            <div class="widget p-md">
            	<div class="table-responsive">
                    <table class="table table-striped table-nowarp" cellpadding="0" cellspacing="0" border="0" id="brandstable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Full Name</th>
                                <th>Email Address</th>
                                <th>Contact Number</th>
                                <th>Message</th>
                                <th>DateTime</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($results as $row)
                            <tr>
                                <td> {{ $row['id'] }} </td>
                                <td> {{ $row['fullname'] }} </td>
                                <td> {{ $row['email'] }} </td>
                                <td> {{ $row['country_code'].'-'.$row['mobile'] }} </td>
                                <td> <a data-toggle="modal" data-message="{{ $row['message'] }}" data-target="#messageModal" class="message"><i class="fa fa-file-text-o"></i></a></td>
                                <td> {{ date("j F, Y", strtotime($row['created_at'])) }} </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                {{ $results->appends(['start_date'=>$start_date, 'end_date'=>$end_date])->links() }}
                <div class="paging">
                Records {{ $results->firstItem() }} - {{ $results->lastItem() }} of {{ $results->total() }}
                </div>
            </div>
            @else
                {{ 'No records to display' }}
            @endif
        </div>
        
        <div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 col-lg-10 col-lg-offset-2 footer text-center">2017 &copy; Bid2Rent</div>
        
    </div>
</div>
<!-- Modal -->
    <div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Meessage</h4>
          </div>
          <div class="modal-body">
            <p id="message"></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
@include('include.admin-footer')
<script type="text/javascript" src="{{ asset('js/moment.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/bootstrap-datetimepicker.js') }}"></script>
<script type="text/javascript">    
    $(window).load(function() {
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            useCurrent: false
        }).on("dp.change", function (e) {
                $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
                $('#todate').val('');
            });

        $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD',
            useCurrent: false
        }).on("dp.change", function (e) {
                $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
                $('#todate').val('');
            });
    });
</script>
<script type="text/javascript">
    $(function () {   
        $(document).on('click', '.message', function(){
            var msg = $(this).data('message');
            $('#message').text(msg);
        });
    });
</script>
<script type = "text/javascript">
    function checkFields(){
        var start_date = document.getElementById("start_date").value;
        var end_date = document.getElementById("end_date").value;
        if((end_date != "" && start_date == "") || (start_date != "" && end_date == "")){
            alert("Please Choose the From Date/To Date");
            return false;
        }
        else{
            return true;
        }
    }
</script>
@endsection