@extends('frontend.layouts.layout_page')

@section('pageTitle')
<title>{{ trans('panel.site_title') }} {{ trans('global.login') }}</title>
@endsection
@section('style')
<link href="{{ asset('assets/css/icons.css')}}" rel="stylesheet">
@endsection
@section('content')
    @include('frontend/include/notification')
    <section class="burger p-relative auth">
        <div class="ccontainer">        
            <div class="crow g-0">
                <div class="ccol ccol-lg-3 ccol-md-4 ccol-sm-4 ccol-6 mx-auto py-0">
                    <h2 class="heading_2 text-black">Sign In</h2>
                    <hr class="mt-1 mb-2" />
                    
                    <form class="row g-3" action="{{ route('login') }}" method="POST">
                        {{ csrf_field() }}
                        <div class="form_fld">
                            <label>Email</label>
                            <input type="email" name="email" class="fld-control {{ $errors->has('email') ? ' is-invalid' : '' }}">

                            @if($errors->has('email'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('email') }}
                                </div>
                            @endif
                        </div>
                        <div class="form_fld" >
                            <label>Password</label>
                            <div class="input-group" id="show_hide_password">
                                <input type="password" name="password" class="fld-control form-control {{ $errors->has('password') ? ' is-invalid' : '' }} " d="password"><a href="javascript:;" class="input-group-text bg-transparent"><i class='bx bx-hide'></i></a>
                            </div>
                            @if($errors->has('password'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('password') }}
                                </div>
                            @endif
                        </div>
                      <div class="d-flex flex-justify-between small flex-item-align-center">
                        <a href="{{ route('frontend.checkout') }}" class="cbtn cbtn-text-secondary">Sign Up</a>
                         <a href="{{ route('password.request') }}" class="cbtn cbtn-text-primary">Forgot Password?</a>
                      </div>
                      <div class="mt-3">
                        <div class="d-flex flex-justify-between small flex-item-align-center">
                          <button class="cbtn cbtn-primary" type="submit">Login </button>
                          <div>
                            <a href="{{ route('partner_register') }}" class="cbtn cbtn-text-secondary">Nonprofit Sign Up</a>
                          </div>
                        </div>
                      </div>
                    </form>
                </div>
            </div>
        </div>
    </section>    
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $("#show_hide_password a").on('click', function (event) {
                event.preventDefault();
                if ($('#show_hide_password input').attr("type") == "text") {
                    $('#show_hide_password input').attr('type', 'password');
                    $('#show_hide_password i').addClass("bx-hide");
                    $('#show_hide_password i').removeClass("bx-show");
                } else if ($('#show_hide_password input').attr("type") == "password") {
                    $('#show_hide_password input').attr('type', 'text');
                    $('#show_hide_password i').removeClass("bx-hide");
                    $('#show_hide_password i').addClass("bx-show");
                }
            });
        });
    </script>
@endsection