@extends('templates.structure')
@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/datepicker3.css')}}">
<link rel="stylesheet" href="{{asset('intltel/build/css/intlTelInput.css')}}">
<style>
    .intl-tel-input {
        width: 100%;
    }

    .status-shine{ 
        cursor: pointer;
        color: #6c757d;
    }
    .check {
        color: black;
    }
    .status-shine:hover { 
        background-color: #f8f9fa;
        font-weight: bold;
        color: black;
    }

    .product_dt, #total_amount{
        font-size: 24px;
        font-weight: bold;
        font-style: italic;
    }

    .datepicker{
        z-index: 10000 !important;
    }
</style>
@endsection
@section('content')
@php
$status = ['In-Active', 'Active'];
$badge = ['danger', 'info'];
@endphp

<div class="row">
    <div class="col-md-12">
        <div class="card">
              <div class="card-header p-2">
                <div class="row">
                    <div class="col-8" id="tabs1">
                         <ul class="nav nav-pills">
                            <li class="nav-item text-center" style="width: 100px;"><a id="adetail" class="nav-link active" href="#clientDetail" data-toggle="tab" tabindex="1">Detail</a></li>
                            <li class="nav-item text-center" style="width: 100px;"><a id="aplan" class="nav-link" href="#plan" data-toggle="tab" tabindex="2">Plan</a></li>
                            <li class="nav-item text-center" style="width: 100px;"><a id="ainvoice"class="nav-link" href="#invoice" data-toggle="tab" tabindex="3">Invoice</a></li>
                            <li class="nav-item text-center" style="width: 100px;"><a id="apic" class="nav-link" href="#pic" data-toggle="tab" tabindex="4">PIC</a></li>
                        </ul>
                    </div>
                    <div class="col-4">
                        <button class="btn addnewplan btn-outline-primary float-right d-none h-100" onclick="showEditPlanModal()" style="margin-top:1px;">Add New Plan</button>
                    </div>
                </div>
              </div><!-- /.card-header -->
              <div class="card-body p-0">
                <div class="tab-content">
                  <div class="active tab-pane" id="clientDetail">
                    <div class="card-body p-0">
                        <div class="row">
                            <div class="shadow col-12 px-4 py-4 btn-info">
                                <h4>Client Details</h4>
                            </div>
                        </div>
                        <div class="mt-3 mb-3">
                            <div class="row px-4 py-4">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="hidden" id="param" value="0">
                                        <label>Firstname</label>
                                        <input type="text" name="firstname" value="{{$data->firstname}}" class="form-control" disabled>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Lastname</label>
                                        <input type="text" name="lastname" value="{{$data->lastname}} "class="form-control" disabled>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>ID Type</label>
                                        <div class="input-group">
                                            <div class="radio col-md-5">
                                                <label for="optionsRadios4" style="font-weight:400">
                                                    <input type="radio" name="id_type" id="optionsRadios1" value="1" {{$data->id_type == '1' ? 'checked=""' : ''}} disabled>
                                                    Identity Card
                                                </label>
                                            </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <div class="radio col-md-5">
                                                <label for="optionsRadios2" style="font-weight:400">
                                                    <input type="radio" name="id_type" id="optionsRadios2" value="2" {{$data->id_type == '2' ? 'checked=""' : ''}}disabled>
                                                    Driver License
                                                </label>
                                            </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <div class="radio col-md-5">
                                                <label for="optionsRadios3" style="font-weight:400">
                                                    <input type="radio" name="id_type" id="optionsRadios3" value="3" {{$data->id_type == '3' ? 'checked=""' : ''}} disabled>
                                                    Passport
                                                </label>
                                            </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <div class="radio col-md-5">
                                                <label for="optionsRadios4" style="font-weight:400">
                                                    <input type="radio" name="id_type" id="optionsRadios4" value="4" {{$data->id_type == '4' ? 'checked=""' : ''}} disabled>
                                                    Taxpayer Number
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>ID No.</label>
                                        <input type="text" name="id_no" value="{{$data->id_no}}" class="form-control" disabled>
                                    </div>
                                </div>                                                                                                                              
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Phone</label>
                                            <input type="tel" id="phone_1" name="phone" value="{{$data->phone}}" class="form-control" disabled>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Secondary Phone</label>
                                        <input type="tel" id="phone_2" name="unity_clients_dt[secondary_phone]" value="{{$data->secondary_phone}}" class="form-control" disabled>
                                    </div>
                                </div>                  
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Email</label>
                                        <input type="text" name="email" value="{{$data->email}}" class="form-control" disabled>
                                    </div>
                                </div>
                                <div class="col-md-6">                                
                                    <div class="form-group">
                                        <label>Location</label>
                                        <input type="text" name="location_name" value="{{$data->location_name}}" class="form-control" disabled>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Address</label>
                                        <textarea name="address" rows="5" class="form-control" disabled>{{$data->address}}</textarea>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>City</label>
                                        <input type="text" name="city" value="{{$data->city}}" class="form-control" disabled>
                                    </div>
                                </div>                      
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Country</label>
                                        <input type="text" name="country_name" value="{{$data->country_name}}" class="form-control" disabled>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Postal Code</label>
                                        <input type="text" name="postal_code" value="{{$data->postal_code}}" class="form-control" disabled>
                                    </div>
                                </div>
                            </div>    
                        </div>
                        
                        
                        <div class="row">
                            <div class="shadow col-12  px-4 py-4 btn-info">
                                <h4>Company Details</h4>
                            </div>
                        </div>
                        <div class="mt-3" >
                            <div class="row px-4 py-4">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Company Name</label>
                                        <input type="text" name="company_name" class="form-control" value="{{$data->company_name}}" disabled>
                                    </div>                            
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Company Tax ID</label>
                                        <input type="text" name="company_tax_id" class="form-control" value="{{$data->company_tax_id}}" disabled>
                                    </div>  
                                </div>
                            </div>
                        </div>                  
                    </div>
                  </div>
                  <!-- /.tab-pane -->
                  <div class="tab-pane" id="plan">
                    <!-- The timeline -->
                    <div class="card border-0">
                    <div class="card-body">
                        <div class="">
                            <table id="example1" class="table table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th>Product Name</th>
                                    <th>Currency</th>
                                    <th>Price</th>
                                    <th>Location</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                            </table>
                        </div>
                    </div>
                    </div>
                  </div>
                  <!-- /.tab-pane -->
                  <div class="tab-pane" id="invoice">
                    <div class="card border-0">
                        <div class="card-body">                               
                            <table id="invoiceTable" class="table table-hover" style="width:100%">
                                <thead>
                                    <tr>                              
                                        <th>Invoice Number</th>                                
                                        <th>Client ID</th>                                
                                        <th>Company Name</th>                                
                                        <th>Location Name</th>                                
                                        <th>Due Date</th>                                
                                        <th>Date Generated</th>                                
                                        <th>Status</th>
                                        <th>Created By</th>                                
                                        <th>Created At</th>                                
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>                    
                        </div>                
                    </div>
                  </div>
                  <div class="tab-pane" id="pic">
                    <!-- The timeline -->
                    <div class="card-body p-0">
                        <div class="px-4" id="picData">
                            
                        </div>
                    </div>
                  </div>
                  <!-- /.tab-pane -->
                  <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
              </div><!-- /.card-body -->
        </div>
    </div>
</div>

<div class="modal fade" id="PlanModal" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body p-0">
            <div class="row" style="z-index:1">
            <div class="col-md-12"> 
                <div class="card border-0">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-1">
                                <span class="shadow-sm badge badge-{{$badge[$data->status]}}" style="position: absolute;
                                                                                            top: 0px;
                                                                                            right:0px;
                                                                                            font-weight:bold;
                                                                                            font-size: 20px;">{{$status[$data->status]}}</span>
                            </div>
                            <div class="col-10">
                                <h3 class="card-title text-center">Add new Plan</h3>           
                            </div>
                            <div class="col-1">
                                <button type="button" style="z-index:2" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                        </div>
                    </div>            
                    <form role="form" id="form">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Product:</label>
                                        <br>
                                        <select name="product_id" class="form-control">
                                        </select>
                                    </div>                                
                                </div> 
                                <div class="col-md-12 collapse detail-product" id="collapseExample">                            
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Promo & Discount:</label>
                                        <br>
                                        <select name="promo_id" class="form-control">
                                        </select>
                                    </div>                                
                                </div> 
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>VAT</label>
                                        <div class="input-group">
                                            <div class="radio">
                                                <label for="optionsRadios4" style="font-weight:400">
                                                    <input type="radio" name="vat" id="optionsRadios4" value="1">
                                                    Yes
                                                </label>
                                            </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <div class="radio">
                                                <label for="optionsRadios5" style="font-weight:400">
                                                    <input type="radio" name="vat" id="optionsRadios5" value="0" checked>
                                                    No
                                                </label>
                                            </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                    
                                            <div class="radio">
                                                <label style="font-weight:400">
                                                    <span id="vat"></span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>                        
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="wht">WHT</label>
                                        <br>  
                                        <div class="input-group">   
                                            <input class="form-control" id="wht" placeholder="0" rules="number-only" name="wht" type="number">
                                            <div class="input-group-append">
                                                <span class="input-group-text" id="basic-addon2">%</span>
                                            </div>
                                        </div>                    
                                    </div>                                                                                    
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Send Invoice Mail</label>
                                        <br>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="send_mail" id="optionsRadios7" value="1" checked>
                                            <label class="form-check-label" for="optionsRadios7" style="font-weight:400">
                                                Yes
                                            </label>
                                        </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="send_mail" id="optionsRadios8" value="0">
                                            <label class="form-check-label" for="optionsRadios8" style="font-weight:400">
                                                No
                                            </label>
                                        </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                                                    
                                    </div>                                                                                    
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Start Date:</label>
                                        <br>                                
                                        <input type="text" autocomplete="off" name="start_date" class="form-control tanggal" placeholder="Date of the client start the plan." rules="number-only">
                                    </div>                                
                                </div>     
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Contract Term:</label>
                                        <br>     
                                        <div class="input-group">   
                                            <input class="form-control" placeholder="12" id="contract_term" name="contract_term" type="number" autocomplete="off" rules="number-only">
                                            <div class="input-group-append">
                                                <span class="input-group-text" id="basic-addon2">Month</span>
                                            </div>
                                        </div>
                                    </div>                                
                                </div>                     
                                <input type="hidden" name="client_id" value="{{$data->clientid}}">                        
                            </div>    
                        </div>                
                </div>
            </div>
            </div>
            <div>
                <button type="submit" class="btn btn-info btn-lg btn-block" style="border-radius: 0px;">Save</button>
            </div>
            </form>
        </div>      
    </div>
  </div>
</div>
</div>


<div class="modal fade" id="exampleNotifiedModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Form Payment</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form id="formNotifiedPayment" role="form">
                <input type="hidden" name="id">
                {{-- <input type="hidden" name="status" value="1"> --}}
                <div class="form-group">
                    <label>Image</label>
                        <div style="display:none">
                            <br>
                        </div>
                        <img id="falseinput" class="img-responsive" src="#" alt="your image" style="max-height:500px;max-width:500px;width: expression(this.width > 500 ? 500: true);"/>
                        <br>
                        <br>
                        <input type="file" name="image" id="fileinput" type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this);" class="form-control">
                        <textarea id="base" style="display:none"></textarea>
                </div>
                <div class="form-group">
                    <label for="message-text" class="col-form-label">Paid References Notes:</label>
                    <textarea class="form-control" id="paid_references_notes" name="paid_references_notes"></textarea>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" id="saveNotifiedPayment">Save</button>
        </div>
        </div>
    </div>
</div>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Form Payment</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form id="formPayment" role="form">
                <div class="form-group">
                    <label for="paid_reference" class="col-form-label">Paid reference:</label>
                    <input type="text" class="form-control" id="paid_reference" name="paid_reference">
                </div>
                <div class="form-group">
                    <label for="amount_paid" class="col-form-label">Amount paid:</label>
                    <input type="text" class="form-control" id="amount_paid" name="amount_paid">
                </div>
                <div class="form-group">
                    <label for="date_paid" class="col-form-label">Date paid:</label>
                    <input type="text" class="form-control tanggal" id="date_paid" name="date_paid">
                </div>
                <input type="hidden" name="id">
                <div class="form-group">
                    <label>WHT</label>
                    <input type="text" class="form-control" id="wht" name="wht" value="0">                                
                </div>
                {{-- <div class="form-group">
                    <label for="message-text" class="col-form-label">Paid References Notes:</label>
                    <textarea class="form-control" id="paid_references_notes" name="paid_references_notes"></textarea>
                </div> --}}
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" id="savePayment">Save</button>
        </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleModalInvoice" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Form Payment</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formPayment" role="form">
                    <div class="form-group">
                        <label for="paid_reference" class="col-form-label">Paid reference:</label>
                        <input type="text" class="form-control invoice-form" id="paid_reference" name="paid_reference">
                    </div>
                    <div class="form-group">
                        <label for="amount_paid" class="col-form-label">Amount paid:</label>
                        <input type="text" class="form-control invoice-form" id="amount_paid" name="amount_paid">
                    </div>
                    <div class="form-group">
                        <label for="date_paid" class="col-form-label">Date paid:</label>
                        <input type="text" class="form-control tanggal invoice-form" id="date_paid" name="date_paid">
                    </div>
                    <input type="hidden" name="id">
                    {{-- <input type="hidden" name="status" value="1"> --}}
                    <div class="form-group">
                        <label>Image</label>
                            <div style="display:none">
                                <br>
                            </div>
                            <img id="falseinput" class="img-responsive" src="#" alt="your image" style="max-height:500px;max-width:500px;width: expression(this.width > 500 ? 500: true);"/>
                            <br>
                            <br>
                            <input type="file" name="image" id="fileinput" type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this);" class="form-control invoice-form">
                            <textarea id="base_invoice" style="display:none"></textarea>
                    </div>
                    <div class="form-group">
                        <label>WHT</label>
                        <input type="text" class="form-control invoice-form" id="wht" name="wht" value="0">                                
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Paid References Notes:</label>
                        <textarea class="form-control invoice-form" id="paid_references_notes" name="paid_references_notes"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="savePaymentInvoice">Save</button>
            </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModalInvoice1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form id="formMail" role="form">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Form Mail</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                        <input type="hidden" name="invoice_id">
                        {{-- <div class="form-group">
                            <label for="paid_reference" class="col-form-label">From:</label>
                            <input type="text" class="form-control" id="sending_from" name="sending_from">
                        </div> --}}
                        <div class="form-group">
                            <label for="amount_paid" class="col-form-label">To:</label>
                            <input type="text" class="form-control" id="sending_to" name="sending_to">
                        </div>
                        <div class="form-group">
                            <label for="amount_paid" class="col-form-label">Cc:</label>
                            <input type="text" class="form-control" id="sending_cc" name="sending_cc">
                        </div>
                        <div class="form-group">
                            <label for="amount_paid" class="col-form-label">Bcc:</label>
                            <input type="text" class="form-control" id="sending_bcc" name="sending_bcc">
                        </div>
                        <div class="form-group">
                            <label for="date_paid" class="col-form-label">Subject:</label>
                            <input type="text" class="form-control" id="subject" name="subject">
                        </div>                        
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">Message:</label>                        
                            <textarea id="editor1" name="sending_message" style="width: 100%;" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <label>Attach Invoice</label>
                            <div class="input-group">
                                <div class="radio">
                                    <label for="optionsRadios1" style="font-weight:400">
                                        <input type="radio" name="attach" id="optionsRadios1" value="1" checked>
                                        Yes
                                    </label>
                                </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div class="radio">
                                    <label for="optionsRadios2" style="font-weight:400">
                                        <input type="radio" name="attach" id="optionsRadios2" value="0">
                                        No
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="date_paid" class="col-form-label">Next Follow Up:</label>
                            <input type="text" class="form-control tanggal" id="next_follow_up" name="next_follow_up">
                        </div>                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="sendMail">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('custom_js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.30.0/dist/sweetalert2.all.min.js"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/ckeditor/ckeditor.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
<script>
    $(document).ready(function () 
    {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) 
        {
            e.relatedTarget // previous active tab
            e.target // newly activated tab
            
            if (e.target.id === 'aplan') 
            {
                $($.fn.dataTable.tables(true)).DataTable()
                .columns.adjust();
            }
            else if (e.target.id === 'ainvoice') 
            {
                // getInvoice();
                $($.fn.dataTable.tables(true)).DataTable()
                .columns.adjust();

            }
        });
        
        getPic();
        
    });
    
    var statusArrInvoice = [
        'unpaid',
        'paid',
        'void',
        'canceled',
        'expire'
    ];
    
    // function getInvoice()
    // {
        var table1 = $('#invoiceTable').DataTable({
            retrieve: true,
            paging: true,
            "searchDelay": 450,
            "scrollX": true,
            "processing": true,
            "serverSide": true,    
            "ajax": {
                    url: '{{route("invoice.datatable")}}',
                    data: function (d) {
                        d.client = "{{$data->clientid}}";
                        // d.client_id.search.value = "{{$data->clientid}}";
                        // d.columns[0].search.value = "{{$data->clientid}}";
                    }
                },        
            "columns": [
                // {"data": "client_id", "visible": false},
                {"data": "invoice_number", "orderable": false, "searchable": false},
                {"data": function ( row, type, set ) {
                    return row.client_name;
                    
                }, "orderable": false, "searchable": false},
                {"data": "company_name", "orderable": false, "searchable": false},
                {"data": "location_name", "orderable": false, "searchable": false},
                {"data": "date_due", "orderable": true, "searchable": false},
                {"data": "date_generated", "searchable": false},
                {"data": function ( row, type, set ) {
                    return statusArrInvoice[row.status];
                }, "orderable": false, "searchable": false},
                {"data": function ( row, type, set ) {
                    return row.created_by;
                }, "orderable": false, "searchable": false},
                {"data": "created_at", "orderable": true, "searchable": false, "visible": false},
                {"data": null, "orderable": false, "searchable": false},
            ],
            "order" :[[ 4, 'desc' ]],
            "columnDefs": [
                {
                "targets": -1,
                "data": "action",
                "render": function ( data, type, row, meta ) {  
                    var action = '<div class="btn-group float-right" role="group" aria-label="Basic example">';        
                    action += '<button class="btn btn-outline-success invoice-control"><span class="fa fa-info"></span></button>&nbsp;'                        
                    if (data.status == 1 || data.status == 0) {
                        
                        action += '<button class="btn btn-outline-primary" onclick="printInvoice('+data.id+')"><span class="fa fa-print"></span></button>&nbsp;'                
                    }
                    if (data.status == 0) {

                        // action += '<button class="btn btn-outline-info" onclick="sendMail('+data.id+', \''+data.email+'\')"><span class="fa fa-send"></span></button>&nbsp;'                
                    }

                    action += '</div>';
                    return action            
                    }
                }
            ],
        });
        

        $('#invoiceTable tbody').on('click', 'td .invoice-control', function () 
        {
            var tr = $(this).closest('tr');
            var row = table1.row( tr );

            if ( row.child.isShown() ) 
            {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else 
            {
                // Open this row
                // console.log(row.data())
                row.child( format(row.data()) ).show();
                tr.addClass('shown');

                axios.get('{{route("invoice-items.datatable")}}?columns[0][name]=op.invoice_id&columns[0][searchable]=true&columns[0][search][value]='+row.data().id, config) .then(function (response) 
                {
                    let tbody = '';
                    console.log(response.data.data)
                    let items = response.data.data;
                    for(let item in items)
                    {
                        // {{-- console.table(item) --}}    
                        tbody += '<tr><td>'+items[item].product_name+'</td><td align="right">'+new Intl.NumberFormat('en-US').format(items[item].price)+'</td><td align="right">'+items[item].quantity+'</td></tr>'
                    }

                    $('#tbody_items_'+row.data().id).find('tbody').html(tbody)
                })
                .catch(function (error) 
                {                 
                    console.log(error);
                    $('.loadingpart').remove();
                });
            }
        });
        
    // }

        let table = $('#example1').DataTable({
            "scrollX": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                url: '{{route("plan.datatable")}}',
                data: function (d) {            
                    d.columns[0].search.value = "{{$data->clientid}}";
                }
            },    
            "columns": [
                    { "name": "op.client_id", "data": "client_id" , "visible": false },
                    { "name": "op.id", "data": "id" , "visible": false },
                    { "name": "ok.product_name", "data": "product_name" },
                    { "name": "ok.currency", "data": "currency" },
                    { "name": "ok.price", "data": "price" },
                    { "name": "ol.location_name", "data": "location_name" },                
                    { "name": "op.status", "data": function ( row, type, set ) {                        
                            return statusArr[row.status];
                        }
                    },                
                    { "name": "action", "data": null, "orderable": false, "searchable": false },
                ],
            "order" :[[ 1, 'desc' ]],
            "columnDefs": [ {
                "targets": -1,
                "data": "action",
                "render": function ( data, type, row, meta ) {
                    
                    let route = "#";
                    var action = '<div class="btn-group" role="group" aria-label="Basic example">';
                    action += '<button class="btn btn-outline-success details-control" ><span class="fa fa-info"></span></button>&nbsp;'
                    if (data.status == 3 || data.status == 0) {   
                        action += '<button class="btn btn-outline-dark" onclick="printPlanInvoice('+data.id+')"><span class="fa fa-print"></span></button>&nbsp;'
                    }
                    action += '</div>'

                    return action            
                }
            } 
            ],
            "initComplete": function(settings, json) {
                        
                for(key in json.data) {
                    if(json.data.hasOwnProperty(key)) {
                        productSelected[key] = json.data[key].product_id;
                        //do something with value;
                    }
                }

                selectProduct();
            },
        });


    function getPic(){
        let a = '{{$data->clientid}}';

         axios.get('{{route("phone-number.getPIC.datatable")}}?client_id='+a+'&status=2', {}, config)
         .then((res) => 
         {
            res.data.data.forEach((res) =>
            {
                var vd = '';
                res.pic_list.forEach(data => {
                    vd+=
                    '<tbody><tr><td>'+data.pic_name+'</td><td>'+data.pic_email+'</td><td>'+data.pic_number+'</td></tr></tbody>';
                });

                var notes = '';
                if(res.notes === ''){
                    notes = '<b class="text-danger">No Data Available!</b>';
                }else{
                    notes = '<textarea name="notes" class="form-control" rows="3" disabled>'+res.notes+'</textarea>';
                }

                $('#picData').append(
                    '<div class="row">\
                        <div class="col-md-12">\
                            <hr>\
                            <div class="form-group">\
                                <label class="plan-title pt-1">Plan Name :</label>\
                                <span class="ml-1">'+res.product_name+'</span>\
                            </div>\
                            <hr>\
                        </div>\
                    </div>\
                    <div class="row mt-1 pt-2 pb-4">\
                        <div class="col-2">\
                            <div class="row">\
                                <div class="col">\
                                    <label class="plan-title pt-1">Phone Number :</label>\
                                </div>\
                            </div>\
                            <div class="row">\
                                <div class="col">\
                                    <span>'+res.phone_number+'</span>\
                                </div>\
                            </div>\
                        </div>\
                        <div class="col-2">\
                            <div class="row">\
                                <div class="col">\
                                    <label class="plan-title pt-1">Extension :</label>\
                                </div>\
                            </div>\
                            <div class="row">\
                                <div class="col">\
                                    <span>'+res.extension+'</span>\
                                </div>\
                            </div>\
                        </div>\
                        <div class="col-2">\
                            <div class="row">\
                                <div class="col">\
                                    <label class="plan-title pt-1">Country Code :</label>\
                                </div>\
                            </div>\
                            <div class="row">\
                                <div class="col">\
                                    <span>'+res.country_code+'</span>\
                                </div>\
                            </div>\
                        </div>\
                        <div class="col-2">\
                            <div class="row">\
                                <div class="col">\
                                    <label class="plan-title pt-1">Area Code :</label>\
                                </div>\
                            </div>\
                            <div class="row">\
                                <div class="col">\
                                    <span>'+res.area_code+'</span>\
                                </div>\
                            </div>\
                        </div>\
                        <div class="col">\
                            <div class="row">\
                                <div class="col">\
                                    <label class="plan-title pt-1">Notes :</label>\
                                </div>\
                            </div>\
                            <div class="row">\
                                <div class="col">\
                                    '+notes+'\
                                </div>\
                            </div>\
                        </div>\
                    </div>\
                    <div class="row">\
                        <div class="col">\
                            <div class="row pb-3">\
                                <table id="example1" class="table table-hover" style="width:100%"><thead class="thead-dark"><tr><th>PIC Name</th><th>PIC Email</th><th>PIC Number</th></tr></thead>\
                                    '+vd+'\
                                </table>\
                            </div>\
                        </div>\
                </div>'           
                );
            });
        
         })
    }

    $('.tanggal').datepicker({
        "setDate": new Date(),
        autoclose: true,
        format: "yyyy-mm-dd",
        // onSelect: function(selectedDate) {}
    })

    $("#aplan").click(function () {
        $(".addnewplan").removeClass('d-none');
        
    });

    $("#ainvoice").click(function () {
        $(".addnewplan").addClass('d-none');
    });

    $("#adetail").click(function () {
        $(".addnewplan").addClass('d-none');
    });

    $("#apic").click(function () {
        $(".addnewplan").addClass('d-none');
    });

    $('#PlanModal').on('hidden.bs.modal', function () {
    // do something…
    console.log();
    })
   
    let statusArr = {
        0:'Unpaid',
        1:'Notified Paid',
        2:'Checked & Paid',
        3:'Activated',
        4:'Expired'
    };


    let productForm = $('[name="product_id"]');
    let discountForm = $('[name="promo_id"]');
    let productSelected = [];
    let total_amount = 0;
    let product_amount = 0;
    let subTotal = 0;
    let discount_amount = 0;
    let vat_amount = 0;

    let selectProduct = () => { 
        
        productForm.select2({
                placeholder: 'Choose product ...',
                width: '100%',
                allowClear: true,
                ajax: {            
                    url: '{{route("products.datatable")}}',
                    dataType: 'json',
                    data: function(params) {                
                        return {                    
                            start: params.page == NaN ? 0 : (params.page-1) * 100,
                            length: 100,
                            columns: {
                                0:{
                                name: 'op.product_name',
                                orderable: true,
                                searchable: true
                                }
                            },
                            search: {
                                // regex: true,
                                value: params.term,
                            },
                            order: {0:{dir:'asc'}}
                        }
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;                
                        let newData = []
                        let key_x = 0;

                        $.each(data.data, function(key, val){
                            
                            // if(productSelected.includes(val.id) == false){
                                newData[key_x] = {'id' : val.id, 'text' : val.product_name};
                                key_x++;
                            // }
                        })
    
                        data.results = newData;
                    
                        return {
                            results: data.results,
                            pagination: {
                                more: (params.page * 25) < data.recordsFiltered
                            }
                        }
    
                    },
                    cache: false
                },
                minimumInputLength: 4,
        });
    
        productForm.on('select2:select', function (e) {
            showVat()
            total_amount = 0;
            subTotal = 0;
            vat_amount = 0;
            discount_amount = 0;
            $('.loadingpart').remove();
            $('#collapseExample').collapse('hide').html('');
            $(this).closest('div').after('<div class="text-center loadingpart"><img src="{{asset("ajax-loader.gif")}}"></div>');
            getCurrency(e.params.data.id);
            discountForm.val(null).trigger('change');
        });
        productForm.on("select2:unselect", function (e) { 
            $('#collapseExample').collapse('hide').html('');            
            $('#inputGroupPrepend').html('...')
            showVat()
            total_amount = 0;
            subTotal = 0;
            vat_amount = 0;
            discount_amount = 0;
        })
    }

    let selectPromo = () => {
        discountForm.select2({
            placeholder: 'Choose promo ...',
            width: '100%',
            allowClear: true,
            ajax: {            
                url: '{{route("promo.datatable")}}',
                dataType: 'json',
                data: function(params) {                
                    return {                    
                        start: params.page == NaN ? 0 : (params.page-1) * 25,
                        length: 25,
                        columns: {
                            0:{
                            name: 'op.name',
                            orderable: true,
                            searchable: true
                            },
                            1:{
                            name: 'op.status',
                            orderable: true,
                            searchable: true,
                            search: {
                                    regex: true,
                                    value : '1',
                                },
                            }
                        },
                        search: {
                            // regex: true,
                            value: params.term,
                        },
                        order: {0:{dir:'asc'}}
                    } 
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;                
                    let newData = []
                    let key_x = 0;

                    $.each(data.data, function(key, val){
                        newData[key_x] = {'id' : val.id, 'text' : val.name};
                        key_x++;
                    })

                    data.results = newData;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 25) < data.recordsFiltered
                        }
                    }

                },
                cache: true
            },
            minimumInputLength: 0,
        });

        discountForm.on('select2:select', function (e) {
            $('.loadingpart').remove();
            $(this).closest('div').after('<div class="text-center loadingpart"><img src="{{asset("ajax-loader.gif")}}"></div>');
            getPromo(e.params.data.id);
            
        });
        discountForm.on("select2:unselect", function (e) { 
            $('.product_dt').remove();
            discount_amount = 0;
            totalAmount()
        })

        let getPromo = (id) => {        
            axios.get('{{route("promo.datatable")}}?columns[0][name]=op.id&columns[0][searchable]=true&columns[0][search][value]='+id, config) .then(function (response) {
                // console.log(response.data.data[0]) 
                let data = response.data.data[0];

                $('.loadingpart').remove();

                $('.product_dt').remove();
                if(data.meeting_room_hours != null){
                    $('.detail-product').find('.meeting_room_hours').append('<span class="product_dt"> +'+data.meeting_room_hours +'</span>');
                }
                if(data.working_pass != null){
                    $('.detail-product').find('.working_pass').append('<span class="product_dt"> +'+data.working_pass +'</span>');
                }
                
                discount_amount = 0;

                if(data.discount_type == 'fix'){
                    if(data.discount > 0){
                        discount_amount = data.discount;                        

                        $('.detail-product').find('.currency').append('<span class="product_dt"> -'+new Intl.NumberFormat('de-DE').format(discount_amount) +'</span>');
                    }
                }
                if(data.discount_type == 'percentage'){
                    if(data.discount > 0){
                        discount_amount = product_amount * (data.discount / 100);

                        $('.detail-product').find('.currency').append('<span class="product_dt"> -'+new Intl.NumberFormat('de-DE').format(data.discount) +'%</span>');                        
                    }   
                }

                totalAmount()
            })
            .catch(function (error) {                 
                console.log(error);
                $('.loadingpart').remove();
            });
        };
    };
    
    function showEditPlanModal(id, phone_number, client_id){
        // $("body").addClass("loading");
        $('#PlanModal').modal('show');
        // console.log(id);
    }

    let printPlanInvoice = (planId) => 
    {
        window.open('{{url('/invoicePlanPrint')}}/'+planId,'_blank');
    };
    
    let printInvoice = (invoiceId) => 
    {
        window.open('{{url("/invoicePrint")}}/'+invoiceId,'_blank');
    };

    let getCurrency = (id) => {        
        axios.get('{{route("products.datatable")}}?columns[0][name]=op.id&columns[0][searchable]=true&columns[0][search][value]='+id, config) .then(function (response) {
            product_amount = response.data.data[0].price;
            $('.detail-product').html(DetailProduct ( response.data.data[0] ));
            $('.loadingpart').remove();
            $('#collapseExample').collapse('show');
            $('#inputGroupPrepend').html(response.data.data[0].currency)
            showVat(response.data.data[0].vat_amount) 
            selectPromo();
        })
        .catch(function (error) { 
            $('.detail-product').html('');
            $('#collapseExample').collapse('hide');
            $('.loadingpart').remove();
            console.log(error);
        });
    }

    let showVat = (vat = 0) => {
        vat_amount = vat
        if (vat > 0){

            if ($('[name="vat"]:checked').val() > 0){

                $('#vat').html('('+ vat +' %)')
            } else {

                $('#vat').html('')
            }
        } else {

            $('#vat').html('')
        }

        totalAmount()
    }

    $('[name="vat"]').on('change', function(){
        showVat(vat_amount)
    })

    $('[name="wht"]').keyup(() => {
        totalAmount()
    });

    $('#exampleModal').on('hidden.bs.modal', function () {
    // do something…
        $('#falseinput').attr('src', '');
        $('#exampleModal')
        .find("input,textarea")
        .val('')
        .end();
    })

    $('#exampleNotifiedModal').on('hidden.bs.modal', function () {
    // do something…
        $('#falseinput').attr('src', '');
        $('#exampleNotifiedModal')
        .find("input,textarea")
        .val('')
        .end();
    })
    
    let setStatus = (status, id) => {
        Swal({ 
                title: 'Are you sure?',
                text: "You want to "+statusArr[status]+"!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor:'#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, '+statusArr[status]+' it!'
             })
             .then((result) => { 
                    if (result.value) {    
                        if(status == '1'){
                            console.log(id);
                            $('#exampleNotifiedModal').modal('show')
                            $('[name="id"]').val(id)
                            $('#saveNotifiedPayment').attr('onclick', 'savePayment('+id+', '+status+')')
                        }else if(status == '2'){
                            console.log(id);
                            $('#exampleModal').modal('show')
                            $('[name="id"]').val(id)
                            $('#savePayment').attr('onclick', 'savePayment('+id+', '+status+')')
                        }
                         else {
                            savePayment(id, status);
                            
                        }
                    }
            }), function(dismiss) {
            // dismiss can be "cancel" | "close" | "outside"
            }
    };

    let savePayment = (id, newStatus) => {

        if(newStatus == '1'){
            var input = $('#formNotifiedPayment').serialize()+ '&status=' + newStatus+'&image=' + $('#base').val();
            console.log(input);
        } else if (newStatus == '2'){
            var input = $('#formPayment').serialize()+ '&status=' + newStatus+'&image=' + $('#base').val();
            console.log(input);

            // var inputformdata = new FormData();
            //     inputformdata.append('paid_reference', $('[name="paid_reference"]').val());
            //     inputformdata.append('amount_paid', $('[name="amount_paid"]').val());
            //     inputformdata.append('date_paid', $('[name="date_paid"]').val());
            //     inputformdata.append('wht', $('[name="wht"]:checked').val());
            //     inputformdata.append('image', $('#base').val());
            //     inputformdata.append('paid_references_notes', $('[name="paid_references_notes"]').val());
            //     inputformdata.append('status', newStatus);
        } else {
            var input = 'status=' + newStatus+'&image=' + $('#base').val();
            // console.log(input);

            // var inputformdata = new FormData();
            // inputformdata.append('status', newStatus);

        }

        // inputformdata.append('id', id);

        axios.put('{{url("plan")}}/'+id, input, config) .then(function (response) {
                $('#exampleModal').modal('hide')
                $('#exampleNotifiedModal').modal('hide')
                // console.log(response); 
                table.ajax.reload();       
                // window.location = response.data.additional.redirect;

            })
            .catch(function (error) { console.log(error);
                $('#match-not').css('display', 'block')
                console.log(error.response);
                Swal({
                    type: 'error',
                    title: 'Oops...',
                    text: JSON.stringify(error.response.data.data.message),
                    // footer: '<a href>Why do I have this issue?</a>'
                })
            });

    }


    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                if(e.target.result != undefined){
                    $('#falseinput').closest('div').css('display', 'block')
                }
                $('#falseinput').attr('src', e.target.result);
                $('#base').val(e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }


    function totalAmount(){
        let total =subTotal;
        let vat_price = 0;
        let wht_price = 0;


        total_amount = total - discount_amount

        if ($('[name="vat"]:checked').val() == 1){
            vat_price = total_amount * (vat_amount / 100);
        }
        else if ($('[name="vat"]:checked').val() == 0){
            vat_price = 0;
        }


        if($('[name="wht"]').val() > 0){
            wht_price = total_amount * (parseInt($('[name="wht"]').val()) / 100);
        }

        total_amount = total_amount + (vat_price - wht_price)

        if(total_amount < 0){
            total_amount = 0;
        }

        $('#total_amount').html(new Intl.NumberFormat('de-DE').format(total_amount))
    }

    let showLogs = (selector,id) => {  

        $('#moreinfobtn_'+id).remove()
        
        var tbody = $(selector).closest('td').closest('tr').closest('tbody'); 
            tbody.append('<tr><td colspan="2" id="moreinfobtn_'+id+'"></td></tr>');
        
        tableLog(id)
    }

    let tableLog = (id) => {

        let tableLogs = '<table class="table" id="example2" style="width:100%">\
                        <thead>\
                            <tr>\
                                <th></th>\
                                <th>Created At</th>\
                                <th>Parameter</th>\
                                <th>Old</th>\
                                <th>New</th>\
                                <th>Operator</th>\
                            </tr>\
                        </thead>\
                        <tbody></tbody>\
                    </table>';

        $('#moreinfobtn_'+id).html(tableLogs)

        let dataTableLogs = $('#example2').DataTable({
            "scrollX": true,
            "pageLength": 25,
            "processing": true,
            "serverSide": true,
            "info": false,
            "ajax": {
                url: '{{route("plan-logs.datatable")}}',
                data: function (d) {            
                    d.columns[0].search.value = id;
                }
            },    
            "columns": [
                    { "name": "op.plan_id", "data": "plan_id" , "visible": false },
                    { "name": "op.updated_at", "data": "updated_at" , "visible": true },
                    { "name": "op.parameter", "data": "parameter", "orderable": false},
                    { "name": "op.old_value", "data": function ( row, type, set ) {
                            if(row.parameter == 'status' && row.old_value != null)
                            {
                                return statusArr[row.old_value];
                            } else {
                                return row.old_value;
                            }
                        }, "orderable": false
                    },
                    { "name": "op.new_value", "data": function ( row, type, set ) {
                            if(row.parameter == 'status')
                            {
                                return statusArr[row.new_value];
                            } else {
                                return row.new_value;
                            }
                        }, "orderable": false
                    },
                    { "name": "ot.username", "data": function ( row, type, set ) {
                            if (row.username == null){
                                return row.operator
                            } else {

                                return row.username
                            }
                        }, "orderable": false
                    },                    
                ],

            "order" :[[ 1, 'desc' ]],
            "initComplete": function(settings, json) {
                // drawAgain();
            }
        })

    };
    // table.columns.adjust();

    

    let DetailProduct = ( data ) => {        
        // `d` is the original data object for the row
        var result = '';
        result += '<div class="card detail_product"><div class="card-header"><strong><center>Detail Plan : '+data.product_name+'</center></strong>'+showImageProduct(data.image)+'</div>';

        result += '<div class="card-body"><dl class="row">';
            result += '<dt class="col-sm-5">Location name</dt><dd class="col-sm-7">: '+data.location_name+'</dd>';
            result += '<dt class="col-sm-5">Category desc</dt><dd class="col-sm-7">: '+data.category_desc+'</dd>';


            if(data.renewal_period != null){
                result += '<dt class="col-sm-5">Renewal period</dt><dd class="col-sm-7">: '+data.renewal_period+' month(s)</dd>';
            }

            if(data.flexi_office != null){
                result += '<dt class="col-sm-5">Flexi office</dt><dd class="col-sm-7">: '+checkUncheckVariable(data.flexi_office)+'</dd>';
            } else {
                result += '<dt class="col-sm-5">Flexi office</dt><dd class="col-sm-7">: '+checkUncheckVariable(false)+'</dd>';
            }

            if(data.dedicated_address != null){
                result += '<dt class="col-sm-5">Dedicated address</dt><dd class="col-sm-7">: '+checkUncheckVariable(data.dedicated_address)+'</dd>';
            } else {
                result += '<dt class="col-sm-5">Dedicated address</dt><dd class="col-sm-7">: '+checkUncheckVariable(false)+'</dd>';
            }

            if(data.dedicated_phone_number != null){
                result += '<dt class="col-sm-5">Dedicated phone number</dt><dd class="col-sm-7">: '+checkUncheckVariable(data.dedicated_phone_number)+'</dd>';
            } else {
                result += '<dt class="col-sm-5">Dedicated phone number</dt><dd class="col-sm-7">: '+checkUncheckVariable(false)+'</dd>';
            }            

            if(data.working_pass != null){
                result += '<dt class="col-sm-5">Working pass</dt><dd class="col-sm-7 working_pass">: '+data.working_pass+' day(s)</dd>';
            } else {
                result += '<dt class="col-sm-5">Working pass</dt><dd class="col-sm-7 working_pass">: 0 day(s)</dd>';
            }

            if(data.meeting_room_hours != null){
                result += '<dt class="col-sm-5">Meeting room hours</dt><dd class="col-sm-7 meeting_room_hours">: '+data.meeting_room_hours+' hour(s)</dd>';
            } else {
                result += '<dt class="col-sm-5">Meeting room hours</dt><dd class="col-sm-7 meeting_room_hours">: 0 hour(s)</dd>';
            }

        result += '<dt class="col-sm-5">Price</dt><dd class="col-sm-7 currency">: '+data.currency+' '+new Intl.NumberFormat('de-DE').format(data.price)+'</dd>';
        
        result += '<br><dt class="col-sm-5">Total</dt><dd class="col-sm-7"><strong>: '+data.currency+' <span id="total_amount">'+new Intl.NumberFormat('de-DE').format(data.price)+'</span></strong></dd>';

        subTotal = data.price

        total_amount = data.price;

        result += '</dl></div></div>';

        return result;

    };

    let checkUncheckVariable = (data) => {
        if(data == 'true'){
            return '<span class="fa fa-check text-success"></span>';
        } else {
            return '<span class="fa fa-close text-danger"></span>';
        }
    };

    let showImageProduct = (image) => {
        // console.log(image)
        if(image != null){
            var images = image.split(",")

            if(images.length > 0){
                valuename = ''
                for (let index = 0; index < images.length; index++) {
                    valuename += '<br><img class="img-responsive text-center" src="{{\Config::get("thirdparty.TURBO_URL")}}/storage/app/media/products/'+images[index].replace(" ", "")+'" alt="your image" style="max-height:500px;max-width:100%;width: expression(this.width > 500 ? 500: true);"/>'
                }
            }            

            return valuename;
        }

        return '';
    };

    $( "#form" ).submit(function( e ) {
        e.preventDefault()

        productSelected.push($(this).find('[name="product_id"] option:selected').val());

            axios.post('{{route("plan.store")}}', $(this).serialize(), config) .then(function (response) {            
                document.getElementById("form").reset();
                productForm.val(null).trigger('change');
                discountForm.val(null).trigger('change');
                $('.detail-product').html('');
                $('#vat').html('')
                $('#collapseExample').collapse('hide');            
                // table.ajax.reload();
                location.reload();
                // window.location = response.data.additional.redirect;
            })
            .catch(function (error) { console.log(error);
                $('.newerror').remove()
                var msgs = error.response.data.data.message
                $.each(msgs, function (index, value) {
                        $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                        // console.log(value[0])
                    });
            });

    })

    $('[name="promo_id"]').focus(function(){
        if($(this).find('option').length == 0){
            $('[name="product_id"]')[0].focus();
            Swal({
                type: 'error',
                title: 'Oops...',
                text: 'Please select product first',
                // footer: '<a href>Why do I have this issue?</a>'
            })
        }
    })
 
    let setStatusInvoice = (statusChoice, id) => {
        Swal({ 
            title: 'Are you sure?',
            text: "You want to "+statusArrInvoice[statusChoice]+"!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor:'#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, '+statusArrInvoice[statusChoice]+' it!'
            })
            .then((result) => { 
                if (result.value) {                                        
                    status = statusChoice;
                    if(statusChoice == '1'){
                        $('#exampleModalInvoice').modal('show')
                        $('[name="id"]').val(id)
                        $('#savePaymentInvoice').attr('onclick', 'savePaymentInvoice('+id+', '+status+')')
                    } else {
                        savePaymentInvoice(id, status);
                    }
                }
        }), function(dismiss) {
        // dismiss can be "cancel" | "close" | "outside"
        }
        
    };

    let savePaymentInvoice = (id, newStatus) => {
        if (status == '1'){
            // input = $('#formPayment').serialize();
            var inputformdata = new FormData();
                inputformdata.append('paid_reference', $('.invoice-form[name="paid_reference"]').val())
                inputformdata.append('amount_paid', $('.invoice-form[name="amount_paid"]').val())
                inputformdata.append('date_paid', $('.invoice-form[name="date_paid"]').val())
                inputformdata.append('wht', $('.invoice-form[name="wht"]:checked').val())
                inputformdata.append('image', $('#base_invoice').val())
                inputformdata.append('paid_references_notes', $('.invoice-form[name="paid_references_notes"]').val())            
                inputformdata.append('status', newStatus)
                // console.log(inputformdata)            


        } else {

            var inputformdata = new FormData();
            inputformdata.append('status', newStatus)            

        }

        inputformdata.append('id', id)            

        axios.post('{{url("invoice-paid")}}', inputformdata, config).then(function (response) {
                    // console.log(table.ajax);
                    $('#exampleModalInvoice').modal('hide')
                    table1.ajax.reload();
                })
                .catch(function (error) { console.log(error);        
                    $('.newerror').remove()
                    if(error.response.data.data.error_code != 'BAD_REQUEST'){

                        Swal({
                            type: 'error',
                            title: 'Oops...',
                            text: error.response.data.data.message,
                            // footer: '<a href>Why do I have this issue?</a>'
                        })
                    } else {

                        var msgs = error.response.data.data.message
                        $.each(msgs, function (index, value) {
                                console.log(value);
                                $('.invoice-form[name="'+index+'"]').after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                                // console.log(value[0])
                            });
                    }
                    // var msgs = error.response.data.data.message
                    // $.each(msgs, function (index, value) {
                    //         $('[name="'+index+'"]').after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                    //     });
                });
    };

    $('#exampleModalInvoice').on('hidden.bs.modal', function (e) {
        hideModal();
    })

    let hideModal = () => {
        $('.newerror').remove();
        $('#exampleModalInvoice').find("input, textarea").val("");
        $('#savePaymentInvoice').removeAttr('onlick');
    }

// sendmail modal ///////////////

    var myEditor;
    ClassicEditor
        .create(document.querySelector('#editor1'))
        .then(function (editor) {
            // The editor instance
            // console.log( 'Editor was initialized', editor );            
            myEditor = editor;
        })
        .catch(function (error) {
            console.error(error)
        })
    
    $("#formMail").submit(function(e){
        e.preventDefault();

        let input = ''
        let bodyFormData = new FormData();
        let inputonject = input.split("&")

        input = $(this).serialize();

        for (const key in inputonject) {
            if (inputonject.hasOwnProperty(key)) {
                var setInput = inputonject[key].split('=')
                bodyFormData.append(setInput[0], setInput[1])
            }
        }

        bodyFormData.append('sending_message', myEditor.getData() != "<p>&nbsp;</p>" ? myEditor.getData() : '')    

        axios.post('{{route("invoice.send-mail-invoice.store")}}', input, config).then(function (response) {
            // console.log(response);        
            Swal({
                type: 'success',
                title: 'Send Success!',
                text: '',
                // footer: '<a href>Why do I have this issue?</a>'
            })
            $('#exampleModalInvoice1').modal('hide')
            // table.ajax.reload();
        })
        .catch(function (error) { console.log(error);        
            $('.newerror').remove()
            var msgs = error.response.data.data.message
            $.each(msgs, function (index, value) {
                    $('[name="'+index+'"]').after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                });
        });
    });

    let sendMail = (invoiceId, email) => {
        $('#sending_to').val(email)
        $('#exampleModalInvoice1 [name="invoice_id"]').val(invoiceId)
        $('#exampleModalInvoice1').modal('show')
    }

    let hideMailModal = () => {
        $('.newerror').remove()
        $('#exampleModalInvoice1').find("input, textarea").val("");    
        myEditor.setData('');
        $('#sendMail').removeAttr('onlick')
    }

    $('#exampleModalInvoice1').on('hidden.bs.modal', function (e) {
        // do something...
        hideMailModal()
    })

        
</script>

@endsection

@section('addCustomInfo')
    if(currentRoute == 'plan.show'){
        if("invoice_number" in data){
            if(v.name == 'amount_due' || v.name == 'amount_paid'){
                valuename = new Intl.NumberFormat('en-US').format(valuename);
            }
            if(v.name == 'status'){
                if(data.status == 0){
                    let statusNow = data.status;
                        let activeStatus = '';
                        valuename = '';
                
                        for( let keystatus in statusArrInvoice)
                        {
                            if (keystatus == statusNow) {
                                activeStatus = 'check text-success"';
                            } else {
                                activeStatus = 'circle" onclick="setStatusInvoice('+keystatus+', '+data.id+')"';
                            }
                
                            valuename += '<div class="status-shine '+activeStatus+' >\
                                                <span class="fa fa-'+activeStatus+'"></span>&nbsp;&nbsp;&nbsp;'+statusArrInvoice[keystatus]+'\
                                        </div>';
                        }
                } else {
                    valuename = statusArrInvoice[data.status];
                }
            }

            if(v.name == 'discount_price'){
                valuename = new Intl.NumberFormat('en-US').format(valuename);

                if(data.discount_type == 'percentage'){
                    valuename += ' %';
                }
            }

            if(v.name == 'vat'){
                valuename = new Intl.NumberFormat('en-US').format(valuename);
                valuename += ' %';
            }

            if (v.name == 'show_period'){

                if(valuename == '1')
                {
                    valuename = '<span class="fa fa-check text-success"></span>';
                }
                
                if(valuename == '0')
                {
                    valuename = '<span class="fa fa-close text-danger"></span>';
                }
            }
            if (v.name == 'wht'){

                if(valuename == '0')
                {
                    valuename = '<span class="fa fa-close text-danger"></span>';
                } else {
                    valuename = new Intl.NumberFormat('en-US').format(valuename);
                    valuename += ' %';
                }
            }
            if (v.name == 'payment_proof'){
                if(valuename != null){
                    valuename = '<img class="img-responsive" src="{{\Config::get("thirdparty.TURBO_URL")}}/storage/app/media/payment_proof/'+valuename+'" alt="your image" style="max-height:500px;max-width:100%;width: expression(this.width > 500 ? 500: true);"/>&nbsp;&nbsp;&nbsp;'
                }
            }
        }else{
            if(v.name == 'status')
            {
                let statusNow = data.status;
                let activeStatus = '';
                valuename = '';
        
                for( let keystatus in statusArr)
                {
                    if (keystatus == statusNow) {
                        activeStatus = 'check text-success"';
                    } else {
                        activeStatus = 'circle" onclick="setStatus('+keystatus+', '+data.id+')"';
                    }
        
                    valuename += '<div class="status-shine '+activeStatus+' >\
                                        <span class="fa fa-'+activeStatus+'"></span>&nbsp;&nbsp;&nbsp;'+statusArr[keystatus]+'\
                                </div>';
                }
            }

            if(v.name == 'discount_price'){ 
                if(data.discount_type == 'percentage'){
                    valuename = valuename +' %';
                }
            }
        }
    }
@endsection

@section('moreinfoJsLg')
if(currentRoute == 'plan.show'){
    if("invoice_number" in data)
    {
        result += '<tr><td><strong>Items</strong></td><td>\
                <table class="table table-bordered" width="100%" id="tbody_items_'+data.id+'">\
                    <thead>\
                        <tr style="font-weight: bold">\
                            <td>Product</td><td>Price</td><td>Qty</td>\
                        </tr>\
                    </thead><tbody></tbody>';
        result += '</table></td></tr>';

        result += '<tr>\
        <td><strong>Follow Up Logs</strong></td>\
        <td><a class="btn btn-primary" href="{{url("invoice/follow-up")}}/'+data.id+'">Show Follow Up</a></td>\
        </tr>'; 
    }
    else
    {
        result += '<tr>'+
                    '<td width="30%"><strong>More</strong></td>'+
                    '<td>\
                        <div class="btn-group" role="group" aria-label="Basic example">\
                            <button type="button" class="btn btn-outline-secondary" onclick="showLogs(this, '+data.id+')">Logs Plan</button>&nbsp;\
                        </div></td>\
                    '+
                    '</tr>';
    } 
}
@endsection

@section('addCustomInfoXhr')
    
    
@endsection