@extends('admin.layouts.main')

@section('content')
<div class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">User Management</h3>
            </div>
            <div class="col-md-7 align-self-center text-right">
                <div class="d-flex justify-content-end align-items-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active">
                            <a href="{{ url('users') }}" class="text-cyan">User</a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- End Row -->
        <!-- @if (!$data->status)
        <div class="alert alert-danger p-3">
            Do you want to verify this User?
            <span style="float:right;">
                <a href="{{ url('users/'.$data->id.'/approve') }}" class="btn btn-success btn-sm verify-btn" data-toggle="modal" data-target="#approved-modal">
                    <i class="icon-check" aria-hidden="true"> Approved</i>
                </a>

                <a href="{{ url('users/'.$data->id.'/reject') }}" class="btn btn-danger btn-sm reject-btn" data-toggle="modal" data-target="#rejected-modal">
                    <i class="icon-close" aria-hidden="true"> Rejected</i>
                </a>
            </span>
        </div>
        @endif -->

        <div class="row">
            <!-- Column -->
            <div class="col-lg-4 col-xlg-3 col-md-5">
            @include('admin.includes.alert')
                <div class="card"> <img class="card-img" src="{{ url('/') }}/assets/images/background/socialbg.jpg" style="object-fit: cover;" height="350" alt="Card image">
                    <div class="card-img-overlay card-inverse text-white social-profile d-flex justify-content-center">
                        <div class="align-self-center">
                            <img src="{{ $data->picture_url != null ? $data->picture_url : url('assets/images/logo1.png') }}" class="img-circle mb-2" 
                            style="width: 35%; object-fit: cover;" >
                            <h4 class="card-title">{{ $data->name }}</h4>
                            <h6 class="card-subtitle text-white">{{ $data->email }}</h6>
                            <h6 class="card-subtitle text-white">{{ $data->phone }}</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 col-xlg-9 col-md-7">
                <div class="card">
                    <ul class="nav nav-tabs profile-tab" role="tablist">
                        <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#profile" role="tab">Profile</a> </li>
                        <!-- <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#picture" role="tab">Pictures</a> </li> -->
                        <!-- <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#selfie" role="tab">Selfies</a> </li> -->
                        <!-- <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#identity" role="tab">Identities</a> </li> -->
                        <!-- <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#setting" role="tab">Setting</a> </li> -->
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="profile" role="tabpanel">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3 col-xs-6 b-r"> <strong>Full Name</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->name }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6 b-r"> <strong>Email</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->email }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Phone</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->phone }}</p>
                                    </div>

                                    <div class="col-md-4 col-xs-6"> <strong>Location</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->location }}</p>
                                    </div>

                                    <!-- <div class="col-md-3 col-xs-6"> <strong>Date of Birth</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->dob }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Religion</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->religion }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Sect</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->sect }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Community</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->community }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Name Visibility</strong>
                                        <br>
                                        @if($data->name_visibility == '1')
                                        <span class="badge badge-success">Yes</span>
                                        @else
                                        <span class="badge badge-danger">No</span>
                                        @endif
                                        
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Living In</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->living_in }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Current City</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->current_city }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Residency Status</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->residency_status }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Marital Status</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->marital_status }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Height</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->height }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Monthly Income Range</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->monthly_income_range }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Income Visibility</strong>
                                        <br>
                                        @if($data->income_visibility == '1')
                                        <span class="badge badge-success">Yes</span>
                                        @else
                                        <span class="badge badge-danger">No</span>
                                        @endif
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Disability</strong>
                                        <br>
                                        @if($data->disability == '1')
                                        <span class="badge badge-success">Yes</span>
                                        @else
                                        <span class="badge badge-danger">No</span>
                                        @endif
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Profession</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->profession }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Package</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->package }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Status</strong>
                                        <br>
                                        @if ($data->status == '1') 
                                            <label class="badge badge-success">Approved</label>
                                        @elseif ($data->status == '2') 
                                            <label class="badge badge-dark">Rejected</label>
                                        @elseif ($data->status == '3') 
                                            <label class="badge badge-danger">Inactive</label>
                                        @elseif ($data->status == '4') 
                                            <label class="badge badge-danger">Blocked</label>
                                        @else 
                                            <label class="badge badge-warning">Pending</label>
                                       @endif
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Education</strong>
                                        <br>
                                        <p class="text-muted">{{ @$data->education->name }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Interest</strong>
                                        <br>
                                        
                                        <li>{{ @$data->name }}</li>
                                        
                                    </div> -->

                                <div class="col-md-3 col-xs-6"> <strong>Follower Request</strong>
                                    @foreach($data->followerRequest as $fr)
                                    <li>{{ $fr->name }}</li>
                                    @endforeach
                                </div>
                                
                                <div class="col-md-3 col-xs-6"> <strong>Following</strong>
                                    @foreach($data->userfollowing as $uf)
                                    <li>{{ $uf->name }}</li>
                                    @endforeach
                                </div> 
                                </div>

                                
                                <!-- <hr>
                                <div class="col-md-12"> <strong>About</strong>
                                    @if( $data->bio )
                                    <p class="m-t-30">{{ $data->bio }}</p>
                                    @else
                                    <p class="m-t-30">About not available</p>
                                    @endif
                                </div> -->
<!-- 
                                <hr>

                                <div class="col-md-12"> <strong>Deactivate Account Comment</strong>
                                    @if( $data->comment )
                                    <p class="m-t-30">{{ $data->comment }}</p>
                                    @else
                                    <p class="m-t-30">Comment not available</p>
                                    @endif
                                </div> -->
                                <!-- <hr> -->
<!-- 
                                <div class="col-md-12"> <strong>Reason</strong>
                                    @if( $data->reason )
                                    <p class="m-t-30">{{ $data->reason }}</p>
                                    @else
                                    <p class="m-t-30">Reason not available</p>
                                    @endif
                                </div> -->
                                
                            </div>
                        </div>

                        <div class="tab-pane" id="selfie" role="tabpanel">
                            <div class="card-body">
                                <div class="profiletimeline">

                                    <div class="p-3">
                                        <span style="float:right;">
                                            <form class="form-horizontal form-material" action="{{ url('users/'.$data->id.'/update') }}" method="post">
                                                @csrf
                                               
                                                @if( @$data->selfie->image )
                                                <div class="form-group">
                                                    <!-- <label class="col-sm-12">Status</label> -->
                                                    <div class="col-sm-12">
                                                        <select class="form-control form-control-line" name="status">
                                                            <option value="pending" {{ $data->selfie->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                                            <option value="approved" {{ $data->selfie->status == 'approved' ? 'selected' : '' }}>Approved</option>
                                                            <option value="rejected" {{ $data->selfie->status == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="col-sm-12">
                                                        <button class="btn btn-success">Update Selfie</button>
                                                    </div>
                                                </div>
                                                @else
                                                <p class="text-center mt-4">Status not available</p>
                                                @endif
                                            </form>
                                        </span>
                                    </div>

                                    <div class="row">

                                        <div class="col-sm-4">

                                            @if( @$data->selfie->image )

                                            <p class="alert alert-warning p-1">
                                                Status: {{ $data->selfie->status }}
                                            </p>
                                            <p class="text-center mt-4">
                                                Selfie
                                                <a href="{{ $data->selfie->image_url }}" target="blank"> Click to view</a>
                                            </p>
                                            <img src="{{ $data->selfie->image_url }}" alt="" class="h-50 w-100">

                                            @else
                                            <p class="text-center mt-4">Not Uploaded</p>
                                            @endif
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" id="picture" role="tabpanel">
                            <div class="card-body">
                                <div class="profiletimeline">

                                    <div class="row">
                                        <div class="col-sm-4">
                                            @if( @$data->pictures )

                                            <p class="text-center mt-4">

                                                @foreach($data->pictures as $picture)

                                                <a href="{{ $picture->picture_url }}" target="blank"> Click to view</a>

                                                <img src="{{ $picture->picture_url }}" alt="" class="h-50 w-100">

                                                @endforeach
                                            </p>
                                            @else
                                            <p class="text-center mt-4">Not Uploaded</p>
                                            @endif

                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" id="identity" role="tabpanel">
                            <div class="card-body">
                                <div class="profiletimeline">

                                    <div class="p-3">
                                        <span style="float:right;">

                                            <form class="form-horizontal form-material" action="{{ url('users/'.$data->id.'/identity') }}" method="post">
                                                @csrf
                                        
                                                @if(@$data->identity->image)
                                                <div class="form-group">
                                                    <!-- <label class="col-sm-12">Status</label> -->
                                                    <div class="col-sm-12">
                                                        <select class="form-control form-control-line" name="status">
                                                            <option value="pending" {{ $data->identity->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                                            <option value="approved" {{ $data->identity->status == 'approved' ? 'selected' : '' }}>Approved</option>
                                                            <option value="rejected" {{ $data->identity->status == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                
                                                <div class="form-group">
                                                    <div class="col-sm-12">
                                                        <button class="btn btn-success">Update Identity</button>
                                                    </div>
                                                </div>
                                                @else
                                                <p class="text-center mt-4">Status not available</p>

                                                @endif
                                            </form>
                                        </span>
                                    </div>

                                    <div class="row">

                                        <div class="col-sm-4">
                                            @if( @$data->identity->image )

                                            <p class="alert alert-warning p-1">
                                                Status: {{ $data->identity->status}}
                                            </p>

                                            <p class="text-center mt-4">
                                                Identity
                                                <a href="{{ $data->identity->image_url }}" target="blank"> Click to view</a>
                                            </p>
                                            <img src="{{ $data->identity->image_url }}" alt="" class="h-50 w-100">

                                            @else
                                            <p class="text-center mt-4">Not Uploaded</p>
                                            @endif
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="setting" role="tabpanel">
                            <div class="card-body">
                                <form class="form-horizontal form-material" action="{{ url('users/' . $data->id ) }}" method="POST">
                                    @csrf
                                    @method('PATCH')
                                    <div class="form-group">
                                        <label class="col-sm-12">Status</label>
                                        <div class="col-sm-12">
                                            <select class="form-control form-control-line" name="status">
                                                <option value="0" {{ $data->status == '0' ? 'selected' : '' }}>Pending</option>
                                                <option value="1" {{ $data->status == '1' ? 'selected' : '' }}>Approved</option>
                                                <option value="2" {{ $data->status == '2' ? 'selected' : '' }}>Rejected</option>
                                                <option value="3" {{ $data->status == '3' ? 'selected' : '' }}>InActive</option>
                                                <option value="4" {{ $data->status == '3' ? 'selected' : '' }}>Blocked</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <button class="btn btn-success">Update Profile</button>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!-- Row -->
        <!-- ============================================================== -->
        <!-- End PAge Content -->
        <!-- ============================================================== -->
        
        <!-- Approved Modal -->
        <div class="modal fade" id="approved-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">User Approved</h5>
                    <form class="form-material form-horizontal" action="{{ url('users/'.$data->id.'/approve') }}"  method="post">
                    @csrf
                        
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>

                    <div class="modal-body">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Reason</label>
                                <textarea autocomplete="off" class="form-control" name="reason" rows="3" piaceholder="Enter your reason"  required>{{ @$data->reason }}</textarea>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <!-- <button type="button" class="btn btn-github" data-dismiss="modal">Close</button> -->
                        <button type="submit" class="btn btn-dribbble">Submit</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Rejected Modal -->

        <div class="modal fade" id="rejected-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">User Rejected</h5>
                        <form class="form-material form-horizontal" action="{{ url('users/'.$data->id.'/reject') }}"  method="post">
                        @csrf
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Reason</label>
                                <textarea autocomplete="off" class="form-control" required name="reason" rows="3" piaceholder="Enter your reason"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <!-- <button type="button" class="btn btn-github" data-dismiss="modal">Close</button> -->
                        <button type="submit" class="btn btn-dribbble">Submit</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Modal block Selfie -->
        <div class="modal" id="myModalselfie" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">Block Selfie</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <p>Are you sure, you want to <span id="block-status"></span> this selfie?</p>
                        <div class="alert" id="block-user-msg" style="display:none;"></div>
                    </div>

                    <div class="modal-footer">
                        <a href="javascript:;" class="btn btn-danger" id="modal-btn" data-status=0>
                            <i class="fa fa-spinner fa-spin icon-spinner" id="user-block-up-spin" style="display: none"></i>
                            <span id="user-block-up-text">Yes</span>
                        </a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                    </div>

                </div>
            </div>
        </div>
        <!-- End modal selfie -->

        <!-- Modal Identity -->
        <div class="modal" id="myModalIdentity" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">Block Identity</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure, you want to <span id="block-status"></span> this user?</p>
                        <div class="alert" id="block-user-msg" style="display:none;"></div>
                    </div>

                    <div class="modal-footer">
                        <a href="javascript:;" class="btn btn-danger" id="modal-btn" data-status=0>
                            <i class="fa fa-spinner fa-spin icon-spinner" id="user-block-up-spin" style="display: none"></i>
                            <span id="user-block-up-text">Yes</span>
                        </a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                    </div>

                </div>
            </div>
        </div>
        <!-- End modal idenity -->
    </div>
    <!-- ============================================================== -->
    <!-- End Container fluid  -->
    <!-- ============================================================== -->
</div>

@endsection
@push('script')
<script>
    $(document).ready(function() {
        // Selfie
        var block_btn

        $('body').on('click', '.block_user_selfie', function() {

            block_btn = $(this)

            if ($(this).data('block') == 'approved') {
                $('#block-status').text('block');
                $('#modal-btn').removeClass('btn-primary');
                $('#modal-btn').addClass('btn-danger');
            } else {
                $('#block-status').text('unblock');
                $('#modal-btn').removeClass('btn-danger');
                $('#modal-btn').addClass('btn-primary');
            }

            $('#modal-btn').data('status', $(this).data('block'));
            $('#modal-btn').data('user', $(this).data('user'));
            $('#user-name').text($(this).data('title'));
            $('#myModalselfie').modal('show');
        });

        $('#modal-btn').unbind('click').bind('click', function() {

            $('#user-block-up-spin').show();
            $('#user-block-up-text').hide();

            var status = $(this).data('status') === 'approved' ? 'rejected' : 'approved';
            const id = $(this).data("user");

            var request = $.ajax({
                url: `{{ url('users/${ id }/selfie') }}`,
                data: {
                    status
                },
                type: 'POST',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            request.done(function(data) {

                $('#user-block-up-spin').hide();
                $('#user-block-up-text').show();

                if (data.success === true) {
                    $('#block-user-msg').html(data.message).removeClass('alert-danger').addClass('alert-success').show().delay(2000).fadeOut(function() {
                        $(this).html('');
                        $(this).removeClass('alert-success');
                        $('#myModalselfie').modal('hide');
                        // swal(data.message, "", "success");
                        setTimeout(function() {
                            location.reload();
                        }, 1000);
                    });
                }
            });
        });

        // Identity
        var block_btn

        $('body').on('click', '.block-identity', function() {

            block_btn = $(this)

            if ($(this).data('block') == 1) {
                $('#block-status').text('block');
                $('#modal-btn').removeClass('btn-primary');
                $('#modal-btn').addClass('btn-danger');
            } else {
                $('#block-status').text('unblock');
                $('#modal-btn').removeClass('btn-danger');
                $('#modal-btn').addClass('btn-primary');
            }

            $('#modal-btn').data('status', $(this).data('block'));
            $('#modal-btn').data('user', $(this).data('user'));
            $('#user-name').text($(this).data('title'));
            $('#myModalIdentity').modal('show');
        });

        $('#modal-btn').unbind('click').bind('click', function() {

            $('#user-block-up-spin').show();
            $('#user-block-up-text').hide();

            var status = $(this).data('status') === 1 ? 3 : 1;
            const id = $(this).data("user");

            var request = $.ajax({
                url: `{{ url('users/${ id }/identity') }}`,
                data: {
                    status
                },
                type: 'POST',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            request.done(function(data) {

                $('#user-block-up-spin').hide();
                $('#user-block-up-text').show();

                if (data.success === true) {
                    $('#block-user-msg').html(data.message).removeClass('alert-danger').addClass('alert-success').show().delay(2000).fadeOut(function() {
                        $(this).html('');
                        $(this).removeClass('alert-success');
                        $('#myModalIdentity').modal('hide');
                        // swal(data.message, "", "success");
                        setTimeout(function() {
                            location.reload();
                        }, 1000);
                    });
                }
            });
        });

    });
</script>
@endpush