@extends('layout')

@section('pageTitle', "首頁｜".config('globals.app_name'))


@section('content')
<style>
    .card-box{
        padding:24px;
    }
    .card-title h1{
        font-size: 30px;
    }
</style>
<div class="card-box">
    <div class="card-title">
        <h1>打卡系統</h1>
    </div>
</div>
<div class="card-box navbar-light bg-light">
    <div class="row">
        <div class="col-12 mb-1">
            <h4>{{ $user->name }}({{ $user->nickName }})</h4>
        </div>
        @csrf
        <div class="col-md-4 col-12 d-flex " style="align-items: center">
            <label for="" style="width:150px;">
                打卡日期
            </label>
            <input type="text" id="datepicker" class="form-control ml-3" value="{{ date('Y-m-d') }}">
        </div>
        <div class="col-md-4 col-12 my-md-0 my-3">
            @php
                $up = empty($recode[date('Y-m-d')]['上班'])?"":'disabled';
                $down = empty($recode[date('Y-m-d')]['下班'])?"":'disabled';
            @endphp
            <button class="btn btn-dark punch" data-type="上班" {{ $up }} >上班打卡</button>
            <button class="btn btn-dark punch" data-type="下班" {{ $down }}>下班打卡</button>
        </div>
    </div>
</div>

<div class="card-box mt-3">
    <div class="row">
        <div class="col-12">
            <h4>打卡紀錄</h4>
            <hr>
        </div>
    </div>
    <div class="row">
        @foreach ($recode as $item => $row)
        <div class="col-md-4 col-12 my-md-0 my-1">
            <div class="card-box navbar-light bg-light">
                <h5>{{ $item }}</h5>
                <div class="row">
                    <div class="col-md-4 col-12">上班時間:</div>
                    <div class="col-md-8 col-12">{{ empty($row['上班'])?"":$row['上班'] }}</div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-12">下班時間:</div>
                    <div class="col-md-8 col-12">{{ empty($row['下班'])?"":$row['下班'] }}</div>
                </div>
                <div class="row">
                    <div class="col-4">備註</div>
                    <div class="col-8"></div>
                </div>
            </div>
        </div>
        @endforeach
        {{-- <div class="col-md-4 col-12 my-md-0 my-1">
            <div class="card-box navbar-light bg-light">
                <h5>2024-04-28</h5>
                <div class="row">
                    <div class="col-4">上班時間:</div>
                    <div class="col-8">2024-04-28 00:00:00</div>
                </div>
                <div class="row">
                    <div class="col-4">下班時間:</div>
                    <div class="col-8">2024-04-28 00:00:00</div>
                </div>
                <div class="row">
                    <div class="col-4">備註</div>
                    <div class="col-8">測試測試</div>
                </div>
            </div>
        </div> --}}
    </div>
</div>


<script>
    // $('.datepicker').datepicker()
    $(document).ready(function(){
        $('#datepicker').datepicker({
            format: 'yyyy-mm-dd'
        });

        $('.punch').click(function(){
            var flag = 0;
            var date = $('#datepicker').val();
            var type = $(this).data('type');
            var token = $('input[name=_token]').val();
            var mode = {
                'punchTime':date,
                'type':type,
                'ps':'',
            };

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': token
                }
            });
            if(flag == 0){
                $flag = 1;
                $.post('/punch/create',mode,function(){
                    alert('打卡成功');
                    location.reload();
                    flag = 0;
                });
            }
        });

    });
</script>
@endsection