@extends('admin.layouts.master')

@section('title', 'Real Invoice')
@section('css')
<style>
    .text-dark-primary {
        /* color: #fff !important; */
        color: rgba(4, 69, 4, 1) !important;
    }

    .bg-light-primary {
        /* light green */
        /* background-color: #7cbd7c !important; */
        background-color: #ceefce !important;
    }
</style>
@endsection
@section('content')
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Invoice Details</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Invoices</a></li>
                        <li class="breadcrumb-item active">Invoice Details</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row justify-content-center">
        <div class="col-xxl-9">
            <div class="card" id="demo">
                <div class="row">
                    <!-- Header Section -->
                    <div class="col-lg-12">
                        <div class="card-header border-bottom-dashed p-4">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <img src="{{ asset($invoice->company->logo) }}" class="card-logo card-logo-dark" alt="logo dark" height="17">
                                    <img src="assets/images/logo-light.png" class="card-logo card-logo-light" alt="logo light" height="17">
                                    <div class="mt-sm-5 mt-4">
                                        <h6 class="text-muted text-uppercase fw-semibold">Address</h6>
                                        <p class="text-muted mb-1" id="address-details">{{ $invoice->company->address }}</p>
                                        {{-- <p class="text-muted mb-0" id="zip-code"><span>Zip-code:</span> {{ $invoice->company->zip_code }}</p> --}}
                                    </div>
                                </div>
                                <div class="flex-shrink-0 mt-sm-0 mt-3">
                                    <h6><span class="text-muted fw-normal">Legal Registration No:</span><span id="legal-register-no">{{ $invoice->company->reg_no }}</span></h6>
                                    <h6><span class="text-muted fw-normal">Email:</span><span id="email">{{ $invoice->company->email }}</span></h6>
                                    <h6><span class="text-muted fw-normal">Website:</span> <a href="{{ $invoice->company->website }}" class="link-primary" target="_blank" id="website">{{ $invoice->company->website }}</a></h6>
                                    <h6 class="mb-0"><span class="text-muted fw-normal">Contact No: </span><span id="contact-no"> {{ $invoice->company->contact_no }}</span></h6>
                                </div>
                            </div>
                        </div>
                        <!--end card-header-->
                    </div>

                    <!-- Invoice Details Section -->
                    <div class="col-lg-12">
                        <div class="card-body p-4">
                            <div class="row g-3">
                                <div class="col-lg-3 col-6">
                                    <p class="text-muted mb-2 text-uppercase fw-semibold">Invoice No</p>
                                    <h5 class="fs-14 mb-0">#<span id="invoice-no">{{ $invoice->invoice_no }}</span></h5>
                                </div>
                                <!--end col-->
                                <div class="col-lg-3 col-6">
                                    <p class="text-muted mb-2 text-uppercase fw-semibold">Date</p>
                                    <h5 class="fs-14 mb-0"><span id="invoice-date">{{ $invoice->date }}</span></h5>
                                </div>
                                <!--end col-->
                                <div class="col-lg-3 col-6">
                                    <p class="text-muted mb-2 text-uppercase fw-semibold">Payment Status</p>
                                    @php
                                    // $paymentStatus = 'pending','credit','paid'
                                    $paymentStatus = $invoice->order->payment_status;

                                    $color = '';
                                    if ($paymentStatus == 'pending') {
                                        $color = 'warning';
                                    } elseif ($paymentStatus == 'credit') {
                                        $color = 'primary';
                                    } elseif ($paymentStatus == 'paid') {
                                        $color = 'success';
                                    }
                                @endphp
                                <span
                                    class="badge bg-{{ $color }} text-dark-light ms-2">{{ ucwords($paymentStatus) }}</span>
                                </div>
                                <!--end col-->
                                <div class="col-lg-3 col-6">
                                    <p class="text-muted mb-2 text-uppercase fw-semibold">Total Amount</p>
                                    <h5 class="fs-14 mb-0">£<span id="total-amount">{{ $invoice->order->grand_total }}</span></h5>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </div>
                        <!--end card-body-->
                    </div>

                    <!-- Billing and Shipping Address Section -->
                    <div class="col-lg-12">
                        <div class="card-body p-4 border-top border-top-dashed">
                            <div class="row g-3">
                                <div class="col-6">
                                    <h6 class="text-muted text-uppercase fw-semibold mb-3">Billing Address</h6>
                                    @if ($invoice->order->billingAddress)
                                        <p class="fw-medium mb-2" id="billing-name">{{ $invoice->order->billingAddress->name }}</p>
                                        <p class="text-muted mb-1" id="billing-address-line-1">{{ $invoice->order->billingAddress->address_line_1 }}</p>
                                        @if ($invoice->order->billingAddress->address_line_2)
                                            <p class="text-muted mb-1" id="billing-address-line-1">{{ $invoice->order->billingAddress->address_line_2 }}</p>
                                        @endif
                                        <p class="text-muted mb-1"><span>Phone: +</span><span id="billing-phone-no">{{ $invoice->order->billingAddress->phone }}</span></p>
                                        <p class="text-muted mb-1"><span>City: </span><span id="billing-phone-no">{{ $invoice->order->billingAddress->city }}</span></p>
                                        <p class="text-muted mb-1"><span>Post Code: </span><span id="billing-phone-no">{{ $invoice->order->billingAddress->post_code }}</span></p>
                                    @elseif ($invoice->order->same_as_pickup_address)
                                        <p class="text-muted"><strong>Same as pickup address</strong></p>
                                    @elseif ($invoice->order->same_as_shipping_address)
                                        <p class="text-muted"><strong>Same as shipping address</strong></p>
                                    @endif

                                </div>
                                <!--end col-->
                                <div class="col-6">
                                    @if ($invoice->order->shippingAddress)
                                        <h6 class="text-muted text-uppercase fw-semibold mb-3">Shipping Address</h6>
                                        <p class="fw-medium mb-2" id="shipping-name">{{ $invoice->order->shippingAddress->name }}</p>
                                        <p class="text-muted mb-1" id="shipping-address-line-1">{{ $invoice->order->shippingAddress->address_line_1 }}</p>
                                        @if ($invoice->order->shippingAddress->address_line_2)
                                            <p class="text-muted mb-1" id="shipping-address-line-1">{{ $invoice->order->shippingAddress->address_line_2 }}</p>
                                        @endif
                                        <p class="text-muted mb-1"><span>Phone: +</span><span id="shipping-phone-no">{{ $invoice->order->shippingAddress->phone }}</span></p>
                                        <p class="text-muted mb-1"><span>City: </span><span id="billing-phone-no">{{ $invoice->order->shippingAddress->city }}</span></p>
                                        <p class="text-muted mb-1"><span>Post Code: </span><span id="billing-phone-no">{{ $invoice->order->shippingAddress->post_code }}</span></p>
                                    @endif
                                    @if ($invoice->order->pickupAddress)
                                        <h6 class="text-muted text-uppercase fw-semibold mb-3">Pickup Address</h6>
                                        @php
                                            $pickup_address = $invoice->order->pickupAddress;
                                        @endphp
                                        <p class="fw-medium mb-2" id="shipping-name">{{ $pickup_address->name }}</p>
                                        <p class="fw-medium mb-2" id="shipping-name">{{ $pickup_address->phone }}</p>
                                        <p class="fw-medium mb-2" id="shipping-name">{{ $pickup_address->note }}</p>
                                    @endif
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </div>
                        <!--end card-body-->
                    </div>

                    <!-- Product Details Section -->
                    <div class="col-lg-12">
                        <div class="card-body p-4">
                            <div class="table-responsive">
                                <table class="table table-borderless text-center table-nowrap align-middle mb-0">
                                    <thead>
                                        <tr class="table-active">
                                            <th scope="col" style="width: 50px;">#</th>
                                            <th scope="col">Product Details</th>
                                            <th scope="col">Rate</th>
                                            <th scope="col">Quantity</th>
                                            <th scope="col" class="text-end">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody id="products-list">
                                        @foreach($invoice->order->orderDetails as $index => $orderDetail)
                                        <tr>
                                            <th scope="row">{{ $index + 1 }}</th>
                                            <td class="text-start">
                                                <span class="fw-medium">{{ $orderDetail->product->name }}</span>
                                                <p class="text-muted mb-0">{{ $orderDetail->product->specification }}</p>
                                            </td>
                                            <td>£{{ $orderDetail->price }}</td>
                                            <td>{{ $orderDetail->quantity }}</td>
                                            <td class="text-end">£{{ $orderDetail->total_amount }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table><!--end table-->
                            </div>
                            <div class="border-top border-top-dashed mt-2">
                                <table class="table table-borderless table-nowrap align-middle mb-0 ms-auto" style="width:250px">
                                    <tbody>
                                        <tr>
                                            <td>Items Sub Total</td>
                                            <td class="text-end">£{{ $invoice->order->total_amount }}</td>
                                        </tr>
                                        {{-- <tr>
                                            <td>Estimated Tax (12.5%)</td>
                                            <td class="text-end">£{{ $invoice->order->estimated_tax }}</td>
                                        </tr> --}}
                                        <tr>
                                            <td>Discount</td>
                                            <td class="text-end">- £{{ $invoice->order->discount }}</td>
                                        </tr>

                                        @if ($invoice->order->vat_tax_amount != null && $invoice->order->vat_tax_amount != 0)
                                        {{ dd($invoice->order->vat_tax_percentage) }}
                                            <tr>
                                                <td>Vat Tax ({{ $invoice->order->vat_tax_percentage }}%)</td>
                                                <td class="text-end">+£{{ $invoice->order->vat_tax_amount }}</td>
                                            </tr>
                                        @endif

                                        <tr>
                                            <td>Shipping Charge</td>
                                            <td class="text-end">£{{ $invoice->order->shipping_charges }}</td>
                                        </tr>
                                        <tr class="border-top border-top-dashed fs-15">
                                            <th scope="row">Total Amount</th>
                                            <th class="text-end">£{{ $invoice->order->grand_total }}</th>
                                        </tr>
                                    </tbody>
                                </table>
                                <!--end table-->
                            </div>
                            <div class="mt-3">
                                <h6 class="text-muted text-uppercase fw-semibold mb-3">Payment Details:</h6>
                                <p class="text-muted mb-1">Payment Method:
                                <span class="fw-medium" id="payment-method">
                                    {{ $invoice->order->payment_method == 'Stripe' ? 'Payment before Delivery' : 'Payment after Delivery' }}
                                </span>
                            </p>
                                <p class="text-muted mb-1">Payment Status:

                                    @php
                                    // $paymentStatus = 'pending','credit','paid'
                                    $paymentStatus = $invoice->order->payment_status;

                                    $color = '';
                                    if ($paymentStatus == 'pending') {
                                        $color = 'warning';
                                    } elseif ($paymentStatus == 'credit') {
                                        $color = 'primary';
                                    } elseif ($paymentStatus == 'paid') {
                                        $color = 'success';
                                    }
                                @endphp
                                <span
                                    class="badge bg-{{ $color }} text-dark-light ms-2">{{ ucwords($paymentStatus) }}</span>
                            </p>
                                {{--  <p class="text-muted mb-1">Card Holder: <span class="fw-medium" id="card-holder-name">{{ $invoice->order->card_holder_name }}</span></p>
                                <p class="text-muted mb-1">Card Number: <span class="fw-medium" id="card-number">xxxx xxxx xxxx {{ substr($invoice->order->card_number, -4) }}</span></p>  --}}
                                <p class="text-muted">Total Amount: <span class="fw-medium" id="">£{{ $invoice->order->currency }} </span><span id="card-total-amount">{{ $invoice->order->grand_total }}</span></p>
                            </div>
                            <div class="mt-4">
                                <div class="alert alert-info">
                                    <p class="mb-0"><span class="fw-semibold">NOTES:</span><span id="note">{{ $invoice->notes }}</span></p>
                                </div>
                            </div>
                            <div class="hstack gap-2 justify-content-end d-print-none mt-4">
                                <a href="javascript:window.print()" class="btn btn-success"><i class="ri-printer-line align-bottom me-1"></i> Print</a>
                                <a href="javascript:void(0);" class="btn btn-primary d-none"><i class="ri-download-2-line align-bottom me-1"></i> Download</a>
                            </div>
                        </div>
                        <!--end card-body-->
                    </div>
                </div>
            </div>
            <!--end card-->
        </div>

        <!--end col-->
    </div>

    <div class="row d-flex justify-content-center">
        <div class="col-xxl-9">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center p-3" style="border-top: 4px solid #7cbd7c;">
                    <h5 class="mb-0">Chat messages</h5>
                    <div class="d-flex flex-row align-items-center">
                        {{-- //refresh button use bi icons--}}
                    @if ($invoice->status != 'real' && $invoice->order->payment_status != 'paid')
                        <i title="Refresh Chat" class="mdi mdi-sync text-primary cursor-pointer" style="cursor: pointer" id="refreshChat"></i>
                    @endif

                    </div>
                </div>
                <div class="card-body messages-container overflow-auto" data-mdb-perfect-scrollbar="true" style="position: relative; height: 400px">
                    <div id="loading-indicator" class="text-center">
                        <i class="fas fa-spinner fa-spin fa-2x"></i> Loading...
                    </div>
                    <div id="chat-messages" style="display: none;">
                        {{-- Chat messages will be loaded here --}}
                    </div>
                </div>
                @if ($invoice->status != 'real' && $invoice->order->payment_status != 'paid')
                    <div class="card-footer text-muted d-flex justify-content-start align-items-center p-3">
                        <div class="input-group mb-0">
                            <input type="text" class="form-control" id="message-input" placeholder="Type message" aria-label="Recipient's username" aria-describedby="send-button" />
                            <button class="btn btn-primary" type="button" id="send-button" style="padding-top: .55rem;">Send</button>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
    <!--end row-->
</div><!-- container-fluid -->
@endsection

@section('js')
    <script>
        $(document).ready(function () {
            const invoice_id = '{{ $invoice->id }}'
            function loadChatMessages() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('admin.fetch.messages',['invoice_id' => $invoice->id]) }}", // 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').html('');
                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: "{{ route('admin.send.message') }}",
                    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>
@endsection