@extends('frontend.layouts.user.master')
@section('title','Dashboard')
@section('content')
 <div class="container">

        <!-- row -->
        <div class="row mb-8">
            <div class="col-md-12">
                <div class="d-md-flex justify-content-between align-items-center">
                    <div>
                        <!-- page header -->
                        <h2>Order Invoice</h2>
                        <!-- breacrumb -->
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}" class="text-inherit">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Invoice</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- button -->
                    <div>
                        <a href="{{ route('user.order.detail',['id' => $invoice->order->id]) }}" class="btn btn-primary">Back to Order</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- row -->

    <div class="row">
        <div class="col-xl-12 col-12 mb-5">
            <div class="card h-100 card-lg" 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 justify-content-between">
                                <!-- Add the invoice status here -->
                                <div class="">
                                    <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="invoice-status">
                                    <h6 class="text-muted text-uppercase fw-semibold">
                                        @php
                                            $color = 'primary';
                                            if($invoice->status == 'performa'){
                                                $color = 'warning';
                                            }elseif($invoice->status == 'real'){
                                                $color = 'success';
                                            }elseif($invoice->status == 'rejected'){
                                                $color = 'danger';
                                            }
                                        @endphp
                                        <span class="badge bg-{{ $color }}-subtle text-{{ $color }} fs-11">{{ $invoice->status }}</span>
                                    </h6>
                                    @if ($invoice->status == 'rejected')
                                        <p>
                                            Reason for rejection: <span class="fw-semibold">{{ $invoice->reason }}</span>
                                        </p>
                                    @endif
                                </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">#VL<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>
                                    <span class="badge bg-success-subtle text-success fs-11" id="payment-status">{{ $invoice->order->payment_status }}</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>
                                        @if ($invoice->order->vat_tax_amount != null && $invoice->order->vat_tax_amount != 0)
                                            <tr>
                                                <td>VAT Tax ({{ $invoice->order->vat_tax_percentage }}%)</td>
                                                <td class="text-end">£{{ $invoice->order->vat_tax_amount }}</td>
                                            </tr>

                                        @endif
                                        {{-- <tr>
                                            <td>Estimated Tax (12.5%)</td>
                                            <td class="text-end">£{{ $invoice->order->estimated_tax }}</td>
                                        </tr> --}}
                                        @if ($invoice->order->discount != null && $invoice->order->discount != 0)
                                            <tr>
                                                <td>Discount</td>
                                                <td class="text-end">£{{ $invoice->order->discount }}</td>
                                            </tr>
                                        @endif
                                        @if ($invoice->order->shipping_charges != null && $invoice->order->shipping_charges != 0)
                                            <tr>
                                                <td>Shipping Charges</td>
                                                <td class="text-end">£{{ $invoice->order->shipping_charges }}</td>
                                            </tr>
                                        @endif
                                        <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-4 payment-details">
                                <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 }}</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"><i class="ri-download-2-line align-bottom me-1"></i> Download</a> --}}
                                {{-- Accept & Reject Invoice btns --}}
                                @if ($invoice->status == 'performa')
                                    <a href="{{ route('user.invoice.accept', $invoice->id) }}"
                                        onclick="return confirm('Are you sure you want to accept this invoice? Once accepted, you will not be able to edit this invoice.')"
                                        class="btn btn-success"><i class="ri-check-line align-bottom me-1"></i> Accept</a>
                                    <a href="#"
                                        data-bs-toggle="modal"
                                        data-bs-target="#rejectInvoiceModal"
                                        class="btn btn-danger"><i class="ri-close-line align-bottom me-1"></i> Reject</a>
                                @endif

                                @if ($invoice->status == 'real' && $invoice->order->payment_status != 'paid' && $invoice->order->payment_method != 'bank_transfer' && $invoice->order->payment_method != 'cash_on_delivery')
                                    {{-- pay now button --}}
                                    <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
                            </div>
                        </div>
                        <!--end card-body-->
                    </div>
                </div><!--end row-->
            </div>
            <!--end card-->
        </div>
        <!--end col-->
    </div>
    <!--end row-->




    <div class="row d-flex justify-content-center">
    <div class="col-md-12">
        <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="bi bi-arrow-clockwise bi-lg 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>





</div><!-- container-fluid -->

<style>
   @media print {
    body * {
        visibility: hidden;
    }
    #demo, #demo * {
        visibility: visible;
    }
    #demo {
        position: absolute;
        left: 0;
        top: 0;
    }
    .payment-details {
        page-break-before: always;
    }
}


</style>
<!-- Modal -->
<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="paymentModalLabel">Select Payment Method</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Payment method options -->
                <div class="form-check d-none">
                    <input class="form-check-input" type="radio" name="paymentMethod" id="bankTransfer" value="bank_transfer">
                    <label class="form-check-label" for="bankTransfer">
                        Bank Transfer
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="paymentMethod" id="stripe" value="stripe">
                    <label class="form-check-label" for="stripe">
                        Stripe
                    </label>
                </div>
                <div class="form-check d-none">
                    <input class="form-check-input" type="radio" name="paymentMethod" id="applePay" value="apple_pay">
                    <label class="form-check-label" for="applePay">
                        Apple Pay
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="confirmPayment">Confirm Payment</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="rejectInvoiceModal" tabindex="-1" aria-labelledby="rejectInvoiceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content p-4">
            <div class="modal-header border-0">
                <h5 class="modal-title fs-3 fw-bold" id="rejectInvoiceModalLabel">Reject Invoice</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('user.invoice.reject', ['id' => $invoice->id]) }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="rejectReason" class="form-label">Reason for Rejection</label>
                        <textarea class="form-control" id="rejectReason" placeholder="Enter your reason for rejection" required name="reason"></textarea>
                    </div>

                    <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">
                </div>
                <div class="modal-footer border-0 justify-content-between">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-danger"
                        onclick="return confirm('Are you sure you want to reject this invoice?');"
                    >Reject Invoice</button>
                </div>
            </form>
        </div>
    </div>
</div>


@endsection

@section('js')
<script>
    $(document).ready(function () {
        const invoice_id = '{{ $invoice->id }}'
        function loadChatMessages() {
            $.ajax({
                type: "GET",
                url: "{{ route('user.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 == 'user'){
                                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/ava5-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">Admin</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/ava6-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
                    myToast.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: "{{ route('user.send.message') }}",
                data: {
                    message: messageInput,
                    invoice_id: invoice_id,
                    send_by: 'user',
                    _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/ava5-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>
                    `;

                    console.log(message);
                    // 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);
                    myToast.show('error', error.responseJSON.message)
                    // Reset the button
                    $("#send-button").html('Send');
                }
            });
        });
    });
</script>

<script>
    // Function to handle the Pay Now button click event
    $(document).ready(function() {
        $('#payNowButton').click(function() {
            $('#paymentModal').modal('show');
        });

        // Handle the Confirm Payment button click event
        $('#confirmPayment').click(function() {
            // Get the selected payment method
            const selectedPaymentMethod = $("input[name='paymentMethod']:checked").val();

            // Perform further actions based on the selected payment method
            switch (selectedPaymentMethod) {
                case 'bank_transfer':
                    // Handle Cash on Delivery
                    break;
                case 'stripe':
                    // Handle Stripe payment
                    break;
                case 'apple_pay':
                    // Handle Apple Pay
                    break;
                default:
                    // Handle invalid selection or show an error message
                    break;
            }

            // Close the modal
            $('#paymentModal').modal('hide');
            let invoiceId = {{ $invoice->id }};
            let payNowUrl = '{{ route('user.invoice.pay', ["id" => ":id", "method" => ":method" ]) }}';
            payNowUrl = payNowUrl.replace(':id', invoiceId);
            payNowUrl = payNowUrl.replace(':method', selectedPaymentMethod);

            window.location.href = payNowUrl;
        });
    });
</script>
@endsection