<x-app-layout>
    <x-slot name="css">
        <style>
            .layout-top-spacing {
                min-height: calc(100vh - 230px) !important;
            }
        </style>
    </x-slot>
    <div class="page-header row">
        <div class="page-title col-12 d-flex mt-4 pr-4">
            <h3 class="my-auto">{{ __('common.ManageLoyaltyStamp') }}</h3>
            <a href="{{ $url }}" id="addStamp" class="d-flex ml-auto btn btn-coffee-medium py-2 px-3">
                <svg class="mr-2 my-1" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-plus-circle">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="12" y1="8" x2="12" y2="16"></line>
                    <line x1="8" y1="12" x2="16" y2="12"></line>
                </svg>
                <span class="my-1">{{ __('common.addStamp') }}</span></a>
        </div>
    </div>

    <div class="row layout-top-spacing">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
            <div class="widget-content widget-content-area br-6">
                <table id="manage_loyalty_stamp" class="table dt-table-hover" style="width:100%">
                    <thead>
                        <tr>
                            {{-- <th>{{ __('common.no.') }}</th> --}}
                            <th>{{ __('common.stamp_color') }}</th>
                            <th>{!! __('common.discount') !!}</th>
                            <th>{{ __('common.minOrderValue') }}</th>
                            <th>{{ __('common.noOfTotalStamp') }}</th>
                            <th class="no-content"></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <x-slot name="script">
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': "{{csrf_token()}}"
                }
            });
            const getData = "{{ $dataUrl }}";
            const tableElement = document.getElementById('manage_loyalty_stamp');
        </script>
        <script src="{{ asset('assets/js/cafe/manageLoyaltyStamp.js') }}"></script>
        <script src="{{ asset('assets/js/tableAction.js') }}"></script>
    </x-slot>
</x-app-layout>