Current File : //home/tradevaly/public_html/resources/views/user/pages/advertiser/invoice.blade.php

@extends('user.ayaan.master')
@push('title','nvoice Details || Advertisment')

@section('title') I @endsection
@section('css')
    <style>
        #invoice {
            margin-left: auto;
            margin-right: auto;
            background: #d0d0d044;
            position: relative;
            top: 0;
        }

        #invoice .table-bordered td, .table-bordered th {
            border: 1px solid #444 !important;
        }
        .card-title {
            font-size: 15px;
            margin: 0 0 7px;
            font-weight: 600;
            padding: 15px;
            background: #cdd7ef;
        }
    </style>
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Dashboard @endslot
        @slot('title') Invoice Details @endslot
    @endcomponent
    <div class="row justify-content-center">
        <div class="col-11">
            <div class="col-lg-12 text-end">
                @if($invoice->payment_status == 'unpaid')
                    <a class="btn btn-success my-2" href="{{ route('user.my.buy.advertiser.pospaid_payment',$invoice->id) }}">
                        <i class="fa fa-credit-card"></i> Pay now
                    </a>
                @endif
            </div>
            <div class="card" id="invoice">
                <div class="card-body p-5 pb-0">
                    <table style="width: 100%;">
                        <tr>
                            <td>
                                @php
                                    $settings = \Illuminate\Support\Facades\DB::table('logo')->first();
                                @endphp
                                @if(!empty($settings))
                                    <img
                                        src="{{asset('storage/images/admin/logo/'.$settings->image)}}"
                                        height="60" width="200" alt="">
                                @else
                                    <img
                                        src="{{asset('fav-icon.png')}}" height="60" width="200" alt="">
                                @endif
                            </td>
                            <td style="text-align: right">
                                <h3 class="text-uppercase text-dark fw-bold">
                                    Tradevaly
                                </h3>
                                <p>{{ settings()->address }}</p>
                            </td>
                        </tr>
                    </table>
                    <div class="card-title mb-4 d-flex align-items-center justify-content-between">
                        <h5 class="m-0">Invoice ID: {{ $invoice->order_id }}</h5>
                        <h5 class="m-0">Invoice Date: {{ date('F m Y', strtotime($invoice->created_at)) }}</h5>
                        <h5 class="m-0">
                            Payment Status:
                            <span class="text-uppercase badge bg-{{ $invoice->payment_status == 'paid' ? 'success':'danger' }}">{{ $invoice->payment_status }}</span>
                        </h5>
                    </div>
                    <div class="col-lg-4 col-12">
                        <h5>Invoiced To</h5>
                        <h6 class="mb-2"><b>{{ $invoice->user->industry }}</b></h6>
                        <p class="mb-2">{{ $invoice->user->name }}</p>
                        <p class="mb-2">{{ $invoice->user->address }}</p>
                        <p class="mb-2">{{ $invoice->user->phone ?? '' }}</p>
                        <p class="mb-2">{{ $invoice->user->email }}</p>
                    </div>
                    <table class="table table-bordered mt-4">
                        <thead>
                        <tr>
                            <th>Description</th>
                            <th>Amount</th>
                            <th>Duration</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <span
                                    class="text-capitalize">{{ str_replace('_',' ',$invoice->advertiser_name) }}</span>
                            </td>
                            <td><span
                                    class="text-uppercase">{{$invoice->currency }}</span> {{ number_format($invoice->amount,2) }}
                            </td>
                            <td>{{ $invoice->duration }} Month</td>
                            <td>
                                 @if(!empty($invoice->banner->start))
                                {{ date('d/m/Y',strtotime($invoice->banner->start)) }}
                                @else
                                <span style="font-size: 10px;filter: blur(3px);">Time will execute after banner upload</span>
                                @endif
                               
                            <td>
                                @if(!empty($invoice->banner->end))
                                {{ date('d/m/Y',strtotime($invoice->banner->end)) }}
                                @else
                                <span style="font-size: 10px;filter: blur(3px);">Time will execute after banner upload</span>
                                @endif
                                
                                </td>
                        </tr>
                        </tbody>
                    </table>
                    @if(empty($invoice->banner->end))
                    <p><strong>Terms & Condition : </strong>Subscribers, enchant us! Upload banners within 7 days. 🌟📜</p>
                  @endif
                </div>
                <div class="col-lg-12 py-5 text-center">
                    <p class="d-flex justify-content-between ps-5 pe-5"><span>This is an electronic money receipt signature is not required.</span> <span>Powered by<b>Tradevaly.</b></span> </p>
                </div>
            </div>
            <div class="col-lg-12 text-center my-5">
                <a class="btn btn-info my-2" href="{{ route('admin.advertiser.index') }}">
                    <i class="fa fa-arrow-left"></i> Back to list
                </a>
                <a href="javascript:" class="btn btn-success" id="downloadInvoice">
                    <i class="fa fa-download"></i> Download PDF
                </a>
                <a href="javascript:" class="btn btn-warning" onclick="printHandler()">
                    <i class="fa fa-print"></i> Print
                </a>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript">
        $(document).ready(function($){
            $('#downloadInvoice').on('click',function(event){
                event.preventDefault();
                const element = document.getElementById("invoice");

                var options = {
                    margin: [0, 0, 0, 0],
                    filename: "invoice.pdf",
                    image: { type: "jpeg", quality: 0.98 },
                    html2canvas: { scale: 3, y: 0,  scrollY: 0},
                    jsPDF: { unit: "px", format: [800,800], orientation: "portrait" },
                };
                html2pdf().set(options).from(element).save();
            })
        })

        function printHandler() {
            var printableContent = document.getElementById('invoice')
            var printContents = printableContent.innerHTML;
            var originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            window.setTimeout(function () {
                document.title = "Invoice"
                window.print();
                document.body.innerHTML = originalContents;
                window.location.reload()
            }, 1000);
        }
    </script>
@endsection