@extends('layouts.auth')
@section('title','Login')
@section('content')
<form class="form w-100" action="{{route('login')}}" method="post">
    @csrf
    <!--begin::Body-->
    <div class="card-body">
        <!--begin::Heading-->
        <div class="text-start mb-10">
            <!--begin::Title-->
            <h1 class="text-gray-900 mb-3 fs-3x" data-kt-translate="sign-in-title">Sign In</h1>
            <!--end::Title-->
        </div>
        <!--begin::Heading-->
        <!--begin::Input group=-->
        <div class="fv-row mb-8">
            <label for="email" class="mb-2 required text-muted">Email</label>
            <!--begin::Email-->
            <input type="email" required placeholder="Email" name="email" autocomplete="on" class="@error('email') is-invalid @enderror form-control bg-transparent" id="email" required/>
            <!--end::Email-->
            @error('email')
            <div class="d-block invalid-feedback">
                {{ $errors->first('email')  }}
            </div>
            @enderror
        </div>
        <!--end::Input group=-->
        <div class="fv-row mb-3">
            <label for="password" class="mb-2 required text-muted">Password</label>
            <!--begin::Password-->
            <div class="input-group mb-5">
                <input type="password" required placeholder="Password" name="password" autocomplete="off" class="@error('password') is-invalid @enderror form-control bg-transparent" id="password" required/>
                <span class="input-group-text" id="basic-addon1">
                    <a href="javascript:void(0)"><i class="fa fa-eye" id="show_password"></i></a>
                </span>
            </div>
            <!--end::Password-->
            @error('password')
            <div class="d-block invalid-feedback">
                {{ $errors->first('password')  }}
            </div>
            @enderror
        </div>
        <!--end::Input group=-->
        <!--begin::Wrapper-->
        @if (Route::has('password.request'))
        <div class="d-flex flex-stack flex-wrap gap-3 fw-semibold mb-10">
            <div class="form-check form-check-custom form-check-primary form-check-solid">
                <label for="remember_me">
                    <input id="remember_me" type="checkbox" class="form-check-input" name="remember">
                    <span class="ms-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
                </label>
            </div>
            <!--begin::Link-->
            <a href="{{ route('password.request') }}" class="link-primary" data-kt-translate="sign-in-forgot-password">{{ __('Forgot your password?') }}</a>
            <!--end::Link-->
        </div>
        @endif
        <!--end::Wrapper-->
        <!--begin::Actions-->
        <!--begin::Submit button-->
        <div class="d-grid mb-10 mt-10">
            <button type="submit" class="btn btn-primary me-5 submit_btn">
                <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                <span class="svg-icon svg-icon-3">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z" fill="currentColor"></path>
                        <path opacity="0.3" d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z" fill="currentColor"></path>
                    </svg>
                </span>
                <span class="pulse-ring"></span>
                <span class="indicator-label">
                    Login
                </span>
                <span class="indicator-progress">
                    Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                </span>
                <!--end::Svg Icon-->
            </button>
        </div>
        <!--end::Submit button-->
        <!--end::Actions-->
    </div>
    <!--begin::Body-->
</form>
@endsection