@extends('backend.layout.layouts')

@section('content')
    <div class="container mx-auto">
        <div class="container">
            <div class="flex justify-between my-10">
                <h2 class="text-2xl ">Payment Details</h2>

            </div>


            @if (session('success'))
                <div class="px-4 py-2 mb-4 text-green-800 bg-green-200 border border-green-600 rounded">
                    {{ session('success') }}
                </div>
            @endif
            <table id="paymentTable" class="table text-center table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                        <th>contact Number</th>
                        <th>Order Date</th>
                        <th>Transaction No.</th>
                        <th>Payment Status</th>
                        <th>Total</th>
                        <th>Shipping Method</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>


        @foreach ($payments as $payment)
            <div
                id="viewproductModal{{ $payment->id }}"class="fixed inset-0 z-50 flex items-center justify-center hidden p-4 bg-black bg-opacity-80">
                <div class="w-full max-w-md bg-gray-100 rounded-lg shadow-lg">
                    <div class="flex items-center justify-between p-4 border-b modal-header">
                        <h5 class="text-xl font-semibold">View Product</h5>
                        <button type="button" class="text-gray-600 hover:text-gray-900"
                            onclick="closeModal('viewproductModal{{ $payment->id }}')">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @foreach ($payment->channelPayments as $channelPayment)
                        <div class="p-4 mb-4 bg-white rounded-lg shadow-md">
                            <div class="flex items-center">
                                <img src="{{ asset($channelPayment->product->picture_channel) }}"
                                    class="mr-4 rounded-lg w-28 h-28" alt="Product Image">
                                <div>
                                    <p class="text-lg font-semibold text-gray-700">Product Name:
                                        <span class="text-gray-900">{{ $channelPayment->product->product->name }}</span>
                                    </p>
                                    <p class="text-lg font-semibold text-gray-700">Product Variant:
                                        <span class="text-gray-900">{{ $channelPayment->product->variant }}</span>
                                    </p>
                                    <p class="text-lg font-semibold text-gray-700">Quantity:
                                        <span class="text-gray-900">{{ $channelPayment->quantity }}</span>
                                    </p>
                                    <p class="text-lg font-semibold text-gray-700">Price:
                                        <span class="text-gray-900">{{ $channelPayment->product->price1 }}</span>
                                    </p>
                                </div>
                            </div>
                            <hr class="my-4 border-gray-300">
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Delete Payment Modal -->
            <div id="deletepaymentModal{{ $payment->id }}"
                class="fixed inset-0 z-50 flex items-center justify-center hidden p-4 bg-black bg-opacity-80">
                <div class="w-full max-w-md bg-gray-100 rounded-lg shadow-lg">
                    <!-- Modal Header -->
                    <div class="flex items-center justify-between p-4 bg-gray-200 border-b rounded-t-lg">
                        <h5 class="text-xl font-semibold" id="deleteModalLabel{{ $payment->id }}">Delete Payment</h5>
                        <button type="button" class="text-gray-600 hover:text-gray-900"
                            onclick="closeModal('deletepaymentModal{{ $payment->id }}')">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <!-- Modal Body -->
                    <div class="p-4">
                        <p>Are you sure you want to delete this Payment?</p>
                    </div>

                    <!-- Modal Footer -->
                    <div class="flex justify-end p-4 bg-gray-200 border-t rounded-b-lg">
                        <form action="{{ route('payment.destroy', $payment->id) }}" method="POST">
                            @csrf
                            <button type="submit"
                                class="px-4 py-2 text-white bg-red-600 rounded hover:bg-red-700">Delete</button>
                            <button type="button"
                                class="px-4 py-2 ml-2 text-gray-700 bg-gray-300 rounded hover:bg-gray-400"
                                onclick="closeModal('deletepaymentModal{{ $payment->id }}')">Cancel</button>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach


        <script>
            function openModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.remove('hidden');
            }

            // Close modal
            function closeModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.add('hidden');
            }
        </script>



        <script>
            $(document).ready(function() {
                $('#paymentTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('payment.index') }}",
                        type: 'GET'
                    },
                    columns: [{
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'address',
                            name: 'address'
                        },
                        {
                            data: 'contact_number',
                            name: 'contact_number'
                        },
                          {
                            data: 'created_at',
                            name: 'created_at'
                        },
                        {
                            data: 'maya_id',
                            name: 'maya_id'
                        },
                        {
                            data: 'payment_status',
                            name: 'payment_status'
                        },
                        {
                            data: 'total',
                            name: 'total'
                        },

                        {
                            data: 'shipping_method',
                            name: 'shipping_method'
                        },

                        {
                            data: 'actions',
                            name: 'actions',
                            orderable: false,
                            searchable: false
                        }
                    ]
                });

            });
        </script>

    </div>
@endsection