@extends('admin.layouts.layout')
@section('content')
<style>
.show{
    width: 100% !important;
}
</style>
<div class="container-fluid">      
    <div class="page-inner">          
        <h4 class="page-title"> Support Query {{ trans('admin_lang.manage') }}</h4>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                    <div class="row">
                                <div class="col-md-2">
                                    <div class="mb-2">
                                        <label>Profile Type filter</label>
                                        <select id="profile_type" name="profile_type" class="form-control form-control-sm">
                                            <option value="all">All</option>
                                            <option value="rider">Rider</option>
                                            <option value="driver">Driver</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        <div class="table-responsive">
                            <table id="basic-datatables" class="display table table-striped table-hover show">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>User Type</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th class="action" style="width: 475px;">Message</th>
                                        <th class="action">{{ trans("admin_lang.action") }}</th>
                                    </tr>
                                </thead>                                  
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" 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>
            <h5 class="modal-title" id="exampleModalLabel"><b>Support Query</b></h5>
        </div>
        <div class="modal-body">
            <div class="row" id="text-id">
                <div class="col-md-12 form-group">
                    <h3 class="text-danger">You can not reply to this message as email is not provided by user.</h3>
                </div>
            </div>
            {{ Form::open(['url' => ['admin/contact/send-mail'], 'files' => true, 'class' => 'upload_submit form-horizontal']) }}
            @csrf
            <div class="row">
                <div class="col-md-12 form-group">
                    <input type="hidden" name="contact_us_id" id="contact_us_id">
                    <input type="hidden" name="type" value="conatct_us">
                    <label for="email" class="control-label label-custom required">Email <span class="error">*</span></label>
                    <div class="form-group  @if ($errors->has('email')) has-error @endif">
                        {{ Form::text('email', null, ['class' => 'form-control', 'id' => 'email', 'placeholder' => 'Email', 'readonly' => 'readonly']) }}
                    </div>
                </div>
                <div class="col-md-12 form-group">
                    <label class="control-label label-custom required">Reply <span class="error">*</span></label>
                    {!! Form::textarea('reply_message', null, [
                        'class' => 'form-control',
                        'placeholder' => 'Reply',
                        'cols' => '20',
                        'rows' => '7',
                        'required' => 'required',
                        'id' => 'reply_message',
                    ]) !!}
                </div>
                <span class="error" style="margin: auto;"></span>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    <button type="submit" class="btn btn-success btn-sm form_submit">Submit</button>
                </div>
            </div>
            {{ Form::close() }}
        </div>
    </div>
</div>
</div>
<!-- Content Wrapper. Contains page content -->
@endsection
@section('script')
<script type="text/javascript">
    var tables = $('#basic-datatables').DataTable({
        "bProcessing": true,
        "serverSide": true,
        "pageLength": 10,
        "order": [[0, "desc"]],
        "ajax": {
            url: "{{ routeUser($pagePath.'.index') }}",
            "data": function(data) {
                        var profile_type = $('#profile_type').val();
                        // Append to data
                        data._token = "{{ csrf_token() }}";
                        data.profile_type = profile_type;
                        
                    },
            error: function () {
                alert("{{trans('admin_lang.something_went_wrong')}}");
            }
        },
        "aoColumns": [
            {mData: 'DT_RowId'},
            {mData: 'user_type'},
            {mData: 'name'},
            {mData: 'email'},
            {mData: 'message'},
            {mData: 'actions'}
        ],
        language: {
            searchPlaceholder: "Search by name and email"
        },
        "aoColumnDefs": [
            {"bSortable": false, "aTargets": ['action']}
        ],
    });

    $('#profile_type').change(function() {
                tables.draw();
            });
            function showMsg2(email,contact_us_id) {
     $('#email').val("");
     $('#contact_us_id').val("");
     
     if(email ==null || email ==""){
        $('#email').attr('disabled', 'disabled');
        $('#reply_message').attr('disabled', 'disabled');
        $('#text-id').show();
        $('.form_submit').attr('disabled', 'disabled');
    }else{
        $('#contact_us_id').val(contact_us_id);
        $('#email').val(email);
        $('#email').prop('disabled', false);
        $('#reply_message').prop('disabled', false);;
        $('#text-id').hide();
        $('.form_submit').prop('disabled', false);
    }

}
</script>
@endsection