<?php



function dateDiffInDays($date1, $date2) {
    
    // Calculating the difference in timestamps
    $diff = strtotime($date2) - strtotime($date1);

    // 1 day = 24 hours
    // 24 * 60 * 60 = 86400 seconds
    return abs(round($diff / 86400));
}

function dateDiffUsingDateTime($date1, $date2) {
    $datetime1 = new DateTime($date1);
    $datetime2 = new DateTime($date2);

    $interval = $datetime1->diff($datetime2);

    return $interval->d;
}

?>

<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'); }

#inv_cust_info {
  display: flex;
  flex-flow: row;
}

#inv_cust_info_content div {
  width:400px;
  padding:0 5px;
}		

@media print {
    #ar-left-nav, #button-group, #header-nav, #btn-item-delete {
        display:none !important;
    }
}
    </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 id="button-group" style="text-align:center">
                    <a id="btn-invoice-list" class="btn-regular" data-id="{{ $billing->id }}" style="color:red" href="custom-billing">Invoice Lists</a>
                    <a id="btn-item-new" class="btn-regular" style="color:red">Add Custom Item</a>
                    <a id="btn-invoice-edit" class="btn-regular" data-id="{{ $billing->id }}" style="color:red">Persiapan Invoice</a>
                    <button class="btn btn-success" style="margin-bottom:5px" onclick="window.print()">Print Invoice</button>
                    <div style="color:red;text-align:center">Under Development</div>
                </div>

                <div style="overflow:scroll">
                    <!-- Start of Invoice -->
                    <div id="invoice" class="receipt-main" style="width:1000px">
                                
                                <div class="row" style="display:flex">
                    				<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-care.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-9 col-sm-9 col-md-9 text-left">
                    					<div class="receipt-right" style="margin-bottom:5px;font-family:Helvetica;font-size:10pt">

                                            <div style="display:flex;flex-flow:row">
                        					    <div style="width:70px;padding:0 5px">Invoice to</div>
                        						<div style="width:5px;padding:0 5px"> : </div>
                        						<div style="width:400px;padding:0 5px">{{ $billing->name }}</div>
                    						</div>

                                            <div style="display:flex;flex-flow:row">
                        					    <div style="width:70px;padding:0 5px">Phone</div>
                        						<div style="width:5px;padding:0 5px"> : </div>
                        						<div style="width:400px;padding:0 5px">{{ $billing->phone }}</div>
                    						</div>

                                            <div style="display:flex;flex-flow:row">
                        					    <div style="width:70px;padding:0 5px">Email</div>
                        						<div style="width:5px;padding:0 5px"> : </div>
                        						<div style="width:400px;padding:0 5px">{{ $billing->email }}</div>
                    						</div>
                    						
                                            <div style="display:flex;flex-flow:row">
                        					    <div style="width:70px;padding:0 5px">Address</div>
                        						<div style="width:5px;padding:0 5px"> : </div>
                        						<div style="width:400px;padding:0 5px">{{ $billing->address }}</div>
                    						</div>
                    						
                    					</div>
                    				</div>
                    				
                    				<div class="col-xs-3 col-sm-3 col-md-3 text-left">
                    					<div class="receipt-right" style="margin-bottom:5px;font-family:Helvetica;font-size:10pt">
                    						<div style="width:100px;display:inline-block">Invoice # </div><span style="color:black"> : {{ $billing->inv_number }}</span><br>
                    						<div style="width:100px;display:inline-block">Invoice Date </div><span style="color:black"> : {{ date('d-m-Y',strtotime($billing->created_at)) }}</span><br>
                    						<div style="width:100px;display:inline-block">Term </div><span style="color:black"> : {{ dateDiffInDays($billing->created_at,$billing->duedate_at) }}</span><br>
                    						<div style="width:100px;display:inline-block">Due Date </div><span style="color:black"> : {{ date('d-m-Y',strtotime($billing->duedate_at)) }}</span><br>
                    						<div style="width:100px;display:inline-block">Reference </div><span style="color:black"> : {{ $billing->reference }}</span><br>
                    					</div>
                    				</div>
                    				
                                </div>

                                <div>
                                    <table style="width:100%;border:1px solid gray">
                                        <thead style="background-color: #800020">
                                            <tr>
                                                <th style="border:1px solid gray">No.</th>
                                                <th style="border:1px solid gray">Item Description</th>
                                                <th style="border:1px solid gray">Unit</th>
                                                <th style="border:1px solid gray;white-space:nowrap">Unit Price (Rp)</th>
                                                <th style="width:1%;white-space:nowrap;border:1px solid gray">Sub Total (Rp)</th>
                                            </tr>
                                        </thead>
                                        
                                        <tbody class="table-invoicex" style="border:1px solid gray">
                                            <!-- Begin of data-->
                                            
                                            <?
                                            $total = 0;
                                            $index = 0;
                                            foreach($billingItems as $item){
                                                $index++;
                                                $total = ($total + $item->amount);
                                                echo '<tr>
                                                            <td class="col-md-9" style="border-left:1px solid gray;border-top:1px solid #dcdcdc;width:1% !important">'.$index.'</td>
                                                            <td class="col-md-9" style="border-left:1px solid gray;border-top:1px solid #dcdcdc">
                                                                <div style="display:flex">
                                                                    <div>'.$item->description.'</div>
                                                                    <div style="position:absolute;right:10px">
                                                                        <button id="btn-item-delete" data-id="'. $item->id .'" style="outline:none;border:none;background:none;margin:3px">
                                                                            <i class="fa fa-trash"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="col-md-9" style="border-left:1px solid gray;border-top:1px solid #dcdcdc;width:1% !important">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></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></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></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></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>';

                                                $total = ($total + $billing->pajak);
                                                echo '<tr>
                                                        <td></td>
                                                        <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">
                    						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" style="height:100px">
                    			     <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>
    
    <div id="modal-invoice" class="modal">
        <div class="form-popup ar-view-modal" style="max-height:80%;background-color:#f8f8f8;overflow:scroll">
            <div style="text-align:center"><h5>Kelola Invoice</h5></div>
            <form id="frmInvoice">
                <input type="hidden" id="billing_id" name="billing_id">
                <div class="form-group">
                    <label>Invoice #:</label>
                    <input class="form-control" id="inv_number" name="inv_number" type="text" placeholder="Invoice Number">
                </div>

                <div class="form-group">
                    <label>Reference #:</label>
                    <input class="form-control" id="reference" name="reference" type="text" placeholder="Reference">
                </div>
                
                <div class="form-group">
                    <label>Discount (Rp.):</label>
                    <input class="form-control" id="discount" name="discount" type="text" placeholder="Discount">
                </div>
                <div class="form-group">
                    <label>Pajak (11%) (Rp.): (Belum dapat digunakan)</label>
                    <input class="form-controlx" id="cbx_pajak" name="cbx_pajak" type="checkbox">
                    <input class="form-control" id="pajak" name="pajak" type="text" placeholder="Pajak">
                </div>
                <div class="form-group">
                    <label>Biaya Transport (Rp.):</label>
                    <input class="form-control" id="transport" name="transport" type="text" placeholder="Biaya Transport">
                </div>
                
                <div class="form-group">
                    <label>Termin (hari):</label>
                    <input class="form-control" id="termin" name="termin" type="text" placeholder="Termin">
                </div>
                <div class="form-group">
                    <label>Jatuh Tempo :</label>
                    <input class="form-control" id="duedate" name="duedate" type="date" placeholder="Jatuh tempo">
                </div>
                <div class="form-group">
                    <button id="btn-invoice-post" class="btn btn-primary">Simpan</button>
                    <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
    
    <div id="modal-item" class="modal">
        <div class="form-popup ar-view-modal" style="max-height:80%;background-color:#f8f8f8;overflow:scroll">
            <div style="text-align:center"><h5>Kelola Item Service</h5></div>
            <form id="frmItem">
                <input type="hidden" id="id" name="id">
                <input type="hidden" id="billing_id" name="billing_id" value="{{ $billing->id }}">

                <div class="form-group">
                    <label>Deskripsi :</label> 
                    <input class="form-control" id="description" name="description" type="text" placeholder="Type description"/>
                </div>
                <div class="form-group">
                    <label>Harga :</label>
                    <input class="form-control" id="amount" name="amount" type="text" placeholder="Harga">
                </div>
                <div class="form-group">
                    <button id="btn-item-post" class="btn btn-primary">Tambahkan</button>
                    <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
            
        </div>
    </div>

</x-layout>

<script>
        $("#btn-invoice-edit").click(function(e)
        {
            $('#frmInvoice').trigger("reset");
            $("#billing_id").val({{ $billing->id }});
            $("#transport").val({{ $billing->transport }});
            $("#discount").val({{ $billing->discount }});
            $("#pajak").val({{ $billing->pajak }});
            $("#termin").val({{ $billing->termin }});
            
            if({{ $billing->pajak }} > 0){
                $("#cbx_pajak").attr('checked',true);
            }else{
                $("#cbx_pajak").attr('checked',false);
            }

            $("#duedate").val('<?php echo $billing->duedate_at; ?>');
            $("#modal-invoice").modal("show");
        });

        $("#btn-invoice-post").click(function(e){
            e.preventDefault();

            let formData = new FormData($('#frmInvoice')[0]);

            $.ajax({
                headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}" 
                },
                url: "custom-billing-discount",
                method: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data: formData,
                success: function(response)
                {
                    document.location.reload();
                }
            });
        });

        $("#btn-item-new").click(function(e){
            $('#frmItem').trigger("reset");
            $('#id').val('');
            $("#modal-item").modal("show");
        });
        
        $("#btn-item-post").click(function(e){
            e.preventDefault();
            
            let formData = new FormData($('#frmItem')[0]);
            //let id = $("#id").val();

            $.ajax({
                headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}" 
                },
                url: "custom-billing-items",
                method: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data: formData,
                success: function(response)
                {
                    window.location.reload();
                }
            });
        });

      $('body').on('click','#btn-item-delete',function(e){
            e.preventDefault();

            let id = $(this).data('id');
            if(!confirm('Data ' + id + ' akan di hapus dan tidak dapat dikembalikan. Lanjutkan?')){
                return;
            }
            
            $.ajax({
                headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}" 
                },
                url: "custom-billing-items",
                method: "DELETE",
                cache: false,
                data: {'id':id},
                success: function(response)
                {
                    window.location.reload();
                }
            });
        });        
</script>