@extends('front.layouts.app')
@section('content')

<!-- START CONTENT BODY  -->
<div class="my-account-body">
    <section class="title-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-sm-6">
                    <h2>{!! @$title !!}</h2>
                </div>
            </div>
        </div>
    </section>
    <section class="user-info-sec">
        <div class="container">
            <div class="user-info-view">
                <div class="user-info-col">
                    <div class="user-view">
                        <img src="{!! $user->avatar_url !!}" class="user" alt="{!! $user->name !!}">
                    </div>
                    <h6>({!! $user->profile_type !!})</h6>
                    <h3>{!! $user->name !!}</h3>

                    @if($user->dob)
                    <p>
                        <i class="fa-solid fa-cake-candles"></i>
                        <strong>{!! $user->dob->format(config('constants.DISPLAY_DATE_FORMAT')) !!}</strong>
                        <span>({!! $user->dob->diffInYears(\Carbon\Carbon::now()) !!}y old)</span>
                    </p>
                    @endif

                    @if($user->email)
                    <p> <i class="fa-solid fa-envelope"></i>{!! $user->email !!}</p>
                    @endif

                    @if($user->phone)
                    <p>
                        <i class="fa-solid fa-phone"></i>
                        <strong>{!! $user->phone_code." ".$user->phone !!}</strong>
                    </p>
                    @endif

                    @if($user->full_address)
                    <p>
                        <i class="fa-solid fa-location-dot"></i>
                        {!! $user->full_address !!}
                    </p>
                    @endif

                    <div class="btn-row">
                        @if($user->id == auth('web')->user()->id)
                        <button type="button" class="btn btn-theme-blue" onclick="javascript:window.location.href='{!! route('myaccount.edit') !!}'">Edit Profile</button>
                        <button type="button" class="btn change-pass-btn" data-bs-toggle="offcanvas" data-bs-target="#changePassOffcanvas" aria-controls="offcanvasRight" id="btnChangePassword">
                            Change Password?
                        </button>
                        @else
                        <button type="button" class="btn btn-theme-blue" onclick="javascript:window.location.href='{!! route('myprofiles.edit',$user->id) !!}'">Edit Profile</button>
                        @endif
                    </div>
                </div>
                <div class="user-details-col">
                    <div class="row">
                        <div class="col-12">
                            <h3 class="title">Details Information</h3>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>Gender</label>
                                <p>{!! $user->gender ?? "-" !!}</p>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>Relationship</label>
                                <p>{!! $user->relationship ?? "-" !!}</p>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>Marital Status</label>
                                <p>{!! $user->marital_status ?? "-" !!}</p>
                            </div>
                        </div>
                        <!-- <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>Allergies</label>
                                <p>{!! $user->allergies ?? "-" !!}</p>
                            </div>
                        </div> -->
                        <!-- <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>Last Attended Date</label>
                                <p>{!! $user->last_attended_at ? $user->last_attended_at->format(config('constants.DISPLAY_DATE_FORMAT')) : "-" !!}</p>
                            </div>
                        </div> -->
                        <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>Baptism Date</label>
                                <p>{!! $user->baptized_at ? $user->baptized_at->format(config('constants.DISPLAY_DATE_FORMAT')) : "-" !!}</p>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>Membership Date</label>
                                <p>{!! $user->membership_at ? $user->membership_at->format(config('constants.DISPLAY_DATE_FORMAT')) : "-" !!}</p>
                            </div>
                        </div>
                        <!-- <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>Elexio Created Date</label>
                                <p>{!! $user->elexio_created_at ? $user->elexio_created_at->format(config('constants.DISPLAY_DATE_FORMAT')) : "-" !!}</p>
                            </div>
                        </div> -->
                        <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>Baptized at Meck</label>
                                <p>{!! $user->baptized_here ?? "-" !!}</p>
                            </div>
                        </div>
                        <!-- <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>Heard About Us From</label>
                                <p>{!! ($user->heard_about_us_from != "") ? $user->heard_about_us_from : "-" !!}</p>
                            </div>
                        </div> -->
                        <!-- <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>All Family Members</label>
                                <p>YES</p>
                            </div>
                        </div>
                        <div class="col-lg-12 mb-4">
                            <div class="ui-view border-0 mb-1">
                                <label>Groups Part of</label>
                            </div>
                            <div class="ui-view-gray">
                                <div class="row">
                                    <div class="col-lg-6 col-md-12 col-sm-6 mb-3 mb-lg-0">
                                        <div class="ui-view" style="border-width:2px;border-color:#E0E0E0;">
                                            <label>Visible Groups</label>
                                        </div>
                                        <ol>
                                                <li>Groups A</li>
                                                <li>Groups B</li>
                                                <li>Groups C</li>
                                                <li>Groups D</li>
                                                <li>Groups E</li>
                                            </ol>
                                    </div>
                                    <div class="col-lg-6 col-md-12 col-sm-6">
                                        <div class="ui-view" style="border-width:2px;border-color:#E0E0E0;">
                                            <label>Invisible Groups</label>
                                        </div>
                                        <ol>
                                            <li>Groups A</li>
                                            <li>Groups B</li>
                                            <li>Groups C</li>
                                            <li>Groups D</li>
                                            <li>Groups E</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="ui-view">
                                <label>Personal Notes</label>
                                <p>
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="ui-view">
                                <label>Chiled Check-In Notes</label>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>TimeLine History</label>
                                <p>Lorem Ipsum</p>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>Giving History/Info</label>
                                <p>Lorem Ipsum</p>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-6">
                            <div class="ui-view">
                                <label>What Meck Communicotions they are Opted-In for</label>
                                <p>Lorem Ipsum</p>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- END CONTENT BODY  -->
@if($user->id == auth('web')->user()->id)
<!-- START CHANGE PASSWORD POPUP -->
<div class="offcanvas offcanvas-end accounts-offcanvas" tabindex="-1" id="changePassOffcanvas" aria-labelledby="changePasswordLabel">
    <div class="offcanvas-header">
        <h5 id="changePasswordLabel" class="mb-0" style="opacity:0;">&nbsp;</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <h5 class="title">Change Password</h5>
        <p class="title-para">Please enter your information in fields below.</p>
        <form id="frmChangePassword" name="frmChangePassword" action="{!! route('changepassword') !!}" method="POST" class="myaccount-form row" enctype="multipart/form-data">
            @csrf
            <div class="col-md-12 mb-4">
                <label class="form-label" for="oldPass">Old Password</label>
                <input type="password" class="form-control" id="current_password" name="current_password" placeholder="Enter Current Password" />
                @error('current_password')
                <span class="invalid-feedback" role="alert">
                    <strong>{!! $message !!}</strong>
                </span>
                @enderror
            </div>
            <div class="col-md-12 mb-4">
                <label class="form-label" for="newPass">New Password</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Enter New Password" />
                @error('password')
                <span class="invalid-feedback" role="alert">
                    <strong>{!! $message !!}</strong>
                </span>
                @enderror
            </div>
            <div class="col-md-12 mb-4">
                <label class="form-label" for="confPass">Confirm Password</label>
                <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Enter Confirm Password">
                @error('password_confirmation')
                <span class="invalid-feedback" role="alert">
                    <strong>{!! $message !!}</strong>
                </span>
                @enderror
            </div>
            <div class="col-md-12 text-center mt-4">
                <button type="submit" class="btn btn-theme-blue">Save Changes</button>
            </div>
        </form>
    </div>
</div>
<!-- END CHANGE PASSWORD POPUP -->
@endif

@endsection

@section('js')
@stack('js')
<script src="{!! asset('assets/frontend/js/pages/auth.js') !!}"></script>
@endsection