@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">Consultation</h6>
					</div>
				</div>
                <br>
                @if(Session::has('success'))
                    <div class="alert alert-success text-white mx-3">
                        {{ Session::get('success') }}
                    </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.consultant.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">Phone No</th>
									<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Speak Time</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">Message</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"></th>
								</tr>
							</thead>
							<tbody>
                                @foreach($consultation as $con)
								@php 
								$consuDate = date("d-m-Y H:i:s",strtotime($con->speak_time));
								@endphp
								<tr>
                                    <td class="align-middle text-center text-sm">{{$con->created_at->todatestring()}}</td>
									<td class="align-middle text-center text-sm">{{ $con->c_name }}</td>
                                    <td class="align-middle text-center text-sm">{{ $con->c_email }}</td>
                                    <td class="align-middle text-center text-sm">{{ $con->c_phone }}</td>
									<td class="align-middle text-center text-sm">{{ $consuDate }}</td>
									<td class="align-middle text-center text-sm">{{ $con->country }}</td>
                                    <td class="align-middle text-center text-sm message-quote" style="max-width: 250px">
                                        {{ Str::limit($con->c_message,60, $end='...') }}

                                        @if(strlen($con->c_message)>60)
                                        <div class="parent-box">
                                            <textarea class="qry-detail" style="display:none">{{$con->c_message}}</textarea>
                                            <button class="btn btn-success view-detail" type="button"><i class="far fa-eye"></i></button>
                                        </div>
                                        @endif
                                    </td>
									<td class="align-middle text-center text-sm">
										<select class="form-control selectstatus" name="active_status" data-id="{{$con->id}}"  id="active_status" style="color:#fff;@if($con->status=='1') background:red; @else background:green;@endif">
				                            <option data-id="{{$con->id}}" value="1"  >Active</option>
				                            <option data-id="{{$con->id}}"  value="0"   >Attempted</option>
                        				</select>
									   <!--  <span class="badge badge-sm c-status @if($con->status==1) bg-gradient-success">Active @else bg-gradient-danger">Inactive @endif</span> -->
									</td>
									<td>
                                        <form action="{{ route('admin.consultant.destroy',base64_encode($con->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.consultant.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","#editform", function(e){
    //     e.preventDefault();
    //     var url = $(this).attr('action');
    //     var formData = new FormData($("#editform")[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('update 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 status = $("#active_status").val();
   //    alert(status);return false;
   //    var formData = new status($("#deleteform")[0]);
     	
   // });

   $(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>
    .toast-success{
        background:green;
    }

    .toast-danger{
        background:red;
    }
</style>
@endsection