@extends('layouts.master')
@section('title')
Create Order
@endsection
@section('css')
<link href="{{ URL::asset('build/libs/dropzone/dropzone.css') }}" rel="stylesheet">
<!-- Sweet Alert css-->
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet">
@endsection
@section('content')


<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Create Payment</h4>
        </div>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-xxl-8">
        <div class="card live-preview ribbon-box right" style="background:#fff9f9">
            
            <form class="" method="POST" novalidate action="{{route('orders.store')}}" id="invoice_form">
                @csrf         
                <!-- ******************************** START :: INVOICE NO, DATE, TYPE, PAYMENT ******************************** -->
                <div class="card-body p-4">
                    <div class="row g-3">
                        <div class="col-lg-3 col-sm-6">
                            <label for="invoicenoInput">Order No</label>
                            <input type="text" class="form-control bg-light " id="invoicenoInput" name="invoice_no" maxlength="12" placeholder="Order No" value="{{ $order->invoice_no}}" readOnly />
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div>
                                <label for="date-field">Date</label>
                                <input type="text" class="form-control bg-light " id="date-field" placeholder="Select Date" data-provider="flatpickr" value="{{ Carbon\Carbon::now()->format('Y-m-d') }}" data-date-format="Y-m-d">
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6" hidden>
                            <label for="choices-payment-status">Sales Type</label>
                            <div class="input-light">
                                <select class="form-select bg-light " readOnly onchange="changeSalesType(this.value);" aria-label="select example" id="" name="sales_type">
                                    <!-- <option value="">Select Sales Type</option> -->
                                    <!-- <option value="1" >Cash Bill</option>  -->
                                    <!-- IF CASH BILL IS SELECTED, IT WILL HAVE ONLY CASH Payment Mode and ORDER SETTLED -->
                                    <option value="2" selected>Sales Order</option>
                                    <!-- IF Sales Order IS SELECTED, IT WILL HAVE FULL, PARTIAL, UNPAID Payment Mode -->
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                           <div>
                               <label for="totalamountInput">Document Type</label>
                               <!-- <select class="form-select bg-light " required aria-label="select example" id="selCashBill" name="">
                                   <option value="1" selected>Cash Only</option>
                               </select> -->
                               
                               <input type="text" class="form-control bg-light " id="invoicenoInput" name="invoice_no" maxlength="12" placeholder="Order No" value="{{ $order->account_job_id}}" readOnly />
                           </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                           <div>
                               <label for="totalamountInput">Payment Type</label>
                               <!-- <select class="form-select bg-light " required aria-label="select example" id="selCashBill" name="">
                                   <option value="1" selected>Cash Only</option>
                               </select> -->
                               <select class="form-select bg-light " aria-label="select example" id="choices-payment-status" id="selSaleOrder" name="payment_status">
                                   <!-- <option value="">Select Payment</option> -->
                                   <option value="3" selected>No Payment</option>
                                   <option value="2">Collect Partial Deposit</option>
                                   <option value="1">Full Amount</option>
                                   <!-- <option value="3">Unpaid</option> -->
                               </select>
                           </div>
                        </div>
                    </div>
                </div>
                <!-- ******************************** END :: INVOICE NO, DATE, TYPE, PAYMENT ******************************** -->

                <!-- ******************************** START :: Billing & Shipping Address ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed">
                    <div class="row">
                        <!-- Start :: Billing Address -->
                        <div class="col-lg-4 col-sm-6">
                            <div>
                                <label for="companyAddress">Shipping Contact</label>
                            </div>
                            <div class="mb-2">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="shippingName" placeholder="Shipping Attention Name" />
                            </div>
                            <div class="mb-2">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="shippingPhoneno1" name="shippingPhoneno1" placeholder="(123)456-7890" />
                                <div class="invalid-feedback">                                          Please enter a phone number (1)
                                </div>
                            </div>
                            <div class="mb-2">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="shippingPhoneno2" placeholder="(123)456-7890" />
                                <div class="invalid-feedback">
                                    Please enter a phone number (2)
                                </div>
                            </div>
                            
                            <!-- <div class="mb-2">
                                <input type="text" class="form-control bg-light " id="billingName" placeholder="Full Name"/>
                                <div class="invalid-feedback">
                                    Please enter a full name
                                </div>
                            </div>
                            <div class="mb-2">
                                <textarea class="form-control bg-light " id="billingAddress" rows="3" placeholder="Billing Address"></textarea>
                                <div class="invalid-feedback">
                                    Please enter a address
                                </div>
                            </div>
                            <div class="mb-2">
                                <input type="text" class="form-control bg-light " data-plugin="cleave-phone" id="billingPhoneno" placeholder="(123)456-7890" />
                                <div class="invalid-feedback">
                                    Please enter a phone number
                                </div>
                            </div> -->
                        </div>
                        <!-- END :: Billing Address -->
                        <!-- Start :: Shipping Address -->
                        <div class="col-sm-6 ms-auto">
                            <div class="row">
                                <div class="col-lg-8">
                                    
                                    <div>
                                        <label for="companyAddress">Shipping Address</label>
                                    </div>
                                    
                                    <div class="mb-2">
                                        <input class="form-control bg-light " rows="3" id="address1" name="address1" placeholder="Address 1"></input>
    
                                    </div>
                                    <div class="mb-2">
                                        <input class="form-control bg-light " rows="3" id="address2" name="address2" placeholder="Address 2"></input>

                                    </div>
                                    <div class="mb-2">
                                        <input class="form-control bg-light " rows="3" id="address3" name="address3" placeholder="Address 3"></input>

                                    </div>
                                    <div class="mb-2">
                                        <input class="form-control bg-light " rows="3" id="address4" name="address4" placeholder="Address 4"></input>
                                        <div class="invalid-feedback">
                                            Please enter a address
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        <!-- END :: Billing Address -->
                    </div>
                </div>
                <!-- ******************************** END :: Billing & Shipping Address ******************************** -->

                <!-- ******************************** START :: Ship Via ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed">
                    <div class="row">
                        <div class="col-lg-4 col-sm-6">
                            <div>
                                <label for="companyAddress">Ship From</label>
                            </div>
                            <div class="mb-2">
                                <input type="text" class="form-control bg-light " id="invoicenoInput" name="invoice_no" maxlength="12" placeholder="Order No" value="{{ $order->location_id}}" readOnly />
                                <div class="invalid-feedback">Example invalid select feedback</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ******************************** END :: Ship Via ******************************** -->
               
                <!-- ******************************** START :: STOCK CREATE ******************************** -->
                <div class="card-body border-top border-top-dashed p-4">
                    <!-- ****** START :: STOCK + CALCULATION ****** -->
                    <div class="table-responsive">
                        <table class="invoice-table table table-borderless table-nowrap mb-0">
                            <thead class="align-middle">
                                <tr class="table-active">
                                    <th scope="col" style="width: 50px;">#</th>
                                    <th scope="col">
                                        Product Details
                                    </th>
                                    <th scope="col" style="width: 120px;">
                                        <div class="d-flex currency-select input-light align-items-center">
                                        Price
                                            <!-- <select class="form-select bg-light" data-choices data-choices-search-false id="choices-payment-currency" onchange="otherPayment()">
                                                <option value="RM">(RM)</option>
                                            </select> -->
                                        </div>
                                    </th>
                                    <th scope="col" style="width: 120px;">Quantity</th>
                                    <th scope="col" class="text-end" style="width: 150px;">Amount</th>
                                    <th scope="col" class="text-end" style="width: 105px;"></th>
                                </tr>
                            </thead>
                            <tbody id="newlink">
                              
                                
                            </tbody>
                            <tbody>
                                <tr id="newForm" style="display: none;">
                                    <td class="d-none" colspan="5">
                                        <p>Add New Form</p>
                                    </td>
                                    
                                </tr>
                                <tr>
                                    <td colspan="5">
                                    <button type="button" class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" id="btnAddStockModal" data-bs-target="#addStockModal">
                                        <i class="ri-file-add-line label-icon align-middle rounded-pill fs-16 me-2"></i> Add Stock
                                    </button>
                                    <!-- <a href="javascript:void(0)" onclick="new_link1()" id="add-item" class="btn btn-soft-secondary fw-medium"><i class="ri-add-fill me-1 align-bottom"></i> Add Item</a> -->
                                        <!-- <a href="javascript:new_link()" id="add-item" class="btn btn-soft-secondary fw-medium"><i class="ri-add-fill me-1 align-bottom"></i> Add Item</a> -->
                                    </td>
                                </tr>
                                <tr class="border-top border-top-dashed mt-2">
                                    <td colspan="3"></td>
                                    <td colspan="2" class="p-0">
                                        <table class="table table-borderless table-sm table-nowrap align-middle mb-0">
                                            <tbody>
                                                <tr>
                                                    <th scope="row">Sub Total</th>
                                                    <td style="width:150px;">
                                                        <input type="text" class="form-control bg-light " id="cart-subtotal" name="cart-subtotal" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr style="display:none;">
                                                    <th scope="row">Estimated Tax (12.5%)</th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-tax" name="cart-tax" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr style="display:none;">
                                                    <th scope="row">Discount <small class="text-muted"></small></th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-discount" name="cart-discount" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr style="display:none;">
                                                    <th scope="row">Shipping Charge</th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-shipping" name="cart-shipping" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                                <tr class="border-top border-top-dashed">
                                                    <th scope="row">Total Amount</th>
                                                    <td>
                                                        <input type="text" class="form-control bg-light " id="cart-total" name="cart-total" placeholder="$0.00" readonly />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- ****** END :: STOCK + CALCULATION ****** -->

                    <!-- ****** START :: Payment Details ****** -->
                    <div class="row mt-3">
                        <div class="col-lg-4">
                            <div class="mb-2">
                                <label for="choices-payment-type" class="form-label text-muted text-uppercase fw-semibold">Payment Details</label>
                                <div class="input-light">
                                    <select class="form-control bg-light " data-choices data-choices-search-false data-choices-removeItem id="choices-payment-type" name="choices-payment-type">
                                        <option value="">Payment Method</option>
                                        <!-- <option value="Mastercard">Mastercard</option>
                                        <option value="Credit Card">Credit Card</option>
                                        <option value="Visa">Visa</option>
                                        <option value="Paypal">Paypal</option> -->
                                        @foreach($payment_method['PaymentMethods'] as $key=>$value)    
                                        <option value="{{$value['AcPaymentCode']}}">{{$value['AcPaymentDesc']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="mb-2">
                                <input class="form-control bg-light " type="text" id="cardholderName" placeholder="Card Holder Name" name="cardholderName">
                            </div>
                            <div class="mb-2">
                                <input class="form-control bg-light " type="text" id="cardNumber" placeholder="xxxx xxxx xxxx xxxx" name="cardNumber">
                            </div>
                            <div>
                                <input class="form-control  bg-light " type="text" id="amountTotalPay" name="amountTotalPay" placeholder="$0.00" />
                            </div>
                        </div>
                    </div>
                    <!-- ****** END :: Payment Details ****** -->
                    <!-- ****** START :: NOTE ****** -->
                    <div class="mt-4">
                        <label for="exampleFormControlTextarea1" class="form-label text-muted text-uppercase fw-semibold">NOTES</label>
                        <textarea class="form-control alert alert-info" id="exampleFormControlTextarea1" placeholder="Notes" rows="2" required>All accounts are to be paid by cheque or credit card or cash or direct payment online. If account is not paid items will not be released.</textarea>
                    </div>
                    <!-- ****** END :: NOTE ****** -->
                    <!-- ****** START :: BUTTONS ****** -->
                    <div class="hstack gap-2 justify-content-end d-print-none mt-4">
                        <button type="submit" class="btn btn-success"><i class="ri-printer-line align-bottom me-1"></i> Save</button>
                        <!-- <a href="javascript:void(0);" class="btn btn-primary"><i class="ri-download-2-line align-bottom me-1"></i> Download Order</a> -->
                        <!-- <a href="javascript:void(0);" class="btn btn-danger"><i class="ri-send-plane-fill align-bottom me-1"></i> Send Order</a> -->
                    </div>
                    <!-- ****** END :: BUTTONS ****** -->
                </div>
                <!-- ******************************** END :: STOCK CREATE ******************************** -->
            </form>
        </div>
    </div>
</div>

<!-- START :: ADD STOCK MODAL -->
<div class="modal fade" id="addStockModal1" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Stock</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="needs-validation" novalidate id="add_stock_form">
                    <div class="mb-2">
                        <select class="form-control bg-light " data-choices id="select-stock" name="select-stock" required>
                            <option value="">Select Stock</option>
               
                        </select>
                    </div>
                    <div class="mx-auto">
                        <a href="javascript:void(0);" onclick="checkSelectedStock();" class="btn btn-link fw-medium" data-bs-dismiss="modal" aria-label="Close">Add to order list<i class="ri-arrow-right-line ms-1 align-middle"></i></a>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>

<div class="modal fade" id="addStockModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Search Stock</h5>
                <br>
                <button type="button" id="btnCloseSelectStockModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <small style="padding: 0rem 1.25rem">Narrow the search to fasten the process.</small>
            <div class="modal-body pb-0">
                <form id="add_stock_form">
                    <div class="mb-2">
                        <input type="text" id="txtSearchStockId" placeholder="By ID" class="form-control bg-light ">
                    </div>
                    <div class="mb-2">
                        <input type="text" id="txtSearchStockName" placeholder="By Description " class="form-control bg-light ">
                    </div>
                    <div class="mb-2">
                        <select type="text" id="txtSearchStockType" class="form-control bg-light ">
                            <option value="ALL">ALL</option>
                            <option value="STOCK">STOCK</option>
                            <option value="SERVICE">SERVICE</option>
                            <option value="NON-STOCK">NON-STOCK</option>
                        </select>
                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-primary rounded-pill" id="btnSearchStock" onclick="searchStock();"> 
                            Search Stock
                        </button>
                    </div>
                </form>
                    

                    <div>
                    <table class="table table-striped table-nowrap mb-0 mt-2" id="tableStockSearch">
                        
                    </table>
                        <div class="pagination" id="stockPagination">
                            
                        </div>
                    </div>
 
            </div>
            <div class="modal-footer">
                
            </div>
        </div>
    </div>
</div>
<!-- END :: ADD STOCK MODAL -->

<!-- START :: SEARCH CUSTOMER MODAL -->
<div class="modal fade" id="selectCustomerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Search Customer</h5>
                <br>
                <button type="button" id="btnCloseSelectCustomerModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <small style="padding: 0rem 1.25rem">Narrow the search to fasten the process.</small>
            <div class="modal-body pb-0">
                <form id="add_stock_form">
                    <div class="mb-2">
                        <input type="text" id="txtSearchCustId" placeholder="By ID" class="form-control bg-light ">
                    </div>
                    <div class="mb-2">
                        <input type="text" id="txtSearchCustName" placeholder="By Name" class="form-control bg-light ">
                    </div>
                    <div class="mb-2">
                        <input type="text" id="txtSearchCustContact" placeholder="By Contact Number" class="form-control bg-light ">
                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-primary rounded-pill" id="btnSearchCustomer" onclick="searchCustomer();"> 
                            Search
                        </button>
                    </div>
                </form>
                    

                    <div>
                    <table class="table table-striped table-nowrap mb-0 mt-2" id="tableCustomerSearch">
                            <!-- <thead class="align-middle">
                                <tr class="table-active">
                                    <th scope="col">
                                        Customer
                                    </th>
                                    <th scope="col" style="width: 120px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody> -->
                    </table>

                        <div class="pagination" id="pagination">
                            <!-- Pagination buttons will be inserted here by JavaScript -->
                        </div>
                    </div>
                    <!-- <div class="mx-auto">
                        <a href="javascript:void(0);" onclick="checkSelectedStock();" class="btn btn-link fw-medium" data-bs-dismiss="modal" aria-label="Close">Add to order list<i class="ri-arrow-right-line ms-1 align-middle"></i></a>
                    </div> -->
                
            </div>
            <div class="modal-footer">
                
            </div>
        </div>
    </div>
</div>
<!-- END :: SEARCH CUSTOMER MODAL -->

@endsection
@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ URL::asset('build/libs/prismjs/prism.js') }}"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script src="{{ URL::asset('build/libs/dropzone/dropzone-min.js') }}"></script>
<script src="{{ URL::asset('build/libs/cleave.js/cleave.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/invoicecreate.init.js') }}"></script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/form-validation.init.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/sweetAlert.js') }}"></script>




@endsection