@extends('layouts.app')
@section('title')
    Print Expenses
@endsection
@section('header-script')
    <style>
        header {
            padding: 10px 0;
            margin-bottom: 15px;
            border-bottom: 1px solid #AAAAAA;
        }

        #logo {
            float: left;
            margin-top: 6px;
        }

        #logo img {
            height: 150px;
        }

        #company {
            float: right;
            text-align: right;
        }

        #details {
            margin-bottom: 50px;
        }

        .column {
            float: left;
            width: 50%;
            padding: 10px;
            height: 50px; /* Should be removed. Only for demonstration */
        }

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
@endsection
@section('content')
    <div id="page-wrapper">
        <div id="printcontent" style="padding: 5px; overflow: hidden;">
            <div class="main-page">
                <div class="panel">
                    <div class="form-title bg-light ">
                        <header class="clearfix" id="company_details" style="display:none"><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                            <table cellpadding="0" cellspacing="0" >
                                <tr class="top">
                                    <td colspan="2">
                                        <table>
                                            <tr>
                                            <td>
                                                <img src="{{ asset('/storage/app/public/'.$company->logo) }}"  style="width: 180px; height:120px">
                                                </td>
                                                <td>
                                                 <h2 style="padding-left:40px;color:#297f39">DREAM HEAVEN HOUSING LTD. </h2>
                                                 <p style="text-align:center;padding-left:10px; line-height:20px;"><b>5B-1,Ittefaq Bhaban,1,R.K Mission Road,Dhaka-1203<br>
                                                    Tel: 02-9512433, Mobile: 01915-618117</b><br>
                                                    <b style="color:#297f39">www.dhhl.ltd</b>
                                                    </p>
                                                </td>

                                                  <td>

                                                  </td>

                                            </tr>
                                        </table>
                                    </td>
                                </tr>

                            </table> </header>
                    </div>
                    <div class="row">
                        <div class="column">
                            <div class="input-group date" data-date-format="yyyy.mm.dd">
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-th">  From</span>
                                </div>
                                <input value="{{ date("Y-m-d") }}" id="StartDate" type="text" name="from"
                                       class="form-control">
                            </div>
                        </div>
                        <div class="column">
                            <div class="input-group date" data-date-format="yyyy.mm.dd">
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-th">  To</span>
                                </div>
                                <input value="{{date("Y-m-d")}}" id="EndDate" type="text" name="to"
                                       class="form-control">
                            </div>
                        </div>
                    </div>

                    <div class="panel-body">
                        <div style="margin-bottom: 40px">
                            <h3>Total Expense : {{ $total }}</h3>
                        </div>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Date</th>
                                    <th scope="col">Description</th>
                                    <th scope="col">Amount</th>
                                    <th scope="col">Expense Purpose</th>
                                    <th scope="col">Note</th>
                                </tr>
                                </thead>
                                <tbody>
                                @php
                                    $total =0 ;
                                @endphp
                                @foreach($expenses as $expense)
                                    <tr>
                                        <th scope="row">{{ $loop->index +1 }}</th>
                                        <td>{{ Carbon\Carbon::parse($expense->date)->format('d-M-Y ') }}</td>
                                        <td>{{ $expense->description }}</td>
                                        <td>{{ $expense->amount }}</td>
                                        <td>{{ $expense->expenseHead['name'] }}</td>
                                        <td>{{ $expense->note }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div>
                            <button type="button" class="btn btn-primary print_btn btn-block btn-sm"
                                    onclick="printDiv('printcontent');"><i class="fa fa-print"></i> Print
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('footer-script')
    <script type="text/javascript">
        function printDiv(divName) {
            $('.print_btn').css('display', 'none');
            var printContents = document.getElementById(divName).innerHTML;
            var originalContents = document.body.innerHTML;

            document.body.innerHTML = printContents;

            window.print();

            document.body.innerHTML = originalContents;
            $('.print_btn').css('display', 'block');
            window.location.href = "{{ url()->current() }}";
        }
    </script>
@endsection