@extends('frontend.layouts.contentLayoutMaster')

@section('title', '會員條碼')
@section('active', 'barcode')

@section('vendor-styles')
@endsection

@section('page-styles')
<style>
.vertical-card {
    top: 50px;
    transform: rotate(90deg);
    transform-origin: 50% 50%
}
</style>

@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height">
        <div class="col-12">
            <div class="card ">
                <div class="card-header text-center">                    
                    @foreach($user_ranks as $rank) 
                        {{ $rank->firm_rank->name }}
                    @endforeach
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="form-body">
                            <div class="row d-flex justify-content-center">
                                <div class="">
                                    {!! $barcode !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('vendor-scripts')
<script>
    // var width = document.documentElement.clientWidth;
    // var height = document.documentElement.clientHeight;
    // if(width <= 768){
    //     $('.card').css('top', height/7 )
    //         .css('transform' , 'rotate(90deg)')
    //         .css('transform-origin' , '50% 50%');
    // }
</script>
@endsection

@section('page-scripts') 

@endsection