@extends('admin.layouts.master')
@section('title', 'FA Invoices')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/frontend/assets/css/invoice.css') }}">
@endsection
@section('content')
    <section class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-lg-12">
                    <div class="mt-2 card card-primary card-outline">
                        <!-- /.card-header -->
                        <div class="card-body py-2 px-3">
                            <div class="col-lg-12">
                                {{-- <form action="{{ route('admin.report.generateInvoice') }}" method="GET"> --}}
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <label for="dateRange" class="form-label">Select Date Range</label>
                                            <div class="input-group">
                                                <button type="button" id="daterange-btn" class="btn btn-sm form-control"
                                                    style="border: solid rgb(145, 145, 145) 1px;">
                                                    <i class="far fa-calendar-alt"></i>
                                                    <span>
                                                        {{-- @if (request('start_date') && request('end_date'))
                                                        {{ request('start_date') }} - {{ request('end_date') }}
                                                        @else
                                                        Select Date Range
                                                        @endif --}}
                                                        Select Date Range
                                                    </span>
                                                    <i class="fas fa-caret-down"></i>
                                                </button>
                                            </div>

                                        </div>
                                        <div class="col-lg-3 align-self-end">
                                            <button type="submit" class="btn btn-primary btn-sm" id="generateBtn">
                                                <i class="bi bi-hammer"></i> Generate
                                            </button>
                                        </div>
                                    </div>
                                    {{--
                                </form> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="loader text-center d-none" id="loader">
                <div class="spinner-border" role="status">
                    <span class="visually-hidden"></span>
                </div>
            </div>
            <div class="row" id="invoice">
                <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('uploads/company/fa-logo.png') }}" 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>EA Perfumes</b>
                                        </p>
                                        <p class="p-0 m-0">
                                            <b>Unit 4A 395 George Road Birmingham, UK, B23 7RY</b>
                                        </p>
                                        <p class="p-0 m-0">
                                            <b>City -
                                                Post Code</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;">
                                            {{ today()->format('d M, Y') }}
                                        </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;">
                                            350
                                        </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;">
                                            270201159</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>French Arabian Perfumes</b><br />
                                            104 Stoney Lane Balsall Heath <br> B12 8AF Birmingham, England B12 8AF
                                        </p>
                                        <p style="margin: 0; font-size: 0.9em; line-height: 1.1;">Tel:
                                            01213148116
                                        <p style="margin: 0; font-size: 0.9em; line-height: 1.1;">
                                            www.frencharabianperfume.com</p>
                                    </div>


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

                                        <div class="cs-table cs-f12">
                                            <div class="">
                                                <div class="cs-table_responsive">
                                                    <table id="productTable">
                                                        <thead>
                                                            <tr 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 text-center">
                                                                    Unit Price</th>
                                                                <th
                                                                    class="cs-width_1 cs-semi_bold cs-primary_color text-center">
                                                                    Total Price</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>

                                                        </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>
                                                        <p class="cs-primary_color cs-f16"
                                                            style="margin: 0; font-weight: bolder;">Discount:</p>
                                                        {{-- <p class="cs-primary_color cs-f16"
                                                            style="margin: 0; font-weight: bolder;">Shipping:</p> --}}
                                                        <p class="cs-primary_color cs-f16"
                                                            style="margin: 0; font-weight: bolder;">VAT
                                                            (<span id="vat_percentage"></span>%):</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;">
                                                            £ <span id="sub_total"></span>
                                                        </p>
                                                        <p class="cs-primary_color cs-f16 cs-text_right"
                                                            style="margin: 0; font-weight: bolder;">
                                                            -£ <span id="discount"></span>
                                                        </p>
                                                        {{-- <p class="cs-primary_color cs-f16 cs-text_right"
                                                            style="margin: 0; font-weight: bolder;">
                                                            +£ <span id="shipping_charges"></span>
                                                        </p> --}}
                                                        <p class="cs-primary_color cs-f16 cs-text_right"
                                                            style="margin: 0; font-weight: bolder;">
                                                            +£ <span id="vat_amount"></span>
                                                        </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;">
                                                            £ <span id="grandTotal"></span>
                                                        </p>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-sm-12">
                                        <b style="margin: 0; display: block;">Due Date:
                                            {{ today()->format('d M, Y') }}</b>
                                        <p style="margin: 0;">Bank Detail</p>
                                        <p style="margin: 0;">Bank: HSBC Account Number: 60204552 Sort Code: 40-11-55</p>
                                        <p style="margin: 0;"><b>French Arabian Perfumes limited</b></p>
                                    </div>
                                    <div class="col-sm-12 mt-1">
                                        Company Registration No: 10199636. <br> Registered Office:
                                        Birmingham.
                                    </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>
                                        <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>

    </section>
@endsection
@section('js')
    @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,
                    useCORS: true, // Enable CORS for external images, if any
                    windowWidth: invoiceElement.scrollWidth, // Ensure full width is captured
                    windowHeight: invoiceElement.scrollHeight // Ensure full height is captured
                }).then((canvas) => {
                    const imgData = canvas.toDataURL("image/png");
                    const pdf = new jsPDF("p", "mm", "a4");
                    const pageWidth = 210; // A4 width in mm
                    const pageHeight = 297; // A4 height in mm
                    const margin = 10;
                    const imgWidth = pageWidth - 2 * margin;
                    const imgHeight = (canvas.height * imgWidth) / canvas.width;

                    let heightLeft = imgHeight;
                    let position = 0;

                    // Add first page
                    pdf.addImage(imgData, "PNG", margin, margin, imgWidth, imgHeight);
                    heightLeft -= (pageHeight - 2 * margin);

                    // Add additional pages if content exceeds one page
                    while (heightLeft > 0) {
                        position = heightLeft - imgHeight;
                        pdf.addPage();
                        pdf.addImage(imgData, "PNG", margin, position + margin, imgWidth, imgHeight);
                        heightLeft -= (pageHeight - 2 * margin);
                    }

                    pdf.save("invoice.pdf");

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



    <script>
        $(document).ready(function () {
            let startDate = $('#start_date');
            let endDate = $('#end_date');
            let loader = $('#loader');
            let invoiceTemp = $('#invoice');
            let grandTotal = $('#grandTotal');
            let subTotal = $('#sub_total');
            let vatPer = $('#vat_percentage');
            let vatAmount = $('#vat_amount');
            let discount = $('#discount');
            let shippingCharges = $('#shipping_charges');
            $('#generateBtn').click(function () {
                loader.toggleClass('d-none');
                invoiceTemp.toggleClass('d-none');
                grandTotal.empty();
                subTotal.empty();
                vatPer.empty();
                vatAmount.empty();
                discount.empty();
                shippingCharges.empty();
                if (startDate && endDate) {
                    $.ajax({
                        url: "/admin/reports/generate-invoice",
                        method: "GET",
                        data: {
                            _token: "{{ csrf_token() }}",
                            start_date: startDate.val(),
                            end_date: endDate.val()
                        },
                        success: function (response) {
                            loader.toggleClass('d-none');
                            invoiceTemp.toggleClass('d-none');
                            // subTotal.append(response.totals.subtotal);
                            vatPer.append("20");
                            discount.append(response.totals.total_discount);
                            // shippingCharges.append(response.totals.total_shipping_charges);
                            $('#productTable tbody').empty();

                            let grantotalAmount = 0;
                            let totalVatAmount = 0;
                            response.mergedProducts.forEach(function (product) {
                                grantotalAmount += parseFloat(product.quantity).toFixed(
                                    2) * parseFloat(product.unit_price).toFixed(2);
                                $('#productTable tbody').append(`
                            <tr>
                                <td>${product.description}</td>
                                <td class="text-center">${product.quantity}</td>
                                <td class="text-center">${product.unit_price}</td>
                                <td class="text-center">${parseFloat(product.quantity * product.unit_price).toFixed(2)}</td>
                            </tr>
                        `);
                            });
                            totalVatAmount = grantotalAmount * 20 / 100;
                            vatAmount.append(totalVatAmount.toFixed(2));
                            subTotal.append(grantotalAmount.toFixed(2));
                            grandTotal.append((grantotalAmount + totalVatAmount).toFixed(2));
                            MyToast.fire({
                                icon: response.alert,
                                title: response.message,
                            });
                        },
                        error: function (xhr) {
                            loader.toggleClass('d-none');
                            let errorMessage = "Something went wrong.";
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON.message;
                            }
                            Swal.fire({
                                title: "Error",
                                text: errorMessage,
                                icon: "error"
                            });
                        }
                    });
                }
            });
        });
    </script>
@endsection