@section('title', 'Authenticate')

@extends('layout.authenticate')

@section('styles')
    <link href="https://db.onlinewebfonts.com/c/855eef4e441ecde59d4e21a3fe416045?family=RobofanFree" rel="stylesheet">

@endsection

@section('content')

    <div class="d-flex flex-column flex-root"
         style="background-image: url({{ asset('media/bg/login-bg_final.png') }});background-size:100%;background-position-y: -18px;">
        <div class="login login-1 login-signin-on d-flex flex-column flex-lg-row flex-column-fluid {{--bg-white--}}"
             id="kt_login">
            <div class="login-aside d-flex justify-content-center align-items-center flex-column flex-row-auto min-w-1000px">
                @if(isset($sliders) && !empty($sliders))
                    <div id="carouselExampleIndicators" class="carousel slide col-md-8" data-ride="carousel">
                        <ol class="carousel-indicators">
                            @if(isset($sliders) && !empty($sliders))
                                @foreach($sliders as $i_key => $slider)
                                    <li data-target="#carouselExampleIndicators" data-slide-to="{{ $i_key }}"
                                        class="{{ $i_key == 0 ? 'active' : ''}}"></li>
                                @endforeach
                            @endif

                        </ol>
                        <div class="carousel-inner">
                            @if(isset($sliders) && !empty($sliders))
                                @foreach($sliders as $key => $slider)
                                    <div class="carousel-item {{ $key == 0 ? 'active' : ''}}">
                                        @if($slider->slider_type == \Modules\Slider\Entities\Slider::IMAGE_TYPE)
                                            <img src="{{ asset('storage/modules/slider/'.$slider->id.'/' .$slider->slider_attachment) }}"
                                                 class="d-block" style="width: 100%"
                                                 alt="Slide 1">
                                        @else
                                            <video controls autoplay loop muted class="myvid" id="player"
                                                   style="width: 100%">
                                                <source src="{{ asset('storage/modules/slider/'.$slider->id.'/' .$slider->slider_attachment) }}"
                                                        type="video/mp4">
                                            </video>
                                        @endif
                                    </div>
                                @endforeach
                            @endif

                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
                           data-slide="prev">
                            <i class="fa fa-chevron-left" style="color: #da683b; font-size: 60px; font-weight: bolder;"
                               aria-hidden="true"></i>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
                           data-slide="next">
                            <i class="fa fa-chevron-right" style="color: #da683b; font-size: 60px; font-weight: bolder;"
                               aria-hidden="true"></i>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                @endif
            </div>
            <div class="login-content flex-row-fluid d-flex flex-column justify-content-center position-relative overflow-hidden p-7 mx-auto max-w-600px">
                <div class="d-flex flex-column-fluid flex-center mb-12"
                     style="padding: 20px;background: #ffffffa6;border-radius: 50px;">
                    <div class="login-form login-signin">
                        <form method="POST" action="{{ route('login') }}"
                              class="form fv-plugins-bootstrap fv-plugins-framework" novalidate="novalidate"
                              id="kt_login_signin_form">
                            {{ csrf_field() }}
                            <div class="pb-10 pt-lg-0 pt-5" align="center">
                                <img alt="{{ config('app.name') }}" src="{{ asset($companyLogo) }}" width="225px"
                                     height="auto"/>
                            </div>
                            <div class="pb-13 pt-lg-0 pt-5">
                                <h3 class="font-weight-bolder font-size-h4 font-size-h1-lg"
                                    style="text-align: center; font-family: RobofanFree; text-transform: uppercase;color: #da683b;">
                                    Welcome to {{ env('APP_NAME') }}
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <label class="font-size-h6 font-weight-bolder text-dark">Email</label>
                                <input id="user_name"
                                       class="form-control form-control-solid h-auto py-4 px-4 rounded-lg @error('email') is-invalid @enderror"
                                       type="text" name="email" autocomplete="off">
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="d-flex justify-content-between mt-n5">
                                    <label
                                            class="font-size-h6 font-weight-bolder text-dark pt-5">{{ __('Password') }}</label>
                                </div>
                                <input
                                        class="form-control form-control-solid h-auto py-4 px-4 rounded-lg @error('password') is-invalid @enderror"
                                        type="password" id="password" name="password" autocomplete="off">
                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <a href="javascript:;"
                               class="text-dark float-top font-size-h6 font-weight-bolder text-hover-primary pb-5 d-block text-right"
                               id="kt_login_forgot">Forgot Password ?</a>
                            <div class="pb-lg-0 pb-5">
                                <button type="button" id="kt_login_signin_submit"
                                        class="btn btn-info font-weight-bolder font-size-h2 px-8 py-4 my-3 mr-3 d-bl w-100 bo rounded-pill"
                                        style="background-color: #72211e; font-family: RobofanFree; color: white;text-transform: uppercase;">
                                    {{ __('Login') }}
                                </button>
                            </div>
                            <input type="hidden">
                            <div></div>
                        </form>
                    </div>
                    <div class="login-form login-signup">
                        <form class="form fv-plugins-bootstrap fv-plugins-framework" method="POST"
                              data-url="{{ route('login') }}" novalidate="novalidate" id="kt_login_signup_form"
                              enctype="multipart/form-data">
                            {{ csrf_field() }}
                            <div class="pb-10 pt-lg-0 pt-5" align="center">
                                <img alt="{{ config('app.name') }}" src="{{ asset('media/logos/adani-logo.png') }}"
                                     width="225px" height="125px"/>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <input
                                            class="form-control h-auto py-4 px-4 rounded-lg font-size-h6"
                                            type="text" placeholder="Company Name" name="company_name" id="company_name"
                                            autocomplete="off" value="">
                                    <div class="fv-plugins-message-container"></div>
                                </div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <input
                                            class="form-control h-auto py-4 px-4 rounded-lg font-size-h6"
                                            type="email" placeholder="Email" name="email" id="email" autocomplete="off"
                                            value="">
                                    <div class="fv-plugins-message-container"></div>
                                </div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <textarea
                                            class="form-control h-auto py-4 px-4 rounded-lg font-size-h6"
                                            rows="3" placeholder="Address" name="address"
                                            autocomplete="off"></textarea>
                                    <div class="fv-plugins-message-container"></div>
                                </div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <input
                                            class="form-control h-auto py-4 px-4 rounded-lg font-size-h6"
                                            type="number" placeholder="Phone Number" name="phone_number"
                                            autocomplete="off"
                                            value="">
                                    <div class="fv-plugins-message-container"></div>
                                </div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <input
                                            class="form-control h-auto py-4 px-4 rounded-lg font-size-h6"
                                            type="text" placeholder="CIN" name="cin" autocomplete="off"
                                            value="" maxlength="21">
                                    <div class="fv-plugins-message-container"></div>
                                </div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="pan_card"
                                               name="pan_card">
                                        <label class="custom-file-label" for="pan_card">PAN Card</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="gst"
                                               name="gst">
                                        <label class="custom-file-label" for="gst">GST Certificate</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group d-flex flex-wrap pb-lg-0 pb-3">
                                <button type="submit" id="kt_login_signup_submit"
                                        class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-4">
                                    Register
                                </button>
                                <button type="button" id="kt_login_signup_cancel"
                                        class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3">
                                    Login
                                </button>
                            </div>
                            <div></div>
                        </form>
                    </div>
                    <div class="login-form login-forgot">
                        <form method="POST" action="{{ route('password.email') }}"
                              class="form fv-plugins-bootstrap fv-plugins-framework" novalidate="novalidate"
                              id="kt_login_forgot_form">
                            {{ csrf_field() }}
                            <div class="pb-10 pt-lg-0 pt-5" align="center">
                                <img alt="{{ config('app.name') }}" src="{{ asset($companyLogo) }}" width="225px"
                                     height="auto"/>
                            </div>
                            <div class="pb-13 pt-lg-0 pt-5">
                                <h3 class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg">Forgotten Password
                                    ?</h3>
                                <p class="text-muted font-weight-bold font-size-h4">Enter your email to reset your
                                    password</p>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <input class="form-control form-control-solid h-auto py-4 px-4 rounded-lg font-size-h6"
                                       type="text" placeholder="Email Address" name="email" autocomplete="off">
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group d-flex flex-wrap pb-lg-0">
                                <button type="submit" id="kt_login_forgot_submit"
                                        class="btn font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-4 rounded-pill"
                                        style="background-color: #72211e; font-family: RobofanFree; color: white;text-transform: uppercase;" >Submit
                                </button>
                                <button type="button" id="kt_login_forgot_cancel"
                                        class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 rounded-pill"
                                        style="background-color: #72211e; font-family: RobofanFree; color: white;text-transform: uppercase;">Cancel
                                </button>
                            </div>
                            <div></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        @endsection

        @section('scripts')

            <script>
                $('#carouselExampleIndicators').on('touchstart', function (event) {
                    var xClick = event.originalEvent.touches[0].pageX;
                    $(this).one('touchmove', function (event) {
                        var xMove = event.originalEvent.touches[0].pageX;
                        if (Math.floor(xClick - xMove) > 5) {
                            $(this).carousel('next');
                        } else if (Math.floor(xClick - xMove) < -5) {
                            $(this).carousel('prev');
                        }
                    });
                    $(this).on('touchend', function () {
                        $(this).off('touchmove');
                    });
                });
            </script>

            <script type="text/javascript" src="{{ url('js/modules/auth/login.js?t='.time()) }}"></script>
@endsection