<x-layout>
    @section('title', $title.' - ')
    @include('admin/ar-css')
    @include('admin/ar-php-script')
    @include('admin/header_admin')
    
    <style>

    /* Invoice*/
    .text-danger strong {
        	color: #9f181c;
		}
		.receipt-main {
			background: #ffffff none repeat scroll 0 0;
			/*border-bottom: 12px solid #333333;*/
			border-top: 12px solid #74164B;
			/*margin-top: 50px;*/
			/*margin-bottom: 50px;*/
			margin:20px auto;
			padding: 20px 30px !important;
			position: relative;
			box-shadow: 0 1px 21px #acacac;
			color: #333333;
			font-family: open sans;
		}
		.receipt-main p {
			color: #333333;
			font-family: open sans;
			line-height: 1.42857;
		}
		.receipt-footer h1 {
			font-size: 15px;
			font-weight: 400 !important;
			margin: 0 !important;
		}
		/*
		.receipt-main::after {
			background: #414143 none repeat scroll 0 0;
			content: "";
			height: 5px;
			left: 0;
			position: absolute;
			right: 0;
			top: -13px;
		}*/
		.receipt-main thead {
			/*background: #414143 none repeat scroll 0 0;*/
			background-color: #74164B !important;
		}
		.receipt-main thead th {
			color:#fff;
		}
		.receipt-right h5 {
			font-size: 15px;
			font-weight: bold;
			margin: 0 0 7px 0;
		}
		.receipt-right p {
			font-size: 12px;
			margin: 0px;
		}
		.receipt-right p i {
			text-align: center;
			width: 18px;
		}
		.receipt-main td {
			padding: 9px 20px !important;
		}
		.receipt-main th {
			padding: 13px 20px !important;
		}
		.receipt-main td {
			font-size: 13px;
			font-weight: initial !important;
		}
		.receipt-main td p:last-child {
			margin: 0;
			padding: 0;
		}	
		.receipt-main td h2 {
			font-size: 20px;
			font-weight: 900;
			margin: 0;
			text-transform: uppercase;
		}
		.receipt-header-mid .receipt-left h1 {
			font-weight: 100;
			margin: 34px 0 0;
			text-align: right;
			text-transform: uppercase;
		}
		.receipt-header-mid {
			margin: 24px 0;
			overflow: hidden;
		}
		
		#container {
			background-color: #dcdcdc;
		}
        .table-invoice tr:nth-child(odd) {
          background-color: #f2f2f2;
        }
        
        @font-face { font-family: Vladimir; src: url('assets/font/vladimir.ttf'); }
		
    </style>
    
    <script>
        function printDiv(divName) {
            var divToPrint = document.getElementById(divName);
            var css = createInvoiceCss();
            //var htmlToPrint = createInvoiceCss();

            //htmlToPrint = divToPrint.outerHTML;
            var htmlToPrint = '<html><head><link rel="stylesheet" href="assets/css/creative-studio.css">' + css + '</head><body style="height:0">' + divToPrint.outerHTML + '</body></html>';
            newWin = window.open();
            newWin.document.write(htmlToPrint);
            newWin.print();
            newWin.close();
        }
        

        function createInvoiceCss(){
            var data = '<style type="text/css">' +
                '.text-danger strong {color: #9f181c;}' +
		        '.receipt-main {background: #ffffff none repeat scroll 0 0;border-top: 12px solid #9f181c;margin:20px auto;padding: 20px 30px !important;position: relative;box-shadow: 0 1px 21px #acacac;color: #333333;font-family: open sans;}' +
		        '.receipt-main p {color: #333333;font-family: open sans;line-height: 1.42857;}' +
		        '.receipt-footer h1 {font-size: 15px;font-weight: 400 !important;margin: 0 !important;}' +
		        /*'.receipt-main::after {background: #414143 none repeat scroll 0 0;content: "";height: 5px;left: 0;position: absolute;right: 0;top: -13px;}' +*/
		        '.receipt-main thead {background: #414143 none repeat scroll 0 0;}' +
		        '.receipt-main thead th {color:#fff;}' +
        		'.receipt-right h5 {font-size: 16px;font-weight: bold;margin: 0 0 7px 0;}' +
        		'.receipt-right p {font-size: 12px;margin: 0px;}' +
        		'.receipt-right p i {text-align: center;width: 18px;}' +
        		'.receipt-main td {padding: 9px 20px !important;}' +
        		'.receipt-main th {padding: 13px 20px !important;}' +
        		'.receipt-main td {font-size: 13px;font-weight: initial !important;}' +
        		'.receipt-main td p:last-child {margin: 0;padding: 0;}' +
        		'.receipt-main td h2 {font-size: 20px;font-weight: 900;margin: 0;text-transform: uppercase;}' +
        		'.receipt-header-mid .receipt-left h1 {font-weight: 100;margin: 34px 0 0;text-align: right;text-transform: uppercase;}' +
        		'.receipt-header-mid {margin: 24px 0;overflow: hidden;}' +
                '@font-face { font-family: Vladimir; src: url("assets/font/vladimir.ttf");' +		
        		'#thanks {font-family:Vladimir}' +
        		'#container {background-color: #dcdcdc;}' +
        		'</style>';
                return data;
            }

    </script>


    <section id="dashboard" class="ar-dashboard-height">
        <div class="ar-dashboard-row" style="height:100%">
            <div id="ar-left-nav">
                @include('admin/left_nav')
            </div>
            
            <div id="ar-dashboard-content">
                
                <div style="overflow:scroll">
                    <!-- Start of Invoice -->
                    <div id="invoice" class="receipt-main" style="width:1000px">
                                
                                <div class="row">
                    				<div class="col-xs-6 col-sm-6 col-md-6">
                    					<div class="receipt-left">
                    						<img class="img-responsive" alt="ar clean logo" src="https://by-arsolution.com/assets/imgs/ar-clean.png" style="width: 150px; border-radius: 43px;">
                    					</div>
                    				</div>
                    			    <div class="col-xs-6 col-sm-6 col-md-6 text-right">
                    			        <div class="receipt-right">
                    				        <h5>PT. AR GROUP BERKAH BERSAMA</h5>
                    				        <p>088-9199-6485 <i class="fa fa-phone"></i></p>
                    				        <p>info@by-arsolution.com <i class="fa fa-envelope-o"></i></p>
                    				        <p>INDONESIA <i class="fa fa-location-arrow"></i></p>
                    				    </div>
                                    </div>
                                </div>
                    			
                    			<div class="row">
                    				<div class="col-xs-6 col-sm-6 col-md-6 text-left">
                    					<div class="receipt-right" style="margin-bottom:5px;font-family:Helvetica;font-size:10pt">
                    						<div style="width:70px;display:inline-block">Invoice to </div><span style="color:black"> : {{ $billing->name }}</span><br>
                    						<div style="width:70px;display:inline-block">Phone </div><span style="color:black"> : {{ $billing->phone }}</span><br>
                    						<div style="width:70px;display:inline-block">Email </div><span style="color:black"> : {{ $billing->email }}</span><br>
                    						<div style="width:70px;display:inline-block">Address </div><span style="color:black"> : {{ $billing->address }}</span><br>
                    					</div>
                    				</div>
                    				<div class="col-xs-6 col-sm-6 col-md-6 text-right">
                    					<div class="receipt-right">
                    						<h4>INVOICE # :{{ $billing->id }}</h4>
                    					</div>
                    				</div>
                                </div>
                    			
                                <div>
                                        <table style="width:100%;border:1px solid gray">
                                        <thead style="background-color: #800020">
                                            <tr>
                                                <th style="border:1px solid gray">Item Description</th>
                                                <th style="border:1px solid gray;width:1%">Quantity</th>
                                                <th style="border:1px solid gray;white-space:nowrap">Price per Unit (Rp)</th>
                                                <th style="width:1%;white-space:nowrap;border:1px solid gray">Amount (Rp)</th>
                                            </tr>
                                        </thead>
                                        
                                        <tbody class="table-invoicex" style="border:1px solid gray">
                                            <!-- Begin of data-->
                                            
                                            <?
                                            $total = 0;
                                            foreach($billingItems as $item){
                                                $total = ($total + $item->amount);
                                                echo '<tr>
                                                            <td class="col-md-9" style="border-left:1px solid gray;border-top:1px solid #dcdcdc">'.$item->description.'</td>
                                                            <td class="col-md-9" style="border-left:1px solid gray;border-top:1px solid #dcdcdc">1</td>
                                                            <td class="col-md-9 text-right" style="border-left:1px solid gray;border-top:1px solid #dcdcdc">'.rupiahBasic($item->amount).'</td>
                                                            <td class="col-md-3 text-right" style="border-left:1px solid gray;border-top:1px solid #dcdcdc">'.rupiahBasic($item->amount).'</td>
                                                      </tr>';
                                                
                                            }?>
                                        </tbody>
                                            
                                        <tfooter>
                                            <?
                                                echo '<tr>
                                                        <td></td>
                                                        <td></td>
                                                        <td class="text-right"><strong>Sub Total: </strong></td>
                                                        <td class="text-right text-danger" style="border:1px solid gray"><strong>'.rupiahBasic($total).'</strong></td>
                                                      </tr>';

                                                echo '<tr>
                                                        <td></td>
                                                        <td></td>
                                                        <td class="text-right"><strong>Discount: </strong></td>
                                                        <td class="text-right text-danger" style="border:1px solid gray"><strong>'.rupiahBasic($billing->discount).'</strong></td>
                                                      </tr>';

                                                $total = ($total - $billing->discount);
                                                echo '<tr>
                                                        <td></td>
                                                        <td></td>
                                                        <td class="text-right" style="white-space:nowrap"><strong>Total After Discount: </strong></td>
                                                        <td class="text-right text-danger" style="border:1px solid gray"><strong>'.rupiahBasic($total).'</strong></td>
                                                      </tr>';
                                                
                                                echo '<tr>
                                                        <td></td>
                                                        <td></td>
                                                        <td class="text-right" style="white-space:nowrap"><strong>PPN 11%: </strong></td>
                                                        <td class="text-right text-danger" style="border:1px solid gray"><strong>'.rupiahBasic($billing->pajak).'</strong></td>
                                                      </tr>';

                                                echo '<tr>
                                                        <td></td>
                                                        <td></td>
                                                        <td class="text-right"><strong>Transport: </strong></td>
                                                        <td class="text-right text-danger" style="border:1px solid gray"><strong>'.rupiahBasic($billing->transport).'</strong></td>
                                                      </tr>';
                                                      
                                                $total = ($total + $billing->pajak + $billing->transport);
                                                echo '<tr>
                                                        <td></td>
                                                        <td></td>
                                                        <td class="text-right"><strong>Total: </strong></td>
                                                        <td class="text-right text-danger" style="border:1px solid gray"><strong>'.rupiahBasic($total).'</strong></td>
                                                      </tr>';

                                            ?>

                                        </tfooter>
                                    </table>
                                </div>
                    			
                    			<div class="row">
                    				<div class="col-xs-12 col-sm-12 col-md-12 text-left">
                    					<div class="receipt-right" style="font-size:10pt;font-family:Helvetica;margin:10px 0">
                    						<p><b>Date :</b> {{ date('d-m-Y') }}</p>
                    						Payment transfer to:<br>
                    						BANK CENTRAL ASIA (BCA) | ABDUL RAHMAN | 766-00-313-45 | <a id="thanxs" style="font-family:vladimir;font-size:13pt">Your satisfaction is our priority. Thank you for your trust in our services</a>
                    					</div>
                    				</div>
                    				<div class="col-xs-4 col-sm-4 col-md-4">
                    					<div class="receipt-left">
                    						<!--<h1>Stamp</h1>-->
                    					</div>
                    				</div>
                                </div>
                                
                    			<div class="row">
                    			     <div class="col-xs-12 col-sm-12 col-md-12 text-left">
                    			    <img src="https://by-arsolution.com/assets/imgs/invoice_img_footer.webp" style="width:100%">
                    				</div>
                                </div>
                                
                            </div>
                    <!-- End of Invoice -->                
                </div>
                    
                <div style="margin:10px;text-align:center">
                    <button class="btn btn-success" style="margin-bottom:5px" onclick="printDiv('invoice')">Print Invoice</button>
                </div>
                
            </div>
            
        </div>
    </section>

</x-layout>