<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{$company->name}}-Quotation-{{$data->date}}</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
    <style>
    h1,h2,h3,h4,h5,h6,p,span{
        font-family: sans-serif;
    }
    .sender_company{
        /* margin-top: 10px; */
        border-left: 6px solid #d8d7d7;
        padding-left: 11px;
    }
    .sender_company p{
        margin: 0;
    }
    .sender_company h5{
        margin: 0;
        font-weight: 800;
    }
    .recever_company{
        /* margin-top: 10px; */
        /*border-left: 6px solid #d8d7d7;
        padding-left: 11px;*/
    }
    .recever_company p{
        margin: 0;
    }
    .recever_company h5{
        margin: 0;
        font-weight: 800;
    }

    .table_header{
        /* padding-top: 14px; */
        padding-left: 14px;
        padding-right: 14px;
    }




    .tbody{
        border: 1px solid black;

    }

    /* Header Top */
    .header_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: green;
    }

    .header_company_info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }


    /* my css */

    /* Table Style */

    table {
        box-sizing: border-box;
        border: 1px solid #000;
        border-collapse: collapse;
        width: 100%;
        
        background-size: 40%;
        background-repeat: no-repeat;
        background-position: center center;




        /* background: red; */
    }

    thead {
        background: red;
        border: 1px solid #000;
        color: #fff;
    }
    th, td {
        padding: 10px;
        border-right: 1px solid #000;

    }




    tbody tr td p {
		margin: 0px;
		padding: 0px 5px;
		font-size: 1.3rem;
		font-weight: 400;
		/* text-transform: uppercase; */
		/* background: red; */
	}

    .total_container {
        text-align: right;
        margin-top: 20px;
    }
    .total_container  p{
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
    }

    /* my own table */
.signature_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 70px;
}

.signature_1 {
    width: 50%;

}

.signature_2 {
    width: 50%;
    float: right;
    text-align: right;
}


</style>

    @php
    $setting = DB::table('settings')->first();
    @endphp

    <div class="container mt-5" id="Invoice">
        
        <div class="col-md-12">
            <!-- Heder Top Logo & Date -->
            <div class="row header_top ">
                <div class="col-md-6" >
                    <img src="{{asset('/public/siteImage')}}/{{$setting->logo}}" alt="" style="width: 130px;">
                </div>
                <div class="col-md-6">
                    <h1 style="float: right;color: #e00000;font-weight: bold;font-size: 25px;border: 4px solid #e00000;padding: 10px;margin: 0;">QUOTE</h1>
                    <br>
                    <br>
                    <br>
                    <br>
                    <!-- <br>
                    <br>
                    <div style="float: right;font-size: 14px;font-weight: 600;">
                        <span>Date: {{$data->date}} </span>
                        <br>
                        <span>Quote No: {{$data->quote_no}} </span>
                    </div> -->
                </div>
            </div>
        </div>
       <!-- Company Info -->
        <div class="col-md-12" style=" margin-top: -50px; padding: 0; ">

            <div class="row header_company_info">
                <div class="col-md-6">
                    <div class="sender_company">
                        <h5>{{$setting->title}}</h5>
                        <p style="max-width: 200px">{{$setting->address}}</p>
                        <p>{{$setting->hotline}}</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="recever_company" style="float: right;">
                        <p>Date: {{$data->date}} </p>
                        <p>Quote No: {{$data->quote_no}} </p>
                        <br>
                        <h5>{{$company->name}}</h5>
                        <p style="max-width: 200px">{{$company->address}}</p>
                        <p>{{$company->city}}</p>
                        <p>{{$company->cell_phone}}</p>
                    </div>
                </div>
            </div>
        </div>


        <!-- Start Table -->
        <div class="col-md-12">
            <div class="row">
                @php
                $setting = DB::table('settings')->first();
                @endphp


                    <!-- Start Table -->

                    <table class="table_wrapper">

                        <thead  style="background: {{ $setting->invoice_color }}; text-align: center;">
                            <tr>
                                <th class="text-center"> SKU</th>
                                <th class="text-center">Item Name</th>
                                <th class="text-center">Description</th>
                                <th class="text-center">Qty</th>
                                <th class="text-center">Unit Price</th>
                                <th class="text-center">Total</th>
                            </tr>
                        </thead>

                        <tbody>

                            @foreach($data_items as $data_item)

                            <?php
                                $product = DB::table('product_productinfo')->where('id', $data_item->product_id)->first();
                                $category = DB::table('product_category')->where('id', $product->category_id)->first();

                            ?>

                            <tr>
                                <td style="width: 80px; text-align: center;">
                                    <p>{{$product->product_id}}</p>
                                </td>
                                <td style="width: 100px; text-align: center;">
                                    <p>{{$category->category_name ?? ''}}</p>
                                </td>
                                <td style="text-align: center;">
                                    <p>{{$product->product_name}}</p>
                                </td>
                                <td style="width: 20px; text-align: center;">
                                    <p>{{$data_item->qty}}</p>
                                </td>
                                <td style="width: 75px; text-align: center;">
                                    <p>TK {{ intval($data_item->unit_price)}}</p>
                                </td>
                                <td style="width: 75px; text-align: center;">
                                    <p>TK {{$data_item->unit_price * $data_item->qty }}</p>
                                </td>

                            </tr>


                            @endforeach

                            @if(count($data_items) == 1)
                                <tr >
                                    <td style="height: 348px; border-right: 1px solid #000"></td>
                                    <td style="height: 348px; border-right: 1px solid #000"></td>
                                    <td style="height: 348px; border-right: 1px solid #000"></td>
                                    <td style="height: 348px; border-right: 1px solid #000"></td>
                                    <td style="height: 348px; border-right: 1px solid #000"></td>
                                    <td style="height: 348px; border-right: 1px solid #000"></td>
                                </tr>
                            @elseif(count($data_items) == 2)
                                <tr >
                                    <td style="height: 300px; border-right: 1px solid #000"></td>
                                    <td style="height: 300px; border-right: 1px solid #000"></td>
                                    <td style="height: 300px; border-right: 1px solid #000"></td>
                                    <td style="height: 300px; border-right: 1px solid #000"></td>
                                    <td style="height: 300px; border-right: 1px solid #000"></td>
                                    <td style="height: 300px; border-right: 1px solid #000"></td>
                                </tr>

                            @elseif(count($data_items) == 3)
                                <tr >
                                    <td style="height: 240px; border-right: 1px solid #000"></td>
                                    <td style="height: 240px; border-right: 1px solid #000"></td>
                                    <td style="height: 240px; border-right: 1px solid #000"></td>
                                    <td style="height: 240px; border-right: 1px solid #000"></td>
                                    <td style="height: 240px; border-right: 1px solid #000"></td>
                                    <td style="height: 240px; border-right: 1px solid #000"></td>
                                </tr>
                            @elseif(count($data_items) == 4)
                                <tr >
                                    <td style="height: 100px; border-right: 1px solid #000"></td>
                                    <td style="height: 100px; border-right: 1px solid #000"></td>
                                    <td style="height: 100px; border-right: 1px solid #000"></td>
                                    <td style="height: 100px; border-right: 1px solid #000"></td>
                                    <td style="height: 100px; border-right: 1px solid #000"></td>
                                    <td style="height: 100px; border-right: 1px solid #000"></td>
                                </tr>
                            @elseif(count($data_items) == 5)
                                <tr >
                                    <td style="height: 80px; border-right: 1px solid #000"></td>
                                    <td style="height: 80px; border-right: 1px solid #000"></td>
                                    <td style="height: 80px; border-right: 1px solid #000"></td>
                                    <td style="height: 80px; border-right: 1px solid #000"></td>
                                    <td style="height: 80px; border-right: 1px solid #000"></td>
                                    <td style="height: 80px; border-right: 1px solid #000"></td>
                                </tr>
                            @endif


                        </tbody>

                    </table>

                    <div class="total_container">
                        <p>Total: TK {{ round($data->total) }}</p>
                    </div>
                    <!-- End Table -->

            </div>
             <div class="signature_container row">
                <div class="col-md-6 signature_1">
                    <p style="margin: 0">------------------------------------</p>
                    <p style="margin: 0; margin-left: 20px">Customer Signature</p>
                </div>
                <div class="col-md-6  signature_2">
                    <p style="margin: 0">------------------------------------</p>
                    <p style="margin: 0; margin-right: 20px">Authorize Signature</p>
                </div>
             </div>
        </div>
    </div>
</body>
</html>
