@extends("WarehouseDashboard.layouts.pdf.header")

<header>
    <div class="container">
       <div class="section width-60-percent">
           <div class="logo">
               <img src="{{asset("assets/logo2.svg")}}" alt="">
           </div>
       </div>
        <div class="section width-40-percent text-right">
            <div class="information">
                <div class="field text font-bold" style="font-size: 16px">Sleep Time Company</div>
                <div class="field text">Location</div>
                <div class="field text">+962789123456</div>
                <div class="field url"><a href="https://web.sahla.digisolapps.com/">https://web.sahla.digisolapps.com/</a></div>
                <div class="field url"><a href="mailto:webmaster@example.com/">inf@sahla.com</a></div>
            </div>
        </div>
    </div>
</header>
<section class="customer">
    <div class="container">
        <div class="section">
            <div class="information">
                <div class="head">Customer name:</div>
                <div class="value">Maen Halah</div>
            </div>
            <div class="information">
                <div class="head">Customer Phone:</div>
                <div class="value">Maen Halah</div>
            </div>
        </div>
        <div class="section"style="text-align: center">
            <div class="information">
                <div class="head t">Customer Phone:</div>
                <div class="value">Maen Halah</div>
            </div>
        </div>
        <hr>
    </div>
</section>

<section class="table">
    <div class="container">
        <h3 style="text-align: center; padding: 0; margin: 0 0 10px">Services</h3>
        <table>
            <tr>
                <th>name</th>
                <th>Qty</th>
                <th>Price</th>
            </tr>

            <tr>
                <td data-label="name">Ken Griffey Jr.</td>
                <td data-label="war">83.8</td>
                <td data-label="ba">.284</td>

            </tr>
            <tr>
                <td data-label="name">Ken Griffey Jr.</td>
                <td data-label="war">83.8</td>
                <td data-label="ba">.284</td>
            </tr>
            <tr>
                <td data-label="name">Ken Griffey Jr.</td>
                <td data-label="war">83.8</td>
                <td data-label="ba">.284</td>

            </tr>
            <tr>
                <td data-label="name">Ken Griffey Jr.</td>
                <td data-label="war">83.8</td>
                <td data-label="ba">.284</td>
            </tr>
            <tr class="total">
                <td data-label="name"></td>
                <td data-label="war">Total Price</td>
                <td data-label="ba">.284</td>
            </tr>
        </table>
    </div>
</section>

<section class="table">
    <div class="container">
        <h3 style="text-align: center; padding: 0; margin: 0 0 10px">Extra Services</h3>
        <table>
            <tr>
                <th>name</th>
                <th>Qty</th>
                <th>Price</th>
            </tr>

            <tr>
                <td data-label="name">Ken Griffey Jr.</td>
                <td data-label="war">83.8</td>
                <td data-label="ba">.284</td>

            </tr>
            <tr>
                <td data-label="name">Ken Griffey Jr.</td>
                <td data-label="war">83.8</td>
                <td data-label="ba">.284</td>
            </tr>
            <tr>
                <td data-label="name">Ken Griffey Jr.</td>
                <td data-label="war">83.8</td>
                <td data-label="ba">.284</td>

            </tr>
            <tr>
                <td data-label="name">Ken Griffey Jr.</td>
                <td data-label="war">83.8</td>
                <td data-label="ba">.284</td>
            </tr>
            <tr class="total">
                <td data-label="name"></td>
                <td data-label="war">Total Price</td>
                <td data-label="ba">.284</td>
            </tr>

        </table>
    </div>
</section>

<div class="page-break"></div>

<section class="table">
    <br>
    <div class="container">
        <h3 style="text-align: center; padding: 0; margin: 0 0 10px">Parts</h3>
        <table>
            <tr>
                <th>name</th>
                <th>Qty</th>
                <th>Price</th>
            </tr>

            <tr>
                <td data-label="name">Ken Griffey Jr.</td>
                <td data-label="war">83.8</td>
                <td data-label="ba">.284</td>

            </tr>
            <tr>
                <td data-label="name">Ken Griffey Jr.</td>
                <td data-label="war">83.8</td>
                <td data-label="ba">.284</td>
            </tr>
            <tr>
                <td data-label="name">Ken Griffey Jr.</td>
                <td data-label="war">83.8</td>
                <td data-label="ba">.284</td>

            </tr>
            <tr>
                <td data-label="name">Ken Griffey Jr.</td>
                <td data-label="war">83.8</td>
                <td data-label="ba">.284</td>
            </tr>
            <tr class="total">
                <td data-label="name"></td>
                <td data-label="war">Total Price</td>
                <td data-label="ba">.284</td>
            </tr>

        </table>
    </div>
</section>

<footer class="text-right">
    <div class="container">
        <div class="section" style="width: 40%; float: right">
            <div class="total-box">
                <div class="head">Sub Totals</div>
                <div class="value">$2222</div>
            </div>
            <div  class="total-box">
                <div class="head">Tax</div>
                <div class="value">$2222</div>
            </div>
            <div  class="total-box">
                <div class="head">Discount</div>
                <div class="value">$2222</div>
            </div>
            <div  class="total-box total-amount">
                <div class="head">Total Amount</div>
                <div class="value">$2222</div>
            </div>
        </div>

    </div>

</footer>

</body>
</html>