@extends('website.layouts.master')
@section('head')
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title ?? get_platform_title() }}</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="{{asset('website/css/subpages.css')}}">
    <link rel="stylesheet" href="{{asset('website/css/style.css')}}">
    <link href="{{ asset('website/css/app.css') }}" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .select2-selection__arrow {
            display: none;
        }

        .form-control-feedback {
            width: 46px;
            height: 46px;
            line-height: 46px;
        }

        .select2-container--default .select2-selection--single {
            height: 46px !important;
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.33;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 31px !important;
        }

    </style>
@stop
@section('css')
{{--    <link rel="stylesheet" href="{{asset('website/css/subpages.css')}}">--}}
@stop
@section('script.title') @stop
@section('content')
    <div class="login-box">
        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>{{ trans('theme.error') }}!</strong> {{ trans('messages.input_error') }}<br><br>
                <ul class="list-group">
                    @foreach ($errors->all() as $error)
                        <li class="list-group-item list-group-item-danger">{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="login-logo">
            <a href="{{ url('/') }}">{{ get_platform_title() }}</a>
        </div>
            <div class="box login-box-body">
                    <div class="box-header with-border">
                        <h3 class="box-title">{{ trans('theme.account_login') }}</h3>
                    </div> <!-- /.box-header -->
                    <div class="box-body">

                        {!! Form::open(['route' => 'customer.login.submit', 'id' => 'form', 'data-toggle' => 'validator']) !!}

                        <div class="form-group has-feedback" >
                            {!! Form::email('email', null, ['class' => 'form-control input-lg', 'placeholder' => trans('theme.placeholder.email'), 'required']) !!}
                            <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group has-feedback" >
                            {!! Form::password('password', ['class' => 'form-control input-lg', 'id' => 'password', 'placeholder' => trans('theme.placeholder.password'), 'data-minlength' => '6', 'required']) !!}
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-7">
                                <div class="form-group">
                                    <label>
                                        {!! Form::checkbox('remember', null, null, ['class' => 'icheck']) !!} {{ trans('theme.remember_me') }}
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-5">
                                {!! Form::submit(trans('theme.button.login'), ['class' => 'btn btn-block btn-flat btn-primary']) !!}
                            </div>
                        </div>
                        {!! Form::close() !!}

                        @if (config('system_settings.social_auth'))
                            <div class="social-auth-links text-center">
                                @if (config('services.facebook.client_id'))
                                    <a href="{{ route('socialite.customer', 'facebook') }}" class="btn btn-block btn-social btn-facebook btn-lg btn-flat">
                                        <i class="fa fa-facebook"></i> {{ trans('theme.button.login_with_fb') }}
                                    </a>
                                @endif

                                @if (config('services.google.client_id'))
                                    <a href="{{ route('socialite.customer', 'google') }}" class="btn btn-block btn-social btn-google btn-lg btn-flat">
                                        <i class="fa fa-google"></i> {{ trans('theme.button.login_with_g') }}
                                    </a>
                                @endif

                                @if (is_incevio_package_loaded('apple-login'))
                                    <a href="{{ route('socialite.customer', 'apple') }}" class="btn btn-block btn-social btn-apple btn-lg btn-flat">
                                        <i class="fa fa-apple"></i> {{ trans('appleLogin::lang.login_with_apple') }}
                                    </a>
                                @endif
                            </div> <!-- /.social-auth-links -->
                        @endif

                        <a class="btn btn-link" href="{{ route('customer.password.request') }}">
                            {{ trans('theme.forgot_password') }}
                        </a>

                        <a class="btn btn-link" href="{{ route('customer.register') }}" class="text-center">
                            {{ trans('theme.register_here') }}
                        </a>
                    </div>
                </div>
    </div>



    @if (config('services.recaptcha.key'))
        @include('theme::scripts.recaptcha')
    @endif

@stop

@section('script')
    <script type="text/javascript">
        // ;(function($, window, document) {
        $("#plans").select2({
            minimumResultsForSearch: -1,
        });
        $("#exp-year").select2({
            placeholder: "{{ trans('theme.placeholder.exp_year') }}",
            minimumResultsForSearch: -1,
        });
        $("#exp-month").select2({
            placeholder: "{{ trans('theme.placeholder.exp_month') }}",
            minimumResultsForSearch: -1,
        });

        $('.icheck').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });

        //Country
        $("#country_id").change(function() {
            $("#state_id").empty().trigger('change'); //Reset the state dropdown

            $("#country_id").select2();

            var ID = $("#country_id").select2('data')[0].id;
            var url = "{{ route('ajax.getCountryStates') }}"

            $.ajax({
                delay: 250,
                data: "id=" + ID,
                url: url,
                success: function(result) {
                    var data = [];
                    if (result.length !== 0) {
                        data = $.map(result, function(val, id) {
                            return {
                                id: id,
                                text: val
                            };
                        })
                    }

                    $("#state_id").select2({
                        allowClear: true,
                        tags: true,
                        placeholder: "{{ trans('app.placeholder.state') }}",
                        data: data,
                        sortResults: function(results, container, query) {
                            if (query.term) {
                                return results.sort();
                            }

                            return results;
                        }
                    });
                }
            });
        });

        // });
    </script>

    <div class="loader">
        <center>
            <img class="loading-image" src="{{ theme_asset_url('img/loading.gif') }}" alt="busy...">
        </center>
    </div>
    <script src="{{ mix('js/app.js') }}"></script>

@stop