@extends('layouts.auth2')
@section('title', __('lang_v1.login'))

@section('content')
    <div class="login-form col-md-18 col-xs-18 right-col-content">
        <p class="form-header text-white">@lang('lang_v1.login')</p>
        <form method="POST" action="{{ route('login') }}" id="login-form">
            {{ csrf_field() }}
            <div class="form-group has-feedback">
                @php
                    $password = null;
                    if(config('app.env') == 'demo'){
                        $password = '123456';

                        $demo_types = array(
                            'all_in_one' => 'admin',
                            'super_market' => 'admin',
                            'pharmacy' => 'admin-pharmacy',
                            'electronics' => 'admin-electronics',
                            'services' => 'admin-services',
                            'restaurant' => 'admin-restaurant',
                            'superadmin' => 'superadmin',
                            'woocommerce' => 'woocommerce_user',
                            'essentials' => 'admin-essentials',
                            'manufacturing' => 'manufacturer-demo',
                        );
                    }
                @endphp
            </div>
            <div class="form-group has-feedback {{ $errors->has('password') ? ' has-error' : '' }}">
                <input id="pin" type="hidden" class="form-control" name="pin" value="{{ $password }}" placeholder="@lang('lang_v1.password')">
                <input id="password" type="password" class="form-control" name="password" value="{{ $password }}" placeholder="@lang('lang_v1.password')">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                @if ($errors->has('password'))
                    <span class="help-block">
                        <strong>{{ $errors->first('password') }}</strong>
                    </span>
                @endif
            </div>
            <br>

            <div class="row ">
                <div class="col-md-4">
                    <button  style="margin: 2px; width: 110%;font-weight:bolder;font size: 100px;color: white;background-color: blue;padding-bottom: 30px" class="btn btn-lg" type="button" onclick="setPin(1)">1</button>
                </div>
                <div class="col-md-4">
                    <button  style="margin: 2px; width: 110%;font-weight:bolder;color: white;background-color: blue;padding-bottom: 30px" class="btn btn-lg" type="button" onclick="setPin(2)">2</button>
                </div>
                <div class="col-md-4">
                    <button  style="margin: 2px; width: 110%;font-weight:bolder;color: white;background-color: blue;padding-bottom: 30px" class="btn btn-lg" type="button" onclick="setPin(3)">3</button>
                </div>
                <div class="col-md-4">
                    <button  style="margin: 2px; width: 110%;font-weight:bolder;color: white;background-color: blue;padding-bottom: 30px" class="btn btn-lg" type="button" onclick="setPin(4)">4</button>
                </div>
                <div class="col-md-4">
                    <button  style="margin: 2px; width: 110%;font-weight:bolder;color: white;background-color: blue;padding-bottom: 30px" class="btn btn-lg" type="button" onclick="setPin(5)">5</button>
                </div>
                <div class="col-md-4">
                    <button  style="margin: 2px; width: 110%;font-weight:bolder;color: white;background-color: blue;padding-bottom: 30px" class="btn btn-lg" type="button" onclick="setPin(6)">6</button>
                </div>
                <div class="col-md-4">
                    <button  style="margin: 2px; width: 110%;font-weight:bolder;color: white;background-color: blue;padding-bottom: 30px" class="btn btn-lg" type="button" onclick="setPin(7)">7</button>
                </div>
                <div class="col-md-4">
                    <button  style="margin: 2px; width: 110%;font-weight:bolder;color: white;background-color: blue;padding-bottom: 30px" class="btn btn-lg" type="button" onclick="setPin(8)">8</button>
                </div>
                <div class="col-md-4">
                    <button  style="margin: 2px; width: 110%;font-weight:bolder;color: white;background-color: blue;padding-bottom: 30px" class="btn btn-lg" type="button" onclick="setPin(9)">9</button>
                </div>
                <div class="col-md-4">
                    <button type="button" style="margin: 2px; width: 110%;font-weight:bolder;color: white;background-color: red;padding-bottom: 30px" class="btn btn-lg" onclick="clearInput()">Clear</button>
                </div>
                <div class="col-md-4">
                    <button style="margin: 2px; width: 110%;font-weight:bolder;color: white;background-color: blue;padding-bottom: 30px" class="btn btn-lg" type="button" onclick="setPin(0)">0</button>
                </div>
                <div class="col-md-4">
                    <button onclick="updatePin()" type="submit" style="margin: 2px; width: 110%;font-weight:bolder;color: white;padding-bottom: 30px" class="btn btn-lg btn-primary">@lang('lang_v1.login')</button>
                </div>
            </div>
        </form>
    </div>
    @if(config('app.env') == 'demo')
    <div class="col-md-12 col-xs-12" style="padding-bottom: 30px;">
        @component('components.widget', ['class' => 'box-primary', 'header' => '<h4 class="text-center">Demo Shops <small><i> Demos are for example purpose only, this application <u>can be used in many other similar businesses.</u></i></small></h4>'])

            <a href="?demo_type=all_in_one" class="btn btn-app bg-olive demo-login" data-toggle="tooltip" title="Showcases all feature available in the application." data-admin="{{$demo_types['all_in_one']}}"> <i class="fas fa-star"></i> All In One</a>

            <a href="?demo_type=pharmacy" class="btn bg-maroon btn-app demo-login" data-toggle="tooltip" title="Shops with products having expiry dates." data-admin="{{$demo_types['pharmacy']}}"><i class="fas fa-medkit"></i>Pharmacy</a>

            <a href="?demo_type=services" class="btn bg-orange btn-app demo-login" data-toggle="tooltip" title="For all service providers like Web Development, Restaurants, Repairing, Plumber, Salons, Beauty Parlors etc." data-admin="{{$demo_types['services']}}"><i class="fas fa-wrench"></i>Multi-Service Center</a>

            <a href="?demo_type=electronics" class="btn bg-purple btn-app demo-login" data-toggle="tooltip" title="Products having IMEI or Serial number code."  data-admin="{{$demo_types['electronics']}}" ><i class="fas fa-laptop"></i>Electronics & Mobile Shop</a>

            <a href="?demo_type=super_market" class="btn bg-navy btn-app demo-login" data-toggle="tooltip" title="Super market & Similar kind of shops." data-admin="{{$demo_types['super_market']}}" ><i class="fas fa-shopping-cart"></i> Super Market</a>

            <a href="?demo_type=restaurant" class="btn bg-red btn-app demo-login" data-toggle="tooltip" title="Restaurants, Salons and other similar kind of shops." data-admin="{{$demo_types['restaurant']}}"><i class="fas fa-utensils"></i> Restaurant</a>
            <hr>

            <i class="icon fas fa-plug"></i> Premium optional modules:<br><br>

            <a href="?demo_type=superadmin" class="btn bg-red-active btn-app demo-login" data-toggle="tooltip" title="SaaS & Superadmin extension Demo" data-admin="{{$demo_types['superadmin']}}"><i class="fas fa-university"></i> SaaS / Superadmin</a>

            <a href="?demo_type=woocommerce" class="btn bg-woocommerce btn-app demo-login" data-toggle="tooltip" title="WooCommerce demo user - Open web shop in minutes!!" style="color:white !important" data-admin="{{$demo_types['woocommerce']}}"> <i class="fab fa-wordpress"></i> WooCommerce</a>

            <a href="?demo_type=essentials" class="btn bg-navy btn-app demo-login" data-toggle="tooltip" title="Essentials & HRM (human resource management) Module Demo" style="color:white !important" data-admin="{{$demo_types['essentials']}}">
                    <i class="fas fa-check-circle"></i>
                    Essentials & HRM</a>

            <a href="?demo_type=manufacturing" class="btn bg-orange btn-app demo-login" data-toggle="tooltip" title="Manufacturing module demo" style="color:white !important" data-admin="{{$demo_types['manufacturing']}}">
                    <i class="fas fa-industry"></i>
                    Manufacturing Module</a>

            <a href="?demo_type=superadmin" class="btn bg-maroon btn-app demo-login" data-toggle="tooltip" title="Project module demo" style="color:white !important" data-admin="{{$demo_types['superadmin']}}">
                    <i class="fas fa-project-diagram"></i>
                    Project Module</a>

            <a href="?demo_type=services" class="btn btn-app demo-login" data-toggle="tooltip" title="Advance repair module demo" style="color:white !important; background-color: #bc8f8f" data-admin="{{$demo_types['services']}}">
                    <i class="fas fa-wrench"></i>
                    Advance Repair Module</a>

            <a href="{{url('docs')}}" target="_blank" class="btn btn-app" data-toggle="tooltip" title="Advance repair module demo" style="color:white !important; background-color: #2dce89">
                    <i class="fas fa-network-wired"></i>
                    Connector Module / API Documentation</a>
        @endcomponent
    </div>
    @endif
@stop
@section('javascript')
<script type="text/javascript">
    $(document).ready(function(){
        $('#change_lang').change( function(){
            window.location = "{{ route('login') }}?lang=" + $(this).val();
        });

        $('a.demo-login').click( function (e) {
           e.preventDefault();
           $('#password').val("{{$password}}");
           $('form#login-form').submit();
        });
    })

    function updatePin(){
        let input = document.getElementById('pin');
        input.value = document.getElementById('password').value;
    }

    //set pins
    function setPin(value){
        let input = document.getElementById('password');
        input.value += value
    }

    //clear pin
    function clearInput() {
      var input = document.getElementById('password');
      input.value = "";
    }
</script>
@endsection