@extends('layouts.invoice')

@section('content')
    @php
        $sub_total =0;
        $tax =0;
            foreach ($invoice->products as $product){
              $sub_total +=  $product->unit_price*$product->invoiced_qty;
            }
            $tax = $sub_total * $invoice->salesorder->tax_percentage / 100;
    @endphp
    <script src="https://www.paypalobjects.com/api/checkout.js"></script>
    <script src="https://js.stripe.com/v3/"></script>
    <div id="paypal-button-container"></div>

    <script>
        paypal.Button.render({
            style: {
                size: 'large',
                tagline: false

            },
            env: 'sandbox',
            client: {
                production: '',
                sandbox: 'AaalEp4ApoOjXyuPsd9WRccFLOA_oXNmNQgLskXBUevaibO302Ifll83c19OaudLBhL60ulQUx3nC83L'
            },
            payment: function (data, actions) {
                return actions.payment.create({
                    transactions: [{
                        amount: {
                            total: '40',
                            currency: 'USD'
                        }
                    }]
                });
            },
            onAuthorize: function (data, actions) {
                return actions.payment.execute()
                    .then(function () {
                        console.log("Payment Done")
                        console.log(data)
                    });
            }
        }, '#paypal-button');
    </script>
    <div class="columns" style="padding-top: 13px;margin-bottom: 13px;">

        <div class="toolbar">

            <div class="tool_strip">
                <h2 class="title is-6">Invoice Details </h2>
            </div>

            <div>

                <a class="button is-small">
                    <span class="icon" @click="create_pdf">
                        <i class="far fa-file-pdf"></i>
                    </span>

                </a>

                <a class="button is-small">
                    <span class="icon"
                          v-confirm="{ok: delete_invoice, cancel: doNothing, message: 'Are you sure, you want to delete this invoice?'}">
                        <i class="far fa-trash-alt"></i>
                    </span>

                </a>


            </div>

        </div>

    </div>

    @php
        if($invoice->status == "Fully Paid"){
           $background_color ='has-background-success' ;
        }elseif ($invoice->status == "Partially Paid"){
            $background_color ='has-background-warning' ;
        }else{
            $background_color ='has-background-primary';
        }

    @endphp
    <div class="columns {{$background_color}}">
        <div class="column is-12" style="text-align:center;font-size:18px">
            {{$invoice->status}}
        </div>
    </div>

    <div class="columns" style="margin-bottom:10px;background-color:#ffffff">
        <div class="column is-12">
            <h2 class="title is-6">Payments for invoice #{{$invoice->invnumber}} </h2>
        </div>
    </div>
    @if(!$invoice->payments->isEmpty())
        <div class="columns" style="padding-bottom:0px;margin-bottom:0px;background-color:#fafafb">

            <div class="column is-12" style="border-top: 1px solid #ebeef0;background-color:#fafafb">
                @foreach ($invoice->payments as $payment)
                    <div style="display:flex;justify-content:space-between;border-bottom: 1px solid #ebeef0;">
                        <div>
                            {{$payment->paymentmethod}}
                        </div>
                        <div style="text-align:right">
                            <div class="label">{{date_format($payment->created_at,'Y-M-d')}}</div>
                            <div>{{$payment->amount}}</div>
                        </div>

                    </div>
                @endforeach
            </div>

        </div>
    @endif
    @if($invoice->payments->isEmpty())
        <div class="columns" style="padding-bottom:0px;margin-bottom:0px;background-color:#fafafb">

            <div class="column is-12" style="border-top: 1px solid #ebeef0;background-color:#fafafb">
                This invoice does not have any payments.
            </div>
        </div>
    @endif
    @if($invoice->status !='Fully Paid')
        <div class="columns" style="background-color:#ffffff;border-top:2px solid #fafafa">
            <div class="column is-12" style="text-align:center;background-color:#ffffff;padding-top: 13px;">
                <div style="margin:20px 0">
                <div id="paypal-button" ></div>
                </div>
                
                <button type="button" id="checkout-button">Checkout</button>
            </div>
        </div>
    @endif
    <div class="columns" style="background-color:#ffffff;border-top:2px solid #fafafa">

        <div class="column is-12"
             style="background-color:#ffffff;padding-top: 13px;">


            <div class="columns" style="margin-bottom:0px">
                <div class="column is-12">
                    <div style="text-align:center;padding-top:20px">
                        <div><label style="color:#0f81cc;font-weight: bold" class="label is-field-title">Amount Due
                                (USD)</label></div>
                        <div style="font-size:20px"> $567.99</div>
                    </div>
                </div>
            </div>


            <div class="columns" style="margin-bottom:0px">
                <div class="column is-12">
                    <div style="display:flex;justify-content: space-between;padding:5px 5px ">
                        <div class="field">
                            <label style="color:#0f81cc;font-weight: bold" class="label is-field-title">Invoice
                                #</label>
                            <div>
                                <label>{{$invoice->invnumber}}</label>
                            </div>
                        </div>

                        <div class="field">
                            <label style="color:#0f81cc;font-weight: bold" class="label is-field-title">Sales Order
                                #</label>
                            <div>
                                {{$invoice->salesorder->sonumber}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns" style="margin-bottom:0px">
                <div class="column is-12">
                    <div style="display:flex;justify-content: space-between;padding:5px 5px ">
                        <div>
                            <div class="field">
                                <label style="color:#0f81cc;font-weight: bold" class="label is-field-title">Bill
                                    To</label>
                                <div>

                                    {{$invoice->salesorder->customer->firstname }} {{$invoice->salesorder->customer->lastname }}</div>
                                <div><label> {{$invoice->salesorder->customer->bill_address}} </label></div>
                                <div><label> {{$invoice->salesorder->customer->bill_city}} </label></div>
                                <div>
                                    <label>{{$invoice->salesorder->customer->bill_state}} {{$invoice->salesorder->customer->bill_zip}} </label>
                                </div>
                                <div><label> {{$invoice->salesorder->customer->bill_country}} </label></div>


                                <label class="label">Phone: {{$invoice->salesorder->customer->phone }}</label>

                            </div>
                        </div>

                        <div>
                            <div class="field">
                                <label style="text-align:right;color:#0f81cc;font-weight:bold"
                                       class="label is-field-title">Created Date</label>
                                <div>
                                    <label style="text-align: right;">{{date_format($invoice->created_at,'Y-M-d')}}</label>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label is-field-title"
                                       style="text-align:right;color:#0f81cc;font-weight:bold">Due Date</label>
                                <div style="text-align: right;">
                                    <label style="text-align: right;">{{date('Y-M-d', strtotime($invoice->due_date))}}</label>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <table class="table is-fullwidth is-bordered">
                <thead>
                <tr>
                    <th> Product Name</th>

                    <th style="text-align:right"> Amount</th>

                </tr>

                </thead>

                <tbody>

                @foreach ($invoice->products as $product)
                    <tr>

                        <td>
                            <div>{{$product->details->name}}</div>
                            <div>{{$product->invoiced_qty}} X ${{$product->unit_price}}</div>
                        </td>

                        <td style="text-align:right"> {{number_format($product->unit_price*$product->invoiced_qty, 2, '.', '')}}</td>

                    </tr>
                @endforeach

                <tr style="border-bottom-width:0">

                    <td style="border:none;text-align: right" class="label is-field-title">Sub Total</td>
                    <td style="border:none; text-align: right;">${{number_format($sub_total, 2, '.', '')}}</td>
                </tr>

                <tr style="border-bottom-width:0">


                    <td style="border:none;text-align: right" class="label is-field-title">

                        <label>Tax {{$invoice->salesorder->tax_percentage }} % </label>

                    </td>
                    <td style="border:none;text-align: right;">${{number_format($tax, 2, '.', '')}}</td>
                </tr>

                <tr style="border-bottom-width:0">
                    <td style="border:none;text-align: right" class="label is-field-title">
                        <label>Discount</label>
                    </td>
                    <td style="border:none;text-align: right;"></td>
                </tr>

                <tr style="border:none">
                    <td style="text-align: right;border:none;background-color: antiquewhite;" class="title is-6">Total
                    </td>
                    <td class="title is-6" style="border:none;background-color: antiquewhite;text-align: right;">
                        ${{number_format($sub_total+$tax, 2, '.', '')}}</td>
                </tr>

                </tbody>

            </table>
        </div>
    </div>
    <div>
        <a href="https://ilikecoding.net/dev/example-app/public/invoices/51">51</a>
        <a href="https://ilikecoding.net/dev/example-app/public/invoices/67">67</a>
    </div>

    <script type="text/javascript">

        // Create an instance of the Stripe object with your publishable API key

        var stripe = Stripe("pk_test_0i3MPhnul2126bQ9HqdyCmr3");
        var checkoutButton = document.getElementById("checkout-button");
        checkoutButton.addEventListener("click", function () {
            fetch("https://ilikecoding.net/dev/example-app/public/api/stripecheckout", {
                method: "POST",
            }).then(function (response) {
                return response.json();
            })
                .then(function (session) {
                    return stripe.redirectToCheckout({sessionId: session.id});
                })

                .then(function (result) {
                    // If redirectToCheckout fails due to a browser or network
                    // error, you should display the localized error message to your
                    // customer using error.message.
                    if (result.error) {
                        alert(result.error.message);
                    }
                })

                .catch(function (error) {
                    console.error("Error:", error);
                });

        });

    </script>

@endsection