@if (\Illuminate\Support\Facades\Auth::user()->isAbleTo('finance-read'))
        <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-fluid">

                <!--begin::Card-->
                <div class="card card-flush" style="box-shadow: 0px 5px 10px #4f55da;">
                    <!--begin::Card header-->
                    <div class="card-header mt-2">
                        <!--begin::Card title-->
                        {{-- <div class="card-title">
                            <!--begin::Search-->
                            <div class="d-flex align-items-center position-relative my-1 me-5">
                                <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                                <span class="svg-icon svg-icon-1 position-absolute ms-6">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none">
                                        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                            rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                                        <path
                                            d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                            fill="black" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                                <input type="text" data-kt-table-filter="search" wire:model="search"
                                    class="form-control w-500px ps-15" placeholder="Search"
                                    style=" border: #c3c3c3 solid thin; border-radius: 5px;" />
                            </div>
                            <!--end::Search-->
                        </div> --}}
                    </div>
                    <!--end::Card header-->
                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        <!--begin::Table-->
                        {{-- <button class="primary" wire:click="test">test</button> --}}
                        <table class="table align-middle table-row-bordered text-start fs-8 gy-5 mb-0" id="kt_table">
                            <!--begin::Table head-->
                            <thead>
                                <!--begin::Table row-->
                                <tr class="text-start text-gray-400 fw-bolder fs-8 text-uppercase gs-0">
                                    <th class="min-w-50px text-black text-center p-2">Status</th>
                                    <th class="min-w-125px text-black p-2">Service Name</th>
                                    <th class="min-w-125px text-black p-2">Paid</th>
                                    <th class="min-w-125px text-black p-2">Start Date </th>
                                    <th class="min-w-125px text-black p-2">End Date</th>
                                    <th class="min-w-125px text-black p-2">Expirein</th>
                                    <th class="min-w-125px text-black p-2">Invoice</th>
                                </tr>
                                <!--end::Table row-->
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody class="fw-bold text-gray-600">
                                @if (sizeof($service) > 0)
                                    @foreach ($service as $tabledata)
                                        <tr>
                                            <td class="text-center p-2">
                                                <center>

                                                    @if ($tabledata['status'])
                                                        <span
                                                            class="badge badge-success fs-9 m-1 text-dark">Active</span>
                                                    @else
                                                        <span
                                                            class="badge badge-secondary fs-9 m-1 text-gray-500">Inactive</span>
                                                    @endif

                                                </center>
                                            </td>
                                            <!--begin::Name=-->
                                            <td class="text-black p-2">{{ $tabledata['service_name'] }}</td>
                                            <td class="text-black p-2">{{ $tabledata['service_cost_paid'] }}</td>
                                            <td class="text-black p-2">{{ $tabledata['effective_date'] }}</td>
                                            <td class="text-black p-2">{{ $tabledata['expired_date'] }}</td>
                                            @if ($tabledata['dif_indays'] > 0)
                                                <td class="text-black p-2">{{ $tabledata['dif_indays'] }} days</td>
                                            @else
                                                <td class="p-2"><span
                                                        class="badge badge-danger fs-9 text-white-500">Expired</span>
                                                </td>
                                            @endif
                                            <td class="text-black p-2">
                                                <button class="btn btn-icon btn-active-light-danger w-15px h-15px me-3"
                                                    wire:click="receipt_view('{{ $tabledata['transaction_id'] }}')">
                                                    <span class="svg-icon svg-icon-danger svg-icon-6">
                                                        <svg height="200px" width="200px" version="1.1" id="Layer_1"
                                                            xmlns="http://www.w3.org/2000/svg"
                                                            xmlns:xlink="http://www.w3.org/1999/xlink"
                                                            viewBox="0 0 511.999 511.999" xml:space="preserve"
                                                            fill="#000000">
                                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round"
                                                                stroke-linejoin="round"></g>
                                                            <g id="SVGRepo_iconCarrier">
                                                                <path style="fill:#D6E5F6;"
                                                                    d="M434.83,1.624c-7.967-3.301-17.146-1.478-23.249,4.625L383.999,33.83L356.418,6.249 c-8.33-8.331-21.838-8.331-30.17,0L298.666,33.83L271.085,6.249c-8.33-8.331-21.838-8.331-30.17,0L213.333,33.83L185.752,6.249 c-8.33-8.331-21.838-8.331-30.17,0L128,33.83L100.419,6.249c-6.1-6.103-15.28-7.926-23.249-4.625C69.198,4.927,64,12.705,64,21.333 v469.332c0,11.782,9.552,21.333,21.333,21.333h341.332c11.782,0,21.333-9.552,21.333-21.333V21.333 C447.999,12.705,442.802,4.927,434.83,1.624z">
                                                                </path>
                                                                <path style="fill:#BCD6F2;"
                                                                    d="M434.83,1.624c-7.967-3.301-17.146-1.478-23.249,4.625L383.999,33.83L356.418,6.249 c-8.33-8.331-21.838-8.331-30.17,0L298.666,33.83L271.085,6.249C266.919,2.084,261.459,0,255.999,0v511.999h170.666 c11.782,0,21.333-9.552,21.333-21.333V21.333C447.999,12.705,442.802,4.927,434.83,1.624z">
                                                                </path>
                                                                <g>
                                                                    <path style="fill:#8CB7E8;"
                                                                        d="M298.666,384h-128c-11.782,0-21.333,9.55-21.333,21.333c0,11.78,9.552,21.333,21.333,21.333h128 c11.782,0,21.333-9.553,21.333-21.333C319.999,393.551,310.449,384,298.666,384z">
                                                                    </path>
                                                                    <path style="fill:#8CB7E8;"
                                                                        d="M341.332,298.667H170.666c-11.782,0-21.333,9.55-21.333,21.333c0,11.78,9.552,21.333,21.333,21.333 h170.666c11.782,0,21.333-9.553,21.333-21.333C362.666,308.218,353.115,298.667,341.332,298.667z">
                                                                    </path>
                                                                    <path style="fill:#8CB7E8;"
                                                                        d="M170.666,256.001h128c11.782,0,21.333-9.553,21.333-21.333c0-11.783-9.552-21.333-21.333-21.333 h-128c-11.782,0-21.333,9.55-21.333,21.333C149.333,246.448,158.885,256.001,170.666,256.001z">
                                                                    </path>
                                                                    <path style="fill:#8CB7E8;"
                                                                        d="M170.666,170.668h170.666c11.782,0,21.333-9.553,21.333-21.333c0-11.783-9.552-21.333-21.333-21.333 H170.666c-11.782,0-21.333,9.55-21.333,21.333C149.333,161.115,158.885,170.668,170.666,170.668z">
                                                                    </path>
                                                                </g>
                                                                <g>
                                                                    <path style="fill:#6398DE;"
                                                                        d="M298.666,426.667c11.782,0,21.333-9.553,21.333-21.333c0-11.783-9.552-21.333-21.333-21.333h-42.667 v42.667H298.666z">
                                                                    </path>
                                                                    <path style="fill:#6398DE;"
                                                                        d="M341.332,298.667h-85.333v42.667h85.333c11.782,0,21.333-9.553,21.333-21.333 C362.666,308.218,353.115,298.667,341.332,298.667z">
                                                                    </path>
                                                                    <path style="fill:#6398DE;"
                                                                        d="M319.999,234.668c0-11.783-9.552-21.333-21.333-21.333h-42.667v42.667h42.667 C310.449,256.001,319.999,246.448,319.999,234.668z">
                                                                    </path>
                                                                    <path style="fill:#6398DE;"
                                                                        d="M362.666,149.334c0-11.783-9.552-21.333-21.333-21.333h-85.333v42.667h85.333 C353.115,170.668,362.666,161.115,362.666,149.334z">
                                                                    </path>
                                                                </g>
                                                            </g>
                                                        </svg>
                                                    </span>
                                                </button>
                                            </td>

                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td class="p-2 justify-content-center text-center" colspan="6">
                                            <h2 class="fs-2">No Data Available</h2>
                                        </td>
                                    </tr>
                                @endif

                            </tbody>
                            <!--end::Table body-->

                        </table>
                        <!--end::Table-->
                        {{-- <div class="col-12 justify-content-end">
                            {{ $service->links('livewire.pagination-livewire') }}
                        </div> --}}
                    </div>
                    <!--end::Card body-->
                </div>

            </div>
            <!--end::Container-->
        </div>
    @else
        <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-fluid">
                <div class="card card-flush">
                    <div class="card-body">
                        <h1 class=" text-center text-bold" style="font-size: 25px; font-weight: bold; color: red;">Sorry
                            !!! Unauthorized Access</h1>
                    </div>
                </div>
            </div>
        </div>
    @endif


    @section('externaljs')
        <script>
            window.addEventListener('newtab_redirect', event => {
                window.open('/receipt_print', '_blank');
            });
        </script>
    @endsection