@extends('layouts.master')

@section('content')  
    <section class="section page-content pt-80 pb-80">
        <div class="container">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <div class="myaccount-content account-details">
                        <div class="account-details-form">
                            <form class="form-horizontal" method="POST" action="{{ route('login') }}">
                                @csrf
                                <fieldset class="fieldset-class">
                                    <legend class="leg-width">Login</legend>
                                    <div class=" col learts-mb-30 mb-4">
                                        <input type="email" value="{{old('email')}}" name="email" required class="@error('email') is-invalid @enderror" placeholder="Enter Email Address*" >
                                        @error('email')
                                        <span class="invalid-feedback" role="alert">
                                          <strong>{{ $message }}</strong>
                                        </span>
                                      @enderror
                                    </div>
                                    <div class="  col learts-mb-30">
                                        <input type="password"  name="password" required class="@error('password') is-invalid @enderror" placeholder="Enter Your Password*" >
                                        @error('password')
                                        <span class="invalid-feedback" role="alert">
                                          <strong>{{ $message }}</strong>
                                        </span>
                                      @enderror
                                    </div>
                                    <div class="col-12 text-center learts-mb-30 mt-50">
                                        <button type="submit" class="btn btn-default" style="border-radius: 500px">Login</button>
                                    </div>
                            </fieldset>

                            </form>
                        </div>
            </div>
                </div>
            </div>


        </div>
    </section>
@endsection
@push('styles')
    <style>
        .btn-default{background-color:#d33733; color:white; border:1px solid lightgrey;}
        .btn-default:hover{color: white;box-shadow:0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)}
        input:not([type="checkbox"]):not([type="radio"]), textarea{font-size:16px;font-weight:400;display:block;width:100%;padding:10px 0;color:#333333;border:2px solid transparent;border-bottom-color:#EDEDED;background-color:transparent;}
        .leg-width{ width: 17%; }
        .fieldset-class{padding: 30px 40px;border: 1px solid #EEEEEE;}
        @media (max-width:500px){ .leg-width{ width: 20%;} .fieldset-class{padding: 30px 13px;} }
    </style>
@endpush()