@extends('frontend.layouts.app')

@section('content')
    <section class="gry-bg py-5">
        <div class="profile">
            <div class="container">
                <div class="row">
                   <div class="col-xxl-4 col-xl-5 col-lg-6 col-md-8 mx-auto">
                        <div class="card">
                            <div class="text-center px-35 pt-5">
                                <a class="navbar-brand w-100" href="{{ url('') }}">
                                    <img src="https://ekhadiindia.s3.ap-south-1.amazonaws.com/uploads/email/unsubscribe.png" alt="EKhadi India" style="width: 100px;"></a>
                                <h1 class="heading heading-4 strong-500">
                                    Unsubscribe from our newsletter
                                </h1>
                            </div>
                            <div class="px-5 py-3 py-lg-4">
                                <div class="">
                                <form class="form-default" role="form" action="{{route('subscribers.unsubscribe')}}" method="POST" name="unsubscribe_form" novalidate="novalidate">
                                        @csrf
                                            <div class="form-group">
                                                <input type="text" class="form-control h-auto form-control-lg" required="" value="" placeholder="Enter your Email" name="email" id="email" aria-invalid="true">
                                                </div>
                                        <div class="text-center">
                                            <button type="submit unsubscribe_form_save" class="btn btn-styled btn-base-1 btn-md w-100 unsubscribe_btn">Unsubscribe</button>
                                        </div>
                                    </form>

                                 </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


@section('script')
<style type="text/css">
  .error {color: red; }
</style>
<script type="text/javascript" src="{{asset('public/js/jquery.validate.min.js')}}"></script>
    <script type="text/javascript">

    $('form[name="unsubscribe_form"]').validate({
      debug: false,
      rules: {
        email:{
            required: true,
            email:true,
        },
      },
      messages: {
        email:{
            required: "Please enter email",
            email: "Please enter valid email",
        },
      },

    submitHandler: function(form) {
      $(".unsubscribe_form_save").attr("disabled", true);
      $(".unsubscribe_btn").html("Please wait...");
      form.submit();
    }
  });
    </script>
@endsection