@extends('landing.layouts.app')

@section('content')
    <div class="container py-5">
        <div class="row">


            <div class="card col-md-5 p-4 mb-0 border-0">
                <div class="card-body text-center">
                    <div>
                        <img class="img-fluid" src="{{ asset('landing/login-img.png') }}" alt="login image" width="450" height="450">
                    </div>
                </div>
            </div>

            <div class="card col-md-7 p-4 mb-0 border-light">
                <div class="card-body">
                    <h3 class="mb-4 fw-semibold text-dark border-bottom pb-3">Service Provider Login</h3>
                    <form action="{{ route('serviceprovider.login') }}" method="POST">
                        @csrf
                        <div class="input-group mb-3"><span class="input-group-text">
                      <svg class="icon">
                        <use xlink:href="{{ asset('icons/coreui.svg#cil-envelope-open') }}"></use>
                      </svg></span>
                            <input class="form-control @error('email') is-invalid @enderror" type="text" name="email"
                                   placeholder="{{ __('Email') }}" required autofocus>
                            @error('email')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div x-data="{show:false}" class="input-group mb-4">
                            <span class="input-group-text">
                              <svg class="icon">
                                <use xlink:href="{{ asset('icons/coreui.svg#cil-lock-locked') }}"></use>
                              </svg>
                            </span>
                            <input class="form-control @error('password') is-invalid @enderror"
                                   :type="show ? 'text' : 'password'"
                                   name="password"
                                   placeholder="{{ __('Password') }}" required>

                            <a href="#" @click.prevent="show = !show" class="input-group-text bg-white">
                                <i x-show="!show" class="bi bi-eye-slash"></i>
                                <i x-show="show" class="bi bi-eye"></i>
                            </a>
                            @error('password')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <button class="btn btn-dark text-white px-4" type="submit">Sign In</button>
                            </div>
                                <div class="col-lg-6 text-end">
                                    <a href="{{ route('serviceprovider.password.request') }}" class="btn btn-link px-0 text-dark"
                                       type="button">{{ __('Forgot Your Password?') }}</a>
                                </div>
                        </div>
                        <hr>
                        <div class="row">
                            <h6>{{ __('New to BhoomiPlus ? ') }}<a href="{{ route('serviceprovider.register') }}"
                                class="text-danger" style="text-decoration: none">{{ __('Become a Provider') }}</a>   </h6>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection