invoice-details

<div>


    <div class="wrapper d-flex flex-row">
        <div class="content1" style="width: 76%;">

            <table class="styled-table"style="border-collapse: collapse; margin: 0 0 25px 0; font-size: 0.9em; font-family: sans-serif; width: 1215px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);">
                <thead>
                <tr style="background-color: #009879; color: #ffffff;">
                    <th style="padding: 12px 15px; text-align: center; width: 100px;">Invoice</th>
                    <th style="padding: 12px 15px; text-align: center; width: 100px;">Tanggal</th>
                    <th style="padding: 12px 15px; text-align: center; width: 225px;">Nama Pelanggan</th>
                    <th style="padding: 12px 15px; text-align: center; width: 100px;">No HP</th>
                    <th style="padding: 12px 15px; text-align: center; width: 125px;">Subtotal</th>
                    <th style="padding: 12px 15px; text-align: center; width: 125px;">Telah Bayar</th>
                    <th style="padding: 12px 15px; text-align: center; width: 125px;">Sisa Hutang</th>
                    <th style="padding: 12px 15px; text-align: center; width: 100px;">Operator</th>
                    <th style="padding: 12px 15px; text-align: center; width: 100px;">Status</th>
                    <th style="padding: 12px 15px; text-align: center; width: 50px;">Aksi</th>
                </tr>
                </thead>
                <tbody>
                {{-- @forelse ($results as $result) --}}
                <tr style="border-bottom: 1px solid #dddddd;">
                    <td style="padding: 5px 15px; text-align: left;">#</td>
                    <td style="padding: 5px 15px; text-align: left;">#</td>
                    <td style="padding: 5px 15px; text-align: left;">#</td>
                    <td style="padding: 5px 15px; text-align: left;">#</td>
                    <td style="padding: 5px 15px; text-align: right;">#</td>
                    <td style="padding: 5px 15px; text-align: right;">#</td>
                    <td style="padding: 5px 15px; text-align: right;">#</td>
                    <td style="padding: 5px 15px; text-align: right;">#</td>
                    <td style="padding: 5px 15px; text-align: center;">#</td>
                        <td style="padding: 5px 15px;"><button class="btn btn-light" wire:click="details()"><i class="fas fa-file-invoice"></i></button></td>
                    </tr>
                <tr>
                    {{-- @empty --}}
                </tr>
                {{-- @endforelse --}}
                </tbody>
            </table>

        </div>
        <div class="content2" style="width: 24%">
            <div class="card_deck d-flex flex-column" style="width: 385px; height: 325px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);">
                <div class="heading_card_deck">
                    <h2 style="background-color: #009879; color: #ffffff; font-size: 0.9rem; font-family: sans-serif; text-align: center; padding: 12px 15px;"><strong>Detail Orderan</strong></h2>
                </div>

                <div class="header_card_deck d-flex flex-column">
                    <div class="invoice d-flex flex-row">
                        <label id="invoice_name" for="invoice_name" style="margin-bottom: 0; margin-left: 10px; padding: 5px 0 5px 0; width: 50px; font-size: 0.8rem; text-align: left;">Invoice</label>
                        <label for="invoice_quote" style="margin-bottom: 0; margin-left: 10px; padding: 5px 0 5px 0; width: 15px; font-size: 0.8rem; text-align: left;">:</label>
                        {{-- @foreach ($invoices as $val) --}}
                            <label id="invoice" for="invoice" style="margin-bottom: 0; margin-left: 10px; padding: 5px 0 5px 0; width: 200px; font-size: 0.8rem; text-align: left;">$</label>
                            <label id="invoice_date" for="invoice_date" style="margin-bottom: 0; margin-right: 10px; padding: 5px 0 5px 0; width: 75px; font-size: 0.8rem; text-align: right;"><small>$</small></label>
                        {{-- @endforeach --}}
                    </div>
                </div>
                <hr id="boundary-line" style="margin: 15px; height: 5px;">
                <div id="invoice-list-container" style="height: 100%; width: 100%; display: flex; flex-direction: column;">
                    <div class="overflow-auto">
                        {{-- @foreach ($data as $d) --}}

                        <div class="rowlist d-flex flex-row">
                            <div id="product_name" class="product_name" style="width: 50%; font-size: 11px; height: 25px; line-height: 11px; text-align: left; margin-left: 15px; margin-right: 15px;">$</div>
                            <div id="qty" class="qty" style="width: 10%; font-size: 11px; height: 25px; line-height: 11px; text-align: center; margin-left: 15px; margin-right: 15px;">x $</div>
                            <div id="discount" class="discount" style="width: 10%; font-size: 11px; height: 25px; line-height: 11px; text-align: center; margin-left: 15px; margin-right: 15px;">$ %</div>
                            <div id="subtotal" class="subtotal" style="width: 20%; font-size: 11px; height: 25px; line-height: 11px; text-align: right; margin-left: 15px; margin-right: 15px;">$</div>
                        </div>

                        {{-- @endforeach --}}
                    </div>
                </div>
                <hr style="margin: 0 15px 0 15px; height: 5px;">
                <div class="footer_card_deck">
                    <label id="grand_total" for="total" style="width: 385px; margin-bottom: 0; padding: 0 15px 0 15px; text-align: right; height: 50px; line-height: 50px;"><strong>Total. # </strong></label>
                </div>
            </div>
        </div>
    </div>





</div>