@extends('layouts.base')
{{-- @section('heading')
    {{ __('User Profile') }}
@endsection --}}
@section('info')
    {{ __('User Profile') }}
@endsection
@section('focus_action')
    <form action="{{ route("settings.update", ['setting' => $setting->id, 'user' => $user->id]) }}" method="get">
        @csrf
        <button type="submit" class="text-sm text-blue-500 hover:text-blue-700 hover:underline">
            SAVE CHANGES +
        </button>
    </form>
@endsection
@section('body')
    <div>
        <div class="p-2">
            <div class="p-4">
                <div class="text-lg p-3 bg-gray-300 rounded-lg mb-3">
                    <p>
                        {{ $user->name }}
                    </p>
                    <p class="text-sm">
                        {{ $user->email }}
                    </p>
                </div>
                <form action="{{ route("settings.update", ['setting' => $setting->id, 'user' => $user->id]) }}" method="POST">
                    
                    @csrf
                    @method('PUT')

                    <div>
                        <div class="p-2 pb-0 font-semibold text-gray-400 italic">
                            Old Password
                        </div>
                        <input type="password" name="old_password" id="old_password" class="input mt-2 mr-3 rounded-lg" placeholder="Old Password">
                        @error('old_password')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div>
                        <div class="p-2 pb-0 font-semibold text-gray-400 italic">
                            New Password
                        </div>

                        <input type="password" name="new_password" id="new_password" class="input mt-2 mr-3 rounded-lg" placeholder="Enter new password">
                        <input type="password" name="new_password_confirmation" id="new_password_confirmation" class="input mt-2 mr-3 rounded-lg" placeholder="Confirm new password">

                        @error('password_confirmation')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                        @error('new_password_confirmation')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div>
                        {{-- <div class="p-2 pb-0 font-semibold text-gray-400 italic">
                            Reason For Leave
                        </div> --}}
                        <div class="p-2 py-4">
                            <input type="checkbox" @checked($setting->daily_logging_email_reminder ?? false) name="receive_logging_reminder" id="receive_logging_reminder" class="input mr-3 text-purple-600 form-checkbox focus:border-purple-700 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray rounded-md" placeholder="">
                            <div class="inline-block">
                                <label for="receive_logging_reminder" class="inline_">
                                    I want to receive logging reminder emails
                                </label>
                            </div>
                        </div>
                    </div>
                    <div>
                        <button class=""><input class="input flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple" type="submit" value="SUBMIT" /></button>
                    </div>
                </form>
            </div>
        </div>

    </div>
@endsection
    <script>
        function forceAction() {
            var elements = document.getElementsByClassName('forceable');
            for (var i = 0; i < elements.length; i++) {
                elements[i].click();
                elements[i].click();
                //sets and unsets the check box back to defadivt value, so as to force the compile function from the elements
            }
        }
        window.onload = function() {
            forceAction();
            // console.log('forceAction')
        };
        function compileInput(class_name, value_holder) {
            var inputValues = [];
            var inputs = document.getElementsByClassName(class_name);
            for (var i = 0; i < inputs.length; i++) {

                const input = {
                    id: inputs[i].id,
                    value: inputs[i].checked
                }
                inputValues.push(input);
            }
            document.getElementById(value_holder).value = JSON.stringify(inputValues);
            // console.log(inputValues);
            console.log(document.getElementById(value_holder).value);
        }
    </script>