@extends('layouts.app')
@section('title')打卡-人事管理@endsection
@section('content')
    <div class="container-fluid mt-3" id="page">
        <div class="card col-md-10 offset-md-1 p-0">
            <div class="card-body">
                <div class="list-group list-group-horizontal-lg align-content-center">
                <a target="_blank" class="btn col-md-2 btn-outline-primary ml-5"  style="transform: scale(1.5)" :href="('{{url('personnel/checking-in/importAndExportQRCode')}}')" >进出场打卡</a>
                </div>
                <br>
                <div class="card-header"><h3 style="color: red">组二维码</h3>
                <div class="card align-content-center" v-if="warehouses" v-for="warehouse in warehouses">
                    <div class="card-body">
                        <div class="card-title"> <span>@{{ warehouse.name }}</span></div>
                    </div>
                    <div class="row mb-3 ml-2">

                        <div class="col-2" v-for="userWorkgroup in warehouse.user_workgroups">
                            <a target="_blank"  class="btn" :href="('{{url('personnel/checking-in/QRCode?userWorkgroupId=')}}'+userWorkgroup.id)"  :class="userWorkgroup==checkedUserWorkgroup ? 'btn-primary' : 'btn-outline-primary'"
                              >@{{ userWorkgroup.name }}</a>
                        </div>
                    </div>

                </div>
            </div>
            </div>
        </div>
    </div>
@endsection
@section('lastScript')
    <script>
        new Vue({
            el:"#page",
            data:{
                warehouses:{!! $warehouses !!},
                checkedUserWorkgroup:'',
            },
        });
    </script>
@endsection