@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=1750839365"
    rel="stylesheet" />
    <link href="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.css') }}?v=1750839365" rel="stylesheet" />   

    <!-- INTERNAL Sweet-Alert css -->
    <link href="{{ asset('build/assets/plugins/sweet-alert/sweetalert.css') }}?v=1750839365" 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('Custom Invoices') }}</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 border-0 d-md-flex d-block">
                    <div class="card-title">
                        {{ lang('Custom Invoices Lists') }}
                    </div>
                    <div class="ms-auto">
                        <a href="{{ url('admin/customInvoices/create') }}" class="btn btn-primary"> {{ lang('Create Invoice') }}</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive position-relative" style="min-height: 250px;">
                        <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('Invoice Date') }}</th>
                                    <th scope="col">{{ lang('Status') }}</th>
                                    <th scope="col">{{ lang('Payment Mode') }}</th>
                                    <th scope="col">{{ lang('Payment Date') }}</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('admin.includes.search-modal') --}}
    @include('includes.admin.datatable')

@endsection


@section('scripts')

    {{-- <!-- Choices JS -->
    <script src="{{ asset('build/assets/plugins/choices.min.js') }}"></script> --}}

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

     <!-- INTERNAL Sweet-Alert js-->
     <script src="{{ asset('build/assets/plugins/sweet-alert/sweetalert.min.js') }}?v=1750839365"></script>

     <script>
         "use strict";

        document.addEventListener("DOMContentLoaded", function (event) {

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

            let customInvoices = @json($customInvoices);
           
            let currency = {!! json_encode(\App\Models\Currency::first()) !!};
            let delPerm =  @json(Auth::user()->can('Invoice Delete Access'));
            let cancelPerm = @json(Auth::user()->can('Invoice Cancel Access'));
            var dataTable;
            var tableDropDown;

            let code = currency.code;
            let configData = {!! json_encode(config('currencies')) !!}[code];
          
            loadTable(customInvoices);

            function loadTable(customInvoices) {
                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 (document.getElementById('tableBody'))
                document.getElementById('tableBody').remove();

                let createTbody = document.createElement('tbody');
                createTbody.setAttribute('id', "tableBody");

                let rows = customInvoices.map((invoice, index) => {
                    let statusElement;
                    if (invoice.status == "paid" || invoice.status == "completed") {
                        statusElement = '<span class="badge bg-success-transparent">{{ lang('Completed') }}</span>'
                    } else if (invoice.status == "pending") {
                        statusElement = '<span class="badge bg-warning-transparent">{{ lang('Payment Pending') }}</span>'
                    } else if (invoice.status == "refundpending") {
                        statusElement = '<span class="badge bg-info-transparent">{{ lang('Refund Pending') }}</span>'
                    } else if (invoice.status == "refunded") {
                        statusElement = '<span class="badge bg-success-transparent">{{ lang('Refunded') }}</span>'
                    } else if (invoice.status == "refundRejected") {
                        statusElement = '<span class="badge bg-danger-transparent">{{ lang('Refund Rejected') }}</span>'
                    } else if (invoice.status == "cancelled"){
                        statusElement = '<span class="badge bg-danger-transparent">{{ lang('Invoice Cancelled') }}</span>'
                    }

                    let userDetails
                    if (invoice.customer) {
                        let userImage = invoice.customer.image ? invoice.customer.image : 'user-profile.png';
                        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);">${invoice.customer.firstname + ' ' + invoice.customer.lastname}</a>
                                    </p>
                                    <span class="d-block text-muted fs-12"> ${invoice.customer.email} ${invoice.ticket_id ? `(${invoice.ticket_id})` : ''}</span>
                                    
                                </div>                  
                            </div>
                        `;
                    } else {
                        let userImage = 'user-profile.png';
                        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);">{{ lang('Customer Deleted') }}</a>
                                    </p>
                                    <span class="d-block text-muted fs-12">{{ lang('Customer Deleted') }}</span>
                                </div>                  
                            </div>
                        `;
                    }
                    return `
                        <tr>
                            <td>${index + 1}</td>
                            <td>#${invoice.invoiceId}</td>
                            <td>${userDetails}</td>
                            <td>${configData +' '+ invoice.amount}</td>
                            <td>${dateTime(invoice.dateIssued)}</td>
                            <td>${statusElement}</td>
                            <td>${invoice.payment_method ? invoice.payment_method : '~' }</td>
                            <td>${invoice.payment_date ? dateTime(invoice.payment_date) : '~'}</td>
                            <td>
                                <a href="{{ url('admin/customInvoices/${invoice.encryptedInvoiceId}') }}" class="action-btns1 view-invoice" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View"><i class="feather feather-eye text-primary"></i></a>
                                
                                ${invoice.status === 'pending' ? `
                                    ${delPerm ? ` <a href="javascript:void(0)" data-id="${invoice.id}" class="action-btns1 delete-invoice">
                                    <i class="feather feather-trash-2 text-danger" data-id="${invoice.id}" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"></i> </a> ` : '~' } ` : ''}

                                ${invoice.status === 'pending' ? `
                                    ${cancelPerm ? ` <a href="javascript:void(0)" data-id="${invoice.id}" class="action-btns1 cancel-invoice">
                                    <i class="ri-close-circle-line text-warning" data-id="${invoice.id}" data-bs-toggle="tooltip" data-bs-placement="top" title="Cancel"></i> </a> ` : '~' } ` : ''}
                            </td>
                        </tr>
                    `;
                });

                createTbody.innerHTML = rows.length ? rows.join('') : '';

                document.getElementById('admin_transactions_table').appendChild(createTbody);
                document.getElementById('hideAfterloading').classList.add('d-none');
                document.getElementById('theadShow')?.classList.remove('d-none');


                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...')) !!};
                // 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, 4]
                    }],
                });
                document.querySelector('.card-body').style.setProperty('filter','')

                function initializeTooltips() {
                    var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                    tooltipElements.forEach(function (element) {
                        new bootstrap.Tooltip(element);
                    });
                }
                initializeTooltips();
                
                $('.form-select').select2({
                    minimumResultsForSearch: Infinity,
                    width: '100%'
                });
                $('.form-select').on('focus', function() {
                        $(this).attr('aria-hidden', 'false');
                    });
            }


            $('body').on('click', '.delete-invoice', function() {
                var id = $(this).data("id");
                let parent = $(this).closest('tr');
                let _url = `{{ url('/admin/invoice/delete/${id}') }}`;
                let _token = $('meta[name="csrf-token"]').attr('content');
                swal({
                        title: `{{ lang('Are you sure you want to continue?', 'alerts') }}`,
                        text: "{{ lang('This might erase your records permanently', 'alerts') }}",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        if (willDelete) {
                            $.ajax({
                                url: _url,
                                type: 'DELETE',
                                data: {
                                    _token: _token
                                },
                                success: function(response) {
                                    toastr.success(response.success);
                                    $(parent[0]).addClass('fade-out');
                                    let newData = customInvoices.filter( item => item.id != parseInt(id));
                                    customInvoices = newData;
                                
                                    setTimeout(() => {
                                        parent.remove();
                                        loadTable(customInvoices);
                                    }, 1500);
                                },
                                error: function(data) {
                                    toastr.error(data.responseJSON.message);
                                    console.log('Error:', data);
                                }
                            });
                        }
                    });
            });

            $('body').on('click', '.cancel-invoice', function() {
                var id = $(this).data("id");
                let parent = $(this).closest('tr');
                let _url = `{{ url('/admin/invoice/cancel/${id}') }}`;
                let _token = $('meta[name="csrf-token"]').attr('content');
                swal({
                        title: `{{ lang('Are you sure you want to continue?', 'alerts') }}`,
                        text: "{{ lang('This invoice will get cancelled', 'alerts') }}",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        if (willDelete) {
                            $.ajax({
                                url: _url,
                                type: 'Get',
                                data: {
                                    _token: _token
                                },
                                success: function(response) {
                                   
                                    customInvoices = customInvoices.map(invoice => {
                                        if (invoice.id === id) {
                                            invoice.status = 'cancelled';
                                        }
                                        return invoice;
                                    });
                                    setTimeout(() => {
                                        loadTable(customInvoices);
                                    }, 1500);
                                    document.getElementById('hideAfterloading')?.classList.remove('d-none');
                                    document.querySelector('.card-body').style.setProperty('filter','blur(1px)');
                                    
                                },
                                error: function(data) {
                                    toastr.error(data.responseJSON.message);
                                    console.log('Error:', data);
                                }
                            });
                        }
                    });
            });

        });
    </script>
@endsection