@extends('layouts.frontend')

@section('title', 'Set Up')

@section('content')
    <div class="page-content py-0">
        <h3 class="py-2 text-bg-dark text-center">
            <div class="nav-button" onclick="history.back()"><a href="javascript:;"><i class="bi bi-arrow-left" style="color:white;float:left;margin-left:15px;"></i></a></div>
            <span style="margin-left:-25px;">Set Up</span>
        </h3>
        <div class="py-2" style="padding:10px;">
                <div class="am-u-sm-7" style="text-align: center;color: #0079b7;"  data-bs-toggle="modal"
                data-bs-target="#staticBackdrop">Modify Login Password</div>

        </div>

        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true" style="width:80%;margin-left:10%;">
        <div class="modal-dialog modal-dialog-centered" style="margin:0px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#f60005;color:white;">
                    <h1 class="modal-title text-center" id="staticBackdropLabel" style="color:white;font-size: 16px;text-align: center;">
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         Enter A New Password
                    </h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="color:white;background-color: red;"></button>
                </div>
                <div class="modal-body" x-init>
                    <form method="POST" class="mt-4" action="{{route('change-password')}}">
                        @csrf
                        <input name="_method" type="hidden" value="PUT">
                        <div class="input-group mb-3" id="show_hide_password">
                            <div class="form-floating flex-grow-1">
                                <input 
                                    type="password" 
                                    @class([
                                        "form-control",
                                        "border-danger" => $errors->has('password')
                                    ])
                                    id="pwd" 
                                    name="password" 
                                    placeholder="Enter A New Password" style="width:100%;">
                                <label for="pwd">Enter A New Password</label>
                                @error('password')
                                <span class="text-danger">
                                    <strong>{{$message}}</strong>
                                </span>
                                @enderror
                            </div>
                            <!-- <span class="input-group-text bg-transparent rounded-start-0 rounded-3"><i
                                    class="bi bi-eye-slash"></i></span> -->
                        </div>

                        <div class="mb-0 d-grid">
                            <button type="submit" class="btn btn-dark btn-ecomm rounded-3" style="border-radius: 50px !important;box-shadow: 0px 2px 9px 0px #000000; ">Confirm</button>
                        </div>
                        <!-- <div class="mb-0 d-grid" style="margin-top:15px;">
                            <a href="{{route('signup')}}" class="btn btn-dark btn-ecomm rounded-3" style="border-radius: 50px !important;box-shadow: 0px 2px 9px 0px #000000;">Sign Up</a>
                        </div> -->
                       {{--  <div class="separator my-4">
                            <div class="line"></div>
                            <p class="mb-0 fw-bold px-3">Or</p>
                            <div class="line"></div>
                        </div>
                        <div class="social-login d-flex flex-row gap-2 justify-content-center">
                            <a href="javascript:;" class="bg-facebook">
                                <i class="bi bi-facebook"></i>
                            </a>
                            <a href="javascript:;" class="bg-pinterest">
                                <i class="bi bi-google"></i>
                            </a>
                            <a href="javascript:;" class="bg-linkedin">
                                <i class="bi bi-linkedin"></i>
                            </a>
                        </div> --}}
                    </form>
                </div>
            </div>
        </div>f
    </div>

    </div>
@endsection