@extends('layouts.auth')

@section('title', 'Forgot Password')


@section('content')

<div class="row">
    @if(domain($_SERVER['HTTP_HOST']) !== '')
        @if(tenantSetting($_SERVER['HTTP_HOST']) !== '')
            <div class="col-xl-5 col-md-5 d-none d-xl-block p-0 vh-100 bg-image-cover bg-no-repeat" style="background-image: url({{tenantSetting($_SERVER['HTTP_HOST'])->cover_path ? tenantSetting($_SERVER['HTTP_HOST'])->cover_path : asset('assets/images/community_cover.png')}});"></div>
        @else
            <div class="col-xl-5 col-md-5 d-none d-xl-block p-0 vh-100 bg-image-cover bg-no-repeat" style="background-image: url({{asset('assets/images/community_cover.png')}});"></div>
        @endif
    @else
        <div class="col-xl-5 col-md-5 d-none d-xl-block p-0 vh-100 bg-image-cover bg-no-repeat" style="background-image: url({{asset('assets/images/login-bg-2.jpg')}});"></div>
    @endif
    <div class="col-xl-7 col-md-7 align-items-center d-flex bg-white rounded-3 overflow-y-auto">
        <div class="card shadow-none border-0 ms-auto me-auto login-card">
            <a href="/" class="text-center mb-4">
                <span class="text-center fredoka-font ls-3 fw-600 text-current font-xl logo-text mb-0">
                    @if(domain($_SERVER['HTTP_HOST']) !== '')
                        @if(tenantSetting($_SERVER['HTTP_HOST']) !== '')
                            @if(tenantSetting($_SERVER['HTTP_HOST'])->logo_path !== null)
                                <img src="{{tenantSetting($_SERVER['HTTP_HOST'])->logo_path}}"  style="width: {{tenantSetting($_SERVER['HTTP_HOST'])->logo_width .'px' ?? 'inherit'}}; height: {{tenantSetting($_SERVER['HTTP_HOST'])->logo_height .'px' ?? '70px'}};" alt="{{domain($_SERVER['HTTP_HOST'])->company_name}}">
                            @else
                                <h5 class="mt-2">{{domain($_SERVER['HTTP_HOST'])->company_name}}</h5>
                            @endif
                        @else
                            <h5>Logo</h5>
                            <h5>{{domain($_SERVER['HTTP_HOST'])->company_name}}</h5>
                        @endif
                    @else
                        <img src="{{asset('assets/main/images/tribearc_socialite-logo.png')}}" style="max-width:280px;" class="navbar-brand-img" alt="">
                    @endif
                </span>
            </a>
            <div class="rounded-0 text-left signin" id="sign-in">
                <h5 class="fw-700 mb-4">Reset password</h5>
                <form method="POST" action="{{ route('password.reset.post') }}" class="login-form">
                    {{ csrf_field() }}

                    <div class="mb-4">
                        <label class="form-label text-muted" for="password">New Password</label>
                        <input type="password" name="password" id="password" class="form-control" placeholder="Enter Password" />
                        @if ($errors->has('password'))
                        <span class="text-danger">{{ $errors->first('password') }}</span>
                        @endif
                    </div>
                    <input type="hidden" name="token" value="{{ request()->token }}">
                    <input type="hidden" name="id" value="{{ request()->id }}">

                    <div class="mb-4">
                        <label class="form-label text-muted" for="confirmPassword">Confirm Password</label>
                        <input type="password" name="confirm_password" id="confirmPassword" class="form-control" placeholder="Enter Password" />
                        @if ($errors->has('confirm_password'))
                        <span class="text-danger">{{ $errors->first('confirm_password') }}</span>
                        @endif
                    </div>

                    <div class="col-sm-12 p-0 text-left">
                        <div class="form-group mb-1">
                            <button type="submit" id="resetBtn" disabled onclick="this.classList.toggle('button--loading')"
                                class="form-control button_load btn w-100 text-center custom-btn style2-input text-white fw-600 bg-dark border-0 p-0">
                                <span class="button__text">Reset Password</span>
                            </button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
<script>
    const resetBtn = document.getElementById('resetBtn')

    const password = document.getElementById('password')
    const confirmPassword = document.getElementById('confirmPassword')

    const checkEnableButton = () => {
        resetBtn.disabled = !(
            password.value &&
            confirmPassword.value
        )
    }

    password.addEventListener('change', checkEnableButton)
    confirmPassword.addEventListener('change', checkEnableButton)
</script>
@endsection