@extends('layouts.basic')
@section('styles')
<style type="text/css">
    body{
        font-family: 'Roboto Condensed', sans-serif;
    }
    .m-0{
        margin: 0px;
    }
    .p-0{
        padding: 0px;
    }
    .pt-5{
        padding-top:5px;
    }
    .mt-10{
        margin-top:10px;
    }
    .text-center{
        text-align:center !important;
    }
    .w-100{
        width: 100%;
    }
    .w-50{
        width:50%;   
    }
    .w-85{
        width:85%;   
    }
    .w-15{
        width:15%;   
    }
    .logo img{
        width:200px;
        height:60px;        
    }
    .gray-color{
        color:#5D5D5D;
    }
    .text-bold{
        font-weight: bold;
    }
    .border{
        border:1px solid black;
    }
    table tr,th,td{
        border: 1px solid #d2d2d2;
        border-collapse:collapse;
        padding:7px 8px;
    }
    table tr th{
        background: #F4F4F4;
        font-size:15px;
    }
    table tr td{
        font-size:13px;
    }
    table{
        border-collapse:collapse;
    }
    .box-text p{
        line-height:10px;
    }
    .float-left{
        float:left;
    }
    .total-part{
        font-size:16px;
        line-height:12px;
    }
    .total-right p{
        padding-right:20px;
    }
</style>
@endsection
@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <!-- /.card-header -->
                        <div class="card-body">






                            <div class="head-title">
                              <h3 class="text-center m-0 p-0">Invoice</h3>
                            </div>
                            <div class="add-detail mt-10">
                                <div class="w-50 float-left mt-10">
                                    <p class="m-0 pt-5 text-bold w-100">Invoice Id - <span class="gray-color">{{ $quotation->invoice_number }}</span></p>
                                    <p class="m-0 pt-5 text-bold w-100">Date - <span class="gray-color">{{ $quotation->date }}</span></p>
                                </div>
                                <div class="w-50 float-left logo mt-10">
                                    <img src="http://localhost/surya-tmt/suryadev-tmt/public/assets/images/logo-white-2.png" alt="Logo">
                                </div>
                                <div style="clear: both;"></div>
                            </div>
                            <div class="table-section bill-tbl w-100 mt-10">
                                <table class="table w-100 mt-10">
                                    <tr>
                                        <th class="w-50">From</th>
                                        <th class="w-50">To</th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="box-text">
                                                <p>Mountain View,</p>
                                                <p>California,</p>
                                                <p>United States</p>                    
                                                <p>Contact: (650) 253-0000</p>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="box-text">
                                                <p>Customer Name: {{ $quotation->customer->customer_name }}</p>
                                                <p>Mobile Number: {{ $quotation->mobile_number }}</p>
                                                <p>Billing Address: {{ $quotation->billing_address }}</p>
                                                <p>Delivery Address: {{ $quotation->delivery_address }}</p>
                                                <p>Email Address: {{ $quotation->email_address }}</p>
                                                <p>Credit Limit: {{ $quotation->credit_limit }}</p>
                                            </div>
                                            
                                    
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            {{-- <div class="table-section bill-tbl w-100 mt-10">
                                <table class="table w-100 mt-10">
                                    <tr>
                                        <th class="w-50">Payment Method</th>
                                        <th class="w-50">Shipping Method</th>
                                    </tr>
                                    <tr>
                                        <td>Cash On Delivery</td>
                                        <td>Free Shipping - Free Shipping</td>
                                    </tr>
                                </table>
                            </div> --}}
                            <div class="table-section bill-tbl w-100 mt-10">
                                <table class="table w-100 mt-10">
                                    <tr>
                                        <th>Product Name</th>
                                                <th>Quantity</th>
                                                <th>Price</th>
                                                <th>Total Price</th>
                                    </tr>
                                    @foreach ($productDetail as $product)
                                        <tr>
                                            <td>{{ $product->product->name }}</td>
                                            <td>{{ $product->quantity }}</td>
                                            <td>{{ $product->price }}</td>
                                            <td>{{ $product->subtotal }}</td>
                                        </tr>
                                    @endforeach
                                    
                                    <tr>
                                        <td colspan="7">
                                            <div class="total-part">
                                                <div class="total-left w-85 float-left" align="right">
                                                    <p>Sub Total :</p>
                                                    <p>Tax (18%) :</p>
                                                    @if ($quotation->shipping != '')
                                                    <p>Shipping: </p>
                                                    @endif
                                                    @if ($quotation->discount_type != '')
                                                    <p>Discount: </p>
                                                   @endif
                
                                                    <p>Total Total:</p>
                                                </div>
                                                <div class="total-right w-15 float-left text-bold" align="right">
                                                    <p>{{ $quotation->sub_total_sum }}</p>
                                                    <p>{{ $quotation->tax }}</p>
                                                    @if ($quotation->shipping != '')
                                                    <p>{{ $quotation->shipping }}</p>
                                                    @endif
                                                    @if ($quotation->discount_type != '')
                                                    <p>{{ $quotation->discount_amount }}</p>
                                                    @endif
                
                                                    <p>{{ $quotation->total }}</p>
                                                    
                                                </div>
                                                <div style="clear: both;"></div>
                                            </div> 
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            {{-- <div class="remarks">
                                <h5>Remarks</h5>
                                <p>{{ $quotation->remarks }}</p>
                            </div>        --}}
                            {!! $socialShare !!}
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>
                </div>
    </section>
@endsection