@extends('admin.layouts.master')

@section('title', 'Order Details')
@section('css')
    <style>
        .text-dark-primary {
            /* color: #fff !important; */
            color: rgba(4, 69, 4, 1) !important;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/frontend/assets/css/invoice.css') }}">
@endsection
@section('content')
    <div class="container-fluid">
        @php
            $previousPath = parse_url(url()->previous(), PHP_URL_PATH);
        @endphp
        <!-- start page title -->
        <div class="row">

            <nav class="navbar">
                <form class="justify-content-end">
                    <a href="#" class="btn btn-sm btn-info" type="button">Order Detail</a>
                    <a href="#" class="btn btn-sm btn-primary" type="button">Edit Order</a>
                    <a href="#" class="btn btn-sm btn-danger" type="button">Delete Order</a>
                    <a href="{{ route('admin.invoice.create', $order->id) }}" class="btn btn-sm btn-warning"
                        type="button">Invoice</a>
                    <a href="#" class="btn btn-sm bg-purple" type="button">Order List</a>
                </form>
            </nav>
        </div>
        @if ($invoice && $invoice->company_id != null)
            <div class="row">
                <div class="col-xl-12 col-12">
                    <div class="cs-container" id="EA_Distribution_Invoice">
                        <div class="cs-invoice cs-style1" id="download_sec" style="color: #000 !important;">
                            <div class="cs-invoice_in" id="download_section">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <img src="{{ asset($invoice->company->logo) }}" width="300px" alt="Logo"
                                            style="display: block; margin-left: auto; margin-top: 0;">

                                    </div>
                                    <div class="col-sm-5">
                                        <h4 style="margin: 0;">
                                            {{ ucfirst(str_replace('_', ' ', $invoice->invoice_status)) }}</h4>
                                        <p class="p-0 m-0">
                                            <b>{{ $invoice->invoice_name ?? 'Invoice Name not Given' }}</b>
                                        </p>
                                        <p class="p-0 m-0">
                                            <b>{{ $invoice->address_line_1 ?? 'Address Line 1 not Given' }}</b>
                                        </p>
                                        <p class="p-0 m-0">
                                            <b>{{ $invoice->address_line_2 ?? 'Address Line 2 not Given' }}</b>
                                        </p>
                                        <p class="p-0 m-0">
                                            <b>{{ $invoice->city ?? 'City Not Given' }} -
                                                {{ $invoice->post_code ?? 'Post Code Not Given' }}</b>
                                        </p>
                                    </div>
                                    <div class="col-sm-3" style="line-height: 1.1;">
                                        <b style="margin: 0; display: block; font-size: 0.9em; line-height: 1.1;">Invoice
                                            Date</b>
                                        <p style="margin: 0; font-size: 0.9em; line-height: 1.1;">
                                            {{ date('d M Y', strtotime($invoice->date)) }}</p>
                                        <b style="margin: 0; display: block; font-size: 0.9em; line-height: 1.1;">Invoice
                                            Number</b>
                                        <p style="margin: 0; font-size: 0.9em; line-height: 1.1;">
                                            #{{ $invoice->invoice_no }}
                                        </p>
                                        <b style="margin: 0; display: block; font-size: 0.9em; line-height: 1.1;">VAT
                                            Number</b>
                                        <p style="margin: 0; font-size: 0.9em; line-height: 1.1;">
                                            {{ $invoice->company->vat_no }}</p>
                                    </div>

                                    <div class="col-sm-4" style="line-height: 1.1;">
                                        <p style="margin: 0; font-size: 0.9em; line-height: 1.1;">
                                            <b>{{ $invoice->company->name }}</b><br />
                                            {{ $invoice->company->address }}
                                        </p>
                                        <p style="margin: 0; font-size: 0.9em; line-height: 1.1;">Tel:
                                            {{ $invoice->company->contact_no }}</p>
                                        <p style="margin: 0; font-size: 0.9em; line-height: 1.1;">
                                            {{ $invoice->company->website }}</p>
                                    </div>


                                    <div class="col-sm-12 mt-1">

                                        <div class="cs-table cs-f12">
                                            <div class="">
                                                <div class="cs-table_responsive">
                                                    <table>
                                                        <thead>
                                                            <tr class="" style="border-bottom: solid black 2px;">
                                                                <th class="cs-width_4 cs-semi_bold cs-primary_color">
                                                                    Description
                                                                </th>
                                                                <th
                                                                    class="cs-width_1 cs-semi_bold cs-primary_color text-center">
                                                                    RRP
                                                                </th>
                                                                <th
                                                                    class="cs-width_1 cs-semi_bold cs-primary_color text-center">
                                                                    Quantity
                                                                </th>
                                                                <th class="cs-width_1 cs-semi_bold cs-primary_color">Unit
                                                                    Price
                                                                </th>
                                                                <th class="cs-width_1 cs-semi_bold cs-primary_color">VAT
                                                                </th>
                                                                <th class="cs-width_1 cs-semi_bold cs-primary_color cs-text_right"
                                                                    style="text-align: right;">
                                                                    Amount GBP</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @php
                                                                $totalQuantity = 0;
                                                            @endphp
                                                            @foreach ($invoice->order->orderDetails as $orderDetail)
                                                                @php

                                                                    $totalQuantity += $orderDetail->quantity;

                                                                @endphp
                                                                <tr>
                                                                    <td>{{ $orderDetail->product->brand->name }} -
                                                                        {{ $orderDetail->product->sku }}</td>
                                                                    <td class="text-center">
                                                                        {{ $orderDetail->product->rrp ?? 'N/A' }}</td>
                                                                    <td class="text-center">{{ $orderDetail->quantity }}
                                                                    </td>
                                                                    <td>{{ $orderDetail->price }}</td>
                                                                    <td>{{ $orderDetail->order->vat_tax_percentage }}%</td>
                                                                    <td class="cs-text_right cs-primary_color">
                                                                        {{ $orderDetail->total_amount }}</td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>

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

                                        <table>
                                            <tbody>
                                                <tr class="cs-table_baseline">

                                                    <td class="cs-width_9 cs-text_right"
                                                        style="border-top: solid 2px black;">
                                                        <span
                                                            style="padding-inline: 24.1%; font-size:11px;">{{ $totalQuantity }}</span>
                                                        <p class="cs-primary_color cs-f15"
                                                            style="margin: 0; font-weight: bolder;">Sub Total:</p>
                                                        @if (!empty($invoice->order->discount) && $invoice->order->discount > 0)
                                                            <p class="cs-primary_color cs-f16"
                                                                style="margin: 0; font-weight: bolder;">Discount:</p>
                                                        @endif
                                                        @if (!empty($invoice->order->shipping_charges))
                                                            <p class="cs-primary_color cs-f16"
                                                                style="margin: 0; font-weight: bolder;">Shipping:</p>
                                                        @endif
                                                        <p class="cs-primary_color cs-f16"
                                                            style="margin: 0; font-weight: bolder;">VAT
                                                            ({{ $invoice->order->vat_tax_percentage ?? 0 }}%):</p>
                                                        <p class="cs-border border-none"
                                                            style="margin: 0; font-weight: bolder;"></p>
                                                        <p class="cs-primary_color cs-f16"
                                                            style="margin: 0; font-weight: bolder;">Total:</p>
                                                    </td>
                                                    <td class="cs-width_2 cs-text_right cs-f16"
                                                        style="border-top: solid 2px black;">
                                                        <span class="text-white">s</span>
                                                        <p class="cs-primary_color cs-f15 cs-text_right"
                                                            style="margin: 0; font-weight: bolder;">
                                                            £ {{ $invoice->order->total_amount }}
                                                        </p>
                                                        @if (!empty($invoice->order->discount) && $invoice->order->discount > 0)
                                                            <p class="cs-primary_color cs-f16 cs-text_right"
                                                                style="margin: 0; font-weight: bolder;">
                                                                -£ {{ $invoice->order->discount }}
                                                            </p>
                                                        @endif
                                                        @if (!empty($invoice->order->shipping_charges))
                                                            <p class="cs-primary_color cs-f16 cs-text_right"
                                                                style="margin: 0; font-weight: bolder;">
                                                                +£ {{ $invoice->order->shipping_charges }}
                                                            </p>
                                                        @endif
                                                        <p class="cs-primary_color cs-f16 cs-text_right"
                                                            style="margin: 0; font-weight: bolder;">
                                                            +£ {{ $invoice->order->vat_tax_amount ?? '0' }}
                                                        </p>
                                                        <p class="cs-border" style="margin: 0; font-weight: bolder;"></p>
                                                        <p class="cs-primary_color cs-f16 cs-text_right"
                                                            style="margin: 0; font-weight: bolder;">
                                                            £ {{ $invoice->order->grand_total }}
                                                        </p>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-sm-12">
                                        <b style="margin: 0; display: block;">Due Date:
                                            {{ date('d M Y', strtotime($invoice->due_date)) }}</b>
                                        <p style="margin: 0;">{{ $invoice->company->bank_detail }}</p>
                                        <p style="margin: 0;"><b>{{ $invoice->company->name }}</b></p>
                                    </div>
                                    <div class="col-sm-12 mt-1">
                                        Company Registration No: {{ $invoice->company->reg_no }}. <br> Registered Office:
                                        {{ $invoice->company->office_location }}.
                                    </div>
                                    <div class="cs-invoice_btns cs-hide_print mt-2" id="cs-hide_print">
                                        <a href="javascript:window.print()" class="cs-invoice_btn cs-color1">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="ionicon"
                                                viewBox="0 0 512 512">
                                                <path
                                                    d="M384 368h24a40.12 40.12 0 0040-40V168a40.12 40.12 0 00-40-40H104a40.12 40.12 0 00-40 40v160a40.12 40.12 0 0040 40h24"
                                                    fill="none" stroke="currentColor" stroke-linejoin="round"
                                                    stroke-width="32" />
                                                <rect x="128" y="240" width="256" height="208" rx="24.32"
                                                    ry="24.32" fill="none" stroke="currentColor"
                                                    stroke-linejoin="round" stroke-width="32" />
                                                <path d="M384 128v-24a40.12 40.12 0 00-40-40H168a40.12 40.12 0 00-40 40v24"
                                                    fill="none" stroke="currentColor" stroke-linejoin="round"
                                                    stroke-width="32" />
                                                <circle cx="392" cy="184" r="24" />
                                            </svg>
                                            <span>Print</span>
                                        </a>

                                        @if (
                                            $invoice->status == 'real' &&
                                                $invoice->order->payment_status != 'paid' &&
                                                $invoice->order->payment_method != 'bank_transfer' &&
                                                $invoice->order->payment_method != 'cash_on_delivery')
                                            <a href="javascript:void(0);" class="btn btn-primary" id="payNowButton"><i
                                                    class="ri-check-line align-bottom me-1"></i> Pay Now</a>
                                        @endif
                                        <button id="downloadInvoice" class="cs-invoice_btn">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="ionicon"
                                                viewBox="0 0 512 512">
                                                <title>Download</title>
                                                <path
                                                    d="M336 176h40a40 40 0 0140 40v208a40 40 0 01-40 40H136a40 40 0 01-40-40V216a40 40 0 0140-40h40"
                                                    fill="none" stroke="currentColor" stroke-linecap="round"
                                                    stroke-linejoin="round" stroke-width="32" />
                                                <path fill="none" stroke="currentColor" stroke-linecap="round"
                                                    stroke-linejoin="round" stroke-width="32"
                                                    d="M176 272l80 80 80-80M256 48v288" />
                                            </svg>
                                            <span>Download</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

    </div>
    <style>
        @media print {
            #chat_section {
                display: none !important;
                visibility: hidden !important;
            }

            #editInvoice {
                display: none !important;
                visibility: hidden !important;
            }
        }
    </style>
@endsection


@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        document.getElementById("downloadInvoice").addEventListener("click", function() {
            const {
                jsPDF
            } = window.jspdf;

            const invoiceElement = document.getElementById("download_sec");
            const hideElement = document.getElementById("cs-hide_print");

            // Store original styles
            const originalColor = invoiceElement.style.color;
            const originalFontSize = window.getComputedStyle(invoiceElement).fontSize;

            // Temporarily change styles
            invoiceElement.style.color = "#000000";
            invoiceElement.style.fontSize = "18px"; // Increase font size (Adjust as needed)
            if (hideElement) hideElement.style.display = "none";

            setTimeout(() => {
                html2canvas(invoiceElement, {
                    scale: 2
                }).then((canvas) => {
                    const imgData = canvas.toDataURL("image/png");
                    const pdf = new jsPDF("p", "mm", "a4");
                    const imgWidth = 210;
                    const imgHeight = (canvas.height * imgWidth) / canvas.width;

                    pdf.addImage(imgData, "PNG", 0, 10, imgWidth, imgHeight);
                    pdf.save("invoice.pdf");

                    // Reset styles after download
                    invoiceElement.style.color = originalColor;
                    invoiceElement.style.fontSize = originalFontSize;
                    if (hideElement) hideElement.style.display = "block";
                });
            }, 100); // Small delay to ensure font-size change takes effect
        });
    </script>

    @if ($invoice)
        <script>
            $(document).ready(function() {
                const invoice_id = '{{ $invoice->id }}'

                function loadChatMessages() {
                    $.ajax({
                        type: "GET",
                        url: "", // Replace with your route to fetch chat messages
                        success: function(response) {
                            // Hide the loading indicator
                            $("#loading-indicator").hide();
                            // Display the chat messages
                            let messages = response.messages;
                            let messagesHtml = '';
                            if (messages.length > 0) {
                                for (message of messages) {
                                    if (message.send_by == 'admin') {
                                        messagesHtml += `
                                        <div class="d-flex justify-content-between">
                                            <p class="small mb-1">You</p>
                                            <p class="small mb-1 text-muted">${message.created_at}</p>
                                        </div>
                                        <div class="d-flex flex-row justify-content-start">
                                            <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                                                alt="avatar 1" style="width: 45px; height: 100%;">
                                            <div>
                                                <p class="small p-2 ms-3 mb-3 rounded-3" style="background-color: #f5f6f7;">${message.message}</p>
                                            </div>
                                        </div>
                                    `;
                                    } else {
                                        messagesHtml += `
                                        <div class="d-flex justify-content-between">
                                            <p class="small mb-1 text-muted">${message.created_at}</p>
                                            <p class="small mb-1">${message.send_by_name}</p>
                                        </div>
                                        <div class="d-flex flex-row justify-content-end mb-4 pt-1">
                                            <div>
                                                <p class="small p-2 me-3 mb-3 text-dark-primary rounded-3 bg-light-primary">${message.message}</p>
                                            </div>
                                            <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                alt="avatar 1" style="width: 45px; height: 100%;">
                                        </div>
                                    `;
                                    }
                                }
                            } else {
                                messagesHtml = `
                                <div class="text-center">
                                    <p class="small mb-1">No messages found</p>
                                </div>
                            `;
                            }
                            console.log(messagesHtml);
                            $("#chat-messages").html(messagesHtml);
                            $("#chat-messages").show();

                            // Scroll to the bottom of the chat
                            $(".messages-container").scrollTop($(".messages-container")[0].scrollHeight);

                        },
                        error: function(error) {
                            console.error(error);
                            // Handle error here, e.g., display an error message
                            Toast_.show('error', error.responseJSON.message)
                        }
                    });
                }

                // refresh chat
                $("#refreshChat").click(function() {
                    // Display loading indicator
                    $("#chat-messages").hide();
                    $("#loading-indicator").show();
                    $("#chat-messages").empty()
                    setTimeout(() => {
                        loadChatMessages();
                    }, 2000);
                });

                // Load chat messages every 2 seconds
                setTimeout(() => {
                    loadChatMessages();
                }, 2000);

                // Handle the Send button click event
                $("#send-button").click(function() {

                    var messageInput = $("#message-input").val();
                    if (messageInput.trim() === "") {
                        return; // Don't send empty messages
                    }

                    // Display loading indicator
                    $("#send-button").html('<i class="fas fa-spinner fa-spin"></i> Sending...');

                    // Send the message via AJAX
                    $.ajax({
                        type: "POST",
                        url: "",
                        data: {
                            message: messageInput,
                            invoice_id: invoice_id,
                            send_by: 'admin',
                            _token: "{{ csrf_token() }}",
                        },
                        success: function(response) {
                            // Simulate success

                            var message = `
                            <div class="d-flex justify-content-between">
                                <p class="small mb-1">You</p>
                                <p class="small mb-1 text-muted">${response.datetime}</p>
                            </div>
                            <div class="d-flex flex-row justify-content-start">
                                <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                                    alt="avatar 1" style="width: 45px; height: 100%;">
                                <div>
                                    <p class="small p-2 ms-3 mb-3 rounded-3" style="background-color: #f5f6f7;">${response.message}</p>
                                </div>
                            </div>
                        `;

                            // Append the sent message to the chat
                            $("#chat-messages").append(message);

                            // Clear input field and reset button
                            $("#message-input").val("");
                            $("#send-button").html('Send');
                        },
                        error: function(error) {
                            // Handle error here, e.g., display an error icon
                            console.error(error);
                            Toast_.show('error', error.responseJSON.message)
                            // Reset the button
                            $("#send-button").html('Send');
                        }
                    });
                });
            });
        </script>
    @endif

    <script>
        $(document).ready(function() {
            const discount = $('#cart-discount');
            const shipping = $('#cart-shipping');
            const total = $('#cart-total');
            const totalAmount = float(total.val());

            function calculateTotal() {
                //total will be calculated here
                let discountAmount = float(discount.val());
                let shippingAmount = isNaN(float(shipping.val())) ? 0 : float(shipping.val());

                console.log(totalAmount, discountAmount, shippingAmount);

                let totalAm = totalAmount - discountAmount + shippingAmount;
                totalAm = totalAm.toFixed(2)
                total.val(totalAm)
            }

            function float(value) {
                if (isNaN(value)) {
                    return 0;
                }
                return parseFloat(value);
            }

            discount.on('keyup', function() {
                calculateTotal();
            });

            shipping.on('keyup', function() {
                calculateTotal();
            });


        });
    </script>
    <script>
        $('#invoice_form').on('submit', function(e) {
            e.preventDefault();
            let approvalStatus = $('#approval_status').val();

            if (approvalStatus !== 'approved') {
                alert('Order Not Approved Yet!');
            } else {
                this.submit();
            }
        });
    </script>
@endsection