@extends('layouts.admin.admin')
@section('title', 'Global Settings')
@section('content')
<main>
    <div class="container-fluid p-0">
        <div class="row g-0">
            @include('partials.header')
            @include('layouts.admin.sidebar')
                <section class="content-section col primary-bg-light p-xl-4 p-3">
                    <div class="bg-white rounded-3 shadow-sm p-3">
                        <div class="row">
                            <div class="col-12">
                                <div class="small fw-medium d-flex flex-wrap">System Settings<span><i
                                    class="bi bi-chevron-right"></i></span>Account Settings</div>
                                <hr class="mb-4">
                                <h5>Account Settings</h5>
                                 @if(session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <strong>Success!</strong> {{ session('success') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                                @endif
                                 @if(session('error'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <strong>Success!</strong> {{ session('error') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                                @endif
                                <form action="{{route('account.settings.update')}}" method="POST" class="mb-4" enctype="multipart/form-data" id="accountSettingsForm">
                                    @csrf
                                    @method('PUT')
                                    <div class="row g-2 gy-3">
                                        <div class="col-12">
                                            <label for="" class="form-label fw-semibold">Update your profile picture</label>
                                            <div class="avatar-upload">
                                                <div class="avatar-edit">
                                                    <input type='file' name="avatar_link" id="imageUpload" accept=".png, .jpg, .jpeg" disabled />
                                                    <label for="imageUpload"></label>
                                                </div>
                                                <div class="avatar-preview">
                                                    {{-- <div id="imagePreview" style="background-image: url('{{ asset($user->avatar_link ?? 'Assets/images/user-solid.svg') }}');"> --}}
                                                        @php
                                                            $avatar = $user->avatar_link ? asset($user->avatar_link) : asset('Assets/images/user-solid.svg');
                                                        @endphp

                                                        <div id="imagePreview" style="background-image: url('{{ $avatar }}');"></div>
                                            
                                                    {{-- </div> --}}
                                                 
                                                </div>
                                                 @if ($errors->has('avatar_link'))
                                                <span class="text-danger">{{ $errors->first('avatar_link') }}</span>
                                                 @endif
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6">
                                            <label for="inputFirstName" class="form-label fw-semibold">First Name<span class="text-red">*</span></label>
                                            <input type="text" class="form-control shadow-none" id="inputFirstName" placeholder="First Name" name="first_name" value="{{ optional($user)->first_name }}"disabled>
                                            @if ($errors->has('first_name'))
                                                <span class="text-danger">{{ $errors->first('first_name') }}</span>
                                            @endif
                                        </div>
                                        <div class="col-md-4 col-sm-6">
                                            <label for="inputMiddleName" class="form-label fw-semibold">Middle Name</label>
                                            <input type="text" class="form-control shadow-none" id="inputMiddleName" placeholder="Middle Name" name="middle_name" value="{{ optional($user)->middle_name }}" disabled>
                                            @if ($errors->has('middle_name'))
                                                <span class="text-danger">{{ $errors->first('middle_name') }}</span>
                                            @endif
                                        </div>
                                        <div class="col-md-4 col-sm-6">
                                            <label for="inputLastName" class="form-label fw-semibold">Last Name<span class="text-red">*</span></label>
                                            <input type="text" class="form-control shadow-none" id="inputLastName" placeholder="Last Name" name="last_name" value="{{ optional($user)->last_name }}" disabled>
                                            @if ($errors->has('last_name'))
                                                <span class="text-danger">{{ $errors->first('last_name') }}</span>
                                            @endif
                                        </div>
                                        {{-- <div class="col-md-4 col-sm-6">
                                            <label for="inputGender" class="form-label fw-semibold">Gender<span class="text-red">*</span></label>
                                            <select name="gender" id="inputGender" class="form-select shadow-none" disabled>
                                                <option value="">Select Gender</option>
                                                <option value="male" {{ old('gender', $user->userdetails->gender) == 'male' ? 'selected' : '' }}>Male</option>
                                                <option value="female" {{ old('gender', $user->userdetails->gender) == 'female' ? 'selected' : '' }}>Female</option>
                                                <option value="other" {{ old('gender', $user->userdetails->gender) == 'other' ? 'selected' : '' }}>Other</option>
                                            </select>
                                            @if ($errors->has('gender'))
                                                <span class="text-danger">{{ $errors->first('gender') }}</span>
                                            @endif
                                        </div> --}}
                                        <div class="col-md-4 col-sm-6">
                                            <label for="telCode" class="form-label fw-semibold">Phone<span class="text-red">*</span></label>
                                            <input type="tel" class="form-control shadow-none" id="telNumber" maxlength="15" placeholder="" name="phone" value="{{ optional(optional($user)->userdetails)->phone }}" disabled>
                                            @if ($errors->has('phone'))
                                                <span class="text-danger">{{ $errors->first('phone') }}</span>
                                            @endif
                                        </div>
                                        <div class="col-md-4 col-sm-6">
                                            <label for="inputEmail" class="form-label fw-semibold">Email<span class="text-red">*</span></label>
                                            <input type="text" class="form-control shadow-none cal-icon shadow-none" id="inputEmail" placeholder="xxxxxxxxxx@xxxx.xxx" name="email" value="{{ optional($user)->email }}" disabled>
                                            @if ($errors->has('email'))
                                                <span class="text-danger">{{ $errors->first('email') }}</span>
                                            @endif
                                        </div>
                                        <div class="col-12">
                                            <button type="button" id="editBtn" class="btn btn-type1 px-5 border-0 shadow-sm">Edit</button>
                                            <button type="submit" id="updateBtn" class="btn btn-type1 px-5 border-0 shadow-sm d-none">Save</button>
                                        </div>
                                    </div>
                                </form>
                                <form action="{{route('account.change-password')}}" method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <label for="inputEmail" class="form-label fw-semibold">Change Password<span class="text-red">*</span></label>
                                            <div class="d-flex flex-column gap-2">
                                                <div class="form-group mb-2">
                                                    <label for="inputCurrentPassword">Current Password</label>
                                                    <input type="password" id="inputCurrentPassword" class="form-control shadow-none rounded-3" name="current_password" value="{{old('current_password')}}" required>
                                                     @if ($errors->has('current_password'))
                                                        <span class="text-danger">{{ $errors->first('current_password') }}</span>
                                                    @endif
                                                </div>
                                                <div class="form-group mb-2">
                                                    <label for="inputUserPassword">New Password</label>
                                                    <input type="password" class="form-control shadow-none rounded-3" id="inputUserPassword"
                                                            placeholder="" name="password" value="{{old('password')}}"
                                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                                                            title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
                                                            required>
                                                    <div id="message" class="rounded-3 primary-bg-light">
                                                        <h6 class="fw-medium">Password must contain the following:</h6>
                                                        <ul class="ps-2">
                                                            <li id="letter" class="invalid">A <b>lowercase</b> letter (a-z)</li>
                                                            <li id="capital" class="invalid">An <b>Uppercase</b> letter (A-Z)</li>
                                                            <li id="number" class="invalid">A <b>number</b> (0-9)</li>
                                                            <li id="length" class="invalid">A minimum of <b>8</b> and a maximum of <b>12</b> characters.</li>
                                                            <li id="specialChar" class="invalid">A <b>special character</b> (! @ # $ % ^ & * ( ))</li>
                                                        </ul>
                                                    </div>
                                                     @if ($errors->has('password'))
                                                        <span class="text-danger">{{ $errors->first('password') }}</span>
                                                    @endif
                                                </div>
                                                <div class="form-group mb-2">
                                                    <label for="inputConfirmPassword">Confirm New Password</label>
                                                    <input type="password" id="inputConfirmPassword" class="form-control shadow-none rounded-3" name="password_confirmation" value="{{old('password_confirmation')}}" required>
                                                    @if ($errors->has('password_confirmation'))
                                                        <span class="text-danger">{{ $errors->first('password_confirmation') }}</span>
                                                    @endif
                                                </div>
                                                <button type="submit" class="btn btn-type1 border-0 shadow-sm">Save</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
             </section>
        </div>       
    </div>
  
</main>
@push('script')
 <script>
        var myInput = document.getElementById("inputUserPassword");
        var letter = document.getElementById("letter");
        var capital = document.getElementById("capital");
        var number = document.getElementById("number");
        var length = document.getElementById("length");
        var specialChar = document.getElementById("specialChar");

        // When the user clicks on the password field, show the message box
        myInput.onfocus = function () {
            document.getElementById("message").style.display = "block";
        }

        // When the user clicks outside of the password field, hide the message box
        myInput.onblur = function () {
            document.getElementById("message").style.display = "none";
        }

        // When the user starts to type something inside the password field
        myInput.onkeyup = function () {
            // Validate lowercase letters
            var lowerCaseLetters = /[a-z]/g;
            if (myInput.value.match(lowerCaseLetters)) {
                letter.classList.remove("invalid");
                letter.classList.add("valid");
            } else {
                letter.classList.remove("valid");
                letter.classList.add("invalid");
            }

            // Validate capital letters
            var upperCaseLetters = /[A-Z]/g;
            if (myInput.value.match(upperCaseLetters)) {
                capital.classList.remove("invalid");
                capital.classList.add("valid");
            } else {
                capital.classList.remove("valid");
                capital.classList.add("invalid");
            }

            // Validate numbers
            var numbers = /[0-9]/g;
            if (myInput.value.match(numbers)) {
                number.classList.remove("invalid");
                number.classList.add("valid");
            } else {
                number.classList.remove("valid");
                number.classList.add("invalid");
            }

            // Validate length
            if (myInput.value.length >= 8 && myInput.value.length <= 12) {
                length.classList.remove("invalid");
                length.classList.add("valid");
            } else {
                length.classList.remove("valid");
                length.classList.add("invalid");
            }

            // Validate Special characters
            const specialCharacters = /[!@#$%^&*(),.?":{}|<>]/;

            if (myInput.value.match(specialCharacters)) {
                specialChar.classList.remove("invalid");
                specialChar.classList.add("valid");
            } else {
                specialChar.classList.remove("valid");
                specialChar.classList.add("invalid");
            }
        }
    </script>
    <script>
        $(document).ready(function () {
    $("#editBtn").click(function () {
        $(this).parents("form").find(".avatar-edit > input[type=file]").prop("disabled", function (_, val) {
            return !val;
        });
        // $(this).next("#updateBtn").removeClass("d-none");
        $(this).addClass("d-none").next("#updateBtn").removeClass("d-none");
    });
});
    </script>
@endpush
@stop