@extends('front.layouts.master')
@section('content')
<section class="sign-page">
    <div class="form-half-cont">
        <div class="form-half">
            <a href="{{route('home')}}" class="logo">
                <img src="{{asset('front/images/logo.svg')}}" 
                     class="img-fluid" 
                     alt="منصة ربحي - شعار الموقع"
                     width="120" height="40"
                     decoding="async">
            </a>
            <h2>تغيير كلمة المرور</h2>
            <p>
                أدخل كلمة المرور الجديدة
            </p>
            <form class="login-form" action="{{route('front.update.password')}}" method="post">
                @csrf
                <input type="hidden" name="code" value="verified">
                <div class="form-group">
                    <input type="password" class="form-control" name="password" placeholder="كلمة المرور الجديدة" required>
                    <span class="show">
                        <svg xmlns="http://www.w3.org/2000/svg" width="35.35" height="23.567"
                             viewBox="0 0 35.35 23.567">
                            <path data-name="Icon awesome-eye"
                                  d="M35.136 15.387A19.684 19.684 0 0 0 17.675 4.5 19.687 19.687 0 0 0 .214 15.388a1.985 1.985 0 0 0 0 1.791 19.684 19.684 0 0 0 17.461 10.888 19.687 19.687 0 0 0 17.461-10.888 1.985 1.985 0 0 0 0-1.792zm-17.461 9.734a8.837 8.837 0 1 1 8.837-8.837 8.837 8.837 0 0 1-8.837 8.837zm0-14.729a5.849 5.849 0 0 0-1.553.233 2.937 2.937 0 0 1-4.106 4.106 5.878 5.878 0 1 0 5.659-4.338z"
                                  transform="translate(0 -4.5)" />
                        </svg>
                    </span>
                    @error('password')
                    <span class="invalid-feedback" role="alert" style="display: flex">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" name="password_confirmation" placeholder="تأكيد كلمة المرور الجديدة" required>
                    <span class="show">
                        <svg xmlns="http://www.w3.org/2000/svg" width="35.35" height="23.567"
                             viewBox="0 0 35.35 23.567">
                            <path data-name="Icon awesome-eye"
                                  d="M35.136 15.387A19.684 19.684 0 0 0 17.675 4.5 19.687 19.687 0 0 0 .214 15.388a1.985 1.985 0 0 0 0 1.791 19.684 19.684 0 0 0 17.461 10.888 19.687 19.687 0 0 0 17.461-10.888 1.985 1.985 0 0 0 0-1.792zm-17.461 9.734a8.837 8.837 0 1 1 8.837-8.837 8.837 8.837 0 0 1-8.837 8.837zm0-14.729a5.849 5.849 0 0 0-1.553.233 2.937 2.937 0 0 1-4.106 4.106 5.878 5.878 0 1 0 5.659-4.338z"
                                  transform="translate(0 -4.5)" />
                        </svg>
                    </span>
                </div>
                <button class="form-submit">
                    تغيير كلمة المرور
                </button>
                <p class="have-account">
                    تذكرت كلمة المرور؟
                    <a href="{{route('view.login')}}">تسجيل الدخول</a>
                </p>
            </form>
        </div>
    </div>
    <div class="img-half-cont">
        <a href="{{route('home')}}" class="back-home">
            رجوع للصفحة الرئيسية
            <svg xmlns="http://www.w3.org/2000/svg" width="19.346" height="19.346" viewBox="0 0 19.346 19.346">
                <path data-name="Icon ionic-md-arrow-back"
                      d="M25.322 14.44h-14.69L17.4 7.669l-1.751-1.692-9.672 9.672 9.673 9.673 1.693-1.693-6.71-6.771h14.689z"
                      transform="translate(-5.977 -5.977)" />
            </svg>
        </a>
        <img src="{{asset('front/images/sign/in.png')}}" class="img-fluid" decoding="async" width="500" height="600">

        <div class="sign-slider">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="sign-slide">
                            <h4 class="sign-title">
                                كلمة مرور قوية
                            </h4>
                            <p class="sign-desc">
                                اختر كلمة مرور قوية لحماية حسابك
                            </p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="sign-slide">
                            <h4 class="sign-title">
                                أمان محسن
                            </h4>
                            <p class="sign-desc">
                                كلمة المرور الجديدة ستكون أكثر أماناً
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-btn-prev swiper-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="15.263" height="26.283" viewBox="0 0 15.263 26.283">
                    <path data-name="Path 2" d="m94.718 846.268 12.082 12.081-12.082 12.081"
                          transform="translate(-93.657 -845.208)" />
                </svg>
            </div>
            <div class="swiper-btn-next swiper-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="15.263" height="26.283" viewBox="0 0 15.263 26.283">
                    <path data-name="Path 1" d="m106.8 846.268-12.082 12.081L106.8 870.43"
                          transform="translate(-92.596 -845.208)" />
                </svg>
            </div>
        </div>
    </div>
</section>
@endsection