@extends('auth.template.app')

@section('meta')
@endsection

@section('title')
Login
@endsection

@section('styles')
<style>
.car-img img{
    width: 600px;
    border-radius: 10px;
    margin-top: 20px;
}

.kia-img{
    position: absolute;
    top: 0;
}
.kia-img img{
    width: 100px;
}
.login{
  text-align: center;
}
.form-group{
    border-radius: 10px;
    border: 1px solid darkgray;
    margin-bottom: 20px ;
    padding: 5px;
}
form{
    width: 60%;
    margin: auto;
}
.login span{
    display: flex;
    align-items: center;
}
.first-container span i{
    font-size: 18px;
    padding: 0 10px;
    border-right: 1px solid darkgray;
}
input[type="email"],[type="password"]{
    border: 0;
}
button{
    width: 100%;
    margin-bottom: 40px;
}
.logo img{
    width: 120px;
    margin-bottom: 0;
}
.first-container{
    margin-top: 30px;
}

.notice  h3{
    margin: 0;
}
.notice span{
    display: flex;
    align-items: center;
}
.notice i{
    margin: 0 15px;
}
.notice hr{
    margin-top: 0;
}
.contact_info .col-md-3{
    background-color: gray;
    color: white;
    text-align: center;
    border-radius: 10px;
    padding: 10px 0;
}
.contact_info{
    justify-content: space-evenly;
    margin: 10px;
}
.contact_info p{
    margin: 0;
}

@media screen and (max-width: 991px) and (min-width: 600px){
    .car-img img{
    width: 350px;
} 
.logo img{
    width: 100px;
}
form{
    width: 100%;
}
}
@media screen and (max-width: 600px) {
    .car-img img{
    width: 300px;
} 
.car-img{
    text-align: center;
}
.first-container{
    margin-top: 10px;
}
form{
    width: 80%;
}
.notice{
    margin-bottom: 20px;
}
}
</style>
@endsection

@section('content')





<div class="main-container p-2">
    <div class="row first-container">
        <div class="col-md-6 car-img">
            <img src="{{asset('uploads/front_end/Foto_Jet_61_a7586bac5e.webp')}}" alt="">
        </div>
        <div class="col-md-6 login" >
            <div class="logo">
                <img src="{{asset('uploads/front_end/ib.png')}}" alt="">
                <img src="{{asset('uploads/front_end/kia1.png')}}" alt="">
            </div>
           <form class="user" method="post" action="{{ route('vendorsignin') }}">
               @csrf
                <div class="form-group">
                    <span><i class="fa fa-user" aria-hidden="true"></i>
                  <input type="email" class="form-control" placeholder="Enter email" name="email"></span>
                   @error('email')
                        <div class="invalid-feedback" style="display: block;">
                            <strong>{{ $message }}</strong>
                        </div>
                    @enderror
                </div>
                <div class="form-group">
                    <span><i class="fa fa-lock" aria-hidden="true"></i>
                  <input type="password" class="form-control" placeholder="Enter password" name="password"></span>
                   @error('password')
                        <div class="invalid-feedback" style="display: block;">
                            <strong>{{ $message }}</strong>
                        </div>
                    @enderror
                </div>

                <button type="submit" class="btn btn-dark">Submit</button>
              </form>
        </div>
    </div>
</div>   



<div class="row">
        <div class="col-md-6 notice">
            <span><i class="fa fa-window-restore" aria-hidden="true"></i><h3>Notice</h3></span>
            <hr>@if($notices)
            
            @foreach($notices as $notice)
                <p>{{$loop->index+1}}-{{$notice->title}}</p>
            @endforeach
            @endif
        </div>
        <div class="col-md-6 notice">
            <span><i class="fa fa-window-restore" aria-hidden="true"></i><h3>Help Line</h3></span>
            <hr>
            <p style="margin-bottom:0">in case of any applicaton releted issues/queries, pleace contact us at : </p>
            <p style="margin:0;"><b>Kia Service Desk:</b></p>
            <div class="row contact_info">
                <div class="col-md-3 ">
                    <p>9687350999</p>
                    <i class="fa fa-globe" aria-hidden="true"></i>
                </div>
                <div class="col-md-3">
                    <p>8866761999</p>
                    <i class="fa fa-wrench" aria-hidden="true"></i>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
@endsection