@extends('layouts.custom-app')

    @section('styles')

    <style>
        .login-img1{
                background-image: url(assets/images/brand/crm_bg.jpg);
                background-size: 1500px 900px;
    position: relative;
        }
        
                .custom-btn-success{
              background: #13bfa6!important;
              border-color: #35b9a6;
                color: #fff;
        }
        .custom-btn-danger{
                background: #e82646!important;
                border-color: #e62a45;
                color: #fff;
        }
        .custom-btn-warning{
                background: #f7b731!important;
                border-color: #e5a623;
                color: #fff!important;
        }
        .custom-btn-info{
                   background: #1170e4;
                    border-color: #3988e8;
                    color: #fff;
        }
        
        
    </style>

    @endsection

    @section('class')

    <!-- BACKGROUND-IMAGE -->
    <div class="login-img1">  

    @endsection

        @section('content')


                <!-- CONTAINER OPEN -->
                <div class="col-login mx-auto mt-7">
                    <div class="text-center">
                        <img style="height: 100px;" src="{{asset('assets/images/brand/logo.png?v1')}}" class="header-brand-img" alt="">
                    </div>
                </div>

                <div class="container-login100">
                    <div class="wrap-login100 p-6">
                            <form method="POST" action="{{ route('login.custom') }}">
                                @csrf
                            <span class="login100-form-title pb-5">
                                Login
                            </span>
                            <div class="panel panel-primary">
                                <div class="tab-menu-heading">
                                    <div class="tabs-menu1">
                                        <!-- Tabs -->
                                        <ul class="nav panel-tabs">
                                            <li class="mx-0"><a href="#tab5" class="" data-bs-toggle="tab">Email</a></li>
                                            {{-- <li class="mx-0"><a href="#tab6" data-bs-toggle="tab">Mobile</a></li> --}}
                                        </ul>
                                    </div>
                                </div>
                                <div class="panel-body tabs-menu-body p-0 pt-5">
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="tab5">
                                            <div class="wrap-input100 validate-input input-group" data-bs-validate="Valid email is required: ex@abc.xyz">
                                                <a href="javascript:void(0)" class="input-group-text bg-white text-muted">
                                                    <i class="zmdi zmdi-email text-muted" aria-hidden="true"></i>
                                                </a>
                                                <input class="input100 form-control" type="email" id="email" value="{{old('email')}}" name="email" placeholder="Email">
                                                <!--@if ($errors->has('email'))-->
                                                <!--<span class="text-danger">{{ $errors->first('email') }}</span>-->
                                                <!--@endif-->
                                            </div>
                                            <div class="wrap-input100 validate-input input-group" id="Password-toggle">
                                                <a href="javascript:void(0)" class="input-group-text bg-white text-muted">
                                                    <i class="zmdi zmdi-eye text-muted" aria-hidden="true"></i>
                                                </a>
                                                <input class="input100 form-control" type="password" id="password" name="password" placeholder="Password">
                                            
                                            </div>
                                            
                                            
                                              @if ($errors->has('email'))
                                                <!--<span class="text-danger">{{ $errors->first('password') }}</span>-->
                                                <div class="text-end pt-4">
                                            <div style="text-align:center" class="alert alert-danger" role="alert">
                                                {{ $errors->first('email') }}
                                            </div>
                                            </div>
                                                @endif
                                                
                                            
                                                @if ($errors->has('password'))
                                                <!--<span class="text-danger">{{ $errors->first('password') }}</span>-->
                                                <div class="text-end pt-4">
                                            <div style="text-align:center" class="alert alert-danger" role="alert">
                                                {{ $errors->first('password') }}
                                            </div>
                                            </div>
                                                @endif
                                            
                                            @if (Session::has('error'))
                                        <div class="text-end pt-4">
                                            <div style="text-align:center" class="alert alert-danger" role="alert">
                                                {{ Session::get('error') }}
                                            </div>
                                            </div>
                                            @endif
                                            <div class="text-end pt-4">
                                                <!--<p class="mb-0"><a href="{{url('forgot-password')}}" class="text-primary ms-1">Forgot Password?</a></p>-->
                                            </div>
                                            <div class="container-login100-form-btn">
                                                <button type="submit" class="login100-form-btn custom-btn-success">
                                                        Login
                                                </button>
                                            </div>
                                            <div class="text-center pt-3">
                                                <!--<p class="text-dark mb-0">Not a member?<a href="{{url('register')}}" class="text-primary ms-1">Sign UP</a></p>-->
                                            </div>
                                            {{-- <label class="login-social-icon"><span>Login with Social</span></label> --}}
                                            {{-- <div class="d-flex justify-content-center">
                                                <a href="javascript:void(0)">
                                                    <div class="social-login me-4 text-center">
                                                        <i class="fa fa-google"></i>
                                                    </div>
                                                </a>
                                                <a href="javascript:void(0)">
                                                    <div class="social-login me-4 text-center">
                                                        <i class="fa fa-facebook"></i>
                                                    </div>
                                                </a>
                                                <a href="javascript:void(0)">
                                                    <div class="social-login text-center">
                                                        <i class="fa fa-twitter"></i>
                                                    </div>
                                                </a>
                                            </div> --}}
                                        </div>
                                        {{-- <div class="tab-pane" id="tab6">
                                            <div id="mobile-num" class="wrap-input100 validate-input input-group mb-4">
                                                <a href="javascript:void(0)" class="input-group-text bg-white text-muted">
                                                    <span>+91</span>
                                                </a>
                                                <input class="input100 form-control" type="mobile" placeholder="Mobile">
                                            </div>
                                            <div id="login-otp" class="justify-content-around mb-5">
                                                <input class="form-control text-center w-15" id="txt1" maxlength="1">
                                                <input class="form-control text-center w-15" id="txt2" maxlength="1">
                                                <input class="form-control text-center w-15" id="txt3" maxlength="1">
                                                <input class="form-control text-center w-15" id="txt4" maxlength="1">
                                            </div>
                                            <span>Note : Login with registered mobile number to generate OTP.</span>
                                            <div class="container-login100-form-btn ">
                                                <a href="{{url('index')}}" class="login100-form-btn btn-primary" id="generate-otp">
                                                    Proceed
                                                </a>
                                            </div>
                                        </div> --}}
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
                <!-- CONTAINER CLOSED -->

        @endsection

    @section('scripts')

    <!-- GENERATE OTP JS -->
    <script src="{{asset('assets/js/generate-otp.js')}}"></script>

    @endsection