@extends('layouts.backend')

@section('title', 'Checkout')

@section('content')

<div class="block block-rounded block-bordered" id="block-table" >
    <div class="block-content pb-4" >
        <div class="row gutters-tiny push">
            @foreach ($tables as $table)
            <div class="col-6 col-md-4 col-xl-2">
                <a class="block block-link-pop text-center bg-primary" href="{{ route('checkout', ['table_id' => $table->id]) }}">
                    <div class="block-content block-content-full aspect-ratio-16-9 d-flex justify-content-center align-items-center">
                        <div>
                            <div class="font-size-h1 font-w300 text-white">{{ $table->name }}</div>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</div>

@endsection

@section('script')
<script type="text/javascript">

    $(document).ready(function () {
        (function ($) {

            var timer = null;

            function start(){
                var timer = setInterval(function(){
                    window.location.reload();
                }, 5000);
            }
            start();
        })(jQuery);
    });
    
</script>
@endsection