@extends('layout')

@section('content')
    <style>
        .managing_main_div {
            display: flex;
            gap: 20px;
            flex-direction: column;
            padding: 0px 20px;

        }

        .review_heading h2 {
            font-size: 18px;
            color: #2ca5d6;

        }

        .content_div {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            overflow: auto;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE and Edge */
            /* height: 420px; */
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        .content_div::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, Opera */
        }

        table.dataTable {
            border-collapse: collapse;
            width: 100%;
            overflow-x: auto;
        }

        table.dataTable tr {
            border-bottom: 1px solid #e6eff5;
        }

        table.dataTable th {
            font-size: 14px;
            font-weight: 500;
            color: #2ca5d6;

            padding: 8px;
        }

        table.dataTable td {
            font-size: 14px;
            font-weight: 400;

            padding: 8px;
        }

        /* Styles for the status column colors */
        .status-complete {
            color: #32cd32;
        }

        .status-pending {
            color: red;
        }

        .status-processing {
            color: #2ca5d6;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0.5em 1em;
            margin: 0 5px;
            border-radius: 50px;
            background-color: #fff;
            border: 2px solid lightgray;
            cursor: pointer;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled) {
            border: 2px solid #2ca5d6;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #2ca5d6;
            color: white !important;
            border-color: #2ca5d6;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <div class="managing_main_div">
        <div class="review_heading">
            <h2 class="text-3xl">Partners List</h2>
        </div>


        <div class="content_div">
            <div class="partner_div">
                <table id="payments-table" class="display table table-bordered">
                    <thead>
                        <tr>
                            <th>Sr.NO</th>
                            <th>User Name</th>
                            <th>Transaction NO</th>
                            <th>Payment Type</th>
                            <th>Payment Status</th>
                            <th>Created At</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($payments as $index => $payment)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $payment->booking->user->name ?? 'N/A' }}</td>
                                <td>{{ $payment->booking->transaction_number ?? 'N/A' }}</td>
                                <td>{{ ucfirst($payment->booking->payment_type ?? 'N/A') }}</td>
                                <td>
                                    @if ($payment->booking->payment_status == 'success')
                                        <span class="badge bg-success">Success</span>
                                    @elseif($payment->booking->payment_status == 'pending')
                                        <span class="badge bg-warning">Pending</span>
                                    @elseif($payment->booking->payment_status == 'failed')
                                        <span class="badge bg-danger">Failed</span>
                                    @else
                                        <span class="badge bg-secondary">N/A</span>
                                    @endif
                                </td>
                                <td>{{ $payment->created_at->format('d M Y H:i') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

            </div>
        </div>
    </div>



    <!-- jQuery and Datatables JS CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

    <script>
        $(document).ready(function() {
            // Initialize the Datatable
            $('#payments-table').DataTable();
        });
    </script>
@endsection