@extends('tema.layout.home_master')

@section('title')
    <title>Üye Şifremi Unuttum</title>
@endsection

@section('cssler')
    <style>



        .content form .user-details{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 20px 0 12px 0;
        }
        form .user-details .input-box{
            margin-bottom: 15px;
            width: calc(100% / 2 - 20px);
        }
        form .input-box span.details{
            display: block;
            font-weight: 500;
            margin-bottom: 5px;
        }
        .user-details .input-box input{
            height: 45px;
            width: 100%;
            outline: none;
            font-size: 16px;
            border-radius: 5px;
            padding-left: 15px;
            border: 1px solid #ccc;
            transition: all 0.3s ease;
        }
        .user-details .input-box input:focus,
        .user-details .input-box input:valid{
            border-color: #69c3fc;
        }

        .user-details .input-box select{
            height: 45px;
            width: 100%;
            outline: none;
            font-size: 16px;
            border-radius: 5px;
            padding-left: 15px;
            border: 1px solid #ccc;
            transition: all 0.3s ease;
        }
        .user-details .input-box select:focus,
        .user-details .input-box select:valid{
        }


        .user-details .input-box textarea{
            height: 80px;
            width: 100%;
            outline: none;
            font-size: 16px;
            border-radius: 5px;
            padding-left: 15px;
            border: 1px solid #ccc;
            transition: all 0.3s ease;
        }
        .user-details .input-box textarea:focus,
        .user-details .input-box textarea:valid{
            border-color: #69c3fc;
        }



        form .gender-details .gender-title{
            font-size: 20px;
            font-weight: 500;
        }
        form .category{
            display: flex;
            width: 80%;
            margin: 14px 0 ;
            justify-content: space-between;
        }
        form .category label{
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        form .category label .dot{
            height: 18px;
            width: 18px;
            border-radius: 50%;
            margin-right: 10px;
            background: #d9d9d9;
            border: 5px solid transparent;
            transition: all 0.3s ease;
        }
        #dot-1:checked ~ .category label .one,
        #dot-2:checked ~ .category label .two,
        #dot-3:checked ~ .category label .three{
            background: #9b59b6;
            border-color: #d9d9d9;
        }
        form input[type="radio"]{
            display: none;
        }
        form .button{
            height: 45px;
            margin: 35px auto;
        }
        form .button input{
            height: 100%;
            width: 50%;
            border-radius: 5px;
            border: none;
            color: #fff;
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: linear-gradient(135deg, #71b7e6, #9b59b6);
        }
        form .button input:hover{
            /* transform: scale(0.99); */
            background: linear-gradient(-135deg, #71b7e6, #9b59b6);
        }




        @media(max-width: 584px){
            .container{
                max-width: 100%;
            }
            form .user-details .input-box{
                margin-bottom: 15px;
                width: 100%;
            }
            form .category{
                width: 100%;
            }

            .user-details::-webkit-scrollbar{
                width: 5px;
            }
        }



    </style>
@endsection

@section('main')

    <section style="background-color: #7cb6b7;padding-top:20px;padding-bottom: 200px;margin:0">
        <div class="container">
            <div class="row">
                <div style="border-radius: 10px" class="col-md-5 mx-auto mt-5 mb-5">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="title mt-3">Şifremi mi Unuttum!</h4>

                        </div>
                        <div class="card-body">
                            <div style="" class="p-4">
                                <form class="form" method="post" action="{{ route('uye.password.request') }}">
                                    @csrf

                                    @if (session('status'))
                                        <div class="mb-4 font-medium text-sm text-green-600">
                                            {{ __('Şifre sıfırlama bağlantısı başarıyla gönderilmiştir.') }}
                                        </div>
                                    @endif


                                @foreach ($errors->all() as $error)
                                        <li style="color: red">{{ $error }}</li>
                                    @endforeach
                                    <div class="form-group">
                                        <div class="input-box">
                                            <span class="details">Mail Adresinizi Giriniz</span>
                                            <input class="form-control" type="text" id="email" name="email" required maxlength="255">
                                        </div>

                                        <div class="form-group mt-2">
                                            <button class="btn btn-primary" type="submit" value="Şifremi Unuttum">Şifremi Unuttum</button>
                                        </div>


                                </form>
                            </div>
                        </div>
                    </div>


                </div>
            </div>


        </div>
    </section>



@endsection

