@extends('layouts.admin.app')
@section('content')

<div class="container-fluid py-4">
	<div class="row">
		<div class="col-12">
			<div class="card my-4">
				<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
					<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
						<h6 class="text-white text-capitalize ps-3">Users Query</h6>
					</div>
				</div>
                <br>
                @if(Session::has('success'))
                    <div class="alert alert-success text-white mx-3">
                        {{ Session::get('success') }}
                        <p>demo test</p>
                    </div>
                @endif
                @if(Session::has('error'))
                    <div class="alert alert-danger text-white mx-3">
                        {{ Session::get('error') }}
                    </div>
                @endif

				<div class="card-body px-0 pb-2">
                    <form action="{{route('admin.users-query.index')}}" id="filterForm" method="get">
                        @csrf
                        <div class="row">
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline" style="margin: 12px;">
                                    <label class="" style="padding:8px 12px;margin: unset;"> From date </label>
                                    <input type="date" style="padding:unset;width: 50%;" class="form-control" name="fromdate" id="fromdate" value="@if(request()->fromdate){{date('Y/m/d',strtotime(request()->fromdate))}}@endif">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline" style="margin: 12px;">
                                    <label class="" style="padding:8px 12px;margin: unset;"> To date </label>
                                    <input type="date" style="padding:unset;width: 50%;" class="form-control " name="todate" id="todate" value="@if(request()->todate){{date('d/m/Y',strtotime(request()->todate))}}@endif">
                                    </div>
                                </div>
                                    <div class="col-md-4">
                                        <div class="input-group input-group-outline" style="margin: 12px;">
                                            <button class="btn btn-primary" type="submit" style="margin-right:15px">
                                                        <i class="material-icons"></i>Search
                                            </button>

                                            <a class="btn btn-success" href="{{route('admin.users-query.index')}}">
                                                        <i class="material-icons"></i>Reset
                                            </a>
                                        </div>
                                    </div>
                        </div>
                    </form>
					<div class="table-responsive p-4">
						<table class="table align-items-center mb-0" id="data_table">
							<thead>
								<tr>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Registration Date</th>
									<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Name</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Email</th>
									<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Country</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Phone No</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Message</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Query Type</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Status</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Action</th>

								</tr>
							</thead>
							<tbody>

                                @foreach($usersquery as $query)
								<tr>
                                    <td class="align-middle text-center text-sm">{{$query->created_at->todatestring()}}</td>
									<td class="align-middle text-center text-sm">{{ $query->name }}</td>
                                    <td class="align-middle text-center text-sm">{{ $query->email }}</td>
									<td class="align-middle text-center text-sm">{{ $query->country }}</td>
                                    <td class="align-middle text-center text-sm">+{{ $query->code.'-'.$query->phone }}</td>
                                    <td class="align-middle text-center text-sm message-quote">
                                        
                                        {{ Str::limit($query->message,60, $end='...') }}
                                        @if(strlen($query->message)>60)
                                        <div class="parent-box">
                                            <textarea class="qry-detail" style="display:none">{{$query->message}}</textarea>
                                            <button class="btn btn-success view-detail" type="button"><i class="material-icons">visibility</i></button>
                                        </div>
                                        @endif
                                    </td>
                                    <td class="align-middle text-center text-sm">
                                        @if($query->query_type == 'contact_us_query')
                                            {{ 'Contact Us Query' }}
                                        @elseif($query->query_type == 'home_popup_Sign_Up_query')
                                            {{ 'Home Popup Sign Up Query' }}
                                        @else
                                            {{ 'Drop Us a Query' }}
                                        @endif
                                        </td>
                                    <td class="align-middle text-center text-sm">
                                            
                                        <select class="form-control selectstatus" name="active_status" id="active_status" data-id="{{$query->id}}" style="color:#fff;@if($query->status=='1') background:red; @else background:green;@endif">

                                            <option data-id="{{$query->id}}"  value="1"  >Active</option>
                                            <option  data-id="{{$query->id}}" value="0"  >Attempted</option>
                                        </select>
                                  
                                    </td>
                                    <td>
                                    <form action="{{ route('admin.users-query.destroy',base64_encode($query->id)) }}" id="deleteform" method="post">
                                        @csrf
                                         @method('DELETE')
	                                        <button class="btn btn-primary" type="submit">
	                                            <i class="material-icons">delete</i>
	                                        </button>
                                    </form>
                                    </td>
								</tr>
                                @endforeach
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

    @include('layouts.admin.footer')
</div>
<div class="modal" id="detail-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><span class="mdl_title"></span>Query Full Detail</h4>
                    <button type="button" class="btn close" data-bs-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <textarea id="detail-area" style="width: 100%;border:none" rows="10" ></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                    <br><span class="text-danger w-100 text-center e-lable field-error" ></span>
                </div>
            </div>
    </div>
</div>


<script>
	$(document).on("submit","#deleteform", function(e){
        e.preventDefault();
        var url = $(this).attr('action');
        var formData = new FormData($("#deleteform")[0]);
        $.ajax({
            url: url,
            type: "POST",
            data : formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
            },
            success: function(data){
                if(data.success==false)
                {
                    $.each( data.message, function( key, value ) {
                        // $('.field-'+key).html(value);
                        toastr.danger(value, '', {timeOut: 5000});
                    });
                }
                else{
                    toastr.success('Delete Successfull.', '', {timeOut: 5000});
                    window.location.reload();
                    
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
         
    });

     $(".selectstatus").on('change',function(){
        var id = $(this).attr('data-id');
        if($(this).val()=='1')
        {
            $(this).css('background','red');
        }
        else{
            $(this).css('background','green');
        }
        var status = $(this).val();
        var url = "{{ route('admin.users-query.update',':id') }}";
        url = url.replace(':id', id);
        
         // console.log(formData);
         $.ajax({
            url: url,
            type: "post",
            data : {'status':status,'_method':'put','_token':"{{csrf_token()}}"},
            beforeSend: function() {
            },
            success: function(data){
                if(data.success==false)
                {
                    $.each( data.message, function( key, value ) {
                        // $('.field-'+key).html(value);
                        toastr.danger(value, '', {timeOut: 5000});
                    });
                }
                else{
                    toastr.success('edit Successfull.', '', {timeOut: 5000});
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
     });
    //  $(document).on("submit","#filterForm", function(e){
        
    //     var url = $(this).attr('action');
    //     var formData = {startDate:$("#todate").val(),
    //                     endDate:$("#fromdate").val()
    //                 };
    //     console.log(formData);
    //     $.ajax({
    //         url: url,
    //         type: "get",
    //         data : formData,
    //         cache: false,
    //          contentType: false,
    //          processData: false,
    //         beforeSend: function() {
    //         },
    //         success: function(data){
    //             if(data.success==false)
    //             {
    //                 $.each( data.message, function( key, value ) {
    //                     // $('.field-'+key).html(value);
    //                     toastr.danger(value, '', {timeOut: 5000});
    //                 });
    //             }
    //             else{
    //                 toastr.success('Delete Successfull.', '', {timeOut: 5000});
                    
    //             }
    //         },
    //         error: function(xhr, ajaxOptions, thrownError) {
    //             console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    //         }
    //     });
    //     e.preventDefault();
    // });

    $(document).on('click','.view-detail', function(){
        var detail = $(this).closest('.parent-box').find('.qry-detail').text();
        $('#detail-area').text(detail);
        $('#detail-modal').modal('show');
    });

</script>
<style>
    .selectstatus{
        font-size:11px;
        text-align:center;
    }
    .toast-success{
        background:green;
    }
    .toast-danger{
        background:red;
    }
</style>
@endsection