@extends('layouts.user')
@section('content')

<div class="main-content" style="min-height: 100vh">
    <div class="page-content dark:bg-zinc-700" style="padding-bottom: 400px; padding-top: 150px;">
        <div class="container-fluid px-[0.625rem]">
            <div class="grid grid-cols-1 mb-5">
                <div class="flex items-center justify-between">
                    <h4 class="text-lg font-semibold text-gray-800 mb-sm-0 grow dark:text-gray-100">Change Password</h4>
                    <nav class="flex" aria-label="Breadcrumb">
                        <ol class="inline-flex items-center space-x-1 ltr:md:space-x-3 rtl:md:space-x-0">
                            <li class="inline-flex items-center">
                                <a href="{{ route('home') }}" class="inline-flex items-center text-sm font-medium text-gray-800 hover:text-gray-900 dark:text-zinc-100 dark:hover:text-white">
                                    Dashboard
                                </a>
                            </li>
                            <li>
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    <a href="#" class="text-sm font-medium text-gray-500 ltr:ml-1 rtl:mr-1 hover:text-gray-900 ltr:md:ml-2 rtl:md:mr-2 dark:text-gray-100 dark:hover:text-white">Password</a>
                                </div>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>

                
            <div class="grid grid-cols-1">
                <div class="grid items-stretch grid-cols-12">
                    <div class="self-center col-span-12 lg:col-span-6">
                        <p class="text-gray-600 dark:text-gray-100">For security reasons, we recommend changing your password regularly.</p>
                    </div>
                </div>

                    <div class="w-full md:w-[80%] lg:w-[50%] mx-auto flex items-center bg-blue-50 rounded mt-12">
                        <div class="relative w-12 h-12 text-center bg-blue-600 ltr:rounded-l rtl:rounded-r">
                            <div class="after:content-[''] after:border-[6px] after:border-transparent after:border-r-blue-400 after:absolute ltr:after:-right-3 rtl:after:-left-3 after:top-[1.15rem]"></div>
                            <i class="mdi mdi-alert-outline align-middle text-white leading-[3.5]"></i>
                        </div>
                        <small class="text-blue-700 ltr:ml-4 rtl:mr-4">Remember to keep your password confidential and avoid using easily guessable information</small> 
                    </div>
            

                <div class="relative mt-5 overflow-x-auto">
                    <div class="w-full md:w-[80%] lg:w-[50%] card dark:bg-zinc-800 dark:border-zinc-600 mx-auto">
                        <div class="card-body ">    
                                <div id="infoText" class="relative my-4 text-gray-600 rounded dark:text-gray-100 alert" role="alert">
                                    <span class="block sm:inline text-center font-bold"> Add New Password</span>
                                </div>
                                <x-alert/>
                            <form class="pt-2 mt-4" id="requestForm" method="post" action="{{ route('password.change') }}">
                                @csrf
                                <div class="mb-4">
                                    <label class="block mb-2 font-medium text-gray-600 dark:text-gray-100">Current Password</label>
                                    <input type="password" name="current_password" required class="w-full px-2 py-2 border-gray-100 rounded placeholder:text-sm dark:bg-zinc-700/50 dark:border-zinc-600 dark:text-gray-100 dark:placeholder:text-zinc-100/60" id="current_password" placeholder="Enter Your Current Password"/>
                                    @error('current_password')
                                      <span class="invalid-feedback text-red-600" role="alert">
                                          <small>{{ $message }}</small>
                                      </span>
                                    @enderror
                                </div>
                                
                                <div class="mb-4">
                                    <label class="block mb-2 font-medium text-gray-600 dark:text-gray-100">New Password</label>
                                    <input type="password" name="new_password" required class="w-full px-2 py-2 border-gray-100 rounded placeholder:text-sm dark:bg-zinc-700/50 dark:border-zinc-600 dark:text-gray-100 dark:placeholder:text-zinc-100/60" id="new_password" placeholder="Enter Your New Password"/>
                                    @error('new_password')
                                      <span class="invalid-feedback text-red-600" role="alert">
                                          <small>{{ $message }}</small>
                                      </span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label class="block mb-2 font-medium text-gray-600 dark:text-gray-100">Confirm Password</label>
                                    <input type="password" name="new_password_confirmation" required class="w-full px-2 py-2 border-gray-100 rounded placeholder:text-sm dark:bg-zinc-700/50 dark:border-zinc-600 dark:text-gray-100 dark:placeholder:text-zinc-100/60" id="wallet" placeholder="Confirm New Password" aria-describedby="new_password_confirmation"/>
                                </div>
                                <div class=""> 
                                    <button id="requestButton" class="flex justify-center items-center btn border-transparent w-full py-2.5 text-white w-100 waves-effect waves-light shadow-md shadow-violet-200 dark:shadow-zinc-600" 
                                    style="background-color: #ec595a" type="submit">
                                        <span>Update Password 🔒</span>
                                        <div id="requestLoader" class="w-5 hidden h-5 ml-4 loader relative z-[2]"></div>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>


@endsection