@extends('frontend.layouts.template')
@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/css/login.css')}}" />
@endsection
@section('content')
<!-- START SECTION BREADCRUMB -->
<div class="breadcrumb_section bg_gray page-title-mini">
    <div class="container"><!-- STRART CONTAINER -->
        <div class="row align-items-center">
        	<div class="col-md-6">
                <div class="page-title">
            		<h1>{{ trans('label.login') }}</h1>
                </div>
            </div>
            <div class="col-md-6">
                <ol class="breadcrumb justify-content-md-end">
                    <li class="breadcrumb-item"><a href="/">{{ trans('label.home') }}</a></li>
                    <li class="breadcrumb-item active">{{ trans('label.login') }}</li>
                </ol>
            </div>
        </div>
    </div><!-- END CONTAINER-->
</div>
<!-- END SECTION BREADCRUMB -->
<!-- START LOGIN SECTION -->
<div class="login_register_wrap section">
    <!--    <div class="container-fluid">-->
        <div class="container">
            @if(Session::get('status') == 'errors')
            <div class="alert alert-danger">
                <h3>Error!!</h3>
                <p>{{ Session::get('message') }}</p>
            </div>
            @endif
            <div class="row justify-content-center">
    <!--        <div class="row">-->
                <div class="col-xl-4 col-md-6 offset-xl-0 offset-md-0">
                   <div class="text-center pt-5 click-slide mb-4" data-id="1" style="cursor: pointer;">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                            <div class="flip-card-front">
                                <img src="{{ asset('assets/images/login-customer.jpg') }}" alt="" class="login-logo">
                            </div>
                            <div class="flip-card-back">
                                <img src="{{ asset('assets/images/login-customer-hover.jpg') }}" alt="" class="login-logo-hover">
                            </div>
                            </div>
                        </div>
                       {{-- <div class="pt-3 pb-3">
                           <b>Customer / Agency</b>
                       </div> --}}
                   </div>
                    <div class="login_wrap box-login-all box-login-1" style="display: none;">
                        <div class="padding_eight_all bg-white">
                            <div class="heading_s1">
                                <h3>{{ trans('label.login') }}</h3>
                            </div>
                            <form method="post" action="{{ url('account/login') }}">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                                <input type="hidden" name="_page" value="login" />
                                <input type="hidden" name="type" value="customer" />
                                <div class="form-group">
                                    <input type="text" required="" class="form-control" name="email" placeholder="{{ trans('label.your_email') }}">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" required="" type="password" name="password" placeholder="{{ trans('label.password') }}">
                                </div>
                                <div class="login_footer form-group">
                                    <div class="chek-form">
                                        <div class="custome-checkbox">
                                            <input class="form-check-input" type="checkbox" name="remember" id="exampleCheckbox1" value="">
                                            <label class="form-check-label" for="exampleCheckbox1"><span>{{ trans('label.remember_me') }}</span></label>
                                        </div>
                                    </div>
                                    <a href="#">{{ trans('label.forgot_password') }}?</a>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-fill-out btn-block" name="login">{{ trans('label.login') }}</button>
                                </div>
                            </form>
                            <div class="different_login">
                                <span>{{ trans('label.or')}}</span>
                            </div>
    <!--
                            <ul class="btn-login list_none text-center">
                                <li><a href="#" class="btn btn-facebook"><i class="ion-social-facebook"></i>Facebook</a></li>
                                <li><a href="#" class="btn btn-google"><i class="ion-social-googleplus"></i>Google</a></li>
                            </ul>
    -->
                            <div class="form-note text-center">{{ trans('msg.no_account') }}? <a href="{{ url('signup') }}">{{ trans('label.sign_up_now') }}</a></div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 offset-xl-0 offset-md-1 res-md-m-1">
                    <div class="text-center pt-5 click-slide mb-4" data-id="2" style="cursor: pointer;">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                            <div class="flip-card-front">
                                <img src="{{ asset('assets/images/login-staff.jpg') }}" alt="" class="login-logo">
                            </div>
                            <div class="flip-card-back">
                                <img src="{{ asset('assets/images/login-staff-hover.jpg') }}" alt="" class="login-logo-hover">
                            </div>
                            </div>
                        </div>
                       {{-- <img src="{{ asset('assets/images/login-staff.jpg') }}" alt="" style="width: 120px;">
                       <div class="pt-3 pb-3">
                           <b>Staff</b>
                       </div> --}}
                   </div>
                    <div class="login_wrap box-login-all box-login-2" style="display: none;">
                        <div class="padding_eight_all bg-white">
                            <div class="heading_s1">
                                <h3>{{ trans('label.login') }}</h3>
                            </div>
                            <form method="post" action="{{ url('account/login') }}">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                                <input type="hidden" name="_page" value="login" />
                                <input type="hidden" name="type" value="staff" />
                                <div class="form-group">
                                    <input type="text" required="" class="form-control" name="email" placeholder="{{ trans('label.your_email') }}">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" required="" type="password" name="password" placeholder="{{ trans('label.password') }}">
                                </div>
                                <div class="login_footer form-group">
                                    <div class="chek-form">
                                        <div class="custome-checkbox">
                                            <input class="form-check-input" type="checkbox" name="remember" id="exampleCheckbox2" value="">
                                            <label class="form-check-label" for="exampleCheckbox2"><span>{{ trans('label.remember_me') }}</span></label>
                                        </div>
                                    </div>
                                    <a href="#">{{ trans('label.forgot_password') }}?</a>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-fill-out btn-block" name="login">{{ trans('label.login')}}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 offset-xl-0">
                    <div class="text-center pt-5 click-slide mb-4" data-id="3" style="cursor: pointer;">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                            <div class="flip-card-front">
                                <img src="{{ asset('assets/images/login-event.jpg') }}" alt="" class="login-logo">
                            </div>
                            <div class="flip-card-back">
                                <img src="{{ asset('assets/images/login-event-hover.jpg') }}" alt="" class="login-logo-hover">
                            </div>
                            </div>
                        </div>
                       {{-- <img src="{{ asset('assets/images/login-event.jpg') }}" alt="" style="width: 120px;">
                       <div class="pt-3 pb-3">
                           <b>Event</b>
                       </div> --}}
                   </div>
                    <div class="login_wrap box-login-all box-login-3" style="display: none;">
                        <div class="padding_eight_all bg-white">
                            <div class="heading_s1">
                                <h3>{{ trans('label.login') }}</h3>
                            </div>
                            <form method="post" action="{{ url('account/login') }}">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                                <input type="hidden" name="_page" value="login" />
                                <input type="hidden" name="type" value="staff-event" />
                                <div class="form-group">
                                    <input type="text" required="" class="form-control" name="email" placeholder="{{ trans('label.your_email') }}">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" required="" type="password" name="password" placeholder="{{ trans('label.password') }}">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" required="" type="text" name="teamcode" placeholder="Costcenter">
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-fill-out btn-block" name="login">{{ trans('label.login') }}</button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END LOGIN SECTION -->
@endsection
@section('javascript')
<script>
    $(".click-slide").on("click",function(){
        if( $(this).hasClass('active') ){
            $(this).removeClass('active');
        }else{
            $('.click-slide').removeClass('active');
            $(this).addClass('active');
        }

        // if( $(this).hasClass('active') )
        //     $(this).removeClass('active');

        var id = $(this).data('id');
        $('.box-login-all').hide(500);
        $('.box-login-'+id+':visible').hide(500);
        $('.box-login-'+id+':hidden').show(500);
    });
    </script>
@endsection