@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('Invoice', '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('Invoice', '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 border-0 d-md-flex d-block">
                                    <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('Invoices')}}</div>
                                    </div>
                                </div>
                                <div class="card-body p-3">

                                    <div class="client-customer">
                                        <div class="table-responsive">
                                            <table class="table text-nowrap table-bordered border-bottom" id="customer_invoices_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.transactionModal') --}}

@endsection

@section('scripts')
    <!-- INTERNAL Vertical-scroll js-->
    <script src="{{ asset('build/assets/plugins/vertical-scroll/jquery.bootstrap.newsbox.js') }}?v=1746391097"></script>
    <!-- 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($customInvoice);

            let currencies = @json(config('currencies'));
            let userCurrency = @json(Auth::guard('customer')->user()->currency);
            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;

            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_invoices_table')) {
                    $('#customer_invoices_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.payment_method : 'Offline Payment' } </td>

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

                            <td>
                                 <a href="${SITEURL}/customer/invoice/${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('customer_invoices_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_invoices_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();
                // checkboxNoLabel()
                // buttonAlertFunctions();
                // Pagenate();

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


            }
        "use strict";

        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