@extends('layout')
@section('content')
   
    <style>
        .invoice {
            padding: 30px;
        }
        .invoice h2 {
            margin-bottom: 20px;
        }
        .table-invoice th, .table-invoice td {
            padding: 12px;
        }
        .total {
            font-size: 1.25rem;
            font-weight: bold;
        }
         /* invoice code */

       
         .invoice-box  table {
        border-spacing: 0;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        background-color: #ffffff;
        border-radius: 8px;
      }
      .invoice-box img {
        display: block;
        max-width: 200px;
      }
      .invoice-box  h1 {
        color: #333;
        font-size: 24px;
        text-align: center;
      }
      .invoice-box p {
        color: #666;
        font-size: 12px;
        line-height: 1.6;
        padding: 0 10px;
      }
      .invoice-box .invoice-header {
        background-color: #2a6282;
        color: white;
        text-align: center;
        padding: 20px 0;
      }
      .invoice-box .invoice-details {
        padding: 20px;
        background-color: #f7f7f7;
      }
      .invoice-details h3 {
        margin: 0;
        color: #2a6282;
        font-size: 18px;
      }
   
      .invoice-box .invoice-table {
        width: 100%;
        padding: 20px;
      }
      .invoice-box .invoice-table th, .invoice-table td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      .invoice-box .invoice-table th {
        background-color: #2a6282;
        color: white;
      }
      .invoice-box .total-row {
        font-size: 14px;
        font-weight: bold;
        text-align: right;
      }
      .invoice-box .footer {
        background-color: #2a6282;
        color: white;
        padding: 20px;
        text-align: center;
        font-size: 12px;
        border-radius: 0 0 8px 8px;
      }
        tr{
            cursor:pointer;
        }
        .invoice-box h4{
            font-size:13px;
        }
        .invoice-box h3{
            font-size:15px;
            font-weight:bold;
        }
        .btn-color{
            background-color:#e4eaec !important;
            color:black;
        }
        .btn-color:hover{
            background-color:#f5f5f5 !important;
        }
    </style>
<main class="main-content">
        <div class="page-header m-0 border-0">
            <h3>  Payment Receipt</h3>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">{{__('message.dashboard')}}</a></li>
                    <li class="breadcrumb-item" aria-current="page"><a href="{{ asset('account/edit-payment-receive/'.$invoice->id) }}">Payment</a></li>
                    
                </ol>
            </nav>
        </div>
        

       
        
        <div class="row">
            
            <div class="col-md-12 bg-white border-left">
                <div class="row px-3">
                    <div class="col-md-12 d-flex justify-content-between py-3 bg-white shadow-sm border-bottom" >
                        <div class="">                            
                        <a class="btn btn-color" href="{{asset('account/edit-payment-receive/'.$invoice->id)}}"><i class="fa fa-pencil"></i>&nbsp; Edit</a>
                            <button class="btn btn-color print-invoice" type="button"><i class="fa fa-file"></i> &nbsp;Pdf Download</button>
                            
                            <button class="btn btn-color payment-invoice" type="button"><i class="fa fa-money"></i> &nbsp;Payment</button>
                           
                        </div>
                        <div>
                            <a href="{{asset('account/payment')}}" class="border p-2">
                                <i class="fa fa-times" style="font-size:16px;"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="invoice-box shadow-sm" id="invoice-box">
                    <div class="w-full">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="main-box" style="background:white;padding:20px;margin:auto;border-radius:4px;">
                                    <div class="row mb-2">
                                        <div class="col-md-4">
                                            <div>
                                                <img src="{{asset('public/logo.png')}}" alt="logo" style="width:150px">
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            
                                        </div>

                                        <div class="col-md-4">
                                            <div class="mt-2 d-flex justify-content-between">
                                            <p class="text-uppercase" style="color:black; margin:0;font-weight: 500;font-size:17px;">Payment Receipt  </p>
                                            <h4 style="color:black; margin:0;text-align: end;"> # {{$invoice->payment_number}}</h4>
                                            </div>
                                        </div>

                                        
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div>
                                                <p class="s1" style="padding-left: 5pt;text-indent: 0pt;"><b>Blurb Software Private Limited</b></p>
                                                <p style="padding-left: 5pt;text-indent: 0pt;text-align: left;margin:0">
                                                    7th Floor, TS-01, Galaxy Blue Sapphire Plaza, 
                                                    Plot No. C-03, Sector-4, Haibatpur, 
                                                    Greater Noida, Ghaziabad, Uttar Pradesh 201306
                                                </p>
                                                    <p style="padding-left: 5pt;text-align: left;margin:0">Phone : (+91-) 8851286001</p>
                                                    <p style="margin:0;padding-left: 5pt;text-indent: 0pt;text-align: left;color:black;">
                                                        
                                                         Email :  mail@blurb.global
                                                        
                                                    </p>
                                                    <p style="margin:0;padding-left: 5pt;text-indent: 0pt;text-align: left;color:black;">
                                                        
                                                        GSTIN : 09AAHCE7283K1Z1
                                                        
                                                    </p>
                                                    <p style="margin:0;padding-left: 5pt;text-indent: 0pt;text-align: left;color:black;">
                                                        
                                                        Website :  www.blurb.global
                                                        
                                                    </p>
                                                    <p></p>
                                                    <p class="s2" style="padding-top: 1pt;padding-left: 5pt;text-indent: 0pt;text-align: left;">Contact Name: <span  class="p">Abhishek Shahu</span></p>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <p class="m-0 p-0" style="color:black;">Receipt To</p>
                                            <p class="m-0 p-0 text-capitalize" style="color:black">{{$invoice->customer_name}}</p>
                                            <p class="m-0 p-0" >{{$invoice->shipping_address}}</p>
                                        </div>

                                        <div class="col-md-4 mt-3">
                                                <div class="amount-due d-flex justify-content-between" style="background:#2a6282;padding:3px 20px 3px 20px">
                                                <p style="font-size: 17px;font-weight: 300;margin:0;padding:0;color:white;">Amount Due : </p>
                                                <p style="font-size: 17px;font-weight: 300;margin:0;padding:0;color:white;">₹ {{$invoice->amount}} </p>
                                                </div>

                                                <div class="row mt-4">

                                                    <div class="col-md-6">
                                                        <div>
                                                        <p class="s4" style="text-indent: 18pt;line-height: 138%;text-align: right;margin:0">Receipt Date: </p>
                                                        
                                                        <p class="s4" style="text-indent: 18pt;line-height: 138%;text-align: right;margin:0">                 Place of Supply:                          </p>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div>
                                                        <p style="padding-left: 16pt;text-indent: 0pt;margin:0;text-align: end;">{{$invoice->date }}</p>
                                                        
                                                        <p style="text-indent: 0pt;text-align: right;margin:0;text-align: end;text-transform:capitalize;">{{$invoice->shipping_address}}</p>
                                                        </div>
                                                    </div>
                                                
                                                </div>
                                        </div>


                                    </div>


                                    <div class="row mt-4">
                                    
                                            
                                        <table class="table w-100" >
                                            <tr style="background:#2a6282; ">
                                                <th style="color:white; font-size: 14px;;">S.No  </th>
                                                <th style="color:white; font-size: 14px;">Bill Number</th>
                                                
                                                <th style="color:white; font-size: 14px;">Due Date</th>
                                                <th style="color:white; font-size: 14px;">Amount</th>
                                                <th style="color:white; font-size: 14px;">Payment</th>
                                                
                                            </tr>
                                            
                                            @foreach($invoice_items as $key=>$item)
                                            
                                            <tr>
                                                <td>{{++$key}}</td>
                                                <td>{{$item->invoice_number}}</td>
                                        
                                                <td>{{$item->due_date}}</td>
                                                <td>
                                                    {{$item->amount_due}}
                                                
                                                </td>
                                                <td>
                                                    {{$item->payment_value}}
                                                </td>
                                                                                            
                                            </tr>
                                            @endforeach
                                        
                                            
                                            </tr>

                                            
                                        </table>
                                    
                                    </div>
                                </div>
                            </div>
                            

                            <p style="padding-left: 430pt;text-indent: 0pt;line-height: 1pt;text-align: left;"></p>
                            <p class="s22" style="padding-top: 8pt;text-indent: 0pt;text-align: right;">Provider Signature</p>
                                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
  
                    

                    



            <!-- The Modal -->
    <div class="modal" id="shareModal">
            <div class="modal-dialog rounded-none  modal-dialog-centered" >
                <div class="modal-content ">

                <!-- Modal Header -->
                <div class="modal-header bg-success">
                    <h4 class="modal-title">Share Invoice Link</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <h5>Visibility: PUBLIC</h5>
                            <label>Share this invoice using this link:</label>
                            <div class="d-flex">
                                <input type="text" class="form-control">
                                <button class="btn"><i class="fa fa-copy"></i></button>
                            </div>
                        </div>
                        <p>
                            <b class="rounded-circle  bg-dark px-1">i</b> This link can be shared with your client. 
                            They will see this document in a separate interface. 
                            The link will remain valid and can be viewed by anyone who has the above URL.
                        </p>
                    
                    </form>
                </div>

                <!-- Modal footer -->
                

                </div>
            </div>
    </div>
     
</main>


@endsection

@push('footer-script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
<script>
    $(document).ready(function(){
        //filter company code
        $(".filter-company-btn").click(function(){
           
           if($(".filter-form-box").hasClass("d-none"))
           {
               $(".filter-form-box").removeClass("d-none");
           }
           else
           {
               $(".filter-form-box").addClass("d-none");
           }
       });

       //share invoice link btn

       $(".share-link-btn").click(function(){
            $("#shareModal").modal("show");
       });

       $(".print-invoice").click(function(){
            var element = document.querySelector(".invoice-box"); 
            var opt = {
                margin: 0.3,
                filename: 'receipt.pdf',
                image: { type: 'jpeg', quality: 1 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'in', format: 'a4', orientation: 'landscape' }
            };

           
            html2pdf().set(opt).from(element).save();
       });
    });
</script>


@endpush
