@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">All Registered User</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" id="membershipsearch">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" id="searchuser">
  </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>Photo</th>
                                    <th>Name</th>

                                    <th>Mobile</th>
                                    <th>Email</th>
                                    <th>City</th>
                                    <th>Gender</th>
                                    <th>Address</th>
                                    <th>Country</th>
                                    <th>Membership Date</th>
                                    <th>Membership</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/editUser')}}" enctype="multipart/form-data" method="post">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="name" class="col-form-label">Name</label>
                            <input type="text" class="form-control" name="name" id="name">
                            <input type="text" hidden value='' class="form-control" name="id" id="user_id">
                            <label for="inputgender" class="form-label">Gender</label>
                            <select name="gender" class="form-select " id="gender">
                                <option value='' selected>--Select Gender--</option>

                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                                <option value="Other">Other</option>
                            </select>
                            <label for="address" class="form-label">Address</label>
                            <input type="text" name="address" value="" class="form-control" id="address" placeholder="1234 Main St">
                            <label for="country" class="form-label">Country</label>
                            <select id="country" name="country" value="" class="form-control">
                                <option value="">--Select Country--</option>
                                @include('partial.countries')
                            </select>
                            <label class="control-label">Profile Photo</label>
                            <input type="file" name="profile" accept="image/*" class="form-control">
                            <img src="" id="profile" width="80" height="80" title="privious photo" alt="">

                        </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:"/getFilterUser",
        success:function(data){
            $('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:"/getFilterUser?page="+page,
            success:function(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);
            }


           });
   }


        $('#searchuser').keyup(function(e){
           e.preventDefault();
           var formData=$('#searchuser').val();
           $.ajax({
            type:'get',
            url:"/getFilterUser",
            data:{'search':formData},
            success:function(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 user_id = $(this).val();
            $('#exampleModal').modal('show');
            $.ajax({
                type: 'get',
                url: "getUser/" + user_id,
                success: function(response) {
                    $('#name').val(response.name);
                    $('#email').val(response.email);
                    $('#mobile').val(response.mobile);
                    $('#gender').val(response.gender);
                    $('#address').val(response.address);
                    $('#country').val(response.country);
                    $('#profile').attr('src', "{{asset('storage/uploads/profile')}}" + "/" + response.profile);
                    $('#user_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