@extends('layouts.master')
@section('main-body')
<div class="container-fluid">
    <div class="page-header">
        <div class="row">
            <div class="col-sm-12">
                <h3>Users Profile</h3>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="/users">Users</a></li>
                    <li class="breadcrumb-item active"><a href="/details">Details</a></li>
                </ol>
                <span class="pull-right">
                    @if($loggedUser->can('update-users'))
                    <button type="button" class="btn btn-primary" id="detailsEditBtn" value="{{$user->id}}" onclick="userEdit(this)">Edit</button>
                    @endif
                    @if($loggedUser->can('delete-users'))
                    <button type="button" class="btn btn-danger" id="detailsDeleteBtn" value="{{$user->id}}" onclick="userDelete(this)">Delete</button>
                    @endif
                    <a href="{{url()->previous()}}">
                        <button class="btn btn-light">Back</button>
                    </a>
                </span>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="user-profile">
        <div class="row">
            <div class="col-xl-3 col-lg-12 col-md-5 xl-35">
                <div class="default-according style-1 faq-accordion job-accordion">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="p-0">
                                    <button class="btn btn-link ps-0" data-bs-toggle="collapse" data-bs-target="#collapseicon2" aria-expanded="true" aria-controls="collapseicon2">Account Information</button>
                                    </h5>
                                </div>
                                <div class="collapse show" id="collapseicon2" aria-labelledby="collapseicon2" data-parent="#accordion">
                                    <div class="card-body post-about">
                                        <ul>
                                            <li>
                                                <div class="icon"><i data-feather="user"></i></div>
                                                <div>
                                                    <h5>{!! $user->username !!}</h5>
                                                    <p>username</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="icon"><i data-feather="box"></i></div>
                                                <div>
                                                    <h5>{!! $user->role->role !!}</h5>
                                                    <p>User role</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="icon"><i data-feather="mail"></i></div>
                                                <div>
                                                    <h5>{!! $user->email !!}</h5>
                                                    <p>email</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="icon"><i data-feather="shield"></i></div>
                                                <div>
                                                    <h5>
                                                        @if($user->verified)
                                                            Yes
                                                        @else
                                                            No
                                                        @endif
                                                    </h5>
                                                    <p>Verified</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="icon"><i data-feather="circle"></i></div>
                                                <div>
                                                    <h5>{!! $user->status !!}</h5>
                                                    <p>User Status</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="icon"><i data-feather="clock"></i></div>
                                                <div>
                                                    <h5>{!! $user->created_at->format('Y-m-d') !!}</h5>
                                                    <p>joined date</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-9 col-lg-12 col-md-5 xl-35">
                <div class="default-according style-1 faq-accordion job-accordion">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="p-0">
                                        User Profile
                                    </h5>
                                </div>
                                <div class="card-body post-about">
                                    <div class="col-lg-6">
                                        <ul>
                                            <div class="icon"><i data-feather="user"></i> Personal Information</div>
                                            <li>
                                                <div>
                                                    <h5>First Name: <b>{!! $user->userProfile->first_name !!}</b></h5>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <h5>Middle Name: <b>{!! $user->userProfile->middle_name !!}</b></h5>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <h5>Last Name: <b>{!! $user->userProfile->last_name !!}</b></h5>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <h5>Gender: <b>{!! $user->userProfile->gender !!}</b></h5>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <h5>Birthday: <b>{!! $user->userProfile->birthday !!}</b></h5>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-lg-6">
                                        <ul>
                                            <div class="icon"><i data-feather="phone"></i>Contact Information</div>
                                            <li>
                                                <div>
                                                    <h5>Mobile Number: <b>{!! $user->userProfile->mobile_number !!}</b></h5>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-lg-6">
                                        <ul>
                                            <div class="icon"><i data-feather="map"></i>Address</div>
                                            <li>
                                                <div>
                                                    <h5>Current Address: <b>{!! $user->userProfile->current_address !!}</b></h5>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <h5>Brgy: <b>{!! $user->userProfile->brgy !!}</b></h5>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <h5>City: <b>{!! $user->userProfile->city !!}</b></h5>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <h5>State: <b>{!! $user->userProfile->state !!}</b></h5>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <h5>Country: <b>{!! $user->userProfile->country !!}</b></h5>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <h5>Zip Code: <b>{!! $user->userProfile->zip_code !!}</b></h5>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@if($loggedUser->can('delete-users'))
{!! Form::open(array('route'=>array('users.destroy',$user->id),'method'=>'DELETE','id'=>'user-remove-form')) !!}
{!! Form::close() !!}
@endif
@include('modals.confirmation')
@endsection
@section('page-script')

function userEdit(elem) {
    window.location.replace('/users/'+elem.value+'/edit');
}

function userDelete(elem) {
    let userId = elem.value;

    $('#confirmation-title').html("Delete");
    $('#confirmation-body').html("Are you sure you want to delete this user? This process cannot be undone." );

    $('#submit-btn').html('Delete');
    $('#submit-btn').removeClass('btn-primary');
    $('#submit-btn').addClass('btn-danger');
    $('#submit-btn').val(userId);

    $('#confirmationModal').modal('show');
}


function submitForm(elem) {
    let userId = elem.value;
    $('#user-remove-form').submit();
}

@include('notifications.index')
@endsection