<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Invoice Print</title>
    <style>
        @media print {

            /* Hide the URL */
            .url {
                display: none !important;
            }

            @page {
                margin: 0;
            }
        }

        * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }

        .container {
            width: 796px;
            display: block;
            margin: auto;
            padding: 0px 30px
        }

        h1 {
            font-size: 40px;
            font-weight: 400;
        }

        .invoice h1 {
            color: #00000088
        }

        p {
            font-weight: 400;
            margin-bottom: 5px;
        }

        .contact p {
            text-align: end;
        }

        .custom-header-text-color {
            color: #00000088
        }

        .header {
            display: flex;
            justify-content: space-between;
            padding: 20px 15px;
            background: {{$invoiceData['invoice_color']}};
            color: #fff;
            margin-bottom: 40px;
        }

        .header .invoice img {
            max-width: 180px;
            margin-top: 0px;
        }

        .text-uppercase {
            text-transform: uppercase;
        }

        .client-info {
            display: flex;
            flex-direction: row;
            padding: 0 15px;
        }

        .client-info .client-left {
            width: 50%;
        }

        .client-middel,
        .client-right {
            width: 25%;
        }

        .client-info h5,
        .terms h5 {
            font-weight: 400;
            color: #959595;
            text-transform: capitalize;
            margin-bottom: 10px;
        }

        .client-right h2 {
            font-size: 40px;
            color: #0D83DD;
            font-weight: 400;
            margin-top: 10px
        }

        .text-left{
            text-align: left !important;
        }

        .table-info {
            margin-top: 40px;
            width: 100%;
        }

        .total-info {
            display: flex;
            justify-content: flex-end;
            margin-top: 40px;
        }

        .table-total-info {
            width: 40%;
        }

        .table-total-info p {
            position: relative;
            color: #0D83DD;
            text-align: end;
            padding: 0px 120px 0px 0px;
        }

        .terms {
            width: 60%;
        }

        .custom-invoice-terms p {
            color: #00000088 !important;
            font-size: 15px;
        }

        .custom-invoice-terms-bold-color {
            color: #00000088;
            font-size: 15px;
        }

        .table-total-info p span {
            position: absolute;
            right: 0px;
            color: #000;
        }

        .margin-top {
            margin-top: 30px;
        }

        .custom-fw-bolder {
            font-weight: 600;
        }

        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 1rem;
            background-color: transparent;
            border-collapse: collapse;
        }

        .table td,
        .table th {
            padding: .75rem;
            vertical-align: top;
            border-top: 1px solid #dee2e6;
            text-align: center
        }

        .table thead th {
            vertical-align: bottom;
            border-bottom: 2px solid #dee2e6;
            text-align: left;
            text-transform: capitalize;
            color: #0D83DD;
            font-weight: 400;
            border-top: 3px solid #0D83DD;
            text-align: center;
            font-weight: 600;
        }

        .table tbody+tbody {
            border-top: 2px solid #dee2e6
        }

        .table .table {
            background-color: #fff
        }


        .table-bordered {
            border: 1px solid #dee2e6
        }

        .table-bordered td,
        .table-bordered th {
            border: 1px solid #dee2e6
        }

        .table-bordered thead td,
        .table-bordered thead th {
            border-bottom-width: 2px
        }

        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 0, 0, .05)
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="invoice">
                @if(isset($invoiceData['invoice_logo']) && $invoiceData['invoice_logo'] != null)
                <img class="custom-invoice-logo"
                    src="{{ asset('backend/uploads/invoiceLogoImg/'.$invoiceData['invoice_logo']) }}" class="img-fluid" />
                @else
                <h1>Invoice</h1>
                @endif
            </div>
            <div class="contact custom-header-text-color">
                <h3>Expense Between</h3>
                <p>{{Carbon\Carbon::parse($invoiceData['start_date'])->format('d-m-Y')}}</p>
                <p>to</p>
                <p>{{Carbon\Carbon::parse($invoiceData['end_date'])->format('d-m-Y')}}</p>
            </div>
        </div>
        <div class="client-info">
            <div class="client-left">
                <h5>invoice number</h5>
                <p>#{{$invoiceData['invoice']}}</p>
                <h5>date of issue</h5>
                <p>{{Carbon\Carbon::parse($invoiceData['date'])->format('d-m-Y')}}</p>
            </div>
            <div class="client-middel">
                
            </div>
            <div class="client-right">
                <h5>total expense(qty)</h5>
                <h2>{{$invoiceData['total_expense_qty']}}</h2>
            </div>
        </div>
        <div class="table-info">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Serial</th>
                        <th>Receipt By</th>
                        <th>Expense Qty</th>
                        <th>Expense Amount</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($invoiceData['expense_data'] as $key=>$item)
                    @if(isset($item) && $item != null)
                    <tr>
                        <td class="text-no-wrap">#{{$item->expense_receipt_id}}</td>
                        @php
                        // To get expense total qty and amount...
                        $totalExpenseQty = App\Models\ExpenseReceiptService::getTotalExpenseReceiptServiceQty($item->id);
                        $totalExpenseAmount = App\Models\ExpenseReceiptService::getTotalExpenseReceiptServiceAmount($item->id);
                        @endphp
                        <td class="text-no-wrap">{{Str::title($item->receipt_by)}}</td>
                        <td class="text-no-wrap">{{$totalExpenseQty}}</td>
                        <td class="text-no-wrap">{{$totalExpenseAmount}}tk</td>
                        <td class="text-no-wrap">{{Carbon\Carbon::parse($item->date)->format('d-m-Y')}}</td>
                    </tr>
                    @endif
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="total-info">
            <div class="terms custom-invoice-terms">
                <h5>invoice terms</h5>
                <p class="custom-invoice-terms-bold-color"><b>{!! $invoiceData['invoice_terms'] !!}</b></p>
            </div>
            <div class="table-total-info">
                <p>Expense Qty: <span>{{$invoiceData['total_expense_qty']}}</span></p>
                <p>Expense Amount: <span>{{$invoiceData['total_expense_amount']}}৳</span></p>
            </div>
        </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $( document ).ready(function() {
            $(function () {
                'use strict';
                window.print();
            });
        });
    </script>
</body>

</html>