@extends('layouts.member-app')

@push('head-script')
<style>
    .profile-image:hover .overlay {
        opacity: 1;
    }

    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0px;
        right: 0;
        height: 90%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        background-color: #FFFFFF;
    }

    .text {
        color: white;
        font-size: 20px;
        position: absolute;
        top: 63%;
        left: 25%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .message-item {
        margin-bottom: 25px;
        margin-left: 40px;
        position: relative;
    }

    .message-item .message-inner {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 3px;
        padding: 10px;
        position: relative;
    }

    .message-item .message-inner:before {
        border-right: 10px solid #ddd;
        border-style: solid;
        border-width: 10px;
        color: rgba(0, 0, 0, 0);
        content: "";
        display: block;
        height: 0;
        position: absolute;
        left: -20px;
        top: 6px;
        width: 0;
    }

    .message-item .message-inner:after {
        border-right: 10px solid #fff;
        border-style: solid;
        border-width: 10px;
        color: rgba(0, 0, 0, 0);
        content: "";
        display: block;
        height: 0;
        position: absolute;
        left: -18px;
        top: 6px;
        width: 0;
    }

    .message-item:before {
        background: #fff;
        border-radius: 2px;
        bottom: -30px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        content: "";
        height: 100%;
        left: -30px;
        position: absolute;
        width: 3px;
    }

    .message-item:after {
        background: #fff;
        border: 2px solid #ccc;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        content: "";
        height: 15px;
        left: -36px;
        position: absolute;
        top: 10px;
        width: 15px;
    }

    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }

    .message-item .message-head {
        border-bottom: 1px solid #eee;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .message-item .message-head .avatar {
        margin-right: 20px;
    }

    .message-item .message-head .user-detail {
        overflow: hidden;
    }

    .message-item .message-head .user-detail h5 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
    }

    .message-item .message-head .post-meta {
        float: left;
        padding: 0 15px 0 0;
    }

    .message-item .message-head .post-meta>div {
        color: #333;
        font-weight: bold;
        text-align: right;
    }

    .post-meta>div {
        color: #777;
        font-size: 12px;
        line-height: 22px;
    }

    .message-item .message-head .post-meta>div {
        color: #333;
        font-weight: bold;
        text-align: right;
    }

    .post-meta>div {
        color: #777;
        font-size: 12px;
        line-height: 22px;
    }

    img {
        min-height: 40px;
        max-height: 40px;
    }
</style>


@endpush

@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-6 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> Detail Resident</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-6 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('member.dashboard') }}">@lang('app.menu.home')</a></li>
            <li><a href="{{ route('member.clients.index') }}">{{ __($pageTitle) }}</a></li>
            <li class="active">@lang('app.menu.projects')</li>
        </ol>
    </div>

    <!-- /.breadcrumb -->
</div>
@endsection


@section('content')

<div class="row">


    <div class="col-xs-12">
        <div class="white-box">

            <div class="row m-t-20">
                <div class="col-xs-12">
                    <div class="panel">
                        <div class="panel-wrapper collapse in">
                            <div class="panel-body b-all border-radius">
                                <div class="row">

                                    <div class="col-md-5">
                                        <div class="row">
                                            <div class="col-xs-3 profile-image">
                                                <img src="https://via.placeholder.com/75x75.png?text=Profile">                                                <div class="overlay">
                                                    <div class="text">
                                                        <a href="#modal_change_foto" role="button" data-toggle="modal"
                                                            title="change photo">
                                                            <i class="fa fa-camera fa-2x" style="margin-right:10px"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-9">
                                                <p>
                                                    <span class="font-medium text-info font-semi-bold">{{
                                                        ucwords($client->name) }}</span>
                                                    <br>

                                                    <!--@if (!empty($client->client_details) && $client->client_details->company_name != '')-->
                                                    <span class="text-muted">tes</span>
                                                    <!--@endif-->
                                                </p>

                                                {{-- <p class="font-12">
                                                    last login
                                                </p> --}}

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

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

        </div>
    </div>

    <div class="col-xs-12">
        <div class="col-xs-12">
            <div class="white-box">
                <div class="row">
                    <div class="col-md-4 col-xs-6 b-r"> <strong>@lang('modules.employees.fullName')</strong> <br>
                        <p class="text-muted">{{ $client->name }}</p>

                    </div>
                    <div class="col-md-3 col-xs-6 b-r"> <strong>@lang('app.email')</strong> <br>
                        <p class="text-muted">{{ $client->email }}</p>
                    </div>
                    <div class="col-md-3 col-xs-6 b-r"> <strong>Password</strong> <br>
                        <p class="text-muted">{{$client->ppassword}}</p>
                    </div>
                    <div class="col-md-2 col-xs-6 "> <strong>@lang('app.mobile')</strong> <br>
                        <p class="text-muted">{{$client->mobile}}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-xs-6 b-r"> <strong>Last Login</strong> <br>
                        <p class="text-muted">{{ $client->last_login }}</p>

                    </div>
                    <div class="col-md-3 col-xs-6 b-r"> <strong>Gender</strong> <br>
                        <p class="text-muted">{{ $client->gender }}</p>
                    </div>
                    <div class="col-md-3 col-xs-6 b-r"> <strong>Family Relationship</strong> <br>
                        <p class="text-muted">{{$client->family_relationship}}</p>
                    </div>
                    <div class="col-md-2 col-xs-6 "> <strong>Agree TNC</strong> <br>
                        <p class="text-muted">
                                                    </p>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<div class="modal fade" id="modal_change_foto" tabindex="-1" role="dialog" aria-labelledby="modal_change_foto"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Upload Foto</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!!
            Form::open(['id'=>'UpdateProfile','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
            !!}
            <div class="modal-body">
                <div class="row">
                    <input type="hidden" name="id" id="edit_id">
                    <div class="col-md-12">
                        <label>Photo Profile</label>
                        <div class="form-group">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                    <img src="http://via.placeholder.com/200x150.png?text=Profile" alt="" />
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"
                                    style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <span class="btn btn-info btn-file">
                                        <span class="fileinput-new"> @lang('app.selectImage') </span>
                                        <span class="fileinput-exists"> @lang('app.change') </span>
                                        <input type="file" id="att_othher" name="profile"> </span>
                                    <a href="javascript:;" class="btn btn-danger fileinput-exists"
                                        data-dismiss="fileinput"> @lang('app.remove') </a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!-- .row -->

@endsection
@push('footer-script')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $('#UpdateProfile').on('submit', function (e) {
        $('#modal_change_foto').modal('hide');
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '/admin/clients/update_profile/' + id,
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.status == 'success') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: data.message,
                        allowOutsideClick: false
                    }).then((result) => {
                        window.location.reload();
                    })
                }
            },
            error: function (data) {

            }
        }, 'json');
    });
</script>
@endpush