@extends(backpack_view('blank'))

@section('content')
    <div class="row pt-4">
        <div class="col-md-12 bold-labels billing-container">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="la la-file-invoice-dollar"></i>
                        Invoice History
                    </h4>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <label class="fw-bold">
                            Select Billing Period
                        </label>
                        <select id="select-period" class="form-control">
                            <option value="">
                                -- Select Billing Period --
                            </option>
                            @foreach($invoicesArray as $invoice)
                                <option value="{{ $invoice['invoice_id'] }}">
                                    {{ $invoice['period']['start_formatted'] }} - {{ $invoice['period']['end_formatted'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div id="invoice-container">
                        <div id="stripe-invoice-container"></div>
                        <div id="extra-invoice-container"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('after_scripts')
<script>

const selectPeriod = document.getElementById('select-period');
const stripeInvoiceContainer = document.getElementById('stripe-invoice-container');
const extraInvoiceContainer = document.getElementById('extra-invoice-container');

const invoiceJsonUrl = "{{ route('backpack.account.invoice.json', ['invoiceId'=>'__INVOICE_ID__']) }}";
const chargeUrl = "{{ route('backpack.account.charge', ['masterInvoiceId'=>'__INVOICE_ID__']) }}";
const addStripeAdditionalInvoiceUrl = "{{ route('backpack.account.add-stripe-additional-invoice') }}";

const formatCurrency = (value) => {
    return '$' + Number(value).toFixed(2);
};

extraInvoiceContainer.addEventListener(
    "click",
    async function(e){
        if (e.target.classList.contains("btn-submit-stripe-invoice-id")) {
            const invoiceId = e.target.dataset.invoiceId;
            const additionalInvoiceId = document.getElementById("stripe_invoice_id").value;

            
            const response = await fetch(
                addStripeAdditionalInvoiceUrl,
                {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document
                            .querySelector('meta[name="csrf-token"]')
                            .getAttribute('content')
                    },
                    body: JSON.stringify({
                        master_invoice_id: invoiceId,
                        additional_invoice_id: additionalInvoiceId
                    })
                }
            );

            const result = await response.json();

            if(result.status === 'success') {
                new Noty({
                    type:'success',
                    layout:'topRight',
                    text:'Customer charged successfully.',
                    timeout:3000
                }).show();

                selectPeriod.dispatchEvent(new Event('change'));
            }
            else{
                new Noty({
                    type:'error',
                    layout:'topRight',
                    text:'Failed to charge customer. ' + response.message,
                    timeout:3000
                }).show();
            }
        }

        if( e.target.classList.contains("btn-charge-customer")){

            const invoiceId = e.target.dataset.invoiceId;
            const response = await fetch(
                chargeUrl.replace(
                    '__INVOICE_ID__',
                    invoiceId
                ),
                {
                    headers:{
                        'Accept':'application/json'
                    }
                }
            );

            const result = await response.json();

            if(result.status === 'success') {
                new Noty({
                    type:'success',
                    layout:'topRight',
                    text:'Customer charged successfully.',
                    timeout:3000
                }).show();

                selectPeriod.dispatchEvent(new Event('change'));
            }
            else{
                new Noty({
                    type:'error',
                    layout:'topRight',
                    text:'Failed to charge customer.',
                    timeout:3000
                }).show();
            }
        }
    }
);

selectPeriod.addEventListener(
    "change",
    async function(e){
        const invoiceId = e.target.value;
        if(!invoiceId){
            stripeInvoiceContainer.innerHTML='';
            extraInvoiceContainer.innerHTML='';
            return;
        }

        try{
            const response = await fetch(
                invoiceJsonUrl.replace(
                    '__INVOICE_ID__',
                    invoiceId
                ),
                {
                    headers:{
                        'Accept':'application/json'
                    }
                }
            );
            
            const invoice = await response.json();
            let subscriptionHtml = `
                <div class="card shadow-sm mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-1">
                                <i class="la la-file-invoice"></i>
                                Invoice #${invoice.invoiceNumber}
                            </h5>

                            <small class="text-muted">
                                Billing period:
                                ${invoice.periodStart} - ${invoice.periodEnd}
                            </small>
                        </div>

                        <span class="badge bg-success">Paid</span>
                    </div>

                    <div class="card-body">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th>Description</th>
                                    <th class="text-end">Amount (NZD)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>${invoice.lineDescription}</td>
                                    <td class="text-end">${formatCurrency(invoice.subtotal / 100)}</td>
                                </tr>
                                <tr>
                                    <td>GST</td>
                                    <td class="text-end">${formatCurrency(invoice.tax / 100)}</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr class="table-light fw-bold">
                                    <td>Total</td>
                                    <td class="text-end fs-5">${formatCurrency(invoice.total / 100)}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            `;

            stripeInvoiceContainer.innerHTML = subscriptionHtml;
            let additionalHtml = '';

            if( invoice.additionalMinuteCharge > 0 || invoice.additionalSmsCharge > 0 ){
                const subtotal = Number(invoice.additionalMinuteCharge) + Number(invoice.additionalSmsCharge);
                const gst = Number(invoice.additionalMinuteChargeGST) + Number(invoice.additionalSmsChargeGST);

                const total = subtotal + gst;

                additionalHtml = `
                    <div class="card shadow-sm mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="mb-1">
                                    <i class="la la-plus-circle"></i>
                                    Additional Usage Invoice
                                </h5>
                                ${
                                    invoice.hasAdditionalInvoiceCharged
                                        ?`<small class="text-muted">
                                            Invoice #${invoice.additionalInvoiceNumber}
                                        </small>` 
                                        : `<small class="text-warning">
                                            Pending Invoice - The invoice will be charged by the default credit card automatically
                                        </small>`
                                }
                            </div>

                            @if(backpack_user() && backpack_user()->hasRole('superadmin'))
                                <div class="d-flex flex-column align-items-end">
                                    ${
                                        invoice.hasAdditionalInvoiceCharged
                                        ? `
                                            <span class="badge bg-success">
                                                Paid
                                            </span>`
                                            :
                                            `
                                            <div>
                                                <button
                                                    class="btn btn-primary btn-charge-customer"
                                                    data-invoice-id="${invoice.invoiceId}">
                                                    <i class="la la-credit-card me-2"></i>
                                                    Charge Customer
                                                </button>
                                            </div>
                                            <div class="mt-1 d-flex" >
                                                <input name="stripe_invoice_id" id="stripe_invoice_id" class="form-control me-1" placeholder="Stripe Invoice ID"></input>
                                                <button data-invoice-id="${invoice.invoiceId}" class=" btn btn-primary btn-submit-stripe-invoice-id">Submit</button>
                                            </div>
                                            `
                                    }
                                    
                                </div>
                            @endif
                        </div>
                        <div class="card-body">
                            <table class="table">
                                <tbody>
                                `;

                    if(invoice.additionalMinuteCharge > 0)
                    {
                        additionalHtml += `
                        <tr>
                            <td>
                                Additional AI Minutes
                                <br>
                                <small class="text-muted">
                                    @ ${invoice.planAddtionalMinuteCharge}/minute
                                </small>
                            </td>
                            <td class="text-end">
                                $${Number(invoice.additionalMinuteCharge).toFixed(2)}
                            </td>
                        </tr>
                        `;
                    }

                    if(invoice.additionalSmsCharge > 0)
                    {
                        additionalHtml += `
                            <tr>
                                <td>
                                    Additional SMS Messages
                                    <br>
                                    <small class="text-muted">
                                        @ ${invoice.planAddtionalMinuteCharge} each
                                    </small>
                                </td>
                                <td class="text-end">
                                    $${Number(invoice.additionalSmsCharge).toFixed(2)}
                                </td>
                            </tr>
                        `;
                    }

                    additionalHtml += `
                                    <tr>
                                        <td>
                                            GST
                                        </td>
                                        <td class="text-end">
                                            ${formatCurrency(gst)}
                                        </td>
                                    </tr>
                                    <tr class="table-light fw-bold">
                                        <td>Total</td>
                                        <td class="text-end fs-5">
                                            ${formatCurrency(total)}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                `;
            }

            extraInvoiceContainer.innerHTML =
                additionalHtml;
        }
        catch(error)
        {
            console.error(error);
        }
    }
);
</script>
@endpush