@extends('admin.layouts.masterlayout')

@section('title', "Payment Management")
@section('head_title', "Payment Management")

@section('content')
<div class="dashboard-body-content">

    <div class="manage-offers-flex">
        <div class="admin-tab-container">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#admin-transaction" data-tab="transaction">All Transactions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link jp_link w-auto d-inline-block" data-bs-toggle="pill" href="#admin-refund-request" data-tab="refund-request">Refund Requests & Disputes</a>
                </li>
            </ul>
        </div>
        <div class="d-flex gap-3 align-items-center manage-search-container">
            <div class="position-relative w-100">
                <input type="search" class="form-control search_text" placeholder="Search here">
                <div class="search-icon">
                    <img src="{{ asset('assets/img/dashboard/search-icon.png') }}" alt="">
                </div>
            </div>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane jp" id="admin-transaction">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="transactionTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Transaction Id</th>
                                    <th>User Name</th>
                                    <th>Currency Code</th>
                                    <th>Transaction Amount</th>
                                    <th>Admin Commission</th>
                                    <th>Transaction Type</th>
                                    <th>Status</th>
                                    <th>Payment Date</th>
                                </tr>
                            </thead>
                            <tbody> </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane jp" id="admin-refund-request">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="refundRequestTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Shop Name</th>
                                    <th>Artist Name</th>
                                    <th>Customer Name</th>
                                    <th>Refund Amount</th>
                                    <th>Customer Reason</th>
                                    <th>Shop Reason</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal delete-modal refund-modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal body -->
            <div class="modal-body">
                <div>
                    <img src="{{ asset('assets/img/refund-request.png') }}" alt="">
                </div>
                <h2 class="refund-header">Approve Request ?</h2>
                <p class="refund-sub-order">Are you sure you want to approve a refund for this booking?</p>
            </div>
            <!-- Modal footer -->
            <div class="w-100 mb-5">
                <textarea name="prompt_text" id="shop_reason" rows="4" placeholder="Enter reason here..." class="form-control text-start textarea-model"></textarea>
            </div>
            <div>
                <div class="d-flex gap-3 submit-container justify-content-center mt-0">
                    <button class="ct-outline-btn" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="ct-btn btn-refund-yes" data-refund-request-id="0" data-status="0"> <span>Yes</span></button>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@section('script')
<script src="{{ asset('assets/js/dataTables.js') }}"></script>
<script>
    // === ADMIN USERS DATATABLE ===
    var refundRequestTable = $('#refundRequestTable').DataTable({
        dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.transaction.refund-data') }}",
        order: [],
        columns: [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'shop_name',
                name: 'shop_name'
            },
            {
                data: 'artist_name',
                name: 'artist_name'
            },
            {
                data: 'customer_name',
                name: 'customer_name'
            },
            {
                data: 'refund_amount',
                name: 'refund_amount'
            },
            {
                data: 'customer_reason',
                name: 'customer_reason'
            },
            {
                data: 'shop_reason',
                name: 'shop_reason'
            },
            {
                data: 'status',
                name: 'status',
                orderable: false,
                searchable: false
            }
        ]
    });

    $(document).ready(function() {
        // === Transaction DATATABLE ===
        const transactionTable = $('#transactionTable').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.transaction.data') }}",
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'payment_intent_id',
                    name: 'payment_intent_id'
                },

                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'currency_code',
                    name: 'currency_code'
                },
                {
                    data: 'amount',
                    name: 'amount'
                },
                {
                    data: 'admin_commission_amount',
                    name: 'admin_commission_amount'
                },
                {
                    data: 'transaction_type',
                    name: 'transaction_type'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: {
                        _: 'created_at.display',
                        sort: 'created_at.timestamp'
                    },
                    name: 'created_at.display',
                    render: function(data, type, row) {
                        return `<div class="d-flex gap-2">
                    <img class="clock-img" src="{{asset('assets/img/dashboard/calendar.png')}}" alt="">
                    ${data}
                </div>`;
                    }
                }
            ]
        });



        // === SHARED SEARCH LOGIC ===
        $('.manage-search-container input[type="search"]').on('input', function() {
            const activeTab = $('.tab-pane.jp.active').attr('id');
            const searchText = $(this).val();

            if (activeTab === 'admin-transaction') {
                transactionTable.search(searchText).draw();
            } else if (activeTab === 'admin-refund-request') {
                refundRequestTable.search(searchText).draw();
            }
        });
    });

    // dynamic button logics
    $(document).ready(function() {
        var tab = getUrlParameter('tab') || 'transaction';

        // Activate correct tab
        $('.jp_link').removeClass('active');
        $('.jp').removeClass('active show');
        $('.jp_link[data-tab="' + tab + '"]').addClass('active');
        $('#admin-' + tab).addClass('active show');


        $('.jp_link').on('click', function(e) {
            var selectedTab = $(this).data('tab');

            var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?tab=' + selectedTab;
            window.history.pushState({
                path: newUrl
            }, '', newUrl);

            $('.jp_link').removeClass('active');
            $(this).addClass('active');
            $('.jp').removeClass('active show');
            $('#admin-' + selectedTab).addClass('active show');
        });
    });

    $(document).on('click', '.btn-refund-request', function() {
        var btn = $(this).attr('data-btn');
        var refund_request_id = $(this).attr('data-refund-id');

        if (btn == 'reject') {
            $(".refund-header").text("Reject Request?");
            $(".refund-sub-order").text("Are you sure you want to reject a refund for this booking?");
        } else {
            $(".refund-header").text("Approve Request?");
            $(".refund-sub-order").text("Are you sure you want to approve a refund for this booking?");
        }
        $(".btn-refund-yes").attr("data-refund-request-id", refund_request_id);
        $(".btn-refund-yes").attr("data-status", btn);

        $(".refund-modal").modal("show");
    });

    $(document).on('click', '.btn-refund-yes', function() {
        var refund_request_id = $(this).attr('data-refund-request-id');
        var status = $(this).attr('data-status');

        if (status != "" || status != 0) {
            $('.btn-refund-yes').attr('disabled');
            $('.btn-refund-yes').addClass('loader-active');

            $.ajax({
                type: "POST",
                url: "{{ route('admin.stripe.transaction.accept-reject-refund') }}",
                data: {
                    refund_request_id: refund_request_id,
                    status: status,
                    shop_reason: $("#shop_reason").val(),
                },
                dataType: "JSON",
                success: function(response) {

                    $('.refund-modal').modal('hide');
                    $('.btn-refund-yes').removeAttr('disabled').removeClass('loader-active');

                    if (response.status === true) {
                        if (refundRequestTable.rows({
                                page: 'current'
                            }).count() === 1) {
                            refundRequestTable.page('previous').draw('page');
                        } else {
                            refundRequestTable.ajax.reload(null, false);
                        }

                        custom_message('success', response.message);
                    } else {
                        custom_message('error', response.message);
                    }
                }
            });
        }
    });

    $('.refund-modal').on('hidden.bs.modal', function(e) {
        $('.btn-refund-yes').removeAttr('disabled').removeClass('loader-active');
        $("#shop_reason").val('');
    });
</script>
@endsection