@extends('layouts.app')

@section('content')

<div>
    <!-- Pages Header -->
    <div class="panelHeader">
        <h3 class="panelHeaderTitle">Payment Methods</h3>
    </div>

    <!-- Blog Table -->
    <div class="bg-white custom-table border-0 rounded p-4">
        <div id="accordion-collapse" data-accordion="collapse">
            <table class="table !text-base">
                <thead class="!text-sm">
                    <tr>
                        <th width="20"></th>
                        <th>Name</th>
                        <th>Status</th>
                        <th width="70%">Description</th>
                    </tr>
                </thead>

                <tbody>
                    @if (!empty($results))
                    @foreach ($results as $key => $row)
                    <tr>
                        <td>
                            <span class="cursor-pointer block p-3 [&.bg-gray-100:has(.icon)]:rotate-180"
                                id="accordion-collapse-heading-{{$row->id}}"
                                data-accordion-target="#accordion-collapse-body-{{$row->id}}" aria-expanded="false"
                                aria-controls="accordion-collapse-body-{{$row->id}}">

                                <svg class="icon" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
                                    stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <polyline points="6 9 12 15 18 9"></polyline>
                                </svg>

                            </span>
                        </td>
                        <td>
                            <span class=" font-semibold">
                                {{ $row->name }}
                            </span>
                        </td>
                        <td>
                            <label class="inline-flex items-center cursor-pointer align-middle">
                                <input type="checkbox" {{ $row->is_active == 1 ? 'checked' : '' }}
                                onclick="updateStatusFn({{$row->id}})"
                                class="sr-only peer">
                                <div
                                    class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all  peer-checked:bg-blue-600">
                                </div>
                            </label>
                        </td>
                        <td>{{ $row->description }}</td>
                    </tr>

                    <tr id="accordion-collapse-body-{{$row->id}}"
                        aria-labelledby="accordion-collapse-heading-{{$row->id}}" class="hidden">
                        <td colspan="4">
                            @if(in_array($row->slug, config('custom.stripe-list')))
                            @include('components.backend.paymentMethod.stripe')
                            @elseif(in_array($row->slug, config('custom.paypal-list')))
                            @include('components.backend.paymentMethod.paypal')
                            @elseif(in_array($row->slug, config('custom.bank-list')))
                            @include('components.backend.paymentMethod.bank')
                            @endif
                        </td>
                    </tr>
                    @endforeach
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection

@push('headerPartial')
@endpush

@push('footerPartial')
<script>
    function updateStatusFn(id) {
            $.post("{{route('admin.payment-method.update-status')}}", {
                _token: "{{csrf_token()}}",
                id
            }).then(function (response) {
                const data = JSON.parse(response);
                if (data.success) {
                    window.location = "{{route('admin.payment-method')}}"
                }
            })
        }
</script>
@endpush