@extends('layouts.usermaster')

@section('styles')
    <!-- INTERNAL Data table css -->
    <link href="{{ asset('build/assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}?v=1746391097"
        rel="stylesheet" />
    <link href="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.css') }}?v=1746391097" rel="stylesheet" />
@endsection

@section('content')


    <section>
        <div class="bannerimg cover-image" data-bs-image-src="{{asset('build/assets/images/photos/banner1.jpg')}}">
            <div class="header-text mb-0">
                <div class="container ">
                    <div class="row text-white">
                        <div class="col">
                            <h1 class="mb-0">{{lang('Refunds', 'menu')}}</h1>
                        </div>
                        <div class="col col-auto">
                            <ol class="breadcrumb text-center">
                                <li class="breadcrumb-item">
                                    <a href="{{url('/')}}" class="text-white-50">{{lang('Home', 'menu')}}</a>
                                </li>
                                <li class="breadcrumb-item active">
                                    <a href="#" class="text-white">{{lang('Refunds', 'menu')}}</a>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Section -->

    <!--Dashboard List-->
    <section class="section py-4">
        <div class="container">
            <div class="row">
                @include('includes.user.verticalmenu')
                <div class="col-xl-9">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card custom-card">
                                <div class="card-header justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <div class="lh-1"><span class="avatar avatar-sm avatar-rounded bg-info-transparent me-2"><i class="ti ti-ticket fs-16"></i></span></div>
                                        <div class="card-title">{{lang('Refunds')}}</div>

                                        @php
                                            $refundDays = setting('refundDays');
                                            $startDate = \Carbon\Carbon::now()->subDays($refundDays);
                                            $item = \App\Models\AllTransactions::where('cust_id', Auth::id())->whereNotIn('status', ['refunded', 'refundpending'])->whereIn('status', ['paid', 'completed'])->whereBetween('updated_at', [$startDate, \Carbon\Carbon::now()])->first();
                                        @endphp

                                        @if (setting('enableRefund') == 'on')
                                            <div class="ms-5">
                                                <button class="btn btn-secondary" id="refundButton" type="button">{{lang('Request Refund')}}</button>
                                            </div>

                                            {{-- <div id="noEligibleAlert" class="alert alert-warning" style="display: none;">
                                                {{lang('No items are eligible for refund.')}}
                                            </div> --}}

                                        @endif
                                    </div>
                                </div>
                                <div class="card-body p-5">

                                    <div class="client-customer">
                                        <div class="table-responsive">
                                            <table class="table text-nowrap" id="customer_refunds_table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">{{ lang('S.No') }}</th>
                                                        <th scope="col">{{ lang('Invoice Id') }}</th>
                                                        <th scope="col">{{ lang('Price') }}</th>
                                                        <th scope="col">{{ lang('Payment For') }}</th>
                                                        <th scope="col">{{ lang('Payment Method') }}</th>
                                                        <th scope="col">{{ lang('Status') }}</th>
                                                        <th scope="col">{{ lang('Actions') }}</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Dashboard List-->

    @include('includes.user.refundModal')

@endsection

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

    @vite(['resources/assets/js/select2.js'])

    <script type="text/javascript">

document.addEventListener("DOMContentLoaded", function(event) {
            let tableData = @json($refunds);
            let currency = @json($currency);
            let code = @json($code);
            let symbol = @json($symbol);
            var SITEURL = '{{ url('') }}';
            let dateFormat = @json(setting('date_format'));
            var dataTable;
            var tableDropDown;

            document.getElementById('refundButton').addEventListener('click', function(event) {
                var isEligibleForRefund = @json($item ? true : false);
                if (!isEligibleForRefund) {
                    event.preventDefault();
                    toastr.error('No items are eligible for refund');
                } else {
                    var refundModal = new bootstrap.Modal(document.getElementById('refundModal'));
                    refundModal.show();
                }
            });

            function getStatusBadge(status) {
                switch (status) {
                    case 'completed':
                    case 'paid':
                        return '<span class="badge bg-success-transparent">Success</span>';
                    case 'pending':
                        return '<span class="badge bg-warning-transparent">Pending</span>';
                    case 'refundpending':
                        return '<span class="badge bg-secondary-transparent">Refund Requested</span>';
                    case 'refunded':
                        return '<span class="badge bg-info-transparent">Refunded</span>';
                    case 'refundRejected':
                        return '<span class="badge bg-danger-transparent">Refund Rejected</span>';
                    default:
                        return '<span class="badge bg-danger-transparent">Failed</span>';
                }
            }

            function getCurrencyPerTicket(price) {
                const total = (price * currency.conversion_factor).toFixed(currency.decimal);
                let final;
                if (currency.position === 'Prefix') {
                    final = `${symbol}${total}`;
                } else {
                    final = `${total}${symbol}`;
                }
                return final;
            }

            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('#customer_refunds_table')) {
                    $('#customer_refunds_table').DataTable().clear().destroy();
                }
                if (document.getElementById('tableBody'))
                document.getElementById('tableBody').remove();

                let createTbody = document.createElement('tbody');
                createTbody.setAttribute('id', "tableBody");
                let rows = tableData.map((data, index) => {

                    return `
                        <tr>
                            <td> ${index + 1} </td>

                            <td> #${data.invoiceId} </td>

                            <td> ${data.ticket_type == 'customInvoice' ? getCurrencyPerTicket(data.amount) : data.customerAmount} </td>

                            <td> ${data.ticket_type == 'customInvoice' ? `{{lang('Custom Invoice')}}` : ''} </td>

                            <td> ${data.payment_method && data.status == 'pending' ? `{{ lang('Payment Required*') }}` : (data.payment_method != null ? data.payment_method : '~')} </td>

                            <td>
                                 ${getStatusBadge(data.status)}
                            </td>

                            <td>
                                 <a href="${SITEURL}/customer/refundView/${data.encrypted_id}" class="btn btn-icon btn-info-light btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View"><i class="ri-eye-line"></i>
                                            </a>
                            </td>
                        </tr>
                    `;
                });

                createTbody.innerHTML = rows.length ? rows.join('') : '';
                document.getElementById('customer_refunds_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 = $('#customer_refunds_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%'
                });

                $('#item').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();
                // checkboxNoLabel()
                // buttonAlertFunctions();
                // Pagenate();

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


            }
        "use strict";


            // document.addEventListener('DOMContentLoaded', function(event) {
                // $('#item').select2({
                //     minimumResultsForSearch: Infinity,
                //     width: '100%'
                // });

                let selectElement = document.getElementById('item');
                let reasonElement = document.getElementById('reason');

                let raiseRefundForm = document.getElementById('refundForm');
                raiseRefundForm.addEventListener('submit', (ele) => {


                    ele.preventDefault();
                    ele.stopPropagation();
                    document.getElementById('itemError').innerHTML = '';
                    document.getElementById('reasonError').innerHTML = '';

                    // // Check if any option is selected
                    if (selectElement.value === '' || reasonElement.value === '') {
                        if (selectElement.value === '') {
                            document.getElementById('itemError').innerHTML = '{{ lang('Please select an item for refund.') }}';
                        }
                        if (reasonElement.value === '') {
                            document.getElementById('reasonError').innerHTML = '{{ lang('Reason field is required.') }}';
                        }
                        return;
                    }
                    ele.target.querySelector('.btn.btn-primary').innerHTML = '{{ lang('loading..') }}'
                    ele.target.querySelector('.btn.btn-primary').disabled = true;

                    fetch(SITEURL + '/customer/requestRefund', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: new FormData(raiseRefundForm),
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.error == 'notFound') {
                            toastr.error('{{ lang('Item not found') }}');
                            setTimeout(() => {
                                location.reload();
                            }, 2500);
                        }
                        if (data.error == 'refundoff') {
                            toastr.error('{{ lang('Refund option is not available at the moment') }}');
                            setTimeout(() => {
                                location.reload();
                            }, 2500);
                        }
                        if (data.success) {
                            // new AWN().success('{{ lang('Refund request successfull.') }}');
                            toastr.success('{{ lang('Refund request successfull.') }}')
                            let dismissElement = document.querySelector('[data-bs-dismiss="modal"]');
                            dismissElement.click();
                            setTimeout(() => {
                                location.reload();
                            }, 2000);

                        }
                    })
                });
            // });

            let notifyClose = document.querySelectorAll('.notifyclose');
            notifyClose.forEach(ele => {
                if(ele){
                    let id = ele.getAttribute('data-id');
                    if(getCookie(id)){
                        ele.closest('.alert').classList.add('d-none');
                    }else{
                        ele.addEventListener('click', setCookie);
                    }
                }
            })

            function setCookie($event) {
                const d = new Date();
                let id = $event.currentTarget.getAttribute('data-id');
                d.setTime(d.getTime() + (30 * 60 * 1000));
                let expires = "expires=" + d.toUTCString();
                document.cookie = id + "=" + 'announcement_close' + ";" + expires + ";path=/";
                $event.currentTarget.closest('.alert').classList.add('d-none');
            }

            function getCookie(cname) {
                let name = cname + "=";
                let decodedCookie = decodeURIComponent(document.cookie);
                let ca = decodedCookie.split(';');
                for(let i = 0; i < ca.length; i++) {
                    let c = ca[i];
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }
                    if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                    }
                }
                return '';
            }
        });



    </script>

@endsection