@extends('layouts.master')
@php
    use Illuminate\Support\Carbon;

@endphp

@section('content')

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>

<style>
    .invoice-header,
    .invoice-footer {
        /* text-align: center;
        margin-bottom: 20px; */
        height: auto;
        width: 100%;
    }

    .invoice-header img,
    .invoice-footer img {
        max-width: 100%;
    }

    .invoice-details {
        margin-bottom: 20px;
    }

    .invoice-details,
    .invoice-items {
        width: 100%;
        border-collapse: collapse;
    }

    .invoice-details td,
    .invoice-items th,
    .invoice-items td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    .invoice-items th {
        background-color: #f4f4f4;
    }

    .text-right {
        text-align: right;
    }

    .total {
        font-weight: bold;
    }

    .invoice-body {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .invoice-body p {
        margin: 0;
        padding: 5px 0;
    }

    .invoice-itemss table {
        height: auto;
        width: 100%;
    }

    .invoice-itemss thead {
        background: linear-gradient(to left, #9b64d9, #074bae);
        padding: 5px;
    }
</style>
    </style>
<div class="container my-5 px-5 py-5">
    <div id="contentToDownload" class="container p-5 bg-white border-1 ">
        <div class="row">
            <div class="col-6">
                <img src="{{ asset('asset/images/pro_pic/Betterbots-logo.png') }}" alt="Betterbots Logo">
                <hr>
            </div>
            <div class="col-6 mt-5">
                <div class="text-center">
                     <h1>I N V O I C E</h1>
                </div>
                <div class="text-end p-2">
                     <h6>GSTIN - 33AAMCB0254C1Z8</h6>
                </div>
                <div class="text-end p-2">
                     <h6>support@betterbots.in</h6>
                </div>

            </div>
        </div>
        <div class="row mt-5">
            <div class="col-6 p-5">
                <div class="text-start">
                    <p>ISSUED TO:  {{$bill->company}}</p>
                    <p>{{$bill->country}}</p>
                    {{-- <p>Near Railway Station,</p>
                    <p>Coimbatore - 641001</p> --}}
                </div>
            </div>
            <div class="col-6 p-5">
                <div class="text-end">
                     <p><b>Invoice No:</b> INV {{$bill->id}}</p>
                     <p><b>Date:</b> {{Carbon::parse($bill->billing_date)->format('d-m-Y')}}'</p>
                </div>
            </div>
        </div>
        <div class="row mt-1">
                <table>
            <thead style="border-bottom: 2px solid black;">
                <tr>
                    <th>#</th>
                    <th>Description</th>
                    <th class="text-right">Unit</th>
                    <th class="text-right">Qty </th>
                    <th class="text-right">Total</th>

                </tr style="">

            </thead>
            <tbody style="border-bottom: 2px solid black;">
                <tr>
                    <td>1</td>
                    <td> {{$bill->name}}'</td>
                    <td class="text-right"> {{$bill->price}}</td>
                    <td class="text-right"> 1</td>
                    <td class="text-right">{{$bill->price}}</td>
                </tr>
                <tr>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                </tr>
                <tr>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                </tr>
                <tr>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>

                </tr>
                <tr>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>
                        <td style="padding: 10px;"></td>

                </tr>

            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" class="text-right total">Subtotal</td>
                    <td class="text-right total">{{$bill->price}}</td>
                </tr>
                <tr>
                    <td colspan="4" class="text-right total">Tax ({{$tax_table->gst}}%)</td>
                    <td class="text-right total">{{$taxamount}}</td>
                </tr>
                <tr>
                    <td colspan="4" class="text-right total">Total</td>
                    <td class="text-right total">{{$total_amount}}</td>
                </tr>
            </tfoot>
        </table>
        </div>
        <div class="row" style="margin-top:190px">
            <div class="text-end">
               <h6> For BetterBots</h6>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end py-3">
        <button type="button" class="btn" id="downloadBtn" style="background:#52050A;color:#ffffff">Download</button>
    </div>
</div>

<script>
    document.getElementById('downloadBtn').addEventListener('click', function() {
        var element = document.getElementById('contentToDownload');
        var opt = {
            margin: 0,
            filename: 'invoice.pdf',
            image: {
                type: 'jpeg',
                quality: 0.98
            },
            html2canvas: {
                scale: 2
            },
            jsPDF: {
                unit: 'in',
                format: 'letter',
                orientation: 'portrait'
            }
        };
        html2pdf().set(opt).from(element).save();
    });
</script>
@endsection