@extends('layouts.adminmaster')

@section('styles')
    <style>
        #hideAfterloading {
            position: absolute;
            top: 50px;
            left: 50%;
        }
    </style>
    <!-- INTERNAL Data table css -->
    <link href="{{ asset('build/assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}?v=1750839685"
        rel="stylesheet" />
    <link href="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.css') }}?v=1750839685"
        rel="stylesheet" />
@endsection

@section('content')
    <!-- Page Header -->

    <div class="page-header d-xl-flex d-block">
        <div class="page-leftheader">
            <h4 class="page-title"><span class="font-weight-normal text-muted ms-2">{{ lang('Refund Requests') }}</span></h4>
        </div>
    </div>
    
    <!-- Page Header Close -->

    <!-- Start:: row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                    <div class="card-title">
                        {{ lang('Refund Requests Lists') }}
                    </div>
                </div>
                <div class="card-body" style="min-height: 230px;">
                    <div class="table-responsive position-relative" style="min-height: 150px;">
                        <table class="table table-bordered border-bottom text-nowrap ticketdeleterow w-100" id="admin_transactions_table">
                            <thead>
                                <tr>
                                    <th data-sortable="false" scope="col">{{ lang('S.No') }}</th>
                                    <th scope="col">{{ lang('Invoice Id') }}</th>
                                    <th scope="col">{{ lang('Customer') }}</th>
                                    <th scope="col">{{ lang('Amount') }}</th>
                                    <th scope="col">{{ lang('Refund Created At') }}</th>
                                    <th scope="col">{{ lang('Payment For') }}</th>
                                    <th scope="col">{{ lang('Status') }}</th>
                                    <th scope="col">{{ lang('Actions') }}</th>
                                </tr>
                            </thead>
                            <div id="hideAfterloading"><img src="{{ asset('build/assets/images/loader.svg') }}"
                                    alt="">
                                <p>loading.. Please Wait</p>
                            </div>                          
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End:: row-1 -->
    @include('includes.admin.datatable')
    @include('admin.payments.refundDetails')
@endsection

@section('scripts')
   
    <!-- INTERNAL Vertical-scroll js-->
    <script src="{{ asset('build/assets/plugins/vertical-scroll/jquery.bootstrap.newsbox.js') }}?v=1750839685">
    </script>
    <!-- INTERNAL Data tables -->
    <script src="{{ asset('build/assets/plugins/datatable/js/jquery.dataTables.min.js') }}?v=1750839685"></script>
    <script src="{{ asset('build/assets/plugins/datatable/js/dataTables.bootstrap5.js') }}?v=1750839685"></script>
    <script src="{{ asset('build/assets/plugins/datatable/dataTables.responsive.min.js') }}?v=1750839685">
    </script>
    <script src="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.min.js') }}?v=1750839685">
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function(event) {

            // Variables
            var SITEURL = '{{ url('') }}';

            let tableData = @json($transaction);

            let dateFormat = @json(setting('date_format'));
            let currencies = @json(config('currencies'));
            let categories = @json($categories);
            var dataTable;
            var tableDropDown;

            function truncateTitle(title) {
                const maxLength = 40;
                return title.length > maxLength ? title.substring(0, maxLength) + '...' : title;
            }

            function dateTime(createdTime) {
                const jsDate = new Date(createdTime);

                // Format the date
                const optionsDate = {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric'
                };
                const formattedDate = jsDate.toLocaleDateString('en-GB', optionsDate).replace(/ /g, '-');

                // Format the time
                const optionsTime = {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                };
                const formattedTime = jsDate.toLocaleTimeString('en-GB', optionsTime);

              // Return formatted string
                return `${formattedDate}`;
            }

            function getStatusBadge(status) {
                switch (status) {
                    case 'refundpending':
                        return '<span class="badge bg-warning-transparent">Refund Pending</span>';
                    case 'refunded':
                        return '<span class="badge bg-success-transparent">Refunded</span>';
                    case 'refundRejected':
                        return '<span class="badge bg-danger-transparent">Refund Rejected</span>';

                }
            }

            loadTable(tableData);



            function loadTable(tableData) {
                document.getElementById('hideAfterloading')?.classList.remove('d-none');
                document.getElementById('theadShow')?.classList.add('d-none');
                if (tableDropDown)
                    tableDropDown.destroy();

                if ($.fn.DataTable.isDataTable('#admin_transactions_table')) {
                    $('#admin_transactions_table').DataTable().clear().destroy(); 
                }

                // if (dataTable)
                //     dataTable.destroy();

                if (document.getElementById('tableBody'))
                    document.getElementById('tableBody').remove();

                let createTbody = document.createElement('tbody');
                createTbody.setAttribute('id', "tableBody");
                let rows = tableData.map((data, index) => {
                    let userImage = data.customer.image != null ? data.customer.image :
                        'user-profile.png';
                    let userDetails = `
                    <div class="d-flex align-items-center">
                        <div class="me-2 lh-1">
                            <span class="avatar avatar-md avatar-rounded">
                                <img src="{{ asset('uploads/profile/${userImage}') }}" alt="">
                            </span>
                        </div>
                        <div class="flex-fill">
                            <p class="fw-semibold mb-0">
                                <a class="" href="javascript:void(0);">${data.customer.firstname + ' ' + data.customer.lastname}</a>
                            </p>
                            <span class="d-block text-muted fs-12">${data.customer.email}</span>
                        </div>                  
                    </div>
                `;

                    return `
                        <tr>
                            <td>${index + 1}</td>
                            <td class="text-center">
                                #${data.invoiceId}
                            </td>

                            <td>${userDetails}</td>

                            <td>
                                ${currencies[data.currency]+' '+ data.amount}  
                            </td>

                            <td> ${dateTime(data.refundCreatedDate)} ( ${dateTimeDiff(data.refundCreatedDate)} ) </td>

                            <td> ${data.ticket_type == 'customInvoice' ? `{{ lang('Custom Invoice') }}` : '~' } </td>
                            <td>
                               ${getStatusBadge(data.status)}
                            </td>
                            <td>
                                 <a href="${SITEURL}/admin/refundRequests/${data.encrypted_id}" class="action-btns1"  data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                                <i class="feather feather-eye text-primary"></i>
                                            </a>
                            </td>

                        </tr>
                    `;
                });

                createTbody.innerHTML = rows.length ? rows.join('') : '';
                document.getElementById('admin_transactions_table').appendChild(createTbody);
                let prev = {!! json_encode(lang('Previous')) !!};
                let next = {!! json_encode(lang('Next')) !!};
                let nodata = {!! json_encode(lang('No data available in table')) !!};
                let noentries = {!! json_encode(lang('No entries to show')) !!};
                let showing = {!! json_encode(lang('showing page')) !!};
                let ofval = {!! json_encode(lang('of')) !!};
                let maxRecordfilter = {!! json_encode(lang('- filtered from ')) !!};
                let maxRecords = {!! json_encode(lang('records')) !!};
                let entries = {!! json_encode(lang('entries')) !!};
                let show = {!! json_encode(lang('Show')) !!};
                let search = {!! json_encode(lang('Search...')) !!};
                // Reinitialize DataTable
                dataTable = $('#admin_transactions_table').DataTable({
                    language: {
                        searchPlaceholder: search,
                        scrollX: "100%",
                        sSearch: '',
                        paginate: {
                            previous: prev,
                            next: next
                        },
                        emptyTable: nodata,
                        infoFiltered: `${maxRecordfilter} _MAX_ ${maxRecords}`,
                        info: `${showing} _PAGE_ ${ofval} _PAGES_`,
                        infoEmpty: noentries,
                        lengthMenu: `${show} _MENU_ ${entries}`,
                    },
                    order: [],
                    columnDefs: [{
                        "orderable": false,
                        "targets": [0, 1, 3]
                    }],
                });

                document.querySelector('.card-body').style.setProperty('filter','')

                $('.form-select').select2({
                    minimumResultsForSearch: Infinity,
                    width: '100%'
                });
                $('.form-select').on('focus', function() {
                    $(this).attr('aria-hidden', 'false');
                });
                document.getElementById('hideAfterloading')?.classList.add('d-none');
                document.getElementById('theadShow')?.classList.remove('d-none');

                initializeTooltips();

                function initializeTooltips() {
                    var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                    tooltipElements.forEach(function(element) {
                        new bootstrap.Tooltip(element);
                    });
                }


            }

            function initializeTooltips() {
                var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                tooltipElements.forEach(function(element) {
                    new bootstrap.Tooltip(element);
                });
            }
            initializeTooltips();

            function updateCheckallCheckboxes() {
                let allChecked = Array.from(document.querySelectorAll('.checkall')).every(checkbox => checkbox
                    .checked);
                document.getElementById('checkboxNoLabel').checked = allChecked;
            }

            function checkboxNoLabel() {
                document.querySelectorAll('.checkall').forEach((checkbox) => {
                    checkbox.checked = true;
                    if (!document.querySelector("#checkboxNoLabel").checked) {
                        checkbox.checked = false
                    }
                    checkbox.addEventListener('click', updateCheckallCheckboxes)
                });
            }

            document.getElementById('checkboxNoLabel')?.addEventListener('click', function() {
                checkboxNoLabel()
            });
            checkboxNoLabel()

            let refundDetalisModal = new bootstrap.Modal('#refundDetailsModal');
            document.querySelectorAll('.viewRefundRequest').forEach((element) => {
                element.addEventListener('click', (ele) => {
                    document.querySelector('#refundDetailsModal').querySelector('.contentDivision')
                        .classList.add('d-none');
                    document.querySelector('#refundDetailsModal').querySelector('.loadDivision')
                        .classList.remove('d-none');
                    document.querySelector('.contentDivision .modal-body').innerHTML = '';
                    refundDetalisModal.show();
                    
                    let id = ele.currentTarget.getAttribute('data-id');
                    document.querySelector('#refundId').value = id;

                    fetch(SITEURL + '/admin/refundRequests/getdetails/' + id, {
                            method: 'get',
                        })
                        .then((response) => {
                            if (!response.ok) {
                                throw new Error('Network response was not ok');
                            }
                            return response.json();
                        })
                        .then((data) => {
                            if (data?.error === 'This action is unauthorized.') {
                                new AWN().alert(data.error);
                                setTimeout(() => {
                                    location.reload();
                                }, 3000);
                            }
                            if (data?.itemNotFound) {
                                new AWN().alert('{{ lang('Item Not Found.') }}');
                                location.reload();
                            }
                            if (data?.refundedOrRejected === true) {
                                appendElements(data.refundItem);
                            }
                            if (data?.success === true) {
                                appendElements(data.refundItem, data.txDetails, currencies);
                            }
                           
                        })
                });
            });

            let appendElements = (ele, txDetails = null, currencies) => {
               
                let createDivElement = document.createElement('div');
                createDivElement.classList.add('col-xl-12');

                let customInvoiceElements
                // if it for the custom invoice
                if (ele.custom_invoice_elements.length > 0) {
                    let tableHTML = `
                        <table class="table table-bordered nowrap text-nowrap">
                            <thead class="bg-light">
                                <tr>
                                    <th scope="col" class="w-10 text-dark">{{ lang('S.No') }}</th>
                                    <th scope="col" class="w-25 text-dark">{{ lang('Product Name') }}</th>
                                    <th scope="col" class="w-10 text-dark">{{ lang('Price') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                    `;

                    // Iterate over custom_invoice_elements to create table rows
                    ele.custom_invoice_elements.forEach((item, index) => {
                        tableHTML += `
                            <tr>
                                <td>${index + 1}</td>
                                <td class="product-quantity-container">
                                    ${item.description}
                                </td>
                                <td>
                                    ${item.customerPrice}
                                </td>
                            </tr>
                        `;
                    });

                    // Close the table HTML
                    tableHTML += `
                        <tr style="height: 45px;">
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td class="fw-semibold" style="font-size: 1.125rem !important;">{{ lang('Total') }}</td>    
                            <td class="fw-semibold text-primary" style="font-size: 1.125rem !important;">${ele.customerAmount}</td>    
                        </tr>
                    `;

                    tableHTML += `
                            </tbody>
                        </table>
                    `;
                    // Set the inner HTML of the div element
                    createDivElement.innerHTML = tableHTML;
                    document.querySelector('.contentDivision .modal-body').append(createDivElement);

                    document.querySelector('#refundDetailsModal').querySelector('.contentDivision').classList
                        .remove('d-none');
                    document.querySelector('#refundDetailsModal').querySelector('.loadDivision').classList.add(
                        'd-none');

                } else {
                    let itemName;
                    //when it is the per category or per ticket or per package
                    if (ele.ticket_type == 'Per-Category') {
                        function findCategoryById(categoryId) {
                            return categories.find(category => category.id === categoryId);
                        }
                        let foundCategory = findCategoryById(ele.category_id);
                        itemName = foundCategory.name + ' ' + '({{ lang('Category') }})';

                    } else if (ele.ticket_type == 'Per-Ticket') {
                        itemName = '({{ lang('Ticket') }})' + ' ' + ele.ticket_id;
                    } else if (ele.ticket_type == 'Per-Package') {
                        itemName = '({{ lang('Package') }})' + ' ' + ele.package_name;
                    }
                    // Find the category using ele.category_id

                    let tableHTML = `
                        <table class="table table-bordered nowrap text-nowrap">
                            <thead class="bg-light">
                                <tr>
                                    <th scope="col" class="w-10 text-dark">{{ lang('S.No') }}</th>
                                    <th scope="col" class="w-25 text-dark">{{ lang('Paid For') }}</th>
                                    <th scope="col" class="w-10 text-dark">{{ lang('Price') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td class="product-quantity-container">
                                        ${itemName}
                                    </td>
                                    <td>
                                        ${ele.customerAmount}
                                    </td>
                                </tr>
                                <tr style="height: 45px;">
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td class="fw-semibold" style="font-size: 1.125rem !important;">{{ lang('Total') }}</td>    
                                    <td class="fw-semibold text-primary" style="font-size: 1.125rem !important;">${ele.customerAmount}</td>    
                                </tr>
                            </tbody>
                        </table>
                    `;
                    // Set the inner HTML of the div element
                    createDivElement.innerHTML = tableHTML;
                    document.querySelector('.contentDivision .modal-body').append(createDivElement);

                    document.querySelector('#refundDetailsModal').querySelector('.contentDivision').classList
                        .remove('d-none');
                    document.querySelector('#refundDetailsModal').querySelector('.loadDivision').classList.add(
                        'd-none');
                }
                if (ele.status != 'refundRejected') {
                    let createcalculationsDiv = document.createElement('div');
                    createcalculationsDiv.classList.add('mt-4');
                    let currncy = txDetails.currency.toUpperCase();
                    if (ele.payment_method == "Stripe") {
                        createcalculationsDiv.innerHTML = `
                        <div class="text-center fs-15 fw-bold">Refund Details</div>
                        <table class="table table-bordered nowrap text-nowrap">
                            <tbody>
                                <tr>
                                    <td>${txDetails.fee_details[1].description}</td>
                                    <td>${currencies[currncy]} ${txDetails.fee_details[1].amount/100}</td>
                                </tr>
                                <tr>
                                    <td>${txDetails.fee_details[0].description}</td>
                                    <td>${currencies[currncy]} ${txDetails.fee_details[0].amount/100}</td>
                                </tr>
                                <tr>
                                    <td>Net Refund Amount</td>
                                    <td class="text-primary">${currencies[currncy]} ${txDetails.net/100}</td>
                                </tr>
                            </tbody
                        </table
                        `;
                    } else {
                        createcalculationsDiv.innerHTML = `
                            <div class="text-center fs-15 fw-bold">Refund Details</div>
                            <table class="table table-bordered nowrap text-nowrap">
                                <tbody>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody
                            </table
                        `;

                    }

                    document.querySelector('.contentDivision .modal-body').appendChild(createcalculationsDiv);
                }

                let refundSection = document.createElement('div');
                refundSection.classList.add('mt-4');
                if (ele.status == 'refundRejected') {
                    refundSection.innerHTML = `
                        <div class="col-xl-12 mb-4">
                            <table class="table mb-0 table-information">
                                <tbody>
                                    <tr>
                                        <td class="py-2">
                                            <span class="font-weight-semibold w-50"> {{ lang('Refund Status') }} </span>
                                        </td>
                                        <td>:</td>
                                        <td class="py-2 ps-4">
                                            <span class="badge bg-danger">{{ lang('Rejected') }}</span>    
                                        </td>
                                    </tr>
                                </tbody>
                            </table> 
                        </div>
                        <lable class="form-lable"> Reason </lable>
                        <textarea class="form-control" rows="4" disabled readonly>${ele.refundReason}</textarea>
                    `;
                    document.querySelector('.contentDivision .modal-body').appendChild(refundSection);
                    // document.querySelector('.modal-footer').classList.add('d-none');
                } else if (ele.status == 'refundpending') {
                    refundSection.innerHTML = `
                        <div class="col-xl-12 mb-4">
                            <table class="table mb-0 table-information">
                                <tbody>
                                    <tr>
                                        <td class="py-2">
                                            <span class="font-weight-semibold w-50"> {{ lang('Refund Status') }} </span>
                                        </td>
                                        <td>:</td>
                                        <td class="py-2 ps-4">
                                            <span class="badge bg-warning">{{ lang('Pending') }}</span>    
                                        </td>
                                    </tr>
                                </tbody>
                            </table> 
                        </div>
                        <lable class="form-lable"> Reason </lable>
                        <textarea class="form-control" rows="4"></textarea>
                    `;
                    document.querySelector('.contentDivision .modal-body').appendChild(refundSection);
                    let footerCreate = document.createElement('div');
                    footerCreate.classList.add('modal-footer', 'pb-0');
                    footerCreate.innerHTML = `
                    <a href="javascript:void(0);" onclick="approveRefund(${ele.id})" class="btn btn-primary">Approve Refund</a>
                    <a href="javascript:void(0);" onclick="rejectRefund(${ele.id})" class="btn btn-danger">Reject Refund</a>
                    `;

                    document.querySelector('.contentDivision .modal-body').appendChild(footerCreate);
                    // document.querySelector('.modal-footer').classList.remove('d-none');
                } else if (ele.status == 'refunded') {
                    refundSection.innerHTML = `
                        <div class="col-xl-12 mb-4">
                            <table class="table mb-0 table-information">
                                <tbody>
                                    <tr>
                                        <td class="py-2">
                                            <span class="font-weight-semibold w-50"> {{ lang('Refund Status') }} </span>
                                        </td>
                                        <td>:</td>
                                        <td class="py-2 ps-4">
                                            <span class="badge bg-primary">{{ lang('Approved') }}</span>    
                                        </td>
                                    </tr>
                                </tbody>
                            </table> 
                        </div>
                        <lable class="form-lable"> Reason </lable>
                        <textarea class="form-control" rows="4" disabled readonly>${ele.refundReason}</textarea>
                    `;

                    document.querySelector('.contentDivision .modal-body').appendChild(refundSection);
                }               
            }
        });
    </script>
@endsection