@extends('admin.layouts.master')

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

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">

                    <div class="page-title-right">
                        <a href="{{ route('admin.order.index') }}" class="btn btn-info btn-sm">Orders List</a>
                        <a href="{{ route('admin.order.edit', $order->id) }}" class="btn btn-primary btn-sm">Edit</a>
                        <a href="{{ route('admin.order.delete', $order->id) }}" class="btn btn-danger btn-sm">Delete</a>
                        <a href="{{ route('admin.order.details', $order->id) }}" class="btn btn-primary btn-sm">Detail</a>
                        @if ($order->invoices->count() > 0)
                            <a href="{{ route('admin.order.invoice.create', ['order_id' => $order->id]) }}"
                                class="btn btn-success btn-sm">Edit Invoice</a>
                        @else
                            <a href="{{ route('admin.order.invoice.create', ['order_id' => $order->id]) }}"
                                class="btn btn-success btn-sm">Create Invoice</a>
                        @endif
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->
        <div class="row">
            <div class="col-lg-12">
                <x-alert />
            </div>
        </div>
        @if ($invoice && $invoice->company_id != null)
            <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->due_date)) }}</b>
                                        <p style="margin: 0;">{{ $invoice->company->bank_detail }}</p>
                                        <p style="margin: 0;"><b>{{ $invoice->company->name }}</b></p>
                                    </div>
                                    <div class="col-sm-12 mt-1">
                                        Company Registration No: {{ $invoice->company->reg_no }}. <br> Registered Office:
                                        {{ $invoice->company->office_location }}.
                                    </div>
                                    <div class="cs-invoice_btns cs-hide_print mt-2" id="cs-hide_print">
                                        <a href="javascript:window.print()" class="cs-invoice_btn cs-color1">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="ionicon"
                                                viewBox="0 0 512 512">
                                                <path
                                                    d="M384 368h24a40.12 40.12 0 0040-40V168a40.12 40.12 0 00-40-40H104a40.12 40.12 0 00-40 40v160a40.12 40.12 0 0040 40h24"
                                                    fill="none" stroke="currentColor" stroke-linejoin="round"
                                                    stroke-width="32" />
                                                <rect x="128" y="240" width="256" height="208" rx="24.32"
                                                    ry="24.32" fill="none" stroke="currentColor"
                                                    stroke-linejoin="round" stroke-width="32" />
                                                <path d="M384 128v-24a40.12 40.12 0 00-40-40H168a40.12 40.12 0 00-40 40v24"
                                                    fill="none" stroke="currentColor" stroke-linejoin="round"
                                                    stroke-width="32" />
                                                <circle cx="392" cy="184" r="24" />
                                            </svg>
                                            <span>Print</span>
                                        </a>

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

                <div class="card">
                    <form id="invoice_form" method="POST"
                        action="{{ route('admin.order.invoice.store', ['order_id' => $order->id]) }}">
                        @csrf
                        <div class="card-body border-bottom border-bottom-dashed p-4">
                            <div class="d-flex justify-content-between row">
                                <div class="col-lg-4">
                                    <label for="choices-payment-status">Company</label>
                                    <div class="input-light">
                                        <select class="form-control bg-light border-0" name="company_id" data-choices
                                            id="choices-payment-status">
                                            <option value="">Select Company</option>
                                            @php
                                                $selected = old('company_id') ?? ($invoice ? $invoice->company_id : '');
                                            @endphp
                                            @foreach ($companies as $company)
                                                <option value="{{ $company->id }}"
                                                    @if ($selected == $company->id) selected @endif>
                                                    {{ ucwords($company->name) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('company_id')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-5">
                                    @if ($invoice && $invoice->status == 'rejected')
                                        <span
                                            class="badge bg-danger-subtle text-danger fs-11 ">{{ ucwords($invoice->status) }}</span>
                                        <p>
                                            Reason for rejection: <span class="fw-semibold">{{ $invoice->reason }}</span>
                                        </p>
                                    @endif
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-3">
                                <div class="col-lg-3 col-sm-6">
                                    <label for="invoicenoInput">Invoice No</label>
                                    <input type="text" name="invoice_no" class="form-control bg-light border-0"
                                        id="invoicenoInput" placeholder="Invoice No"
                                        value="{{ $invoice ? $invoice->invoice_no : $invoice_number }}"
                                        readonly="readonly" />
                                </div>
                                <!--end col-->
                                <div class="col-lg-3 col-sm-6">
                                    <div>
                                        <label for="date-field">Date</label>
                                        <input type="text" class="form-control bg-light border-0"
                                            value="{{ $invoice ? $invoice->date : date('Y-m-d H:i:s') }}" id="date-field"
                                            data-provider="flatpickr" data-time="true" placeholder="Select Date-time"
                                            readonly disabled>
                                    </div>
                                    @error('date')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-3 col-sm-6">
                                    <div>
                                        <label for="date-field">Due Date</label>
                                        <input type="text" class="form-control" name="date"
                                            value="{{ $invoice ? $invoice->due_date : date('Y-m-d H:i:s') }}" id="date-field"
                                            data-provider="flatpickr" data-time="true" placeholder="Select Date-time"
                                            required>
                                    </div>
                                    @error('date')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-3 col-sm-6">
                                    <div>
                                        <label for="totalamountInput">Total Amount</label>
                                        <input type="text" class="form-control bg-light border-0"
                                            id="totalamountInput" value="{{ $order->grand_total }}" placeholder="$0.00"
                                            readonly />
                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-6">
                                    <div>
                                        <label for="totalamountInput">Invoice Name</label>
                                        <input required name="invoice_name" type="text" class="form-control"
                                            id="totalamountInput" value="{{ $invoice->invoice_name ?? $order->ba_first_name . $order->ba_last_name }}" 
                                            />
                                    </div>
                                    @error('invoice_name')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-4 col-sm-6">
                                    <div>
                                        <label for="totalamountInput">City</label>
                                        <input required name="city" type="text" class="form-control"
                                            id="totalamountInput" value="{{ $invoice->city ?? $order->ba_city }}" 
                                            />
                                    </div>
                                    @error('city')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-4 col-sm-6">
                                    <div>
                                        <label for="totalamountInput">Post Code</label>
                                        <input required name="post_code" type="text" class="form-control"
                                            id="totalamountInput" value="{{ $invoice->post_code ?? $order->ba_post_code }}" 
                                            />
                                    </div>
                                    @error('post_code')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-6 col-sm-6">
                                    <div>
                                        <label for="totalamountInput">Address Line 1</label>
                                        <input required name="address_line_1" type="text" class="form-control"
                                            id="totalamountInput" value="{{ $invoice->address_line_1 ?? $order->ba_line_1 }}" 
                                            />
                                    </div>
                                    @error('address_line_1')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-6 col-sm-6">
                                    <div>
                                        <label for="totalamountInput">Address Line 2</label>
                                        <input required name="address_line_2" type="text" class="form-control"
                                            id="totalamountInput" value="{{ $invoice->address_line_2 ?? $order->ba_line_2 }}" 
                                            />
                                    </div>
                                    @error('address_line_1')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </div>
                        @if ($order->pickupAddress)
                        <div class="card-body p-4 border-top border-top-dashed">
                            <div class="row">

                                    @php
                                        $pickup_address = $order->pickupAddress;
                                    @endphp
                                    <div class="col-sm-6 ms-auto">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div>
                                                    <label for="shippingName"
                                                        class="text-muted text-uppercase fw-semibold">Pickup
                                                        Address</label>
                                                </div>
                                                <div class="mb-2">
                                                    <input type="text" class="form-control bg-light border-0"
                                                        id="shippingFirstName" placeholder="Name"
                                                        value="{{ $pickup_address->name }}" required readonly />
                                                    <div class="invalid-feedback">
                                                        Please enter a first name
                                                    </div>
                                                </div>

                                                <div class="mb-2">
                                                    <textarea class="form-control bg-light border-0" id="shippingAddressLine1" rows="3" placeholder="Note"
                                                        required readonly>{{ $pickup_address->note }}</textarea>
                                                    <div class="invalid-feedback">
                                                        Please enter an address line 1
                                                    </div>
                                                </div>

                                                <div class="mb-2">
                                                    <input type="text" class="form-control bg-light border-0"
                                                        data-plugin="cleave-phone" id="shippingPhone"
                                                        value="{{ $pickup_address->phone }}" placeholder="(123)456-7890"
                                                        required readonly />

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                        @endif
                        <!--end col-->
                </div>
                <!--end row-->
            </div>
            <div class="col-xl-p">

                <div class="card">
                    <div class="card-body p-4">
                        {{-- <div class="table-responsive">
                        <table class="invoice-table table table-borderless table-nowrap mb-0">
                            <thead class="align-middle">
                                <tr class="table-active">
                                    <th scope="col" style="width: 50px;">#</th>
                                    <th scope="col">
                                        Product Details
                                    </th>
                                    <th scope="col" style="width: 120px;">
                                        <div class="d-flex currency-select input-light align-items-center">
                                            Rate
                                            <select class="form-select border-0 bg-light" data-choices
                                                data-choices-search-false id="choices-payment-currency"
                                                onchange="otherPayment()">
                                                <option value="$">($)</option>
                                                <option value="£">(£)</option>
                                                <option value="₹">(₹)</option>
                                                <option value="€">(€)</option>
                                            </select>
                                        </div>
                                    </th>
                                    <th scope="col" style="width: 120px;">Quantity</th>
                                    <th scope="col" class="text-end" style="width: 150px;">Amount</th>
                                    <th scope="col" class="text-end" style="width: 105px;"></th>
                                </tr>
                            </thead>
                            <tbody id="newlink">
                                @foreach ($order->orderDetails as $index => $orderDetail)
                                    <tr class="product">
                                        <th scope="row" class="product-id">{{ $index + 1 }}</th>
                                        <td class="text-start">
                                            <div class="mb-2">
                                                <input type="text" class="form-control bg-light border-0"
                                                    id="productName-{{ $index + 1 }}" placeholder="Product Name"
                                                    value="{{ $orderDetail->product->name }}" required readonly />
                                                <div class="invalid-feedback">
                                                    Please enter a product name
                                                </div>
                                            </div>
                                            <div class="mb-2">
                                                <input type="text" class="form-control bg-light border-0"
                                                    id="productSpecification-{{ $index + 1 }}"
                                                    placeholder="Product Specification"
                                                    value="{{ $orderDetail->product->specification }}" required readonly />
                                                <div class="invalid-feedback">
                                                    Please enter a product specification
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <input type="number" class="form-control product-price bg-light border-0"
                                                id="productRate-{{ $index + 1 }}" step="0.01" placeholder="0.00"
                                                value="{{ $orderDetail->price }}" required readonly />
                                            <div class="invalid-feedback">
                                                Please enter a rate
                                            </div>
                                        </td>
                                        <td>
                                            <input type="number" class="form-control product-quantity bg-light border-0"
                                                id="productQuantity-{{ $index + 1 }}" placeholder="0.00"
                                                value="{{ $orderDetail->quantity }}" required readonly />
                                            <div class="invalid-feedback">
                                                Please enter a quantity
                                            </div>
                                        </td>
                                        <td class="text-end">
                                            <div>
                                                <input type="text"
                                                    class="form-control bg-light border-0 product-line-price"
                                                    id="productPrice-{{ $index + 1 }}" placeholder="$0.00"
                                                    value="{{ $orderDetail->total_amount }}" readonly />
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <!-- Add New Form Row -->
                            <tbody>
                                <tr id="newForm" style="display: none;">
                                    <td class="d-none" colspan="5">
                                        <p>Add New Form</p>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot class="border-top border-top-dashed mt-2">
                                <td colspan="3"></td>
                                <td colspan="2" class="p-0">
                                    <!-- Subtotal and other calculation rows -->
                                    <table class="table table-borderless table-sm table-nowrap align-middle mb-0">
                                        <tbody>
                                            <tr>
                                                <th scope="row">Sub Total</th>
                                                <td style="width:150px;">
                                                    <input type="text" class="form-control bg-light border-0"
                                                        id="cart-subtotal" placeholder="$0.00" readonly
                                                        value="{{ $order->total_amount }}" readonly />
                                                </td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Discount <span></span></th>
                                                <td>
                                                    <input type="text" name="discount"
                                                        class="form-control bg-light border-0" id="cart-discount"
                                                        value="{{ $order->discount }}" />
                                                </td>
                                            </tr>
    
                                            @if ($order->vat_tax_amount != null && $order->vat_tax_amount > 0)
                                                <tr>
                                                    <th scope="row">Vat Tax ({{ $order->vat_tax_percentage }}%)</th>
                                                    <td>
                                                        <input type="text" name="vat_tax_amount"
                                                            class="form-control bg-light border-0" readonly id="cart-vat-tax"
                                                            value="{{ $order->vat_tax_amount }}" />
                                                    </td>
                                                </tr>
                                            @endif
    
                                            <tr>
                                                <th scope="row">Shipping Charge</th>
                                                <td>
                                                    <input type="text" name="shipping_charges"
                                                        class="form-control bg-light border-0" id="cart-shipping"
                                                        value="{{ $order->shipping_charges ?? 0 }}" />
                                                </td>
                                            </tr>
                                            <tr class="border-top border-top-dashed">
                                                <th scope="row">Total Amount</th>
                                                <td>
                                                    <input type="text" name="grand_total"
                                                        class="form-control bg-light border-0" id="cart-total"
                                                        value="{{ $order->grand_total }}" readonly />
                                                </td>
                                            </tr>
                                            <!-- Other calculation rows (e.g., Tax, Discount, Shipping Charges) -->
                                            <!-- You can add these calculations based on your actual logic -->
                                        </tbody>
                                    </table>
                                </td>
                            </tfoot>
                        </table>
                        <!-- End of table -->
                    </div> --}}


                        {{-- @if ($invoice)
                        <div class="row">

                            <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>
                        @endif --}}
                        <div class="mt-4">
                            <label for="exampleFormControlTextarea1"
                                class="form-label text-muted text-uppercase fw-semibold">NOTES</label>
                            <textarea class="form-control alert alert-info" id="exampleFormControlTextarea1" placeholder="Notes" rows="2"
                                name="notes">{{ optional($invoice)->notes }}</textarea>
                        </div>
                        <!-- Action buttons -->
                        <div class="hstack gap-2 justify-content-end d-print-none mt-4">
                            @if (!$invoice || $invoice->status != 'real')
                                <button type="submit" class="btn btn-success"><i
                                        class="ri-printer-line align-bottom me-1"></i>
                                    Save</button>
                            @endif
                            @if ($invoice && $invoice->status == 'draft')
                                <a href="{{ route('admin.order.invoice.send', ['order_id' => $order->id, 'invoice_id' => $invoice->id]) }}"
                                    onclick="return confirm('Are you sure you want to send this invoice?')"
                                    class="btn btn-danger"><i class="ri-send-plane-2-line align-bottom me-1"></i> Send
                                    Invoice</a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>


            </form>
        </div>

        @if ($invoice)
            <div class="row d-flex justify-content-center" id="chat_section">
                <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 && $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 && $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>
        @endif

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

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


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

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

            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>
    @if ($invoice)
        <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").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('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>
    @endif

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

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

                console.log(totalAmount, discountAmount, shippingAmount);

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

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

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

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


        });
    </script>
@endsection