@extends('backend.layouts.app')
@section('content')
    <style>
        .dot {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            display: inline-block;
        }

        .read {
            background-color : #086008;
        }

        .unread {
            background-color : #acadaf;
        }
    </style>
    <div class="container-fluid">
        <div class="row" style="margin-top: 2%;">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col-2">
                                <h3 class="mb-0">My Profile</h3>
                            </div>
                        </div>
                    </div>
                    <div class="card-header border-0 ml-3">
                        <div class="row align-items-center">
                            <ul class="nav nav-pills" id="myProfileTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-item nav-link active" id="profile-access-tab" data-toggle="tab" href="#profile_access" role="tab">Profile & Access</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-item nav-link" id="notification-tab" data-toggle="tab" href="#notification" role="tab">Notification</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="tab-content" id="myProfileTab">
                    <div class="tab-pane fade show active" id="profile_access" role="tabpanel" aria-labelledby="profile-access-tab">
                        <div class="row">
                            <div class="col-5">
                                <div class="card shadow">
                                    <div class="card-body">
                                        <form class="update-user" id="update-user" role="form" >
                                            <div class="container">
                                                <div class="form-group">
                                                    <label class="form-control-label" for="name">Photo</label><br>
                                                    @if($user->image != '')
                                                        <img src="{{ asset('/uploads/photo/'.$user->image) }}" id="previewImage" style="width: 100%; object-fit:contain"/>
                                                    @else
                                                        <img src="https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png?w=640" id="previewImage" style="width: 100%; object-fit:contain"/>
                                                    @endif
                                                    
                                                    <input type="file" class="form-control form-control-md" name="profile_photo" id="profile-photo" autofocus onchange="loadFile(event)">
                                                </div>

                                                <div class="form-group">
                                                    <label>First Name</label>
                                                    <input type="text" class="form-control form-control-sm" id="first-name" name="first_name" value="{{ $user->first_name }}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label>Last Name</label>
                                                    <input type="text" class="form-control form-control-sm" id="last-name" name="last_name" value="{{ $user->last_name }}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label>Job Description</label>
                                                    <input type="text" class="form-control form-control-sm"  name="job_description" value="{{ $user->job_description }}">
                                                </div>

                                                <div class="form-group">
                                                    <label>Email Address</label>
                                                    <input type="email" class="form-control form-control-sm" id="email_add"  name="email_add" value="{{ $user->email }}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label>Contact Number (Optional)</label>
                                                    <input type="number" class="form-control form-control-sm"  name="mobile_number" value="{{ $user->mobile_number }}">
                                                </div>
                                                <div class="row">
                                                    <div class="col-7">
                                                        <input type="password" class="form-control form-control-sm"  name="password" value="{{ $user->password }}" disabled>
                                                    </div>
                                                    <div class="col-5">
                                                    <button type="button" class="btn btn-success btn-sm" id="btn-change-password-user">Change Password</button>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="container mt-5 ml-3 mb-5">
                                                <div class="row">
                                                    <div class="col">
                                                        <button type="button" class="btn btn-success btn-sm" id="btn-update-user">Update Profile</button>
                                                    </div>

                                                    @if($user->fb_pages != '[]')
                                                        <div class="col">
                                                            <button type="button" class="btn btn-danger btn-sm" id="btn-unlink-fb" data-user-id="{{$user->id}}" data-user-fbid="{{$user->fbid}}">Unlink Facebook</button>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>

                                        </form>

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

                            <div class="col-7">
                                <div class="card shadow">
                                    <div class="card-body">
                                        <label for=""><b>Access Rights</b></label>
                                        <div class="container-fluid">

                                            <div class="form-group">
                                                <label for="">User Type : {{ $user->user_type->name }}</label>
                                            </div>

                                            <div class="form-group">
                                                <label for="">Review Access Rights</label>
                                                <div class="overflow-auto" style="min-height:550px;overflow-y: scroll;">
                                                    @foreach($user->userLevel as $user_level)
                                                        @if($user_level->user_model->parent == 0)
                                                            <div class="custom-control custom-checkbox my-1 ml-2">
                                                                <input type="checkbox" class="custom-control-input parent-check" checked="" disabled="">
                                                                <label class="custom-control-label">{{ $user_level->user_model->name }}</label>
                                                            </div>
                                                        @endif

                                                        @foreach($user_level->user_model->has_childs($user_level->user_model->id) as $child_tab)
                                                            <div class="custom-control custom-checkbox my-1 ml-4">
                                                                <input type="checkbox" class="custom-control-input parent-check" checked="" disabled="">
                                                                <label class="custom-control-label">{{ $child_tab->name }}</label>
                                                            </div>

                                                            @foreach($user_level->user_model->has_subtabs($child_tab->parent, $child_tab->id) as $sub_child_tab)
                                                                @if($user_level->checkUserLevel($sub_child_tab->id, $user->id))
                                                                    <div class="custom-control custom-checkbox my-1 ml-5">
                                                                        <input type="checkbox" class="custom-control-input parent-check" checked="" disabled="">
                                                                        <label class="custom-control-label">{{ $sub_child_tab->name }}</label>
                                                                    </div>
                                                                @endif
                                                            @endforeach
                                                        @endforeach
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="notification" role="tabpanel" aria-labelledby="notification-tab">
                        <div class="row">
                            <div class="col-12">
                                <div class="card shadow">
                                    <div class="card-header">
                                        <div class="row">
                                            <div class="col-10">
                                                <h3 class="mb-0">Notification</h3>
                                            </div>
                                            <div class="col-2 float-right">
                                                <button type="button" class="btn btn-success btn-sm" id="btn-update-user">Mark all as read</button>
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item"><span class="dot read"></span> Test Message 1</li>
                                        <li class="list-group-item"><span class="dot unread"></span> Test Message 2</li>
                                        <li class="list-group-item"><span class="dot unread"></span> Test Message 3</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('backend.my-account.my-profile.update-password')
@endsection
@section('after-scripts')
    <script src="{{ asset('js/my-account/my-profile/index.js') }}" type="text/javascript"></script>
@endsection