@extends('admin.admin')
@section('adminContent')



<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3 class="text-themecolor">Contact Request</h3>
    </div>
    <div>
        <button class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
    </div>
</div>



<!-- Row -->
<div class="row">
    <div class="col-lg-12">

        <div class="card card-default">
            <div class="card-header">
            <form class="form-inline" >
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" id="searchcontact">
  </form>      
                <div class="card-actions">
                    <a class="" data-action="collapse"><i class="ti-minus"></i></a>
                    <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>
                    <a class="btn-close" data-action="close"><i class="ti-close"></i></a>
                </div>
            </div>
            <div class="card-body collapse show">
                <!--@if($message=Session::get('success'))-->
                <!--<div class="alert alert-success">-->
                <!--    {{$message}}-->
                <!--</div>-->
                <!--@elseif($message=Session::get('error'))-->
                <!--<div class="text-danger">-->
                <!--    {{$message}}-->
                <!--</div>-->
                @if($errors->any())
                @foreach ($errors->all() as $error)
                <div class="text-danger">{{ $error }}</div>
                @endforeach
                @endif
                <!--@endif-->
                <div class="table-responsive">
                    <table class="table product-overview">
                        <thead>
                            <tr>
                                <th>Name</th>

                                <th>Mobile</th>
                                <th>Email</th>
                                <th>Request Date</th>
                                <th>Status</th>
                                <th class="tdaction">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Row -->
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- ============================================================== -->

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{url('admin/editCU')}}" enctype="multipart/form-data" method="post">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <input type="text" hidden value='' class="form-control" name="id" id="id">
                        <label for="email"  class="col-form-label">Email</label>
                        <input type="text" disabled class="form-control" name="email" id="email">
                        <label for="mobile" class="col-form-label">Mobile</label>
                        <div class="input-group">
                            <select name="country_code" id="country_code" class="form-select text-muted border-secondary" style="    border-color: #c2c8ce !important;">
                                <option  value="" selected >--select--</option>
                                <option data-countryCode="IN" value="+91">+91</option>
                                @include('partial.countryCode')
                            </select>
                            <input type="text" class="form-control" name="mobile" id="mobile">
                        </div>
                        <label for="status" class="form-label">Status</label>
                        <select name="status" class="form-control " id="status">
                            <option value="" selected >--Status--</option>
                            <option value="pending">pending</option>
                            <option value="complete">complete</option>
                        </select>
                        <label for="subject" class="form-label">Subject</label>
                        <input type="text" disabled name="subject" value="" class="form-control" id="subject">
                        <label for="messages"  class="form-label">Message</label>
                        <textarea type="text" disabled name="messages" value="" class="form-control" id="messages"></textarea>
                        <label for="response" class="form-label">Response</label>
                        <textarea type="text" name="response" value="" class="form-control" id="response"></textarea>

                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-close btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
        </div>
        </form>
    </div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Container fluid  -->
<!-- ============================================================== -->
<!-- ============================================================== -->


<script>
    $(document).ready(function(){
        $.ajax({
        type:"get",
        url:"/getFilterContact",
        success:function(data){
            console.log(data);
            // $('#table_data').empty();
            $('tbody').append(data.data);

        },
        error:function(error){
            console.log(error);
        }

     });
     $(document).on('click', '.pagination a', function(event){
  event.preventDefault(); 
  var page = $(this).attr('href').split('page=')[1];
  fetch_data(page);
 });
 function fetch_data(page)
 {
    $.ajax({
            type:'get',
            url:"/getFilterContact?page="+page,
            success:function(data){
                console.log(data)
                if (data.data) {
                    $('tbody').empty();
					$("tbody").html(data.data);
				} else {
					$("tbody").html('  <tr><td colspan="16" class="text-center"> No Records Found !</td></tr>');
				}
            },
            error:function(error){
                 console.log(error);
            }

            
           });
   }
        $('#searchcontact').keyup(function(e){
           e.preventDefault();
           var formData=$('#searchcontact').val();
           $.ajax({
            type:'get',
            url:"/getFilterContact",
            data:{'search':formData},
            success:function(data){
                console.log(data)
                if (data.data) {
                    $('tbody').empty();
					$("tbody").html(data.data);
				} else {
					$("tbody").html('  <tr><td colspan="16" class="text-center"> No Records Found !</td></tr>');
				}
            },
            error:function(error){
                 console.log(error);
            }

            
           });
        });
        $(document).on('click', '.editBtn', function() {
            let event_id = $(this).val();
            $('#exampleModal').modal('show');
            $.ajax({
                type: 'get',
                url: "getCU/" + event_id,
                success: function(response) {
                    $('#name').val(response.name);
                    $('#email').val(response.email);
                    $('#country_code').val(response.country_code);
                    $('#mobile').val(response.mobile);
                    $('#status').val(response.status);
                    $('#subject').val(response.subject);
                    $('#messages').val(response.messages);
                    $('#response').val(response.response);
                    $('#id').val(response.id);
                }

            });

        })
        $('.btn-close').on('click', function() {
            $('#exampleModal').modal('hide');
        });
    })
</script>
<script>
$(document).ready(function(){
        var img=$('img[data-enlargable]').addClass('img-enlargable');
        $(document.body).on('click','img',function(){
    var src = $(this).attr('src');
    $('<div>').css({
        background: 'RGBA(0,0,0,.5) url('+src+') no-repeat center',
        backgroundSize: 'contain',
        width:'100%', height:'100%',
        position:'fixed',
        zIndex:'10000',
        top:'0', left:'0',
        cursor: 'zoom-out'
    }).click(function(){
        $(this).remove();
    }).appendTo('body');
});
    });
</script>




@stop