@extends('org.layout.adminPanel')
@section('title', 'Profile')
@section('section', 'Profile')
@section('css')
    {{-- css --}}
    <style>
        .profile-container {
            position: relative;
            background-color: var(--space);
            border-radius: .6em;
            border: 1px solid var(--border-color);
            min-width: min-content;
            padding: 2em 1em;
            display: grid;
            grid-template-columns: 1fr;
            gap: 2em;
        }

        .profile-img-container {
            position: relative;
            width: 120px;
            justify-self: center;
        }

        .profile-img {
            position: relative;
            width: 120px;
            max-width: 100%;
            display: block;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            object-fit: cover;
            aspect-ratio: 1/1;
        }

        .profile-img-container::before {
            position: absolute;
            content: "";
            top: 55%;
            left: 50%;
            width: 95%;
            height: 95%;
            transform: translate(-50%, -50%);
            z-index: 0;
            border-radius: 50%;
            background-color: hsl(217, 95%, 63%, .3);
            filter: blur(12px);
        }

        [data-type="password"] {
            padding-right: 40px !important;
        }

        .profile-img-container:hover .edit-btn {
            scale: 1;
        }

        .edit-btn {
            position: absolute;
            bottom: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--space);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            padding: .4em;
            border: 1px solid var(--border-color);
            cursor: pointer;
            scale: .7;
            transition: scale .1s;
        }

        td {
            vertical-align: top;
            padding-block: .4em;
        }

        .bi-dot {
            font-size: 24px;
        }

        .label {
            border: 1px solid var(--border-color);
            border-radius: .6em;
            padding: .2em .4em;
        }
    </style>
@endsection
@section('content')
    @php
        $rolename = [
            App\Models\User::$SUPER_ADMIN => 'Admin',
            App\Models\User::$ORG_ADMIN => 'Organisation Admin',
            App\Models\User::$DIV_MANAGER => 'Division Manager',
            App\Models\User::$DEP_MANAGER => 'Department Manager',
            App\Models\User::$PROJECT_MANAGER => 'Project Manager',
            App\Models\User::$GOVE_TEAM => 'Governance Team',
            App\Models\User::$REVIEWER => 'Reviewer',
            App\Models\User::$GUEST => 'Guest',
        ];
        if (!empty(Session::get('err'))) {
            $err = Session::get('err');
        }
    @endphp
    {{-- content --}}
    <div class="container-fluid">
        <div class="container pb-5">
            <div class="content-wrapper-2 mx-auto profile-container">
                <div class="profile-img-container">
                    <a href="{{ !empty(Auth::user()->avatar) ? s3Url(AVATAR_PATH, Auth::user()->avatar) : asset(NOPROFILE) }}"
                        target="_blank">
                        <img src="{{ !empty(Auth::user()->avatar) ? s3Url(AVATAR_PATH, Auth::user()->avatar) : asset(NOPROFILE) }}"
                            class="profile-img">
                    </a>
                    {{-- <img src="https://picsum.photos/300/200" class="profile-img"> --}}
                    <label for="profileImg" class="edit-btn">
                        <i class="bi bi-pencil-fill"></i>
                    </label>
                    <form action="{{ route('org.user.profile.img.update', compact('subdomain')) }}" id="imgForm"
                        method="post" enctype="multipart/form-data">
                        @csrf
                        <input type="file" onchange="showPreLoader(),document.querySelector('#imgForm').submit()"
                            name="profile_img" {{-- accept="image/jpg,image/jpeg,image/png"  --}} class="d-none" id="profileImg">
                    </form>
                </div>
                @error('profile_img')
                    <div class="alert alert-danger m-0 mx-auto py-2" role="alert">
                        {{ $message }}
                    </div>
                @enderror
                <div class="info-container">
                    <table class="mx-auto w-100" style="max-width: 280px;">
                        <tr>
                            <td colspan="3" class="text-center">
                                <h2 class="mb-3">{{ Auth::user()->full_name }}</h2>
                                <span class="label">
                                    {{ $rolename[Session::get('role')] }}
                                </span>
                                <br>
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Email
                            </td>
                            <td class="px-2">:</td>
                            <td>
                                {{ Auth::user()->email }}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Roles
                            </td>
                            <td class="px-2">:</td>
                            <td>
                                @foreach ($userRole as $role)
                                    {{ $rolename[$role] }} <br>
                                @endforeach
                            </td>
                        </tr>
                        @if (!Helper::checkRole('GUEST'))
                            <tr>
                                <td>
                                    Password
                                </td>
                                <td class="px-2">:</td>
                                <td>
                                    <p class="m-0" style="margin-top: .23em !important;">*******</p>
                                    @if (Auth::user()->password_changed_at != null)
                                        <p class="m-0" style="line-height: 1rem; white-space:nowrap;font-size:0.9rem;">
                                            Last changed
                                            {{ Carbon\Carbon::parse(Auth::user()->password_changed_at)->diffForHumans() }}
                                        </p>
                                    @elseif (Auth::user()->accounts->where('org_id', Session::get('org_id'))->value('password_changed_at') != null)
                                        <p class="m-0" style="line-height: 1rem; white-space:nowrap;font-size:0.9rem;">
                                            Last changed
                                            {{ Carbon\Carbon::parse(Auth::user()->accounts->where('org_id', Session::get('org_id'))->value('password_changed_at'))->diffForHumans() }}
                                        </p>
                                    @endif
                                </td>
                            </tr>
                        @endif
                        <tr>
                            <td colspan="3">
                                <div class="d-flex justify-content-center flex-wrap mt-3 gap-2">
                                    @if (!Helper::checkRole('GUEST'))
                                        <button class="button btn-primary flex-fill" onclick="showPasswordChange()">Change
                                            password</button>
                                    @endif
                                    <button class="button btn-secondary flex-fill" onclick="showEditModal()">Edit</button>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- change password --}}
    <div class="modal fade" id="passChangeModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
            <div class="modal-content">
                <div class="modal-body">

                    <form action="{{ route('org.user.password.change', compact('subdomain')) }}" method="post">
                        @csrf
                        <center>
                            <i class="bi bi-key-fill" style="font-size: 48px;"></i>
                        </center>
                        <h2 class="text-center">Change passowrd</h2>
                        <center>
                            <p class="m-0">Please use a strong password<br>
                                press <i class="bi bi-info-circle"></i> for more info
                            </p>
                        </center>
                        <br>
                        <label for="" class="mb-1">Current password</label>
                        <div class="inputWrapper">
                            <div class="passEye">
                                <input type="checkbox" tabindex="-1">
                                <i class="bi bi-eye-slash-fill no-event"></i>
                                <i class="bi bi-eye-fill no-event"></i>
                            </div>
                            <input type="password" name="current_password" class="form-control" data-type="password"
                                id="">
                        </div>
                        @if (isset($err['current_pass']))
                            <div class="alert alert-danger p-0 px-2" role="alert">
                                {{ $err['current_pass'] }}
                            </div>
                        @endif
                        {{-- <center>
                            <hr style="max-width: 180px;">
                        </center> --}}
                        <label for="" class="mb-1">New password <i class="bi bi-info-circle" data-toggle="tooltip"
                                data-placement="right"
                                title="Passwords must be minimum 12 characters, at least one letter, one upper and one lower case, one symbol and one number"></i></label>
                        <div class="inputWrapper">
                            <div class="passEye">
                                <input type="checkbox" tabindex="-1">
                                <i class="bi bi-eye-slash-fill no-event"></i>
                                <i class="bi bi-eye-fill no-event"></i>
                            </div>
                            <input type="password" name="new_password" class="form-control mb-2" data-type="password">
                        </div>
                        @error('new_password')
                            @php
                                $err = ['type' => 'password'];
                            @endphp
                            <div class="alert alert-danger p-0 px-2" role="alert">
                                {{-- {{ $message }} --}}
                                The new password does not meet security criteria.
                                <br>press<i class="bi bi-info-circle"></i> for more info
                            </div>
                        @enderror
                        <label for="" class="mb-1">Confirm password</label>
                        <div class="inputWrapper">
                            <div class="passEye">
                                <input type="checkbox" tabindex="-1">
                                <i class="bi bi-eye-slash-fill no-event"></i>
                                <i class="bi bi-eye-fill no-event"></i>
                            </div>
                            <input type="password" name="confirm_password" class="form-control mb-2"
                                data-type="password">
                        </div>
                        @if (isset($err['confirm_pass']))
                            <div class="alert alert-danger p-0 px-2" role="alert">
                                {{ $err['confirm_pass'] }}
                            </div>
                        @endif

                        <br>
                        <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap mx-auto"
                            style="max-width: 350px;">
                            <input type="submit" class="button btn-primary flex-grow-1" style="width"
                                id="passChange-button" value="Change">
                            <button type="button" class="button btn-secondary flex-grow-1"
                                data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
            <div class="modal-content">
                <div class="modal-body">

                    <form action="{{ route('org.user.profile.update', compact('subdomain')) }}" method="post">
                        @csrf
                        <center>
                            <i class="bi bi-person-fill" style="font-size: 48px;"></i>
                        </center>
                        <h2 class="text-center">Update details</h2>
                        <br>

                        <label for="" class="mb-1">First name</label>
                        <input type="text" name="firstname" class="form-control mb-2"
                            value="{{ old('firstname') ?? Auth::user()->first_name }}">
                        @error('firstname')
                            @php
                                $err = ['type' => 'edit'];
                            @endphp
                            <div class="alert alert-danger p-0 px-2" role="alert">
                                {{ $message }}
                            </div>
                        @enderror
                        <label for="" class="mb-1">Last name</label>
                        <input type="text" name="lastname" class="form-control mb-2"
                            value="{{ old('lastname') ?? Auth::user()->last_name }}">
                        @error('lastname')
                            @php
                                $err = ['type' => 'edit'];
                            @endphp
                            <div class="alert alert-danger p-0 px-2" role="alert">
                                {{ $message }}
                            </div>
                        @enderror

                        {{-- <label for="" class="mb-1">Email</label>
                        <input type="email" name="email" class="form-control mb-2" value="{{Auth::user()->email}}"> --}}

                        <br>
                        <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap mx-auto"
                            style="max-width: 350px;">
                            <input type="submit" class="button btn-primary flex-grow-1" style="width" value="Update">
                            <button type="button" class="button btn-secondary flex-grow-1"
                                data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')
    {{-- js --}}
    <script>
        // password show hide
        const passEye = document.querySelectorAll(`.passEye [type='checkbox']`);
        passEye.forEach(eye => {
            eye.addEventListener("change", e => {
                let passField = eye.parentElement.parentElement.querySelector(`[data-type="password"]`);
                passField.type = (eye.checked) ? "text" : "password";
            });
        });
    </script>
    <script>
        const passChangeModal = new bootstrap.Modal($("#passChangeModal"));
        const editModal = new bootstrap.Modal($("#editModal"));

        function showPasswordChange() {
            passChangeModal.toggle();
        }

        function showEditModal() {
            editModal.toggle();
        }
    </script>
    @if (isset($err['type']) && $err['type'] == 'password')
        <script>
            showPasswordChange();
        </script>
    @endif
    @if (isset($err['type']) && $err['type'] == 'edit')
        <script>
            showEditModal();
        </script>
    @endif
@endsection