@extends('layouts.master')

@section('page_title', 'Add Order')
@section('title', 'Add Order')
@section('main_item', 'Orders')
@section('sub_item', 'Add Orders')

@section('content')

    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <span class="input-group-addon">
                            <i class="fa fa-user"></i>
                        </span>
                        <label style="font-weight: bold" style="font-weight: bold">Customer *</label>
                        <div class="input-group">
                            <select class="form-control select2 customer-dropdown" id="customer" name="customer_id"
                                required>
                                <option value="">Select Customer </option>
                                @foreach ($customers as $customer)
                                    <option value="{{ $customer->id }}">{{ $customer->name }} | {{ $customer->mobile }} |
                                        {{ $customer->landmark }} </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3" hidden>
                        <div class="form-group">
                            <label style="font-weight: bold" for="ref_number">Waybill Number</label>
                            <span id="way_bill"></span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label style="font-weight: bold" for="ref_no" style="font-weight: bold">Order ID</label>
                        <input type="text" class="form-control" id="ref_no" name="ref_no"
                            placeholder="Keep blanck for auto genarate">
                    </div>
                    <div class="col-md-3">
                        <label style="font-weight: bold" for="currency_type" style="font-weight: bold">Currency Type</label>
                        <select class="form-control" id="currency_type" name="currency_type">
                            <option value="">Select Type</option>
                            @foreach ($currency_types as $key => $currency_type)
                                <option value="{{ $key }}">{{ $currency_type }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row g-3">
                    <div class="col-md-4" style="margin-top: 10px;">
                        <b><span for="" id="lable_name"></span></b><br>
                        <span for="" id="lable_mobile"></span><br>
                        <span for="" id="lable_address"></span><br>
                    </div>
                    <div class="col-md-2" style="margin-top: 10px;">
                        <span class="input-group-btn" style="float: right; background:#ed4b00; border-radius: 1px;">
                            <a id="add-customer" href="javascript:void(0)" class="btn btn-primary"
                                style="background:#ed4b00; float: right; color: white; border-radius: 5px;" type="button"
                                data-toggle="modal" data-target="#exampleModal2">Add</a>
                        </span>
                    </div>
                </div>
            </div>
            <!--end card-body-->
        </div>
    </div>
    <!--end card-->
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <label style="font-weight: bold" for="date-format" style="font-weight: bold">Order Date</label>
                        <input type="text" class="form-control mdate" placeholder="" id="mdate" name=""
                            required="required">
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold" for="resources" style="font-weight: bold">Select
                                Resources</label>
                            <select class="form-control select2" id="resources" name="resources">
                                <option value="">Choose Resources</option>
                                <option value="whats_app">WhatsApp</option>
                                <option value="face_book_leeds">Facebook Leads</option>
                                <option value="face_book_massenger">Facebook Massenger</option>
                                <option value="bulk_order">Bulk Order</option>
                                <option value="daraz">Daraz</option>
                                <option value="voucher">Voucher Order</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3" @if ($setting->business_location != '1') style="display: none" @endif>
                        <div class="form-group">
                            <label class="required" style="font-weight: bold" for="activate_code">business
                                Location</label>
                            <select class="form-control select2" id="business_location_id" name="location">
                                {{-- <option value="">Select</option> --}}
                                @if (Auth::user()->role_id == '1')
                                    @foreach ($users_access_location as $business_location)
                                        @if ($business_location->is_active == '1')
                                            <option value="{{ $business_location->id }}">
                                                {{ $business_location->name }}
                                            </option>
                                        @else
                                        @endif
                                    @endforeach
                                @else
                                    @foreach ($users_access_location as $business_location)
                                        @if ($business_location->is_active == '1')
                                            <option value="{{ $business_location->business_location_id }}">
                                                {{ $business_location->name }}
                                            </option>
                                        @else
                                        @endif
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3" @if ($setting->order_batch_enable != '1') style="display: none" @endif>
                        <label style="font-weight: bold" for="name">Campaign Name</label>
                        <select class="form-control select2" id="order_campgin_id" name="order_batch">
                            <option value="">Choose Campaign Name</option>
                            @foreach ($order_batchs as $order_batch)
                                <option value="{{ $order_batch->id }}">{{ $order_batch->batch_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-3">
        <div class="col-md-7">
            <div class="card">
                <div class="card-body">
                    <div class="row justify-content-center">
                        <div class="col-md-12">
                            <div class="form-group">
                                <div class="input-group">
                                    <select class="custom-select select2" id="grn-product-list" disabled>
                                        <option selected="">Choose Product</option>
                                        @foreach ($stocks as $stock)
                                            @if (!empty($stock->product))
                                                <option id="{{ $stock->id }}" value="{{ $stock->id }}"
                                                    {{ $stock->qty > 0 ? '' : 'disabled' }}>
                                                    <strong>
                                                        {{ $stock->product->sku }}
                                                    </strong>
                                                    | {{ $stock->product->product_name }}@if (!empty($stock->product->attribute_value))
                                                        ({{ $stock->product->attribute_value }})
                                                    @else
                                                        (single)
                                                    @endif
                                                    | Price : {{ number_format($stock->unit_price, 2) }}
                                                    | Avb. Qty
                                                    :
                                                    @if ($stock->qty > 0)
                                                        {{ number_format($stock->qty, 1) }}
                                                    @else
                                                        Out of Stock
                                                    @endif
                                                    {{ $stock->product->unit->short_name }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <form action="{{ route('orders.store') }}" method="POST" id="product_form">
                        @csrf
                        <div class="table-responsive dash-social" style="height: 300px;" style="overflow: scroll;">
                            <table id="datatable" class="table table-striped">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Image</th>
                                        <th>Product</th>
                                        <th>Quantity</th>
                                        <th>Selling Price</th>
                                        <th class="text-right">Line Total</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="tbody">

                                </tbody>
                            </table>
                        </div>
                </div>
                <div>
                    <input type="text" class="form-control" placeholder="Reference Number" id="ref_number_copy"
                        name="waybill_id" readonly hidden>
                    <input type="text" class="form-control" placeholder="" id="mdate_copy" name="sale_date" readonly
                        hidden>
                    <input type="text" class="form-control" placeholder="" id="ref_no_copy" name="ref_no_copy"
                        readonly hidden>
                    <input type="text" class="form-control" placeholder="" id="courior_copy" name="courier"
                        value="" hidden>
                    <input type="text" class="form-control" placeholder="" id="supplier_copy" name="contact_id"
                        readonly hidden>
                    <input type="text" class="form-control" placeholder="" id="customer_id_set"
                        name="customer_id_set" readonly hidden>
                    <input type="hidden" id="order_currency_type" name="currency_type" value="usd" hidden>
                    <div class="" hidden>
                        <input type="hidden" id="user_id" name="user_id" value="{{ Auth::user()->id }}">
                        <select class="form-control select2" id="location_id_copy" name="location">
                            @if (Auth::user()->role_id == '1')
                                @foreach ($users_access_location as $business_location)
                                    @if ($business_location->is_active == '1')
                                        <option value="{{ $business_location->id }}">
                                            {{ $business_location->name }}
                                        </option>
                                    @else
                                    @endif
                                @endforeach
                            @else
                                @foreach ($users_access_location as $business_location)
                                    @if ($business_location->is_active == '1')
                                        <option value="{{ $business_location->business_location_id }}">
                                            {{ $business_location->name }}
                                        </option>
                                    @else
                                    @endif
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <select class="form-control" id="order_resources" name="resources" hidden>
                        <option value="">N/A</option>
                        <option value="whats_app">WhatsApp</option>
                        <option value="face_book_leeds">Facebook Leads</option>
                        <option value="face_book_massenger">Facebook Massenger</option>
                        <option value="bulk_order">Bulk Order</option>
                        <option value="daraz">Daraz</option>
                    </select>
                    <div class="form-group" hidden>
                        <select class="form-control select2" id="order_copy_batch" name="order_batch">
                            <option value="">Choose Campaign Name</option>
                            @foreach ($order_batchs as $order_batch)
                                <option value="{{ $order_batch->id }}">{{ $order_batch->batch_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <!--end card-body-->
            </div>
            <!--end card-->
        </div>
        <div class="col-md-5">
            <input type="text" class="form-control" id="product_search_text" placeholder="Enter Product name / SKU"
                disabled><br>
            <input type="hidden" id="suggestion_page" value="1">
            <div class="">
                <div class="eq-height-row" id="product_list_body">
                    @include('sale.product_list')
                </div>
            </div>
            <div class="text-center" id="suggestion_page_loader" style="display: none;">
                <i class="fa fa-spinner fa-spin fa-2x"></i>
            </div>
        </div>
    </div>
    <div class="row g-3">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mt-0"><b>Add Payment</b></h4>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label style="font-weight: bold" for="sub_total">Sub Total</label>
                            <input type="text" class="form-control @error('invoice_total') is-invalid @enderror"
                                placeholder="0.00" id="sub_total" name="invoice_total" readonly required value="0.00">
                            @error('invoice_total')
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    {{ $message }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label style="font-weight: bold">Courier</label>
                            <select class="form-control select2 courior" id="courior" name="courior" required>

                                @foreach ($couriors as $courior)
                                    <option value="{{ $courior->id }}"
                                        @if ($courior->default_courier == 'yes') selected @endif>
                                        {{ $courior->name }} </option>
                                @endforeach
                            </select>
                        </div>
                        @if ($setting->delivery_fee_type == 'from_list')
                            <div class="col-md-4">
                                <label style="font-weight: bold" for="delivery_fee">Delivery Charge</label>
                                <input type="number" class="form-control" id="delivery_fee" name="delivery_fee"
                                    value="0" required>
                                @error('delivery_fee')
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        {{ $message }}
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                @enderror
                            </div>
                    </div><br>
                    <div class="row g-3">
                    @else
                        <div class="col-md-4">
                            <input class="form-check-input" type="checkbox" name="free_of_charge" id="free_of_charge"
                                value="0">
                            <label class="form-check-label" for="inlineRadio3">Free Of Charge</label>
                        </div>
                        <div class="col-md-4">
                            <label style="font-weight: bold" for="weight">Weight</label>
                            <input type="number" class="form-control " placeholder="0.00" id="weight_package"
                                name="weight_package" value="1">
                        </div>
                        @endif
                        <div class="col-md-4">
                            <label style="font-weight: bold" for="discount_type">Discount Type</label>
                            <select class="form-control " id="discount_type" name="discount_type" required>
                                <option value="fixed" selected>Fixed</option>
                                <option value="percentage">Percentage</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label style="font-weight: bold" for="discount">Discount</label>
                            <input type="text" class="form-control @error('invoice_discount') is-invalid @enderror"
                                placeholder="0.00" id="discount" required value="0.00">
                            <input type="hidden" id="invoice_discount" name="invoice_discount" value="0">
                            @error('invoice_discount')
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    {{ $message }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label style="font-weight: bold" for="order_status">Order Status</label>
                            <select class="form-control select2 " id="order_status" name="order_status" required>
                                <option value="pending" selected>Pending</option>
                                <option value="confirm">Confirm</option>
                            </select>
                            @error('order_status')
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    {{ $message }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card" style="height: 220px;">
                <div class="card-body">
                    <h4 class="header-title mt-0"><b>Add Payment Method</b></h4>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label style="font-weight: bold" for="payment_method">Payment Method</label>
                            <select class="form-control" id="payment_method" name="payment_method" required>
                                @foreach ($payment_methods as $key => $payment_method)
                                    <option value="{{ $key }}">{{ $payment_method }}</option>
                                @endforeach
                            </select>
                            @error('payment_method')
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    {{ $message }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @enderror
                        </div>
                        <div class="col-md-6" id="div_payment_amount">
                            <label style="font-weight: bold" for="payment_amount" style="font-weight: bold">Payment
                                Amount</label>
                            <input type="number" step="0.00" class="form-control cs-form" placeholder="0.00"
                                id="payment_amount" name="payment_amount" value="0.00" required>
                        </div>
                    </div><br>
                    <div class="row g-3">
                        <div class="col-md-6" id="div_bank_account_number" hidden>
                            <label style="font-weight: bold" for="bank_account_no" style="font-weight: bold">Bank Account
                                No</label>
                            <input type="text" class="form-control" placeholder="Bank Account No"
                                id="bank_account_no" name="bank_account_no">
                        </div>
                        <div class="col-md-6 account_div" style="display:none">
                            <label style="font-weight: bold">Payment Account</label>
                            <select class="form-control select2" id="account" name="payment_account">

                                @foreach ($payment_accounts as $payment_account)
                                    <option value="{{ $payment_account->id }}">{{ $payment_account->account_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <input type="hidden" name="delivery_fee_type" value="{{ $setting->delivery_fee_type }}"
                            id="delivery_fee_type">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-3">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mt-0"><b>Note</b></h4>
                    <div class="form-group mb-0">
                        <label style="font-weight: bold" for="exampleFormControlTextarea1">Sale note</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" name="sale_note" rows="9"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mt-0"><b>Summary</b></h4>
                    <div class="form-group">
                        <label style="font-weight: bold" for="net_total">Net Total</label>
                        <input type="text" class="form-control @error('invoice_subtotal') is-invalid @enderror"
                            placeholder="0.00" id="net_total" name="invoice_subtotal" readonly required value=""
                            style="font-weight: bold">
                        @error('invoice_subtotal')
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ $message }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label style="font-weight: bold" for="balance">Balance</label>
                        <input type="text" class="form-control" placeholder="" id="balance" name="invoice_balance"
                            readonly required value="0.00" style="font-weight: bold">
                    </div>
                    <div class="form-group">
                        <div class="form-check checkbox" style="margin-top: 20px">
                            <input class="form-check-input" id="send_sms" type="checkbox" name="send_sms"
                                value="1" disabled>
                            <label class="form-check-label"><b>Send sms</b> (Confirm orders only)</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6" hidden>
        <div class="card">
            <div class="card-body">
                <h4 class="header-title mt-0">Courier Payments</h4>
                <div class="form-group" hidden>
                    <label style="font-weight: bold" for="discount">Actual Courier Charge</label>
                    <input type="text" class="form-control" placeholder="0" id="courier_cost" name="courier_cost"
                        value="300" required readonly>
                </div>
                <div class="form-group" hidden>
                    <label style="font-weight: bold" for="discount">Weight</label>
                    <input type="text" class="form-control " placeholder="0.00" id="weight" name="weight"
                        required>
                </div>
                <div class="form-group" hidden>
                    <label style="font-weight: bold" for="discount">Additional Cost</label>
                    <input type="text" class="form-control" placeholder="0.00" id="additional_cost"
                        name="additional_cost" required>
                </div>
                <input type="hidden" name="basic_courier_cost" id="basic_courier_cost">
                <input type="hidden" name="additional_courier_cost" id="additional_courier_cost">
            </div>
        </div>
    </div>
    </div>
    <div class="row">
        <div class="col-sm-12 text-right">
            <button type="submit" class="btn btn-primary px-4 py-2" id="product_form_btn"><b>Save Order</b>
            </button>
        </div>
        </form>
    </div>
    <!-- Modal  Customer Details-->
    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form class="form-parsley" method="POST" id="quick_customer_form">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel"><b>Customer Details</b></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    @csrf
                                    <input type="text" class="form-control" placeholder="type" id="type"
                                        name="type" value="customer" readonly hidden>
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label style="font-weight: bold" for="name"
                                                style="font-weight: bold">Name
                                                *</label>
                                            <input type="text" class="form-control" placeholder="Name" id="name"
                                                name="name" required>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label style="font-weight: bold" for="businesss_name">Business
                                                    Name</label>
                                                <input type="text" class="form-control" placeholder="Business Name"
                                                    id="business_name" name="business_name">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label style="font-weight: bold" for="email">Email</label>
                                                <input type="text" class="form-control" placeholder="Email"
                                                    id="email" name="email" data-parsley-type="email">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <label style="font-weight: bold" for="primary_mobile">Primary Mobile *</label>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <h5 style="font-size: 14px;">+94</h5>
                                                </span>
                                                <input type="text"
                                                    onkeyup="if (event.srcElement.value.charAt(0) == '0') { event.srcElement.value = event.srcElement.value.slice(1); }"
                                                    class="form-control @error('mobile') is-invalid @enderror"
                                                    id="mobile" name="mobile" maxlength="9"
                                                    placeholder="Primary Mobile" required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <label style="font-weight: bold" for="secondary_mobile">Secondary
                                                Mobile</label>
                                            <input type="number" class="form-control" placeholder="Secondary Mobile"
                                                id="secondary_mobile" name="mobile_2" maxlength="10"
                                                data-parsley-type="digits">
                                        </div>
                                        <div class="col-md-4">
                                            <label style="font-weight: bold" for="landmark">Address *</label>
                                            <input type="text" class="form-control" placeholder="Address"
                                                id="landmark" name="landmark" required>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row g-3">
                                        <div class="col-md-4" id="city_div1">
                                            <div class="form-group">
                                                <label style="font-weight: bold" for="City">City *</label><br>
                                                <select class="form-control" id="city" name="city"
                                                    style="width: 100%;">
                                                    <option value="">Select</option>
                                                    @foreach ($cities as $city)
                                                        <option value="{{ $city->id }}">{{ $city->name_en }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div style="display: none" id="other_city_div">
                                            <div class="form-group">
                                                <label style="font-weight: bold" for="name">Other City</label><br>
                                                <input type="text" class="form-control" id="other_city"
                                                    name="other_city">
                                            </div>
                                        </div>
                                        <div class="col-md-4" id="state_div1">
                                            <label style="font-weight: bold" for="name">State</label><br>
                                            <input type="text" placeholder="State" class="form-control"
                                                id="state" name="state">
                                        </div>
                                        <div class="col-md-4" id="district_div1">
                                            <label style="font-weight: bold" for="province">District *</label><br>
                                            <select class="form-control" id="province_id" name="province_id"
                                                style="width: 100%;">
                                                <option value="">Select</option>
                                                @foreach ($provinces as $province)
                                                    <option value="{{ $province->id }}">{{ $province->name_en }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label style="font-weight: bold">Country *</label><br>
                                            <select class="form-control" id="country_id" name="country_id" required
                                                style="width: 100%;">
                                                <option value="">Select</option>
                                                @foreach ($countries as $country)
                                                    <option value="{{ $country->id }}"
                                                        {{ (old('country_id') ? old('country_id') : $country->nicename ?? '') == 'Sri Lanka' ? 'selected' : '' }}>
                                                        {{ $country->nicename }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="customer_quick_add"
                            aria-label="Close">Save</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script !src="">
        $('#province_id').select2();
        $('#city').select2();
        $('#country_id').select2();
        $('#payment_method').select2();
    </script>
    <script>
        $(document).ready(function() {

            $(document).on('change', '#order_status', function() {
                let val = $(this).val();

                if (val === 'confirm') {
                    $('#send_sms').prop('checked', true);
                    $("#send_sms").prop("disabled", false);
                } else {
                    $('#send_sms').prop('checked', false);
                    $("#send_sms").prop("disabled", true);
                }
            });

            $(document).on('input', '#product_search_text', function() {
                var term = $(this).val();
                let search = $('#product_search_text').val();
                $.ajax({
                    method: 'GET',
                    url: '/order/products/all/new',
                    data: {
                        term: term,
                    },
                    success: function(result) {
                        $('div#product_list_body').empty().html(result);
                        $('#suggestion_page_loader').fadeOut(700);
                    },
                });
            });

            $(document).on('click', '.product_card', function() {
                if ($('#currency_type').val() != '') {
                    let selected = $(this).data('stock_id');
                    var rowCount = $('#datatable tbody tr').length;
                    $.ajax({
                        method: 'GET',
                        url: '/orders/product/add/',
                        data: {
                            selected: selected,
                            rowCount: rowCount,
                            currency_type: $('#currency_type').val(),
                        },
                        success: function(response) {
                            $(response).appendTo($("#datatable tbody"));
                            calucalte();
                        }
                    });
                } else {
                    $.toast({
                        heading: 'Error',
                        text: 'Please select currency type..!',
                        position: 'top-right',
                        bgColor: '#b30000',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    });
                }

            })

            $('#currency_type').on('change', function() {
                if ($(this).val() != '') {
                    $('#grn-product-list').prop('disabled', false);
                    $('#product_search_text').prop('disabled', false);
                    $("#product_search_text").focus();
                } else {
                    $('#grn-product-list').prop('disabled', 'disabled');
                    $('#product_search_text').prop('disabled', 'disabled');
                }
            });

            $(document).on('change', '#grn-product-list', function() {
                var selected = $('#grn-product-list').find(':selected').val();
                var rowCount = $('#datatable tbody tr').length;

                $.ajax({
                    method: 'GET',
                    url: '/orders/product/add/',
                    data: {
                        selected: selected,
                        rowCount: rowCount,
                        currency_type: $('#currency_type').val(),
                    },
                    success: function(response) {
                        $(response).appendTo($("#datatable tbody"));
                        calucalte();
                    }
                });
            });

            $('#suggestion_page_loader').fadeIn(700);
            var page = $('input#suggestion_page').val();
            if (page == 1) {
                $('div#product_list_body').html('');
            }
            if ($('div#product_list_body').find('input#no_products_found').length > 0) {
                $('#suggestion_page_loader').fadeOut(700);
                return false;
            }
            $.ajax({
                method: 'GET',
                url: '/order/products/all',
                dataType: 'html',
                success: function(result) {
                    $('div#product_list_body').append(result);
                    $('#suggestion_page_loader').fadeOut(700);
                },
            });

            $('div#product_list_body').on('scroll', function() {
                if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                    var page = parseInt($('#suggestion_page').val());
                    page += 1;
                    $('#suggestion_page').val(page);
                }
            });

            $('.customer-dropdown').change(function() {
                $("#customer_id_set").val($(this).val());
                $('#lable_name').text($(".customer-dropdown :selected").text().split('|')[0]);
                $('#lable_mobile').text($(".customer-dropdown :selected").text().split('|')[1]);
                $('#lable_address').text($(".customer-dropdown :selected").text().split('|')[2]);

                if ($(this).val() != '') {
                    $('#product_form_btn').prop('disabled', false);

                } else {
                    $('#lable_name').text('');
                    $('#lable_mobile').text('');
                    $('#lable_address').text('');
                }
            });

            $('#product_form_btn').click(function(event) {
                event.preventDefault();
                $('#product_form_btn').prop('disabled', true);
                var rowCount = $('#datatable tbody tr').length;
                let flag = !$("#supplier_copy").val();
                let customer_id = $('#customer_id_set').val();

                if (customer_id != '') {
                    if (rowCount == 0) {
                        $.toast({
                            heading: 'Error',
                            text: 'Please select product..!',
                            position: 'top-right',
                            bgColor: '#ff1a1a',
                            showHideTransition: 'fade',
                            loaderBg: '#b30000'
                        });
                        $('#product_form_btn').prop('disabled', false);
                    } else {
                        $('#product_form').submit();

                    }
                } else {
                    $.toast({
                        heading: 'Error',
                        text: 'Please select customer..!',
                        position: 'top-right',
                        bgColor: '#b30000',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    });
                }

            });
            // quick add customer
            $(document).on('click', '#customer_quick_add', function() {
                if ($('#name').val() != '' && $('#mobile').val() != '' && $('#landmark').val() != '' && $(
                        '#city').val() != '' && $('#province_id').val() != '' && $('#country_id').val() !=
                    '') {
                    $.ajax({
                        method: 'post',
                        url: '/orders/customer/quick-add',
                        data: $("#quick_customer_form").serialize(),
                        success: function(response) {
                            if (response.success == 1) {
                                $.toast({
                                    heading: 'Success',
                                    text: response.msg,
                                    position: 'top-right',
                                    bgColor: '#006400',
                                    showHideTransition: 'fade',
                                    loaderBg: '#ecf0f1'
                                });
                                $("#customer_id_set").val(response.data);
                                $('#lable_name').text($('#name').val());
                                $('#lable_mobile').text($('#mobile').val());
                                $('#lable_address').text($('#landmark').val());
                                $('#exampleModal2').modal('hide');
                                $('.customer-dropdown').append($('<option>', {
                                    value: response.data,
                                    text: $('#name').val() + ' | ' + $('#mobile')
                                        .val() + " | " + $('#landmark').val()
                                }));

                                $("#quick_customer_form")[0].reset();
                                $(".customer-dropdown").val("").change();
                            } else {
                                $.toast({
                                    heading: 'Error',
                                    text: response.msg,
                                    position: 'top-right',
                                    bgColor: '#b30000',
                                    showHideTransition: 'fade',
                                    loaderBg: '#ecf0f1'
                                });
                            }
                            $("#customer_copy").val($("#customer").find(':selected').val());
                        }
                    })
                } else {
                    $.toast({
                        heading: 'Error',
                        text: "Fill all required fields..!",
                        position: 'top-right',
                        bgColor: '#b30000',
                        icon: 'error',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    });
                }
            })
            let country_id = $('#country_id').val();
            if (country_id == '200') {
                $('#district_div1').show();
                $('#city_div1').show();
                $('#state_div1').hide();
            } else {
                $('#district_div1').hide();
                $('#city_div1').hide();
                $('#state_div1').show();
            }

            $('#mdate').val(moment(new Date()).format("YYYY-MM-DD"));
            $('#mdate_copy').val(moment(new Date()).format("YYYY-MM-DD"));
            let courior_id = $('#courior').val();
            $.ajax({
                method: 'POST',
                url: "{{ route('oders.delivery-charge') }} ",
                data: {
                    "_token": "{{ csrf_token() }}",
                    'courior_id': courior_id,
                },
                success: function(response) {
                    $('#delivery_fee').val(response.courier_charges);
                    $('#additional_courier_cost').val(response.additional);
                    $('#basic_courier_cost').val(response.basic);
                }
            });
        });
        $('#payment_method').on('change', function() {
            let payment_method = $(this).val();
            $.ajax({
                success: function(response) {
                    if (payment_method == 'cash') {
                        $('.account_div').show();
                        $('#div_bank_account_number').prop('hidden', true);
                    } else if (payment_method === 'bank_transfer') {
                        $('.account_div').show();
                        $('#div_bank_account_number').prop('hidden', false);
                    } else if (payment_method === 'online') {
                        $('.account_div').show();
                        $('#div_bank_account_number').prop('hidden', true);
                    } else {
                        $('.account_div').hide();
                        $('#div_bank_account_number').prop('hidden', true);
                    }
                }
            });
        });
        $('#free_of_charge').on('change', function() {
            var checkBox = document.getElementById("free_of_charge");
            let is_free = $('#free_of_charge').val();
            if (checkBox.checked == true) {
                $('#weight_package').val(0)
                calucalte();
            } else {
                $('#weight_package').val(1)
                calucalte();
            }
        });

        $(document).on('change',
            '#ref_number, #supplier, #mdate ,#courior ,#ref_no, #resources, #business_location_id, #order_campgin_id',
            function() {
                $("#mdate_copy").val($("#mdate").val());
                $("#courior_copy").val($("#courior").val());
                $("#ref_no_copy").val($("#ref_no").val());
                $("#supplier_copy").val($("#supplier").find(':selected').val());
                $("#customer_id_set").val($("#supplier").find(':selected').val());
                $("#order_resources").val($("#resources").find(':selected').val());
                $("#location_id_copy").val($("#business_location_id").find(':selected').val());
                $("#order_copy_batch").val($("#order_campgin_id").find(':selected').val());
            })

        //check bad customer or not
        $(document).on('change', '#supplier', function() {
            $('#order_return').empty();
            let cus_id = $("#supplier").find(':selected').val();
            $.ajax({
                url: 'orders/customer/check/',
                data: {
                    id: cus_id,
                },
                success: function(response) {
                    $("[name='name']").val(response.data['name'])
                    $("[name='busines_name']").val(response.data['business_name'])
                    $("[name='email']").val(response.data['email'])
                    $("[name='mobile']").val(response.data['mobile'])
                    $("[name='mobile_2']").val(response.data['mobile_2'])
                    $("[name='landline']").val(response.data['landline'])
                    $("[name='landmark']").val(response.data['landmark'])
                    $("[name='province_id']").val(response.data['district_id'])
                    $("[name='province_id']").trigger('change')
                    $("[name='city']").val(response.data['city'])
                    $("[name='city']").trigger('change')
                }
            });
        })

        $(document).on('change', '.qty, .s_price', function() {
            let qty = $(this).closest("tr").find(".qty").val();
            let p_price = $(this).closest("tr").find(".s_price").val();
            let line_total = parseFloat(qty) * parseFloat(p_price);
            console.log('qty ' + qty)
            console.log('price ' + p_price)
            console.log('total ' + line_total)
            $(this).closest("tr").find(".line_total").html(line_total);
            calucalte();
        })

        $(document).on('click', '.remove_row', function() {
            $(this).closest("tr").remove();
            calucalte();
        })

        $(document).on('change', '#weight_package', function() {
            calucalte();
        })

        let type = $('#delivery_fee_type').val();

        function calucalte() {
            if (type == 'from_list') {
                let sub_total = 0.00;
                let net_total = 0.00;
                let total = 0.00;
                let balance = 0.00;
                $('#datatable tbody tr').each(function() {
                    total += parseFloat($(this).find(".line_total").html());
                });
                let delivery_fee = $('#delivery_fee').val();
                let discount_type = $("#discount_type").val();
                let discount_value = $("#discount").val();
                let payment_amount = $('#payment_amount').val();
                sub_total = total;
                net_total = sub_total + parseInt(delivery_fee);
                let discount = 0.00;
                let percentage = 0;
                if (discount_type === 'fixed') {
                    discount = parseFloat(discount_value);
                    net_total -= parseFloat(discount);
                    $('#invoice_discount').val(discount);
                } else {
                    percentage = net_total * discount_value / 100;
                    net_total -= parseFloat(percentage);
                    $('#invoice_discount').val(percentage);
                }
                if (payment_amount == '') {
                    payment_amount = 0.00;
                    $('#payment_amount').val(0);
                }
                balance = net_total - payment_amount;
                $('#sub_total').val(sub_total.toFixed(2));
                $('#net_total').val(net_total.toFixed(2));
                $('#p_amount').val(sub_total.toFixed(2));
                $('#balance').val(balance.toFixed(2));
            } else {
                let sub_total = 0.00;
                let net_total = 0.00;
                let total = 0.00;
                let balance = 0.00;
                $('#datatable tbody tr').each(function() {
                    total += parseFloat($(this).find(".line_total").html());
                });
                let t_weight = 0;
                let basic_courier_cost = $('#basic_courier_cost').val();
                let additional_courier_cost = $('#additional_courier_cost').val();
                let weight = Math.ceil($('#weight_package').val());
                let discount_type = $("#discount_type").val();
                let discount_value = $("#discount").val();
                let payment_amount = $('#payment_amount').val();
                if (weight == 1) {
                    t_weight = 1 * basic_courier_cost;
                } else if (weight > 1) {
                    t_weight = 1 * basic_courier_cost;
                    weight = weight - 1;
                    t_weight = t_weight + weight * additional_courier_cost;
                }
                let delivery_fee = t_weight;
                sub_total = total;
                net_total = sub_total + parseInt(delivery_fee);
                let discount = 0.00;
                let percentage = 0;
                if (discount_type === 'fixed') {
                    discount = parseFloat(discount_value);
                    net_total -= parseFloat(discount);
                    $('#invoice_discount').val(discount);
                } else {
                    percentage = net_total * discount_value / 100;
                    net_total -= parseFloat(percentage);
                    $('#invoice_discount').val(percentage);
                }
                if (payment_amount == '') {
                    payment_amount = 0.00;
                    $('#payment_amount').val(0);
                }
                balance = net_total - payment_amount;
                $('#sub_total').val(sub_total);
                $('#net_total').val(net_total);
                $('#p_amount').val(sub_total);
                $('#balance').val(balance);
            }
        }

        $(document).on('click', '#discount', function() {
            this.select();
        })

        $(document).on('change', '#discount', function() {
            calucalte();
        })

        $(document).on('change', '#delivery_fee', function() {
            calucalte();
        })

        $(document).on('change', '#payment_amount', function() {
            calucalte();
        })

        $(document).on('input', '.qty', function() {
            let id = $(this).attr('id');
            let available_qty = $('#stock' + id).val();
            let qty = $(this).val();
            if (parseInt(available_qty) >= parseInt(qty)) {
                $('#product_form_btn').attr('disabled', false);
            } else {
                if (qty != '') {
                    alert('Qty goes over')
                }
                $('#product_form_btn').attr('disabled', true);
            }
        })


        function loadCustomer(cus_id) {
            $.ajax({
                url: 'orders/customer/check/',
                data: {
                    id: cus_id
                },
                success: function(response) {
                    $("[name='name']").val(response.data['name'])
                    $("[name='busines_name']").val(response.data['business_name'])
                    $("[name='email']").val(response.data['email'])
                    $("[name='mobile']").val(response.data['mobile'])
                    $("[name='mobile_2']").val(response.data['mobile_2'])
                    $("[name='landline']").val(response.data['landline'])
                    $("[name='landmark']").val(response.data['landmark'])
                    $("[name='state']").val(response.data['state']);
                    $("[name='other_city']").val(response.data['other_city']);
                    $other = $("#other_city").val();
                    if ($other != "") {
                        $('#other_city_div').show();
                    }
                    $("[name='province_id']").val(response.data['district_id']);
                    $("[name='province_id']").trigger('change');
                    $("[name='city']").val(response.data['city']);
                    $("[name='city']").trigger('change');
                    if (response.data['country_id']) {
                        $("[name='country_id']").val(response.data['country_id'])
                        $("[name='country_id']").trigger('change')
                    } else {
                        $("[name='country_id']").val(200)
                        $("[name='country_id']").trigger('change')
                    }
                    $("#supplier_copy").val(cus_id);
                    $("#customer_id_set").val(cus_id);
                }
            });
        }

        $(document).on('change', '#city', function() {
            let city_id = $(this).val();
            let url = "{{ route('get-district') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    _token: "{{ csrf_token() }}",
                    city_id: city_id,
                },
                success: function(response) {
                    $('#province_id').val(response).change();
                },
            });
        });
        $(document).on('change', '#city', function() {
            let city_id = $(this).val();
            let url = "{{ route('get_city_name') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    _token: "{{ csrf_token() }}",
                    city_id: city_id,
                },
                success: function(response) {
                    if (response == 'Other') {
                        $('#other_city_div').show();
                    } else {
                        $('#other_city_div').hide();
                    }
                }
            });
        });

        $(document).on('click', '.select-cus', function() {
            $("#cus_modal").modal('hide');
        })

        $(document).on('change', '#cus_form input', function() {
            $("#supplier_copy").val('');
        })
        $(document).on('change', '#sub_total', function() {
            let discount_type = $("#discount_type").val();
            let delivery_fee = $('#delivery_fee').val();
            let total = $("#sub_total").val();
            let discount = $("#discount").val();
            let sub = total - discount + parseInt(delivery_fee);
            $("#net_total").val(sub);
            $("#p_amount").val(sub);
        });

        $(document).on('change', '#courior', function() {
            let courior_id = $('#courior').val();
            $.ajax({
                method: 'POST',
                url: "{{ route('oders.waybill') }} ",
                data: {
                    "_token": "{{ csrf_token() }}",
                    'courior_id': courior_id,
                },
                success: function(response) {
                    $('#way_bill').empty().html(response);
                }
            })
        });

        $(document).on('change', '#delivery_fee', function() {
            calucalte();
        });

        $(document).on('change', '#courior', function() {
            let courior_id = $('#courior').val();
            $.ajax({
                method: 'POST',
                url: "{{ route('oders.delivery-charge') }} ",
                data: {
                    "_token": "{{ csrf_token() }}",
                    'courior_id': courior_id,
                },
                success: function(response) {
                    $('#delivery_fee').val(response.courier_charges);
                    $('#additional_courier_cost').val(response.additional);
                    $('#basic_courier_cost').val(response.basic);
                    calucalte();
                }
            })
        });

        $(document).on('keyup', '#weight', function() {
            let package_weight = $(this).val();
            let courior_id = $('#courior').val();
            if (courior_id == 0) {
                Swal.fire(
                    'Not Selected',
                    'Please select Courier',
                    'warning'
                )
                $('#weight').empty().val("");
            } else {
                $.ajax({
                    method: 'POST',
                    url: "{{ route('sales.getDeliveryCost') }}",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        'package_weight': package_weight,
                        'courior_id': courior_id,
                    },
                    success: function(response) {
                        $('#additional_cost').empty().val(response);
                    }
                })
            }
        });
        $(document).on('change', '#country_id', function() {
            $("#other_city").val('');
            let country_id = $(this).val();
            if (country_id == '200') {
                $('#district_div1').show();
                $('#city_div1').show();
                $('#state_div1').hide();
            } else {
                $('#district_div1').hide();
                $('#city_div1').hide();
                $('#state_div1').show();
            }
        });
        $(document).on('change', '#currency_type', function() {
            $('#order_currency_type').val($(this).val());
            getProductsRelatedToCurrency($(this).val());
        });
        $(document).on('change', '#business_location_id', function() {
            $('#business_location_id').val($(this).val());
            getProductsRelatedImage($(this).val());
        });

        function getProductsRelatedImage(business_location_id) {
            $.ajax({
                method: 'GET',
                url: "{{ route('sale.image_product_location') }}",
                data: {
                    business_location_id: business_location_id,
                },
                success: function(options) {
                    $('#product_list_body').empty().html(options)
                }
            });
        }
    </script>

@endsection