@extends('frontend.layouts.user.master')
@section('title', 'Dashboard')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/frontend/assets/css/invoice.css') }}">
@endsection
@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="cs-container" id="EA_Distribution_Invoice">
                <div class="cs-invoice cs-style1">
                    <div class="cs-invoice_in" id="download_section">
                        <div class="cs-invoice_head cs-type1 cs-mb25 column border-bottom-none">
                            <div class="cs-invoice_left w-70 display-flex">
                                <div class="cs-logo cs-mr20"><img src="{{ asset($invoice->company->logo)  }}" width="100%" height="auto" alt="Logo"></div>
                                <div class="cs-ml22">
                                    <div class="cs-invoice_number cs-primary_color cs-mb0 cs-f16">
                                        <b class="cs-primary_color">{{ $invoice->company->name }}</b>
                                    </div>
                                    <div
                                        class="cs-invoice_number cs-primary_color cs-mb0 cs-f16 display-flex space-between gap-20">
                                        <p class="cs-mb0 cs-primary_color cs-mr15"><b>#REG:</b></p>
                                        <p class="cs-mb0">{{ $invoice->company->reg_no }}</p>
                                    </div>
                                    <div class="cs-invoice_number cs-primary_color cs-mb0 cs-f16  display-flex space-between ">
                                        <p class="cs-primary_color cs-mb0"><b>Email:</b></p>
                                        <p class="cs-mb0" style="margin-left: 5px;">{{ $invoice->company->email }}</p>
                                    </div>
                                    <div class="cs-invoice_number cs-primary_color cs-mb0 cs-f16  display-flex space-between ">
                                        <p class="cs-primary_color cs-mb0"><b>Website:</b></p>
                                        <p class="cs-mb0" style="margin-left: 5px;">{{ $invoice->company->website }}</p>
                                    </div>
                                    <div class="cs-invoice_number cs-primary_color cs-mb0 cs-f16  display-flex space-between ">
                                        <p class="cs-primary_color cs-mb0"><b>Address:</b></p>
                                        <p class="cs-mb0" style="margin-left: 5px;">{{ $invoice->company->address }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="cs-invoice_right cs-text_right">
                                <div
                                    class="cs-invoice_number cs-primary_color cs-mb0 cs-f16  display-flex justify-content-flex-end">
                                    <p class="cs-primary_color"><b>Total:</b></p>
                                    <p class="cs-mb0">£ {{ $invoice->order->grand_total }}</p>
                                </div>
                                <div
                                    class="cs-invoice_number cs-primary_color cs-mb0 cs-f16  display-flex justify-content-flex-end">
                                    <p class="cs-primary_color cs-mb0"><b>Invoice Date:</b></p>
                                    <p class="cs-mb0">
                                        {{ date('d M Y', strtotime($invoice->date)) }}
                                    </p>
                                </div>
                                <div
                                    class="cs-invoice_number cs-primary_color cs-mb0 cs-f16  display-flex justify-content-flex-end">
                                    <p class="cs-primary_color cs-mb0"><b>Invoice No:</b></p>
                                    <p class="cs-mb0">#{{ $invoice->invoice_no }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="display-flex cs-text_center">
                            <div class="cs-border-1"></div>
                            <h5 class="cs-width_12 cs-dip_green_color" style="text-transform: uppercase">
                                {{ $invoice->status == 'real' ? 'Real Invoice' : 'Proforma Invoice' }}
                            </h5>
                            <div class="cs-border-1"></div>
                        </div>

                        <div class="cs-invoice_head cs-mb1 ">
                            <div class="cs-invoice_left cs-mr97">
                                <b class="cs-primary_color">Customer Name:</b>
                                <p class="cs-mb8">
                                    {{ $invoice->order->user->first_name }} {{ $invoice->order->user->last_name }}
                                </p>
                                <p>
                                    <b class="cs-primary_color cs-semi_bold">Customer Email:</b> <br>{{ $invoice->order->user->email }}</p>
                                @if ($invoice->order->user->phone)
                                    <p><b class="cs-primary_color cs-semi_bold">Customer Phone:</b> <br>{{ $invoice->order->user->phone }}</p>
                                @endif
                            </div>
                            <div class="cs-invoice_right">
                                <b class="cs-primary_color">Billing Address:</b>
                                @if ($invoice->order->billingAddress)
                                    <p>
                                        {{ $invoice->order->billingAddress->name }}
                                        {{ $invoice->order->billingAddress->address_line_1 }} <br/>
                                        @if ($invoice->order->billingAddress->address_line_2)
                                            {{ $invoice->order->billingAddress->address_line_2 }} <br/>
                                        @endif
                                        {{ $invoice->order->billingAddress->city }} <br/>
                                        {{ $invoice->order->billingAddress->post_code }} <br/>
                                    </p>
                                @elseif ($invoice->order->same_as_pickup_address)
                                    <p>Same as pickup address <br> </p>
                                @elseif ($invoice->order->same_as_shipping_address)
                                    <p>Same as shipping address <br> </p>
                                @endif

                            </div>
                            <div class="cs-invoice_right">
                                @if ($invoice->order->shippingAddress)
                                    <b class="cs-primary_color">Shipping Address:</b>
                                    <p>
                                        {{ $invoice->order->shippingAddress->name }} <br/>
                                        {{ $invoice->order->shippingAddress->address_line_1 }} <br/>
                                        @if ($invoice->order->shippingAddress->address_line_2)
                                            {{ $invoice->order->shippingAddress->address_line_2 }} <br/>
                                        @endif
                                        {{ $invoice->order->shippingAddress->city }} <br/>
                                        {{ $invoice->order->shippingAddress->post_code }} <br/>
                                    </p>
                                @endif
                                @if ($invoice->order->pickupAddress)
                                    <b class="cs-primary_color">Pickup Address:</b>
                                    @php
                                        $pickup_address = $invoice->order->pickupAddress;
                                    @endphp
                                    <p>
                                        {{ $pickup_address->name }} <br/>
                                        {{ $pickup_address->phone }} <br/>
                                        {{ $pickup_address->note }} <br/>
                                    </p>
                                @endif
                            </div>
                        </div>

                        <div class="cs-border"></div>
                        <div class="cs-grid_row  cs-mb0 cs-mt" style="text-align: center">
                            <p class="cs-mb20" style="margin: 7px 0;"><b class="cs-primary_color">Due Date:</b> <span
                                class="cs-primary_color">13/9/2023</span></p>
                        </div>
                        <div class="cs-border cs-mb30"></div>
                        <div class="cs-table cs-style2 cs-f12">
                            <div class="cs-round_border">
                                <div class="cs-table_responsive">
                                    <table>
                                        <thead>
                                            <tr class="cs-focus_bg">
                                                <th class="cs-width_3 cs-semi_bold cs-primary_color">Item</th>
                                                <th class="cs-width_1 cs-semi_bold cs-primary_color">Price
                                                </th>
                                                <th class="cs-width_1 cs-semi_bold cs-primary_color">Quantity</th>
                                                <th class="cs-width_1 cs-semi_bold cs-primary_color cs-text_right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($invoice->order->orderDetails as $index => $orderDetail)
                                                <tr>
                                                    <td>{{ $orderDetail->product->name }}</td>
                                                    <td>£{{ $orderDetail->price }}</td>
                                                    <td>{{ $orderDetail->quantity }}</td>
                                                    <td class="cs-text_right cs-primary_color">£ {{ $orderDetail->total_amount }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="cs-table cs-style2 cs-mt20">
                            <div class="cs-table_responsive">
                                <table>
                                    <tbody>
                                        <tr class="cs-table_baseline">
                                            <td class="cs-width_6 cs-primary_color"> Here we can write a additional notes for
                                                the client to get a better understanding of this invoice.

                                            </td>
                                            <td class="cs-width_3 cs-text_right">
                                                <p class="cs-mb5 cs-mb5 cs-f15 cs-primary_color cs-semi_bold">Sub Total:</p>
                                                @if (!empty($invoice->order->discount) && $invoice->order->discount > 0)
                                                <p class="cs-primary_color cs-bold cs-f16 cs-mb5 ">Discount:</p>
                                                @endif
                                                @if ($invoice->order->vat_tax_amount != null && $invoice->order->vat_tax_amount != 0)
                                                    <p class="cs-primary_color cs-bold cs-f16 cs-mb5 ">VAT({{ $invoice->order->vat_tax_percentage }}%):</p>
                                                @endif
                                                @if (!empty($invoice->order->shipping_charges))
                                                    <p class="cs-primary_color cs-bold cs-f16 cs-mb5 ">Shipping:</p>
                                                @endif
                                                <p class="cs-border border-none"></p>
                                                <p class="cs-primary_color cs-bold cs-f16 cs-mb5 ">Total: £{{ $invoice->order->grand_total }}</p>
                                            </td>
                                            <td class="cs-width_3 cs-text_rightcs-f16">
                                                <p class="cs-mb5 cs-mb5 cs-text_right cs-f15 cs-primary_color cs-semi_bold">
                                                    £{{ $invoice->order->total_amount }}
                                                </p>
                                                @if (!empty($invoice->order->discount) && $invoice->order->discount > 0)
                                                    <p class="cs-primary_color cs-bold cs-f16 cs-mb5 cs-text_right">
                                                        -£{{ $invoice->order->discount }}
                                                    </p>
                                                @endif
                                                @if ($invoice->order->vat_tax_amount != null && $invoice->order->vat_tax_amount != 0)
                                                <p class="cs-primary_color cs-bold cs-f16 cs-mb5 cs-text_right">
                                                    +£{{ $invoice->order->vat_tax_amount }}
                                                </p>
                                                @endif
                                                @if (!empty($invoice->order->shipping_charges))
                                                    <p class="cs-primary_color cs-bold cs-f16 cs-mb5 cs-text_right">
                                                        +£{{ $invoice->order->shipping_charges }}
                                                    </p>
                                                @endif
                                                <p class="cs-border"></p>
                                                <p class="cs-primary_color cs-bold cs-f16 cs-mb5 cs-text_right">£{{ $invoice->order->grand_total }}</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="cs-invoice_btns 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 == '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 mx-1"><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 mx-1"><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')
                                    <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="download_btn" class="cs-invoice_btn cs-color2" style="display: none">
                            <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>
            <!--end card-->
        </div>
        <!--end col-->
    </div> --}}
        <!--end row-->

        <div class="row">
            <div class="col-xl-12 col-12 mb-5">
                <div class="cs-container" id="EA_Distribution_Invoice">
                    <div class="cs-invoice cs-style1" id="download_sec">
                        <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;">Invoice</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">
                                                                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>
                                                        @foreach ($invoice->order->orderDetails as $orderDetail)
                                                            <tr>
                                                                <td>{{ $orderDetail->product->brand->name }} -
                                                                    {{ $orderDetail->product->sku }}</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;">
                                                    <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;">
                                                    <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->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 == '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 mx-1"><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 mx-1"><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')
                                        <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>

        <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">
                            @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;">
                        </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 -->

    <!-- 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>

    <style>
        @media print {

            body * {
                visibility: hidden;
            }

            #EA_Distribution_Invoice * {
                visibility: visible;
            }

            #EA_Distribution_Invoice {
                position: absolute;
                left: 0;
                top: 0;
            }

        }
    </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/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");

        const originalColor = invoiceElement.style.color;

        invoiceElement.style.color = "#000000";
        if (hideElement) hideElement.style.display = "none";

        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");

            invoiceElement.style.color = originalColor;
            if (hideElement) hideElement.style.display = "block";
        });
    });
</script>

{{-- <script>
        document
            .getElementById("downloadInvoice")
            .addEventListener("click", function() {
                const {
                    jsPDF
                } = window.jspdf;
                const doc = new jsPDF();

                let invoiceContent = document.getElementById("EA_Distribution_Invoice").innerText; // Get invoice text
                doc.text(invoiceContent, 10, 10);

                doc.save("invoice.pdf");
            });
    </script> --}}
    <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;
            });
        });

        // function when listen crt + p
    </script>
@endsection