@extends('front.layout-ref')
<style>
    #search-block {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

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

        .breadcrump-section
        {
            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
        {
            background-color: #DFA326 !important;
            margin-bottom: 15px;
            padding:15px !important;
        }

        @media(max-width: 575px){
            .custom-mb-top-div{
                margin-top:2vh !important;
            }
        }

        @media(min-width:1200px){
            body{
                padding-top:70px !important;
            }
        }
</style>
@section('content')
    <main id="content" class="container-fluid p-0">

        <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 p-3 py-0">
                    <h3 class="h3 fw-bold text-center mb-1">Change Password</h3>
                    <nav aria-label="breadcrumb" class="border-bottom-0">
                    <ol class="breadcrumb justify-content-center p-0">

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

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

            </div>
        </section>



    <!--overlay-->
    <div class="bg-gray-1100 space-1">
        <div class="container-fluid px-md-6 px-xl-7 px-wd-6 pb-3 pt-1 mt-4" style="max-width:1776px;">
            <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">
                            <h5 class="h5 fw-bold mb-2">Update your password:</h5>
                            @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 mb-4" type="password"  required>

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

                                <button class="btn btn-dark py-2 px-3" type="submit">Update Password</button>
                            </form>




                          </div>

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




        </div>
    </div>


    </main>
@endsection