@extends('dashboard.layouts.master')
@section('content')
    <div class="geex-content">
        <div class="geex-content__header">
            <div class="geex-content__header__content">
                <h2 class="geex-content__header__title">Invoice</h2>
                <p class="geex-content__header__subtitle">Welcome to Geex Modern Admin Dashboard</p>
            </div>

            @include('dashboard.layouts.include.actions')

        </div>


        <table style="width:1160px;margin:0 auto;">
            <tbody>

                <tr>
                    <td>
                        <table style="width: 100%;">
                            <tbody>
                                <tr>
                                    <td><img class="logo-lite" src="{{ asset('dashboard/assets/img/logo-dark.svg') }}" alt="logo" />
                                        <address
                                            style="color: #52526C;opacity: 0.8; width: 40%; margin-top: 10px; font-style:normal;">
                                            <span style="font-size: 18px; line-height: 1.5; font-weight: 500;">
                                                1982 Harvest Lane New York, NY12210
                                                United State</span>
                                        </address>
                                    </td>
                                    <td style="color: #52526C;opacity: 0.8; text-align:end;"><span
                                            style="display:block; line-height: 1.5; font-size:18px; font-weight:500;">Email
                                            : cuba@themesforest.com</span><span
                                            style="display:block; line-height: 1.5; font-size:18px; font-weight:500;">Website:
                                            www.cubathemes.com</span><span
                                            style="display:block; line-height: 1.5; font-size:18px; font-weight:500;">Contact
                                            No : (316) 555-0116</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table style="width:100%;">
                            <tbody>
                                <tr
                                    style="display:flex;justify-content:space-between;border-top: 1px solid rgba(82, 82, 108, 0.3);border-bottom: 1px solid rgba(82, 82, 108, 0.3);padding: 25px 0;">
                                    <td style="display:flex;align-items:center; gap: 6px;"> <span
                                            style="color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 500;">Invoice
                                            No.</span>
                                        <h4 style="margin:0;font-weight:400; font-size: 18px;">#VL25000365</h4>
                                    </td>
                                    <td style="display:flex;align-items:center; gap: 6px;"> <span
                                            style="color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 500;">Date
                                            : </span>
                                        <h4 style="margin:0;font-weight:400; font-size: 18px;">09/03/2024</h4>
                                    </td>
                                    <td style="display:flex;align-items:center; gap: 6px;"> <span
                                            style="color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 500;">Payment
                                            Status :</span>
                                        <h4
                                            style="margin:0;font-weight:400; font-size: 18px;padding:6px 18px; background-color:rgba(84, 186, 74, 0.1);color:#54BA4A; border-radius: 5px;">
                                            Paid</h4>
                                    </td>
                                    <td style="display:flex;align-items:center; gap: 6px;"> <span
                                            style="color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 500;">Total
                                            Amount :</span>
                                        <h4 style="margin:0;font-weight:500; font-size: 18px;">$26,410.00</h4>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table style="width: 100%;">
                            <tbody>
                                <tr style="padding: 28px 0; display:block;">
                                    <td Style="width:63%;"><span
                                            style="color: #52526C;opacity: 0.8; font-size: 16px; font-weight: 500;">BILLING
                                            ADDRESS</span>
                                        <h4 style="font-weight:400; margin: 12px 0 6px 0; font-size: 18px;">Brooklyn
                                            Simmons</h4><span
                                            style="width: 54%; display:block; line-height: 1.5; color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 400;">2118
                                            Thornridge Cir. Syracuse, Connecticut 35624, United State</span><span
                                            style="line-height:2.6; color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 400;">Phone
                                            : (239) 555-0108</span>
                                    </td>
                                    <td><span
                                            style="color: #52526C;opacity: 0.8;font-size: 16px; font-weight: 500;">SHIPPING
                                            ADDRESS</span>
                                        <h4 style="font-weight:400; margin: 12px 0 6px 0; font-size: 18px;">Cameron
                                            Williamson</h4><span
                                            style="width: 95%; display:block; line-height: 1.5; color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 400;">2972
                                            Westheimer Rd. Santa Ana, Illinois 85486 </span><span
                                            style="line-height:2.6; color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 400;">Phone
                                            : (219) 555-0114 </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table
                            style="width: 100%;border-collapse: separate;border-spacing: 0;border: 1px solid rgba(82, 82, 108, 0.1)">
                            <thead>
                                <tr
                                    style="background: #AB54DB;border-radius: 8px;overflow: hidden;box-shadow: 0px 10.9412px 10.9412px rgba(82, 77, 141, 0.04), 0px 9.51387px 7.6111px rgba(82, 77, 141, 0.06), 0px 5.05275px 4.0422px rgba(82, 77, 141, 0.0484671);border-radius: 5.47059px;">
                                    <th style="padding: 18px 15px;text-align: left"><span
                                            style="color: #fff; font-size: 18px;">Products</span></th>
                                    <th style="padding: 18px 15px;text-align: left"><span
                                            style="color: #fff; font-size: 18px;">Quantity</span></th>
                                    <th style="padding: 18px 15px;text-align: left"><span
                                            style="color: #fff; font-size: 18px;">Price</span></th>
                                    <th style="padding: 18px 15px;text-align: left"><span
                                            style="color: #fff; font-size: 18px;">Unit</span></th>
                                    <th style="padding: 18px 15px;text-align: left"><span
                                            style="color: #fff; font-size: 18px;">Vat %</span></th>
                                    <th style="padding: 18px 15px;text-align: left"><span
                                            style="color: #fff; font-size: 18px;">Total</span></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr
                                    style="background-color: rgba(245, 246, 249, 1);box-shadow: 0px 1px 0px 0px rgba(82, 82, 108, 0.15);">
                                    <td style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;">
                                        <ul style="padding: 0;margin: 0;list-style: none;">
                                            <li>
                                                <h4 style="font-weight:400; margin:4px 0px; font-size: 18px;">Apple
                                                    Desktop</h4><span
                                                    style="color: #52526C;opacity: 0.8; font-size: 14px;">#XDG-6437</span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td style="padding: 18px 15px;"><span style="font-size: 18px;">2</span></td>
                                    <td style="padding: 18px 15px; width: 12%;"> <span
                                            style="font-size: 18px;">$100</span></td>
                                    <td style="padding: 18px 15px; width: 12%;"> <span
                                            style="font-size: 18px;">Hour(s)</span></td>
                                    <td style="padding: 18px 15px; width: 10%;"> <span style="font-size: 18px;">0</span>
                                    </td>
                                    <td style="padding: 18px 15px;"><span style="font-size: 18px;">$200</span></td>
                                </tr>

                                <tr style="box-shadow: 0px 1px 0px 0px rgba(82, 82, 108, 0.15);">
                                    <td style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;">
                                        <div>
                                            <h4 style="font-weight:400; margin:4px 0px; font-size: 18px;">Smart Watch
                                            </h4><span
                                                style="color: #52526C;opacity: 0.8; font-size: 14px;">#XDG-6437</span>
                                        </div>
                                    </td>
                                    <td style="padding: 18px 15px;"><span style="font-size: 18px;">1</span></td>
                                    <td style="padding: 18px 15px; width: 12%;"> <span
                                            style="font-size: 18px;">$200</span></td>
                                    <td style="padding: 18px 15px; width: 12%;"> <span
                                            style="font-size: 18px;">Hour(s)</span></td>
                                    <td style="padding: 18px 15px; width: 10%;"> <span style="font-size: 18px;">0</span>
                                    </td>
                                    <td style="padding: 18px 15px;"><span style="font-size: 18px;">$200</span></td>
                                </tr>

                                <tr
                                    style="background-color: rgba(245, 246, 249, 1);box-shadow: 0px 1px 0px 0px rgba(82, 82, 108, 0.15);">
                                    <td style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;">
                                        <div>
                                            <h4 style="font-weight:400; margin:4px 0px; font-size: 18px;">Apple iphone
                                                13 Pro</h4><span
                                                style="color: #52526C;opacity: 0.8; font-size: 14px;">#XDG-6437</span>
                                        </div>
                                    </td>
                                    <td style="padding: 18px 15px;"><span style="font-size: 18px;">1</span></td>
                                    <td style="padding: 18px 15px; width: 12%;"> <span
                                            style="font-size: 18px;">$10,000</span></td>
                                    <td style="padding: 18px 15px; width: 12%;"> <span
                                            style="font-size: 18px;">Hour(s)</span></td>
                                    <td style="padding: 18px 15px; width: 10%;"> <span style="font-size: 18px;">0</span>
                                    </td>
                                    <td style="padding: 18px 15px;"><span style="font-size: 18px;">$10,000</span></td>
                                </tr>

                                <tr>
                                    <td style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;">
                                        <div>
                                            <h4 style="font-weight:400; margin:4px 0px; font-size: 18px;">Wireless
                                                Headphone</h4><span
                                                style="color: #52526C;opacity: 0.8; font-size: 14px;">#XDG-6437</span>
                                        </div>
                                    </td>
                                    <td style="padding: 18px 15px;"><span style="font-size: 18px;">2</span></td>
                                    <td style="padding: 18px 15px; width: 12%;"> <span
                                            style="font-size: 18px;">$8,000</span></td>
                                    <td style="padding: 18px 15px; width: 12%;"> <span
                                            style="font-size: 18px;">Hour(s)</span></td>
                                    <td style="padding: 18px 15px; width: 10%;"> <span
                                            style="font-size: 18px;">0</span>
                                    </td>
                                    <td style="padding: 18px 15px;"><span style="font-size: 18px;">$16,000</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table style="float: right;">
                            <tfoot>
                                <tr>
                                    <td style="padding: 5px 24px 5px 0; padding-top: 15px; text-align: end;"> <span
                                            style="color: #52526C; font-size: 18px; font-weight: 400;">Subtotal
                                        </span><span style="margin-left: 8px; font-size: 18px;">:</span></td>
                                    <td style="padding: 5px 0;text-align: left;padding-top: 15px;"><span
                                            style="font-size: 18px;">$26,400.00</span></td>
                                </tr>

                                <tr>
                                    <td style="padding: 5px 24px 5px 0; text-align: end;"> <span
                                            style="color: #52526C; font-size: 18px; font-weight: 400;">VAT (0%)
                                        </span><span style="margin-left: 8px; font-size: 18px;">:</span></td>
                                    <td style="padding: 5px 0;text-align: left;padding-top: 0;"><span
                                            style="font-size: 18px;">$0.00</span></td>
                                </tr>

                                <tr>
                                    <td style="padding: 5px 24px 5px 0; text-align: end;"> <span
                                            style="color: #52526C; font-size: 18px; font-weight: 400;">Shipping
                                            Rate</span><span style="margin-left: 8px; font-size: 18px;">:</span></td>
                                    <td style="padding: 5px 0;text-align: left;padding-top: 0;"><span
                                            style="font-size: 18px;">$10.00</span></td>
                                </tr>

                                <tr>
                                    <td style="padding: 12px 24px 22px 0;"> <span
                                            style="font-weight: 600; font-size: 20px; color: rgba(0, 2, 72, 1);">Total
                                            Amount</span><span style="margin-left: 8px;">:</span></td>
                                    <td style="padding: 12px 24px 22px 0;;text-align: right"><span
                                            style="font-weight: 500; font-size: 20px; color: #AB54DB;">$26,410.00</span>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td> <span
                            style="display:block;background: rgba(82, 82, 108, 0.3);height: 1px;width: 100%;margin-bottom:24px;"></span>
                    </td>
                </tr>

                <tr>
                    <td>
                        <div class="geex-content__form__single d-flex gap-10 justify-content-end">
                            <button class="geex-btn geex-btn--primary-transparent"> Print Invoice</button>
                            <button class="geex-btn geex-btn--dark-transparent"> Download</button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    @endsection