@extends('layouts.app', ['page' => __('View Proposal'), 'pageSlug' => 'Proposal'])

{{-- <link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css"> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js" ></script>

@section('content')
<style>
    .invoice-card{
        background:#ffffff;
        padding:50px;
    }
    .address-from{
        color:black;
        font-weight:1000;
        text-align:end;
        margin-bottom:0px;
        margin-top:20px;
    }
    .text-propose{
        color:#5c5c5c;
        padding:0px;
        font-size: 16px;
        font-weight: 600;
        margin:0px;
    }
    .text-propose-2{
        color:#5c5c5c;
        padding:0px;
        font-size: 14px;
        margin:0px;
    }
    .address-from-text{
        color:black;
        text-align:end;
        line-height: 17px;
    }
    .address-to-text{
        color:black;
        text-align:start;
    }
    .text-black{
        color:black;
    }
    .text-label-hr{
        padding:10px;
        width: 100%;
        background: #a3b6f9;
         /*#4e62ab */
        color: white;
        /* margin-top: 10px; */
    }
    .text-quote{
        color:#5c5c5c;
        padding: 20px 0px;
    }
    .table-invoice{
        /*background:#4e62ab;*/
         background: #a3b6f9;
    }
    .table-invoice thead{
        background:#384575;
        
    }
     .table-invoice th{
         color:#fff !important;
     }
    .sub-heading{
        text-align: end;
        padding-right: 80px;
    }
    h3, .h3 {
    margin-bottom: 10px !important;
    line-height: 1em !important;
    }

    .row {
    margin-right: 0px !important; 
    margin-left: 0px !important;
     }
    /* .sub-heading-empty{
        background:white;
        border:none;
    } */
.address{
    padding: 3px !important;
}


    
</style>
    <div class="cotainer" style="padding:10px;">
        <div class="row">
            <button type="submit" class="btn btn-fill btn-primary" onclick="printPDF();">Print PDF <i class="tim-icons icon-single-copy-04"></i></button>
          
            <a class="dropdown-item" id="printButton" onclick="print()">Print</a>

        </div>
    </div>
   
    <div class="cotainer invoice-card" id="invoice-card">
        <div class="row">
            <div class="col-md-6">
                <img src="{{asset('uploads/invoice_logo/logo.png')}}" >
                <h4 class="text-propose">Proposal Number : {{$model->proposal_number}}</h4><r>
                <h4 class="text-propose-2">Proposal Date : {{$model->propsal_date}}</h4>
            </div>
            <div class="col-md-6">
                <h2 class="address-from">NK DECIBELS</h2>
                <p class="address-from-text"><b class="text-propose">Address : </b>House No : 05,<br> Velachery, <br>Chennai - 600042.</p>
                <p class="address-from-text"><b class="text-propose">Email : </b>admin@gmail.com</p>
                <p class="address-from-text"><b class="text-propose">Phone : </b>908976555</p>
                <p class="address-from-text"><b class="text-propose">Website : </b>https://nkdecibels.com</p>
            </div>
        </div>

        <div class="row">
            <h3 class="text-label-hr">Proposal for :  {{ $model->customer_name }}</h3>
        </div>


      

        <div class="row">
            <div class="col-md-6" id="left" style="padding: 0px 10px 0px 0px; margin:0px;">
                <h4 class="text-label-hr address">Service Address</h4>
                
                <p class="address-to-text" style="margin: 0px 15px;">
                    @if ($model->customer_service_address != "")
                    @foreach(explode(',', $model->customer_service_address) as $info) 
                    {{$info}}<br>
                    @endforeach
                    @endif
                    {{--{{ $model->customer_service_address }}, --}}<b class="text-propose">Email : </b> {{ $model->customer_email }}, <br><b class="text-propose">Phone : </b>{{ $model->customer_phone }}</p>
            </div>



            <div class="col-md-6" id="right" style="padding: 0px 0px 0px 10px; margin:0px;">
                <h4 class="text-label-hr address">Billing Address</h4>
                <p class="address-to-text" style="margin: 0px 15px;">
                @if ($model->customer_billing_address != "")
                @foreach(explode(',', $model->customer_billing_address) as $info) 
                {{$info}}<br>
                @endforeach
                @endif
                {{--{{ $model->customer_billing_address }},  --}}
                <b class="text-propose">Email : </b> {{ $model->customer_email }}, <br><b class="text-propose">Phone : </b>{{ $model->customer_phone }}</p><br>
            </div>
        </div>

        {{-- <p class="text-quote">
            We have a proposed pricing for {{ $model->customer_name }}. Products/Services and price are enlisted below. If you have 
            any question regarding this proposal, please let us know.
            Thank you!
        </p> --}}

        <table class="table table-invoice">

          
            {{-- <table id="example" class="display nowrap" style="width:100%"> --}}
            <thead>
                <tr>
                    <th>SNO</th>
                    <th>Product Name</th>
                    <th>Qty</th>
                    <th>Unit Price</th>
                    <th>pdf</th>
                
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                @php
                        $i = 1;
                        $sub_total = 0;
                @endphp

                @forelse($proposaldetails as $proposaldetail)
                @php
                        $sub_total += $proposaldetail -> quantity * $proposaldetail -> price;
                @endphp
                <tr>
                    <td>{{ $i++ }}</td>
                    <td>{{ $proposaldetail -> product_name }}</td>
                    <td>{{ $proposaldetail -> quantity }}</td>
                    <td>₹ {{ $proposaldetail -> price }}</td>
                    <td style="max-width: 100px;"><a href="{{ $proposaldetail -> pdf }}" target="_blank" title="{{ $proposaldetail -> pdf }}">{{ $proposaldetail -> pdf }}</a>
                    </td>
                    <td>₹ {{ $proposaldetail -> quantity * $proposaldetail -> price }}</td>
                </tr>

                @empty
                    <p>No Products Added</p>

                @endforelse

                @php
                    $discount_str = "";
                        if($model->discount_type == 1)
                        {
                            $discount_str = $model->discount.'%';
                        }
                        else
                        {
                            $discount_str = "Flat ₹".$model->discount;
                        }
                @endphp

                <tr>
                    <td colspan="4" class="sub-heading-empty"></td>
                    <td colspan="1" class="sub-heading">SUB TOTAL</td>
                    <td>₹ {{ $sub_total }}</td>
                </tr>
                <tr>
                    <td colspan="4" class="sub-heading-empty"></td>
                    <td colspan="1" class="sub-heading">Discount({{$discount_str}})</td>
                    <td>- ₹{{ $sub_total * $model->discount/100 }}</td>
                </tr>
                <tr>
                    <td colspan="4" class="sub-heading-empty"></td>
                    <td colspan="1" class="sub-heading">Other Tax(%)</td>
                    <td>+ ₹{{ $model->tax }}</td>
                </tr>
                <tr>
                    <td colspan="4" class="sub-heading-empty"></td>
                    <td colspan="1" class="sub-heading">Shipping/Other (+)</td>
                    <td>+ ₹{{ $model->shipping_other }}</td>
                </tr>
                <tr>
                    <td colspan="4" class="sub-heading-empty"></td>
                    <td colspan="1" class="sub-heading">Grand Total</td>
                    <td>₹{{ $model->total }}</td>
                </tr>
            </tbody>
        </table>

        <div class="row">

           
            
            <h4 class="text-label-hr address">Additional Notes:</h4>

            <p class="text-quote" style="padding:0px;">
                We have a proposed pricing for {{ $model->customer_name }}. Products/Services and price are enlisted below. If you have 
                any question regarding this proposal, please let us know.
                Thank you!
            </p>

        </div>

        <div class="row">
            <h4 class="text-label-hr address">Terms and Conditions :</h4>

            <p class="text-quote" style="padding:0px;">
                We have a proposed pricing for {{ $model->customer_name }}. Products/Services and price are enlisted below. If you have 
                any question regarding this proposal, please let us know.
                Thank you!
            </p>
        </div>
    
    </div>

@endsection

{{-- convert to pdf and print using js --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js "></script>
<script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.js"></script>

<script>
    function print() {
        var sTable = document.getElementById('invoice-card').outerHTML;
        var allowImageExtensions = ['.png', '.jpg', '.jpeg']; 


        var style = "<style>";
        style = style + "table {width: 100%;font: 17px Calibri;}";
        style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
        style = style + "padding: 2px 3px;text-align: center;}";
        style += "col-md-6 {width: 50%; float: left; padding: 0 10px;}";
        // style += "#right {width: 50%; float: right; padding: 0 10px;}";
        style = style + " .text-propose{color:#5c5c5c;padding:0px;font-size: 16px; font-weight: 600;margin:0px;}";
        style = style + ".text-quote{color:#5c5c5c;padding: 20px 0px;}";
        style = style + ".address{border:1px solid black;}";
        style += "img {max-width: 100%; height: auto;}";

        style = style + " .address-from-text{color:black;text-align:end;line-height: 17px;}";
        style = style + ".address-to-text{color:black;text-align:start;}";

        style = style + ".text-black{ color:black;}";
        // style = style + ".text-label-hr{padding:10px;width: 100%;background: #a3b6f9;color: white;}";
        style = style + ".text-quote{color:#5c5c5c;padding: 20px 0px;}";
        style = style + "</style>";
        
        
        // CREATE A WINDOW OBJECT.
        var win = window.open('', '', 'height=700,width=700');

        win.document.write('<html><head>');
        win.document.write('<title>Customer Profile</title>');   // <title> FOR PDF HEADER.
        win.document.write(style);          // ADD STYLE INSIDE THE HEAD TAG.
        win.document.write('</head>');
        win.document.write('<body>');
       
        win.document.write(sTable);         // THE TABLE CONTENTS INSIDE THE BODY TAG.
        win.document.write('</body></html>');

        win.document.close(); 	// CLOSE THE CURRENT WINDOW.

        win.print();    // PRINT THE CONTENTS.
    }


</script>