@extends('front.layout')
@section('custom-style')
<style>

     .active{
            color:#292826!important;
        }
        .pages-content
        {
            color:#292826!important;
            margin:0px 50px;
        }

        .breadcrump-section
        {
            padding-top:70px;
            background: #000f1e!important;
        }



        .nav-tabs .nav-item {
            margin-right: 10px;
        }

        .tab-content
        {
            background: #fff;
            padding:30px 50px;
            color:#000;
        }

        .change-password-link
        {
            color:#000!important;
            text-decoration: underline!important;
            margin-left: 20px;
        }

        .in-page-form-control
        {

            margin-bottom: 15px;
        }
        
        @media(max-width: 575px){
            .custom-mb-top-div{
                margin-top:2vh !important;
            }
        }
</style>
@endsection
@section('content')
    <main id="content">



        <section class="breadcrump-section">
            <div class="bg-gray-1000 py-6 pt-lg-9 pb-lg-11 mb-lg-10 custom-mb-top-div" style="margin-bottom: 0px!important;padding:20px 0px!important; background:rgb(221,150,10);">
                <div class="container px-md-5 mb-lg-2">
                    <h6 class="font-size-30 font-weight-semi-bold text-center mb-1">Change Password</h6>
                    <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-center p-0">

                    <li class="breadcrumb-item active" aria-current="page">Change your password</li>

                    </ol>
                    </nav>
                 </div>

            </div>
        </section>



    <!--overlay-->

    <div class="bg-gray-1100 space-1">
        <div class="container px-md-6 px-xl-7 px-wd-6 pb-3 pt-1">
            <div class="pb-4">
                <div class="border-g-1200-op mb-1 pb-3">
                    <div class="dark">

                        @include('front.my-account.tabs')
                          <div class="tab-content">
                            <h3>Update your password:</h3>
                            @if(\Session::has('error'))
                                <div class="col-xs-12">
                                    <li class="alert alert-danger">{!! \Session::get('error') !!}</li>
                                </div>
                            @endif

                            @if(\Session::has('success'))
                                <div class="col-xs-12">
                                    <li class="alert alert-success">{!! \Session::get('success') !!}</li>
                                </div>
                            @endif

                            @if ($errors->any())
                                <div class="col-xs-12">
                                    @foreach ($errors->all() as $error)
                                        <li class="alert alert-danger">{{ $error }}</li>
                                    @endforeach
                                </div>
                            @endif

                            <form method="post">
                                {{ csrf_field() }}
                                <label>Enter old password*</label>
                                <input name="old_password" class="form-control in-page-form-control" type="password"  required>

                                <label>Enter new password*</label>
                                <input name="new_password" class="form-control in-page-form-control" type="password" required>

                                <button class="btn btn-primary" type="submit">Update Password</button>
                            </form>




                          </div>

                    </div>
                </div>
            </div>
            <!--Dakar Section End-->




        </div>
    </div>


    </main>
@endsection

@section('custom-script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
@endsection