@extends('layouts.admin')
@section('title','Sponsored Ads Manager')
@section('page_title','')

@section('page_level_css')
<link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
<style>
    .pdf-error-message {
        font-weight: bold !important;
        color: red;
    }
</style>
@endsection

@section('content')
<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor pt-2" id="kt_content">

    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">

        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root ">
            <div class="top_main_title">
                <div class="labpair-title">
                    <p>
                        <span class="title">SPONSORED ADS MANAGER</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- end:: Page -->

        <div class="inner-main-section mt-3 pt-3">
            <div class="row">
                <div class="col-12">
                    <div class="example-preview">
                        <ul class="nav nav-pills mb-0 pl-md-5" id="myTab1" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" href="#">
                                    <span class="nav-text">Sponsored Ads</span>
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent1">
                            <div class="tab-pane fade show active" id="home-1" role="tabpanel" aria-labelledby="home-tab-1">
                                <div class="info-section">
                                    <p>
                                        <strong>EXPLANATION:</strong>
                                        Use this component to create and manage sponsored ad content.
                                    </p>
                                </div>

                                <div class="search-section mt-2 mb-2 row">
                                    <div class="col-sm-12">
                                        <div class="form-group mb-2">
                                            <div class="input-group">
                                                <button href="javascript:void(0);" id="createNewAd" class="primary-btn" data-toggle="modal" data-target="#createAdModal">Create Ad</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="input-group col-sm-4">
                                        <input type="text" class="coustom-form-control ads-search-input" id="search_company_name" placeholder="Company Name">
                                    </div>
                                    <div class="input-group col-sm-2">
                                        <input type="text" class="coustom-form-control form-control-sm ads-search-input" name="search_start_date" id="search_start_date" placeholder="MM/DD/YY">
                                    </div>
                                    <div class="input-group col-sm-2">
                                        <input type="text" class="coustom-form-control form-control-sm ads-search-input" name="search_end_date" id="search_end_date" placeholder="MM/DD/YY">
                                    </div> -->
                                </div>

                                <div class="search-section mt-2 mb-2">
                                    <table class="table search-input-table">
                                        <tr>
                                            <td colspan="2" scope="col" width="40%">
                                                <input type="text" class="form-control" placeholder="Company Name" id="search_company_name">
                                            </td>
                                            <td scope="col" width="15%">
                                                <div class="input-group">
                                                    <input type="text" class="form-control" placeholder="MM/DD/YY" id="search_start_date">
                                                    <div class="input-group-append search_start_date">
                                                        <span class="input-group-text">
                                                            <i class="la la-calendar-check-o"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td scope="col" width="15%">
                                                <div class="input-group">
                                                    <input type="text" class="form-control" placeholder="MM/DD/YY" id="search_end_date">
                                                    <div class="input-group-append search_end_date">
                                                        <span class="input-group-text">
                                                            <i class="la la-calendar-check-o"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td scope="col" colspan="2" width="20%"></td>
                                            <td scope="col" width="10%"><button class="primary-btn" id="clearSearchInputbox">Clear</button></td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="some-custom-datatable">
                                    <div class="kt-portlet__body bg-white adding-table w-100 h-100 th-white">
                                        <!--begin: Datatable -->
                                        <table class="table table-striped- table-hover table-checkable" id="dataTableList">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>Company</th>
                                                    <th>Ad First Run Date</th>
                                                    <th>Ad End Date</th>
                                                    <th>Ad Impressions</th>
                                                    <th>Ad Click-Through Count</th>
                                                    <th>CTR %</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                        <!--end: Datatable -->

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

                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
    <button type="button" class="showGeneralMemberModal" data-toggle="modal" data-target="#showGeneralMemberInformation" style="display: none;">Show General Member Details</button>
    <button type="button" class="showDeclineModal" data-toggle="modal" data-target="#showDeclineUserModal" style="display: none;">Show Decline Modal</button>
</div>

<!--begin::Modal-->

<style>
    .edit-popup .side-button{
        width: 100%;
    }
    .danger-btn {
        width: 100%;
        max-width: 135px;
        padding: 8px;
        border-radius: 8px;
        border: 1px solid transparent;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        background-color: #de0202;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        -webkit-box-shadow: 5.196px 3px 15px rgb(0 0 0 / 30%);
        box-shadow: 5.196px 3px 15px rgb(0 0 0 / 30%);
        text-transform: capitalize;
    }
    
    .danger-btn:hover {
        border: 1px solid #de0202;
        color: #de0202;
        background-color: #fff;
    }
    .form-detail .danger-btn {
        min-width: 150px;
    }
    .sponsored-wrapper .danger-btn {
        width: 100%;
        max-width: 130px;
        padding: 8px;
        border-radius: 8px;
        border: 1px solid transparent;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        background-color: #de0202;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        -webkit-box-shadow: 5.196px 3px 15px rgb(0 0 0 / 30%);
        box-shadow: 5.196px 3px 15px rgb(0 0 0 / 30%);
        text-transform: capitalize;
    }
</style>

<div class="modal fade" id="createAdModal" data-backdrop="false">
    <div class="modal-dialog edit-popup pop-up style-2">
        <div class="modal-content" style="background-color: #f5f5f5;">
            <div class="modal-header blue-header">
                <h5 class="modal-title" id="exampleModalLabel">Create Ad</h5>
                <button type="button" class="close resetPostButton" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form action="{{getAURL('sponsored-ads/save-advertise')}}" method="POST" enctype="multipart/form-data" id="addEditForm">
                @csrf
                <input type="hidden" name="id_for_update" id="id_for_update">
                <input type="hidden" name="id_for_preview" id="id_for_preview" value="{{$id_for_preview}}">

                <div class="modal-body padd-left-10 padd-right-10 pt-0 pb-0">
                    <div class="kt-section__body">
                        <p class="required text-danger">* Required field</p>
                        <div class="side-button text-right">
                            <button type="button" class="danger-btn btn-wide mb-4 deletePostButton" id="deletePostButton" data-toggle="modal" data-target="#showDeleteModel">Delete Ad</button>
                            <button type="button" class="primary-btn btn-wide mb-4 viewPostAsMemberButton" id="viewPostAsMemberButton">View Ad as Member</button>
                        </div>
                        <div class="switch-wrapper header-top-onoff runningAdsStatus">
                            <span class="error-message pr-3"><b>Ad Running Status:</b></span>
                            <label class="switch switch-left-right changedStatus">
                                <input class="switch-input" type="checkbox" name="run_status" id="run_status" data-id="">
                                <span class="switch-label" data-on="On" data-off="Off"></span>
                                <span class="switch-handle"></span>
                            </label>
                        </div>
                        <div class="row align-items-center">
                            <label class="col-md-3 text-lg-right label">Company Name <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-4">
                                <input type="text" name="company_name" id="company_name" class="form-control inputAdsModule" placeholder="Company Name">
                            </div>
                        </div>
                        <div class="row" id="displayCompanyLogoBox" style="display: none;">
                            <div class="form-group mt-3 mb-2 offset-3">
                                <img src="" alt="Image" class="img-fluid" id="displayCompanyLogo">
                            </div>
                        </div>

                        <div class="row">
                            <label class="col-md-3 text-lg-right label">Company Logo <span class="text-danger">*</span>:</label>
                            <div class="form-group mb-2">
                                <input type="hidden" name="company_logo_preview" id="company_logo_preview">
                                <input type="file" name="company_logo" id="company_logo" class="form-control browse inputAdsModule" accept="image/*">
                                <span class="d-block error-message mt-2">Images must be 150 x 100 pixels</span>
                            </div>
                        </div>

                        <div class="row align-items-center">
                            <label class="col-md-3 text-lg-right label">Ad First Run Date <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-3 datepicker">
                                <input type="text" class="form-control inputAdsModule" autocomplete="off" name="start_date" id="start_date">
                                <i class="fas fa-calendar-check icon"></i>
                            </div>
                        </div>
                        <div class="row align-items-center">
                            <label class="col-md-3 text-lg-right label">Ad End Run Date <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-3 datepicker">
                                <input type="text" class="form-control inputAdsModule" autocomplete="off" name="end_date" id="end_date">
                                <i class="fas fa-calendar-check icon"></i>
                            </div>
                        </div>

                        <label class="col-12 label border-bottom pop-up mb-4 title-text">Payment Information</label>
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="row">
                                    <label class="col-md-5 text-lg-right label">Has the payment been made? <span class="text-danger">*</span></label>
                                    <div class="d-flex flex-column col-md-7">
                                        <div class="form-check p-0">
                                            <input type="radio" class="PaymentYesRadio inputPaymentModule" name="payment" id="payment_yes" value="Yes">
                                            <label for="payment_yes">Yes, a payment has been made.</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-4 PaymentYesContent" style="display: none;">
                                    <div class="col-md-12 row mb-1">
                                        <label class="col-md-8 text-lg-right label">When was the payment made? <span class="text-danger">*</span>:</label>
                                        <div class="form-detail col-md-4">
                                            <input type="text" class="form-control inputPaymentModule" name="payment_date" id="payment_date" placeholder="MM/DD/YY" value="{{date('M d, Y')}}">
                                        </div>
                                    </div>
                                    <div class="col-md-12 row mb-1">
                                        <label class="col-md-8 text-lg-right label">Transaction ID :</label>
                                        <div class="form-detail col-md-4">
                                            <input type="text" class="form-control inputPaymentModule" name="transaction_number" id="transaction_number" placeholder="Transaction ID">
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-4">
                                    <label class="col-md-5 text-lg-right label"></label>
                                    <div class="d-flex flex-column col-md-7">
                                        <div class="form-check p-0">
                                            <input type="radio" class="PaymentNoRadio inputPaymentModule" name="payment" id="payment_no" value="No" checked>
                                            <label for="payment_no">No, a payment has not been made.</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-4 PaymentYesContent" style="display: none;">
                                    <label class="col-md-5 text-lg-right label">Payment Method <span class="text-danger">*</span>:</label>
                                    <div class="d-flex flex-column col-md-7">
                                        <div class="form-check p-0">
                                            <input type="radio" class="PaymentMethodCredit inputPaymentModule" name="payment_method" id="payment_method_credit" value="CreditCard">
                                            <label for="payment_method_credit" class="mr-3">Credit Card</label>

                                            <input type="radio" class="PaymentMethodCheck inputPaymentModule" name="payment_method" id="payment_method_check" value="Check" checked>
                                            <label for="payment_method_check">Check</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="PaymentMethodCheckBox" style="display: none;">
                                    <div class="row mb-1 align-items-center">
                                        <label class="col-md-6 text-lg-right label">Check Number <span class="text-danger">*</span>:</label>
                                        <div class="form-detail col-md-6">
                                            <input type="number" class="form-control inputPaymentModule" name="check_number" id="check_number" placeholder="563546298">
                                        </div>
                                    </div>
                                    <div class="row mb-1 align-items-center">
                                        <label class="col-md-6 text-lg-right label">Name on Check <span class="text-danger">*</span>:</label>
                                        <div class="form-detail col-md-6">
                                            <input type="text" class="form-control inputPaymentModule" name="check_user_name" id="check_user_name" placeholder="Carol C. Baskins">
                                        </div>
                                    </div>
                                    <div class="row mb-1 align-items-center amountDollarClass">
                                        <label class="col-md-6 text-lg-right label">Amount <span class="text-danger">*</span>:</label>
                                        <div class="form-detail col-md-4 input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">$</span>
                                            </div>
                                            <input type="number" class="form-control inputPaymentModule" name="check_amount" id="check_amount" placeholder="20,000.00">
                                        </div>
                                    </div>
                                </div>
                                <div class="PaymentMethodCreditBox" style="display: none;">
                                    <div class="row mb-1 align-items-center">
                                        <label class="col-md-6 text-lg-right label">Credit Card Number <span class="text-danger">*</span>:</label>
                                        <div class="form-detail col-md-6">
                                            <input type="number" class="form-control disabled" name="card_number" id="card_number" disabled readonly>
                                        </div>
                                    </div>
                                    <div class="row mb-1 align-items-center">
                                        <label class="col-md-6 text-lg-right label">Name on Card <span class="text-danger">*</span>:</label>
                                        <div class="form-detail col-md-6">
                                            <input type="text" class="form-control disabled" name="card_user_name" id="card_user_name" disabled readonly>
                                        </div>
                                    </div>
                                    <div class="row mb-1 align-items-center">
                                        <label class="col-md-6 text-lg-right label">CVV/CVC <span class="text-danger">*</span>:</label>
                                        <div class="form-detail col-md-4">
                                            <input type="number" class="form-control disabled" name="card_cvv" id="card_cvv" disabled readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-1 mt-4 align-items-center amountDollarClass">
                                    <label class="col-md-6 text-lg-right label">Cost <span class="text-danger">*</span>:</label>
                                    <div class="form-detail col-md-4 input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                        </div>
                                        <input type="number" class="form-control inputAdsModule" name="amount" id="amount" placeholder="250.00">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="bill-address-bg">
                                    <h2 class="title-text">Billing Address:</h2>
                                    <div class="row align-items-center">
                                        <label class="col-md-3 text-lg-right label">Address <span class="text-danger">*</span>:</label>
                                        <div class="form-detail col-md-9 mb-2">
                                            <input type="text" class="form-control inputAdsModule" name="bill_address_1" id="bill_address_1" placeholder="Address Line 1">
                                        </div>
                                        <label class="col-md-3 text-lg-right label"></label>
                                        <div class="form-detail col-md-9">
                                            <input type="text" class="form-control" name="bill_address_2" id="bill_address_2" placeholder="Address Line 2">
                                        </div>
                                    </div>
                                    <div class="row align-items-center mt-2 mb-1">
                                        <label class="col-md-3 text-lg-right label">City <span class="text-danger">*</span>:</label>
                                        <div class="form-detail col-md-3">
                                            <input type="text" class="form-control inputAdsModule" name="bill_city" id="bill_city" placeholder="City">
                                        </div>
                                        <label class="col-md-3 text-lg-right label">State <span class="text-danger">*</span>:</label>
                                        <div class="form-detail col-md-3">
                                            <input type="text" class="form-control inputAdsModule" name="bill_state" id="bill_state" placeholder="State">
                                        </div>
                                    </div>
                                    <div class="row align-items-center">
                                        <label class="col-md-3 text-lg-right label">Zipcode <span class="text-danger">*</span>:</label>
                                        <div class="form-detail col-md-3">
                                            <input type="number" class="form-control inputAdsModule" name="bill_zip" id="bill_zip" placeholder="Zipcode">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-4 align-items-center">
                            <label class="col-md-3 text-lg-right label">Transaction Number:</label>
                            <div class="form-detail col-md-3 TransactionNumber">
                                <span class="text-decoration-underline showAdvertiseInvoiceModal" id="unique_number" data-id="">XXX XXX XXX</span>
                            </div>
                        </div>
                        <div class="row mb-4">
                            <label class="col-md-3 text-lg-right label">Private Note:</label>
                            <div class="form-detail col-md-9">
                                <input type="text" class="form-control custom-border" name="private_note" id="private_note" placeholder="Private Note">
                                <span class="error mt-2 d-block">The above note <b>WILL NOT</b> display on the
                                    invoice or the receipt.</span>
                            </div>
                        </div>
                        <div class="row mb-4">
                            <label class="col-md-3 text-lg-right label">Public Note:</label>
                            <div class="form-detail col-md-9">
                                <input type="text" class="form-control custom-border" name="public_note" id="public_note" placeholder="Public Note">
                                <span class="error mt-2 d-block">The above note <b>WILL</b> display on the
                                    invoice or the receipt.</span>
                            </div>
                        </div>
                        <div class="row pt-5">
                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                <div class="row mb-4">
                                    <label class="col-md-3 text-lg-right label">Name <span class="text-danger">*</span>:</label>
                                    <div class="form-detail col-md-5">
                                        <input type="text" class="form-control inputAdsModule" name="user_name" id="user_name" placeholder="Carol C. Baskins">
                                    </div>
                                </div>
                                <div class="row mb-4">
                                    <label class="col-md-3 text-lg-right label">Email <span class="text-danger">*</span>:</label>
                                    <div class="form-detail col-md-5">
                                        <input type="text" class="form-control inputAdsModule" name="user_email" id="user_email" placeholder="cbask83@company.com">
                                    </div>
                                </div>
                                <div class="row mb-5">
                                    <label class="col-md-3 text-lg-right label">Phone Number:</label>
                                    <div class="form-detail col-md-3">
                                        <div class="h-field-wrap">
                                            <input type="text" class="form-control" name="user_mobile" id="user_mobile" placeholder="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-4">
                            <label class="col-md-3 text-lg-right label"></label>
                            <div class="form-detail col-md-9">
                                <div style="float:left;text-align: center; ;">
                                    <button type="button" class="primary-btn mr-2 mb-2" id="emailInvoicePDF">Email Invoice PDF</button>
                                    <br>
                                    <span class="pdf-message" id="invoice-message">Invoice Sent!</span>
                                </div>
                                <div style="float:left;text-align: center;">
                                    <button type="button" class="primary-btn mb-2" id="emailReceiptPDF">Email Receipt PDF</button>
                                    <br>
                                    <span class="pdf-message" id="receipt-message">Please fill required fileds!</span>
                                </div>
                            </div>
                        </div>
                        <label class="col-12 label border-bottom mb-4 title-text pt-5">Content</label>
                        <div class="row mb-4">
                            <label class="col-md-3 text-lg-right label">Ad Title <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-9">
                                <input type="text" class="form-control custom-border inputAdsModule" name="title" id="title" placeholder="Ad Title">
                            </div>
                        </div>

                        <div class="row" id="displayAdsImageBox" style="display: none;">
                            <div class="form-group mt-3 mb-2 offset-3">
                                <img src="" alt="Image" class="img-fluid" id="displayAdsImage">
                            </div>
                        </div>
                        <div class="row" id="displayAdsVideoBox" style="display: none;">
                            <div class="form-group mt-3 mb-2 offset-3" id="displayAdsVideo">
                            </div>
                        </div>

                        <div class="row mb-4">
                            <label class="col-md-3 text-lg-right label">Ad Image/Video <span class="text-danger">*</span>:</label>
                            <div class="form-group m-0 ml-2 mb-2">
                                <input type="hidden" name="image_preview" id="image_preview">
                                <input type="hidden" name="image_type_preview" id="image_type_preview">
                                <input type="file" name="image" id="image" class="form-control browse inputAdsModule" accept="image/*,video/*">
                                <span class="d-block error-message mt-2">Images must be 800 x 800 pixels</span>
                            </div>
                        </div>
                        <div class="row mb-4">
                            <label class="col-md-3 text-lg-right label">Ad URL <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-9">
                                <input type="text" class="form-control custom-border inputAdsModule" name="url" id="url" placeholder="Ad URL">
                            </div>
                        </div>
                        <div class="row mb-4">
                            <label class="col-md-3 text-lg-right label">Ad Body <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-9 description">
                                <textarea class="form-control custom-border" name="description" id="description" rows="5"></textarea>
                                <span class="pull-right label label-default">&nbsp;characters remaining</span>
                                <span class="pull-right label label-default RemainingCharacters">250</span>
                            </div>
                        </div>
                        <div class="row justify-content-between">
                            <div class="button-left col-sm-8 col-md-6 col-lg-4 text-lg-right">
                                <button type="reset" id="resetPostButton" class="primary-btn disabled mr-2 mb-2 resetPostButton">Cancel</button>
                                <button type="submit" id="savePostButton" class="primary-btn mb-2 formSubmitButton">Save</button>
                            </div>
                            <div class="button-right col-sm-4 col-md-6 col-lg-8 text-right">
                                <button type="button" class="primary-btn btn-wide mb-4 viewPostAsMemberButton" id="viewPostAsMemberBottomButton">View Ad as Member</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="showDeleteModel" role="dialog" data-backdrop="false">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content dark-color">
            <div class="modal-header">
                <h5 class="modal-title" id="modalDeleteHerderTitle">Delete Ads</h5>
                <button type="button" class="close cancelDeleteTitle" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body gray-background">
                <div class="kt-section__body">
                    <div class="text-center max-width-560">
                        <p id="modalDeleteDescription">Once delete this ads from LabPair, they cannot be recovered. If you are sure they should be permanently removed, click the "Delete Ads".</p>
                    </div>
                    <div class="btn-group d-flex align-items-center justify-content-center mt-4 mb-4">
                        <div class="button mr-2 ml-2">
                            <button type="button" class="btn btn-danger btn-wide yes-sure" data-id="" id="confirmDeleteButton">Delete Ads</button>
                        </div>
                        <div class="button mr-2 ml-2">
                            <button type="button" class="btn btn-primary btn-wide disabled cancelDeleteTitle" data-dismiss="modal" aria-label="Close" id="cancelDeleteTitle">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="showInvoice" data-backdrop="false">
    <div class="modal-dialog modal-xl ">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: 2px solid #888888 !important">
                <table style="margin:0 auto;width:100%; background-color:#f5f5f5;" role="presentation">
                    <tbody>
                        <tr>
                            <td>
                                <h2 style="margin: 0 0 10px 0; padding: 0; font-size: 40px; line-height: 50px;color: #000;">Invoice</h2>
                                <p style="font-weight: 500; color: #888888;" class="font-size-16">Transaction Number: I-<span class="font-size-16" id="invoice_modal_transaction_number"></span></p>
                            </td>
                            <td style="text-align:right;">
                                <img src="{{asset('assets/media/logos/labpair-logo.png')}}" style="height: 50%;width: 50%;">
                                <p style="font-weight: 500; color: #888888;">Contact Us: <a href="mailto:info@labpair.com" style="font-weight: 500; color: #888888; text-decoration: none;">info@labpair.com</a></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                </button>

            </div>
            <div class="modal-body padd-left-10 padd-right-10 pt-0 pb-0">
                <div class="row">
                    <div class="col-md-12">
                    </div>
                </div>
                <p class="mt-3 invoice font-size-16">Invoice Date: <span><b class="font-size-16" id="invoice_modal_invoice_date"></b></span> </p>
                <div class="bill-wrapper mb-3">
                    <p>Bill to:</p>
                    <p class="font-size-16" id="invoice_modal_company_name"></p>
                    <p class="font-size-16" id="invoice_modal_address" class="address"></p>
                    <p class="font-size-16" id="invoice_modal_email"></p>
                    <p class="p-invoice"><span class="text-decoration-underline">Invoice note:</span> <span id="invoice_modal_invoice_note"> </span></p>
                </div>
                <div class="terms-table mb-3 table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th style="width:35%;" class="font-size-16">Term</th>
                                <th style="width:50%;" class="font-size-16">Product</th>
                                <th style="width:15%;" class="font-size-16">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td id="invoice_modal_term" class="font-size-16"> <span class="font-size-16" id="invoice_modal_days"></span> days<span class="comment d-block" id="invoice_modal_start_date_end_date"></span></td>
                                <td id="invoice_modal_product" class="font-size-16"></td>
                                <td id="invoice_modal_amount" class="font-size-16"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="total-table-wrap mb-5 position-relative table-responsive">
                    <table class="table mb-0 position-relative">
                        <thead>
                            <tr>
                                <th class="font-size-16">Subtotal</th>
                                <th class="font-size-16" id="invoice_modal_sub_total"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="font-size-16">Taxes</td>
                                <td class="font-size-16" id="invoice_modal_taxes"></td>
                            </tr>
                            <tr>
                                <td class="font-size-16">Fees</td>
                                <td class="font-size-16" id="invoice_modal_fees"></td>
                            </tr>
                            <tr>
                                <td class="font-size-16">Total (USD)</td>
                                <td class="font-size-16" id="invoice_modal_total"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="row mb-4 ml-4">
                    <div class="col-md-12">
                        <a href="{{getURL('terms-of-use')}}" target="_blank" title="Terms of Service" class="terms text-decoration-underline">Terms of Service</a>
                    </div>
                </div>

                <div class="row mb-4 ml-4">
                    <div class="button-left col-sm-8 col-md-6 col-lg-4">
                        <a href="javascript:void(0)" class="primary-btn disabled mb-2 download-pdf">Download PDF</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--end::Modal-->
@endsection

@section('page_level_js')
<script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/demo1/pages/crud/datatables/basic/paginations.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/admin/sponsored-ads.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script>
    $(document).on("blur", '#addEditForm .inputAdsModule', function() {
        checkAdsRequired([]);
    });
    $('#addEditForm .inputPaymentModule').change(function() {
        checkAdsRequired([]);
    });
    $(document).ready(function() {
        checkAdsRequired([]);
    });

    $(document).ready(function() {
        if ($("#id_for_preview").val() != "") {

            fillModalData($("#id_for_preview").val());
            window.history.replaceState({}, url, url + "sponsored-ads");
        }
    });
</script>
@endpush