@extends('front.inner-layout.app')
@section('content')

<link href="{{ asset('assets/css/colorPick.css') }}" rel='stylesheet' />
<link href="{{ asset('assets/css/colorPick.dark.theme.css') }}" rel='stylesheet' />

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
    <div class="row align-items-center">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="page-title eagle-font font-400"><span class="arca-font">My</span> Products
            </h1>
        </div>
        @include('front.inner-layout.header')
    </div>
    <div class="brdr-bttm"></div>

    <div class="invoice-new-page">
        <div class="col-12 back-contain">
            <a href="https://localhost/find_my_appointment/public/practitioner/settings/show" class="backbtn"><i class="fa fa-angle-left" aria-hidden="true"></i> Back </a>
        </div>
        <div class="invoice-new-box comm-form">
            <div class="row">
                <div class="col-lg-6">
                    <div class="invoce-new-address">
                        <p>
                            <span>Monica Leveque</span>
                            <span>77 Cray St</span>
                            <span>Belmore Heights</span>
                            <span>NSW 2345</span>
                        </p>
                        <p class="pb-0">0416 777 678</p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-sm-7 col-6 invoice-no-label">Invoice number</div>
                        <div class="col-sm-5 col-6">
                            <div class="form-group">
                                <input type="text" class="form-control small-input" placeholder="" value="100078" readonly="readonly">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-7 col-6 invoice-no-label">Date</div>
                        <div class="col-sm-5 col-6">
                            <div class="form-group">
                                <div class="input-group date filter-dropdown-three" data-date-format="mm-dd-yyyy">
                                    <input class="form-control box-shadow-none day-datepicker" autocomplete="off" type="text" placeholder="" value="01/02/20">
                                    <span class="input-group-addon"><img src="{{asset('assets/images/calender-new-g.png')}}" alt="" class="img-fluid rightimg"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <hr class="new-hr">

            <div class="service-new-table invoice-new-table">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Item</th>
                                <th>Code</th>
                                <th>Cost</th>
                                <th>Qty</th>
                                <th>Total</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="service-product-select2">
                                    <div>
                                        <select class="form-control text-capitalize" id="invoice-table-service" name="states[]">
                                            <option value="Herbal medicine standard">Herbal medicine standard</option>
                                            <option value="Initial Consult">Initial Consult</option>
                                            <option value="Initial homeopathy consult">Initial homeopathy consult</option>
                                            <option value="Live blood analysis">Live blood analysis</option>
                                            <option value="Nutrition consult">Nutrition consult</option>
                                        </select>
                                    </div>
                                </td>
                                <td>C4567</td>
                                <td>$129.00</td>
                                <td>1</td>
                                <td>$129.00</td>
                                <td>
                                    <div class="dropdown three-dot-dropdown">
                                        <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Delete</a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="service-product-select2">
                                    <div>
                                        <select class="form-control text-capitalize" id="invoice-table-product" name="states[]">
                                            <option value="Metagenics Ultra potent C 1000">Metagenics Ultra potent C 1000</option>
                                            <option value="Metagenics Ultra potent C 1000">Metagenics Ultra potent C 1000</option>
                                            <option value="Metagenics Ultra potent C 1000">Metagenics Ultra potent C 1000</option>
                                        </select>
                                    </div>
                                </td>
                                <td>MUP1000</td>
                                <td>$49.99</td>
                                <td>2</td>
                                <td>$88.02</td>
                                <td>
                                    <div class="dropdown three-dot-dropdown">
                                        <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Delete</a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <a href="#InvoiceAddServiceModal" class="btn btn-unfill btn-border-custom d-table mt-4" data-toggle="modal">Add a Service</a>
            <a href="#InvoiceAddProductModal" class="btn btn-unfill btn-border-custom d-table mt-4" data-toggle="modal">Add a Product</a>

            <hr class="new-hr">

            <div class="invoice-new-payment-area">
                <div class="row justify-content-end">
                    <div class="col-lg-7">
                        <div class="row mb-4">
                            <div class="col-7">
                                <p class="mb-0">This invoice</p>
                            </div>
                            <div class="col-5">
                                <p class="mb-0 pl-4">$0.00</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-7">
                                <p class="mb-0">Outstanding balance</p>
                            </div>
                            <div class="col-5">
                                <p class="mb-0 pl-4">$0.00</p>
                            </div>
                        </div>

                        <hr class="new-hr">

                        <div class="row total-payment-col mb-4">
                            <div class="col-7">
                                <p class="mb-0">Total</p>
                            </div>
                            <div class="col-5">
                                <p class="mb-0 pl-4">$0.00</p>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-sm-7 col-6">
                                <img src='{{asset("assets/images/medipass-img.png")}}' class="img-fluid madipass-icon" alt="">
                            </div>
                            <div class="col-sm-5 col-6 ">
                                <a href="#" class="btn btn-unfill" style="display: none">Health Fund Rebate</a>



                                <a class="btn btn-unfill btn-not-conn">Not connected
                                    <div class="Not-connect">
                                        <span>Sign up your free Medipass account to begin processing HICAPS online. no terminal required.</span>
                                        <button class="btn btn-unfill">Apply now</button>
                                    </div>

                                </a>




                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-7 col-6">
                                <p class="mb-0 font-weight-bold">Process Payment</p>
                            </div>
                            <div class="col-sm-5 col-6">
                                <a href="#InvoiceAddPaymentModal" class="btn btn-unfill" data-toggle="modal">Add payment</a>
                            </div>
                        </div>

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

            <hr class="new-hr">

            <div class="form-group brdrfull">
                <input type="text" class="form-control" placeholder="Add note to client">
            </div>
            <a href="#" class="btn btn-fill invoice-save d-block mt-4">Save</a>


        </div>
    </div>

    <!-- InvoiceAddServiceModal Modal Start --->
    <div class="client-follow-popup login-modal videoconsultationmodal customscroll remindersModal calenderinterval-modal customscroll clientabpopup businessdetails" id="myclienthide">
        <div class="modal fade new-service-product-invoice-modal" id="InvoiceAddServiceModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="popup-marg">
                        <div class="modal-header">
                            <h5 class="modal-title text-center eagle-font">Add Service</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid"></span>
                            </button>
                        </div>
                        <form>
                            <div class="modal-body p-0">
                                <div class="mCustomScrollbar">
                                    <div class="boxwhite mt-30">
                                        <div class="test-results-area labeltop mt-3">
                                            <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6">
                                                        <label>Appointment type</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6">
                                                        <div class="form-group brdrfull">
                                                            <select class="form-control text-capitalize" id="invoice-addservice" name="states[]">
                                                                <option value="Herbal medicine standard">Herbal medicine standard</option>
                                                                <option value="Initial Consult">Initial Consult</option>
                                                                <option value="Initial homeopathy consult">Initial homeopathy consult</option>
                                                                <option value="Live blood analysis">Live blood analysis</option>
                                                                <option value="Nutrition consult">Nutrition consult</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6">
                                                        <label>Code</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6">
                                                        <div class="form-group brdrfull">
                                                            <input type="text" class="form-control disabled" placeholder="Enter code" disabled>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Cost</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull">
                                                            <span class="dollar-icon">$</span>
                                                            <input type="text" class="form-control select-80" placeholder="00.00">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Qty</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull selectdrop-textbox">
                                                            <select class="form-control select-80 select-text-center">
                                                                <option value="0" selected=""> 0</option>
                                                                <option value="1"> 1</option>
                                                                <option value="2"> 2</option>
                                                                <option value="3"> 3</option>
                                                                <option value="4"> 4</option>
                                                                <option value="5"> 5</option>
                                                                <option value="6"> 6</option>
                                                                <option value="7"> 7</option>
                                                                <option value="8"> 8</option>
                                                                <option value="9"> 9</option>
                                                                <option value="10"> 10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="text-center">
                                    <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Update and
                                        Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- InvoiceAddServiceModal Modal End -->

    <!-- InvoiceAddProductModal Modal Start --->
    <div class="client-follow-popup login-modal videoconsultationmodal customscroll remindersModal calenderinterval-modal customscroll clientabpopup businessdetails" id="myclienthide">
        <div class="modal fade new-service-product-invoice-modal" id="InvoiceAddProductModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="popup-marg">
                        <div class="modal-header">
                            <h5 class="modal-title text-center eagle-font">Add Product</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid"></span>
                            </button>
                        </div>
                        <form>
                            <div class="modal-body p-0">
                                <div class="mCustomScrollbar">
                                    <div class="boxwhite mt-30">
                                        <div class="test-results-area labeltop mt-3">
                                            <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6">
                                                        <label>Product</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6">
                                                        <div class="form-group brdrfull">
                                                            <select class="form-control text-capitalize" id="invoice-addproduct" name="states[]">
                                                                <option value="Metagenics Ultra potent C 1000">Metagenics Ultra potent C 1000</option>
                                                                <option value="Metagenics Ultra potent C 1000">Metagenics Ultra potent C 1000</option>
                                                                <option value="Metagenics Ultra potent C 1000">Metagenics Ultra potent C 1000</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6">
                                                        <label>Code</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6">
                                                        <div class="form-group brdrfull">
                                                            <input type="text" class="form-control disabled" placeholder="Enter code" disabled>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Cost</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull">
                                                            <span class="dollar-icon">$</span>
                                                            <input type="text" class="form-control select-80" placeholder="00.00">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Qty</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull selectdrop-textbox">
                                                            <select class="form-control select-80 select-text-center">
                                                                <option value="0" selected=""> 0</option>
                                                                <option value="1"> 1</option>
                                                                <option value="2"> 2</option>
                                                                <option value="3"> 3</option>
                                                                <option value="4"> 4</option>
                                                                <option value="5"> 5</option>
                                                                <option value="6"> 6</option>
                                                                <option value="7"> 7</option>
                                                                <option value="8"> 8</option>
                                                                <option value="9"> 9</option>
                                                                <option value="10"> 10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="text-center">
                                    <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Update and
                                        Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- InvoiceAddProductModal Modal End -->

    <!-- InvoiceAddProductModal Modal Start --->
    <div class="client-follow-popup login-modal videoconsultationmodal customscroll remindersModal calenderinterval-modal customscroll clientabpopup businessdetails" id="myclienthide">
        <div class="modal fade new-service-product-invoice-modal" id="InvoiceAddPaymentModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="popup-marg">
                        <div class="modal-header">
                            <h5 class="modal-title text-center eagle-font">Select Payment Type</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid"></span>
                            </button>
                        </div>
                        <form>
                            <div class="modal-body p-0">
                                <div class="mCustomScrollbar">
                                    <div class="mt-30">
                                        <div class="">
                                            <div class="payment-meth-box mt-30">
                                                <p class="payment-amount">Balance outstanding $227.02</p>
                                            </div>
                                            <div class="row align-items-center mt-4">
                                                <div class="col-6">
                                                    <p class="payment-title-15 mb-0">Payment amount</p>
                                                </div>
                                                <div class="col-6">
                                                    <div class="brdrfull">
                                                        <input type="text" class="form-control" placeholder="$0.00" style="margin-top: -2px;">
                                                    </div>
                                                </div>
                                            </div>

                                            <hr class="new-hr">

                                            <div id="payment-meth-main">
                                                <div class="shipping-method-area comm-form">
                                                    <p class="payment-title-15">Online payment</p>
                                                    <div class="online-payment-contain text-center">
                                                        <p class="">
                                                            Online payments unavailable. Your application is still under review by our payment provider. Expect a response within 24 business hours.
                                                        </p>
                                                        <button class="btn btn-lg">Not connected
                                                            <span>Save time & money with our integrated online payment processing. 1.5% plus 25c per transaction*. No set-up or monthly fees & no terminal required. Switch to our $0 p/m plan for access.
                                                                <small>*process over $100.000 p/a? Get in touch about custom pricing</small>
                                                            </span>
                                                        </button>

                                                    </div>
                                                    <hr class="new-hr">


                                                    <div class="payment-card-main">
                                                        <div class="form-group usericon">
                                                            <label>Name on card</label>
                                                            <input type="text" name="card_holder" class="form-control" placeholder="Name">
                                                            <span class="invalid-feedback d-block"></span>
                                                        </div>
                                                        <div class="form-group usercardicon">
                                                            <label>Card Number</label>
                                                            <input type="text" name="card_number" class="form-control" placeholder="0000 0000 0000 0000">
                                                            <span class="invalid-feedback d-block"></span>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-lg-6 col-md-6">
                                                                <div class="form-group expiryicon" id="open_from_date">
                                                                    <label>Expiry</label>
                                                                    <input type="text" class="form-control" placeholder="MM/YYYY" name="card_expiry">
                                                                    <span class="invalid-feedback d-block"></span>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6">
                                                                <div class="form-group expiryicon cvv-icon">
                                                                    <label>CCV</label>
                                                                    <input type="number" length="3" name="cvv" class="form-control" placeholder="000">
                                                                    <span class="invalid-feedback d-block"></span>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="choose-saved-card">
                                                            <p>Choose payment method</p>
                                                            <div class="popup-more-filter">
                                                                <div class="popup-label">
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="radio" class="custom-control-input shipping_charge" name="choose-card" id="choose-card1">
                                                                        <label class="custom-control-label" for="choose-card1">
                                                                            <span><img class="img-fluid" src='{{asset("assets/images/credit-img/master-card.png")}}'></span>
                                                                            •••• •••• •••• 5678
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="popup-more-filter">
                                                                <div class="popup-label">
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="radio" class="custom-control-input shipping_charge" name="choose-card" id="choose-card2">
                                                                        <label class="custom-control-label" for="choose-card2">
                                                                            <span><img class="img-fluid" src='{{asset("assets/images/credit-img/visa-card.png")}}'></span>
                                                                            •••• •••• •••• 3456
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <a href="#invoice-add-new-card-collapse" class="text-link-green" data-toggle="collapse" role="button">Add a new card</a>
                                                        <div class="collapse" id="invoice-add-new-card-collapse">
                                                            <div class="card card-body">
                                                                <div class="payment-card-main">
                                                                    <div class="form-group usericon">
                                                                        <label>Name on card</label>
                                                                        <input type="text" name="card_holder" class="form-control" placeholder="Name">
                                                                        <span class="invalid-feedback d-block"></span>
                                                                    </div>
                                                                    <div class="form-group usercardicon">
                                                                        <label>Card Number</label>
                                                                        <input type="text" name="card_number" class="form-control" placeholder="0000 0000 0000 0000">
                                                                        <span class="invalid-feedback d-block"></span>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col-lg-6 col-md-6">
                                                                            <div class="form-group expiryicon" id="open_from_date">
                                                                                <label>Expiry</label>
                                                                                <input type="text" class="form-control" placeholder="MM/YYYY" name="card_expiry">
                                                                                <span class="invalid-feedback d-block"></span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-6 col-md-6">
                                                                            <div class="form-group expiryicon cvv-icon">
                                                                                <label>CCV</label>
                                                                                <input type="number" length="3" name="cvv" class="form-control" placeholder="000">
                                                                                <span class="invalid-feedback d-block"></span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="choose-saved-card">
                                                                    <div class="popup-more-filter">
                                                                        <div class="popup-label ">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="radio" class="custom-control-input shipping_charge" name="save-card2" id="save-card2">
                                                                                <label class="custom-control-label" for="save-card2">Save card for faster payment next time?</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- <div class="choose-saved-card d-none">
                                                    <div class="popup-more-filter">
                                                        <div class="popup-label invoice-save-card">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="radio" class="custom-control-input shipping_charge" name="save-card2" id="save-card2">
                                                                <label class="custom-control-label" for="save-card2">Save card for faster payment next time?</label>                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> -->

                                                    <div class="choose-saved-card d-none">
                                                        <div class="popup-more-filter">
                                                            <div class="popup-label ">
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="radio" class="custom-control-input shipping_charge" name="save-card2" id="save-card2">
                                                                    <label class="custom-control-label" for="save-card2">Save card for faster payment next time?</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <hr class="new-hr">

                                                    <div class="choose-saved-card">
                                                        <div class="popup-more-filter">
                                                            <p class="payment-title-15">Process payment outside of My Appointments</p>
                                                            <div class="popup-label invoice-save-card">
                                                                <div class="row">
                                                                    <div class="col-sm-6 mb-4">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" checked="true" class="custom-control-input shipping_charge" name="invoice-payment-option" id="payment-Cash">
                                                                            <label class="custom-control-label" for="payment-Cash">Cash</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-6 mb-4">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input shipping_charge" name="invoice-payment-option" id="payment-HICAPS">
                                                                            <label class="custom-control-label" for="payment-HICAPS">HICAPS terminal</label>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="row">
                                                                    <div class="col-sm-6 mb-4">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input shipping_charge" name="invoice-payment-option" id="payment-Credit">
                                                                            <label class="custom-control-label" for="payment-Credit">Credit Card</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-6 mb-4">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input shipping_charge" name="invoice-payment-option" id="payment-deposit">
                                                                            <label class="custom-control-label" for="payment-deposit">Direct deposit</label>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="row">
                                                                    <div class="col-sm-6 mb-4">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input shipping_charge" name="invoice-payment-option" id="payment-Eftpos">
                                                                            <label class="custom-control-label" for="payment-Eftpos">Eftpos</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-6 mb-4">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input shipping_charge" name="invoice-payment-option" id="payment-other">
                                                                            <label class="custom-control-label" for="payment-other">Other</label>
                                                                        </div>
                                                                    </div>
                                                                </div>

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

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="text-center">
                                    <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Process payment</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- InvoiceAddProductModal Modal End -->

</div>
@endsection

@section('css')

<style>
    .select2-selection__arrow::after {
        right: 7px !important;
    }

    .select2-container--default .select2-selection--single {
        border: 1px solid #c7c7c7 !important;
        height: 33px !important;
    }

    #InvoiceAddServiceModal .form-control.disabled,
    #myclienthide .form-control.disabled {
        background-color: #e9ecef !important;
    }
</style>

@endsection

@section('js')
<script>
    $(document).ready(function() {

        $('#invoice-table-service').select2({});
        $('#invoice-table-product').select2({});
        $('#invoice-addproduct').select2({});
        $('#invoice-addservice').select2({});



    });
</script>
@endsection