@extends('../../master_layout/website_master')

@section('title')
<title>{{env('APP_NAME')}} :: My Account</title>
@endsection


@section('heading')
<section class="page-heading">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="content flex-column flex-sm-row">
                    <a href="javascript:history.back()" class="btn btn-link">
                        <i class="fa fa-angle-left"></i> Back
                    </a>
                    <h1 class="py-2 py-sm-0">Change Password</h1>
                    <!-- breadcrumb -->
                    @php
                    $breadcrumb = array(
                        array('title'=>'My Account', 'url'=>route('account')),
                        array('title'=>'Change Password', 'url'=>'', 'active'=>'1')
                    );
                    @endphp
                    @include('website_view.component.breadcrumb',  compact("breadcrumb"))
                    <!-- \breadcrumb -->
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('content')

@if (session('errors'))
<div class="alert alert-danger alert-dismissible">
    @foreach($errors->all() as $message)
    <li class="text-danger">{{$message}}</li>
    @endforeach
</div>
@endif

<section class="account-one">
    <div class="container-fluid">
        <div class="row gap-y-2">
            <!-- Message-->
            @if (session('message'))
            <div class="col-12">
                <div class="alert alert-{{session('message.type')}} alert-dismissible fade show" role="alert">
                    @if(session('message.type')=='danger')
                    <strong>Oops!</strong> {!! session('message.text') !!}
                    @else
                    <strong>Success!</strong> {!! session('message.text') !!}
                    @endif
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            @endif
            <!--end message-->

            <div class="col-12">
                <div class="heading-one text-center d-md-none">
                    <h1>
                        Change Password
                    </h1>
                </div>
                @include('website_view.component.account-navigation')      
            </div>

        </div>
    </div>
</section>


<section class="account-two">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="row gap-y-2">
                    <div class="col-md-6">
                        <form action="{{route('change.password.process')}}" method="post" id="changePassword">
                            @csrf
                            <div class="form-group">
                                <label for="">Current password :</label>
                                <input class="form-control" type="password" value="" name="current_password" id="current_password">
                            </div>
                            <div class="form-group">
                                <label for="">New password :</label>
                                <input class="form-control" type="password" value="" name="new_password" id="new_password">
                            </div>
                            <button class="btn btn-main">
                                Save <i class="fa fa-angle-right"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('custom_js')
<script>
    $(function() {
        $('#changePassword').validate({
            rules: {               
                current_password: {
                    required: true,
                },
                new_password: {
                    required: true,
                },
            },
            messages: {                
                current_password: {
                    required: "Please enter current password",
                },
                new_password: {
                    required: "Please enter new password",
                },
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });

    });
</script>
@endsection