@extends('layouts.master')

@section('title', 'New Order | Alboosh - Timeless authenticity, born of the desert')

@section('title-topbar', __('basic.new order'))

<!-- css insert -->
@section('css')

<!-- select 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css"
    integrity="sha512-aD9ophpFQ61nFZP6hXYu4Q/b/USW7rpLCQLX6Bi0WJHXNO7Js/fUENpBQf/+P4NtpzNX0jSgR5zVvPOJp+W2Kg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- select 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css"
    integrity="sha512-aD9ophpFQ61nFZP6hXYu4Q/b/USW7rpLCQLX6Bi0WJHXNO7Js/fUENpBQf/+P4NtpzNX0jSgR5zVvPOJp+W2Kg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

<link href="https://fastly.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">

@endsection


<!-- content insert -->
@section('content')

<div class="container-fluid px-0 px-md-2 mt-3">

    <!-- page title link -->
    <div class="d-sm-flex align-items-center justify-content-between mb-3">
        <span class="mb-0">
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.home') }}">{{ __('basic.dashboard') }}
                |</a>
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.order.index') }}">{{
                __('basic.orders') }} | </a>
            <a class="text-gray-300">{{ __('basic.new order') }}</a>
        </span>
    </div>

    <div class="card card-input shadow mb-3 pb-3">
        <!-- Card Header - Dropdown -->
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 fw-bold text-gray-500"><i class="fas fa-plus me-1"></i> {{ __('basic.new order') }}
            </h6>
        </div>

        <form id="myform" method="POST" action="{{ route('sett.order.store') }}" enctype="multipart/form-data">
            @csrf

            <!-- Card Body -->
            <div class="card-body px-4 px-md-5 py-0 pb-3">


                <div class="mb-2">
                    <label class="form-label">{{ __('basic.products from') }}
                        <small>({{ __('basic.required') }})</small></label>
                    <div class="d-flex">
                        <div class="check_custom_index me-3">
                            <input checked type="radio" id="direct_radio" name="product_from" value="all_suppliers">
                            <label for="direct_radio">{{ __("basic.all suppliers") }}</label>
                            <div class="check">
                                <div class="inside"></div>
                            </div>
                        </div>
                        <div class="check_custom_index me-3">
                            <input type="radio" id="offer_radio" name="product_from" value="supplier">
                            <label for="offer_radio">{{ __("basic.supplier") }}</label>
                            <div class="check">
                                <div class="inside"></div>
                            </div>
                        </div>
                    </div>
                </div>


                <div id="supplier_search_debtor" style="display: none">
                    {{-- supplier searching --}}
                    <div class="col-12 mb-2">
                        <label class="form-label">{{ __('basic.suppliers') }}
                            <small>({{ __('basic.required') }})</small></label>
                        <input id="debtor_receivable_id" type="text"
                            class="form-control @error('debtor_id') is-invalid @enderror"
                            placeholder="Write here debtor name ..." required>
                        @error('debtor_id')
                        <span class="error-msg-form">
                            {{ $message }}
                        </span>
                        @enderror

                        <input type="hidden" id="debtor_id" name="debtor_id" value="">

                        <div id="debtor_search-eng-show-list"
                            class="search-eng-results list-group p-4 bg-white b-r-l-b-cont"
                            style="box-shadow: -1px 1rem 1rem 7px rgb(58 59 69 / 15%) !important; display:none; margin-top: -3px; border:1px solid #bcd8ff; border-top: 0px">
                        </div>
                    </div>

                    <div class="col-12 mb-4">
                        <label class="form-label">{{ __('basic.supplier branch') }} <small>({{ __('basic.required')
                                }})</small></label>
                        <select
                            class="js-example-basic-single select2-hidden-accessible @error('supplier_branch_id') is-invalid @enderror"
                            id="supplier_branch_id" name="supplier_branch_id" required>
                            <option>- Select supplier first -</option>
                        </select>
                        <div id="supplier_branch_id-js-error-valid"></div>

                        @error('supplier_branch_id')
                        <span class="error-msg-form">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>
                </div>

                <div class="row" id="product_cont">
                    {{-- products --}}
                    <div class="col-12 col-md-3 mb-4 position-relative">
                        <div class="h-100">
                            <div class="card shadow h-100 second-color-bg text-center p-4 clickable-item-pointer justify-content-center"
                                data-bs-toggle="modal" data-bs-target="#add_product_modal">

                                <h1>
                                    <i class="fas fa-plus"></i>
                                </h1>
                                <h6>{{ __('basic.new product') }}</h6>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- client, address, order total --}}
                <div class="row mb-2 ">

                    <div class="col-12 col-md-6">
                        <h6 class="fw-bold">{{ __('basic.client details') }}</h6>

                        <div class="col-12 mb-3">
                            <input id="credit_receivable_id" type="text"
                                class="form-control @error('traveler_id') is-invalid @enderror"
                                placeholder="Write here customer name ...">

                            @error('traveler_id')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror

                            <input type="hidden" id="patient_id" name="traveler_id" value="">

                            <div id="search-eng-show-list"
                                class="search-eng-results list-group p-4 bg-white b-r-l-b-cont"
                                style="box-shadow: -1px 1rem 1rem 7px rgb(58 59 69 / 15%) !important; display:none; margin-top: -3px; border:1px solid #bcd8ff; border-top: 0px">
                            </div>
                        </div>

                        <div class="col-12 mb-2">
                            <div id="client_address_cont" class="d-flex justify-content-center">

                                <input name="chosen_address_id" id="chosen_address_id" type="hidden" value="">

                                <div id="current_address_cont" data-bs-toggle="modal" data-bs-target="#all_address"
                                    class="b-r-xs p-4 w-100 clickable-item-pointer second-color-bg  text-gray-600"
                                    style="display:none;">
                                    <div
                                        class="d-flex justify-content-between align-items-center clickable-item-pointer">
                                        <div>
                                            <h6 class="fw-bold">{{ __('basic.delivery address') }}:</h6>
                                            <h6>{{ __('basic.street name') }}:
                                                <span id="street_name_address"></span>,

                                                {{ __('basic.bulding no') }}: <span id="bulding_number_address"></span>,

                                                {{ __('basic.floor') }}:
                                                <span id="floor_address"></span>,

                                                {{ __('basic.apt no') }}:
                                                <span id="apt_no_address"></span>
                                            </h6>
                                            <h6 id="extra_info_address"></h6>
                                            <h6><i class="fas fa-phone me-1"></i> <span
                                                    id="phone_number_address"></span></h6>
                                        </div>
                                        <div class="text-center">
                                            <i class="fas fa-exchange-alt text-gray-400 fs-5 me-2"></i>
                                            <i class="fas fa-check-circle text-green fs-5 "></i>
                                        </div>
                                    </div>
                                </div>

                                <div id="new_address_cont" data-bs-toggle="modal" data-bs-target="#new_address"
                                    class="text-center b-r-xs p-4 w-100 clickable-item-pointer"
                                    style="display:none; background-color: #f6f6f6;color: #303030;">
                                    <div>
                                        <h1>
                                            <i class="fas fa-plus"></i>
                                        </h1>
                                        <h6>{{ __('basic.new delivery address') }}</h6>
                                    </div>
                                </div>

                            </div>
                        </div>


                        <div class="col-12 mb-3">
                            <label class="form-label">{{ __('basic.worker') }}
                                <small>({{ __('basic.optional') }})</small></label>
                            <select id="worker_id"
                                class="js-example-basic-single select2-hidden-accessible @error('worker_id') is-invalid @enderror"
                                name="worker_id">
                                <option selected value=""></option>
                                @foreach ($workers as $item)
                                <option value="{{ $item->id }}">{{ $item->full_name }}</option>
                                @endforeach
                            </select>
                            <div id="worker_id-js-error-valid"></div>

                            @error('worker_id')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div class="col-12 mb-3">
                            <label class="form-label">{{ __('basic.branch') }}
                                <small>({{ __('basic.required') }})</small></label>
                            <select id="branch_id"
                                class="js-example-basic-single select2-hidden-accessible @error('branch_id') is-invalid @enderror"
                                name="branch_id">
                                @foreach ($branches as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                            <div id="branch_id-js-error-valid"></div>

                            @error('branch_id')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div class="col-12 mb-3">
                            <label class="form-label">{{ __('basic.note') }}
                                <small>({{ __('basic.optional') }})</small></label>
                            <textarea name="note" class="form-control @error('note') is-invalid @enderror" rows="4"
                                placeholder="Write here the order note">{{ old('note') }}</textarea>
                            @error('note')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div class="mt-5 d-flex justify-content-between">
                            <div class="">
                                {{ __('basic.issue invoice') }}
                            </div>
                            <div class="
                                    switch-checkbox">
                                <input name="issue_invoice" type="checkbox" value="1" id="switch"><label
                                    for="switch">Toggle</label>
                            </div>

                        </div>

                        <div class="d-flex justify-content-between">
                            <div class="">
                                {{ __('basic.make shipment for full order') }}
                            </div>
                            <div class="
                                    switch-checkbox">
                                <input name="make_shipment" type="checkbox" value="1" id="switch_make_shipment"><label
                                    for="switch_make_shipment">Toggle</label>
                            </div>
                        </div>


                        <div id="delivery_cont" style="display: none">
                            <div class="col-12 mb-3">
                                <label class="form-label">{{ __('basic.delivery') }}
                                    <small>({{ __('basic.optional') }})</small></label>
                                <select id="delivery_id"
                                    class="js-example-basic-single select2-hidden-accessible @error('delivery_id') is-invalid @enderror"
                                    name="delivery_id">
                                    <option selected value=""></option>
                                    @foreach ($deliveries as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                                <div id="delivery_id-js-error-valid"></div>

                                @error('delivery_id')
                                <span class="error-msg-form">
                                    {{ $message }}
                                </span>
                                @enderror
                            </div>
                            <div id="shipped_from_cont">
                                <div class="col-12 mb-3">
                                    <label class="form-label">{{ __('basic.shipped from') }}
                                        <small>({{ __('basic.optional') }})</small></label>
                                    <select id="shipped_from"
                                        class="js-example-basic-single select2-hidden-accessible @error('delivery_id') is-invalid @enderror"
                                        name="shipped_from">
                                        <option value="1">{{ __('basic.warehouse location') }}</option>
                                        <option selected value="2">{{ __('basic.supplier location') }}</option>
                                    </select>
                                    <div id="shipped_from-js-error-valid"></div>

                                    @error('shipped_from')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>
                                <div class="col-12 mb-3" id="warehouse_cont">
                                    <label class="form-label">{{ __('basic.warehouses') }}
                                        <small>({{ __('basic.optional') }})</small></label>
                                    <select id="warehouse_id"
                                        class="js-example-basic-single select2-hidden-accessible @error('delivery_id') is-invalid @enderror"
                                        name="warehouse_id">
                                        @foreach ($warehouses as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <div id="warehouse_id-js-error-valid"></div>

                                    @error('warehouse_id')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>
                            </div>

                        </div>


                    </div>


                    <div class="col-12 col-md-6">

                        <h6 class="fw-bold">{{ __('basic.order details') }}</h6>
                        <div class="border-all p-4 b-r-s-cont">
                            <div class="d-flex justify-content-between mb-2">
                                <h6>{{ __('basic.subtotal') }}</h6>
                                <div class="d-flex align-items-center">
                                    <input type="number" value="0" id="subtotal" class="form-control me-2" disabled>
                                    <span class="text-gray-400"> {{ $currency }}</span>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6>{{ __('basic.delivery') }}</h6>
                                <div class="d-flex align-items-center">
                                    <input type="number" value="0" id="delivery_fee" name="delivery_fee"
                                        class="form-control me-2" disabled>
                                    <span class="text-gray-400"> {{ $currency }}</span>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6>{{ __('basic.discount') }}</h6>
                                <div class="d-flex align-items-center">
                                    <input type="number" value="0" id="discount" name="discount"
                                        class="form-control me-2" disabled>
                                    <span class="text-gray-400"> {{ $currency }}</span>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between">
                                <h6 class="fw-bold">{{ __('basic.final price') }}</h6>
                                <div class="d-flex align-items-center">
                                    <input type="number" value="0" id="final_price" class="form-control me-2" disabled>
                                    <span class="text-gray-400"> {{ $currency }}</span>
                                </div>
                            </div>
                        </div>
                    </div>



                </div>

                <div class="d-flex justify-content-end mt-4 mb-2">
                    <input type="submit" id="submit" name="next"
                        class="next-form-steps btn btn-primary action-button-next" value="Send">
                </div>

            </div>

        </form>

    </div>

</div>



<!-- Modal add product -->
<div class="modal fade" id="add_product_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
        <div class="modal-content b-r-s-cont border-0">
            <div class="modal-header border-0 pb-0">
                <div class="col-8">
                    <div class="d-flex align-items-center">
                        <div class="d-flex align-items-center bg-white shadow px-4 b-r-l-cont w-100">
                            <i class="fas fa-barcode fs-2  me-2"></i>
                            <input type="text" name="barcode_insert_input" id="barcode_insert_input"
                                class="form-control barcode_insert_input border-0"
                                placeholder="{{ __('basic.write here product name or barcode') }}" autofocus>
                        </div>
                    </div>
                </div>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal content -->
            <div class="modal-body px-5 py-4">

                <div class="row">

                    <div class="row" id="products_cont">
                        <div class="col-12">
                            <div class="p-5 text-center">
                                <img width="400px" src="{{ URL::asset('img/svg/undraw_heavy_box_agqi.svg') }}" alt=""
                                    class="mb-3 img-responsive">
                                <h4 class="text-gray-400">{{ __('basic.no product found') }}</h4>
                            </div>
                        </div>
                    </div>

                </div>

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

<!-- Modal all address -->
<div class="modal fade" id="all_address" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content b-r-s-cont border-0">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-location-arrow me-1"></i>
                    {{ __('basic.all addresses') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal content -->
            <div class="modal-body px-5 py-4">

                <div class="row" id="all_address_cont">
                    {{-- ajas will be placed here --}}
                </div>

                <div class="row">
                    <div id="new_address_cont_modal" class="text-center b-r-xs p-2 w-100 clickable-item-pointer"
                        style="background-color: #f6f6f6;color: #303030;">
                        <div>
                            <h1>
                                <i class="fas fa-plus fs-2"></i>
                            </h1>
                            <h6>{{ __('basic.new delivery address') }}</h6>
                        </div>
                    </div>
                </div>

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

<!-- Modal add new address -->
<div class="modal fade" id="new_address" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content b-r-s-cont border-0">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-plus me-1"></i>
                    {{ __('basic.new address') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>


            <form id="myform_address" style="display: contents" enctype="multipart/form-data">
                @csrf

                <!-- Modal content -->
                <div class="modal-body px-5 py-4">

                    <div class="row">

                        <div class="col-12 mb-3">
                            <label class="form-label">{{ __('basic.client name') }}
                                <small>({{ __('basic.optional') }})</small></label>
                            <input id="name" type="text" name="client_name"
                                class="form-control @error('client_name') is-invalid @enderror"
                                placeholder="Write here the client name ..." value="{{ old('client_name') }}">
                            @error('client_name')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div class="col-12 mb-3">
                            <label class="form-label">{{ __('basic.phone number') }}
                                <small>({{ __('basic.required') }})</small></label>
                            <input id="name" type="text" name="phone_number"
                                class="form-control @error('phone_number') is-invalid @enderror"
                                placeholder="Write here the client phone number ..." value="{{ old('phone_number') }}"
                                required>
                            @error('phone_number')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div class="col-12 mb-3">
                            <label class="form-label">{{ __('basic.street name') }}
                                <small>({{ __('basic.required') }})</small></label>
                            <input id="name" type="text" name="street_name"
                                class="form-control @error('street_name') is-invalid @enderror"
                                placeholder="Write here the client street name ..." value="{{ old('street_name') }}"
                                required>
                            @error('street_name')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div class="col-12 col-md-4 mb-3">
                            <label class="form-label">{{ __('basic.bulding no') }}</label>
                            <input id="name" type="text" name="bulding_number"
                                class="form-control @error('bulding_number') is-invalid @enderror" placeholder="A12"
                                value="{{ old('bulding_number') }}" required>
                            @error('bulding_number')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>
                        <div class="col-12 col-md-4 mb-3">
                            <label class="form-label">{{ __('basic.floor') }}</label>
                            <input id="name" type="text" name="floor"
                                class="form-control @error('floor') is-invalid @enderror" placeholder="4"
                                value="{{ old('floor') }}" required>
                            @error('floor')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>
                        <div class="col-12 col-md-4 mb-3">
                            <label class="form-label">{{ __('basic.apt no') }}</label>
                            <input id="name" type="text" name="appartment_number"
                                class="form-control @error('appartment_number') is-invalid @enderror" placeholder="51"
                                value="{{ old('appartment_number') }}" required>
                            @error('appartment_number')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>
                        <div class="col-12 mb-2">
                            <label class="form-label">{{ __('basic.extra info') }} <small>({{ __('basic.optional')
                                    }})</small></label>
                            <textarea name="extra_info" minlength="3" maxlength="150" class="form-control"
                                placeholder="Write here extra info .." rows="4"
                                spellcheck="false">{{ old('extra_info') }}</textarea>
                            @error('extra_info')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <div class="left-side">
                        <button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{
                            __('basic.never mind') }}</button>
                    </div>
                    <div class="divider"></div>
                    <div class="right-side">
                        <button type="button" class="btn btn-default btn-link main-color fw-bold"
                            id="save_new_address_btn">{{
                            __('basic.save')
                            }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>


<!-- Modal show product  -->
<div class="modal fade" id="show_product_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content b-r-s-cont border-0">
            <div class="modal-header border-0 pb-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal content -->
            <div class="modal-body px-4 py-3">
                <div class="row" id="all_address_cont">
                    <img class="card-img-top pso_product_img" id="product_img"
                        src="http://127.0.0.1:8000/img/products/main_img.jpg"
                        style="width: 100%; height: 160px; object-fit: cover;">
                    <div class="card-body py-2 px-3">
                        <p class="text-start fw-bold mb-0" id="product_name"></p>
                        <p class="text-gray-400 text-s" id="product_desecration"></p>
                    </div>
                    <hr>
                    <div class="d-flex" id="main_prices_cont">

                    </div>

                    <div id="addition_prices_cont" style="display: none">
                        <hr>
                        <h6 class="text-gray-400">{{ __('basic.additions') }}</h6>

                        <div id="addition_prices_cont_loop" class="d-flex">
                        </div>

                    </div>

                    <div class="col-12 my-2">
                        <label class="form-label">{{ __('basic.note') }}
                            <small>({{ __('basic.optional') }})</small></label>
                        <textarea name="note" id="note" class="form-control @error('note') is-invalid @enderror"
                            rows="4" placeholder="Write here the order note">{{ old('note') }}</textarea>
                        @error('note')
                        <span class="error-msg-form">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <div class="left-side">
                    <li class="d-flex justify-content-center align-items-center mb-0">
                        <div class="counter_book_btn">
                            <span id="" class="minus_counter_btn">-</span>
                            <input type="text" class="counter_book_count" name="item_qty" id="item_qty" value="1"
                                readonly>
                            <span class="plus_counter_btn">+</span>
                        </div>
                    </li>
                </div>
                <div class="divider"></div>
                <div class="right-side">
                    <button type="button" class="btn btn-default btn-link main-color" id="add_order_item_btn">
                        {{
                        __('basic.order') }} <span id="order_item_price">0 </span> {{ $currency }}</button>
                </div>
            </div>

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


@endsection

<!-- js insert -->
@section('js')

{{-- products come from --}}
<script>
    $("input[name='product_from'").change(function(){

            var type =  $('input[name="product_from"]:checked').val();

            if(type === "supplier"){
                $('#supplier_search_debtor').show();
                $('#supplier_search_traveler').hide();
                $('#product_cont').hide();
            }else if(type === "all_suppliers"){
                $('#supplier_search_debtor').hide();
                $('#supplier_search_traveler').show();
                $('#product_cont').show();
                fetchProducts();
            }

    });



    $("input[name='make_shipment'").change(function(){

        var type =  $('input[name="make_shipment"]');

        if (type.is(':checked')) {
            $('#delivery_cont').show();


        }else{
            $('#delivery_cont').hide();
        }

    })

    FetchshippedFrom();
    $("#shipped_from").change(function(){
        FetchshippedFrom();
    })
    function FetchshippedFrom() {
        var type =  $("#shipped_from").val();
        console.log(type);

        if (type == 1) {
            $('#warehouse_cont').show();
        }else if (type == 2) {
            $('#warehouse_cont').hide();
        }
    }


</script>
<script src="https://fastly.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script>
<script>
    $('.description').summernote({
            placeholder: 'Enter Description',
            tabsize: 2,
            height: 100,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['insert', ['link', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']],
            ]
        });
</script>

<!-- select 2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"
    integrity="sha512-4MvcHwcbqXKUHB6Lx3Zb5CEAVoE9u84qN+ZSMM6s7z8IeJriExrV3ND5zRze9mxNlABJ6k864P/Vl8m0Sd3DtQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function() {
            $('.js-example-basic-single').select2();
            //hide search
            $('.select2-no-search').select2({
                minimumResultsForSearch: -1
            });
        });
</script>

<!-- validate jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
    integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    //Rules for the Validator plugin
        var $validator = $('#myform').validate({
            rules: {
                name: {
                    minlength: 3,
                },
                address: {
                    minlength: 3,
                },
            },
            messages: {
                email: {
                    required: "We need your email address to contact you",
                    email: "Your email address must be in the format of name@domain.com"
                },
                password_confirmation: {
                    equalTo: "Password does not match",
                }
            },
            //for inserting erros for some inputs that makes posation problem such as selector 2 and bt datapicker
            errorPlacement: function(error, element) {
                switch (element.attr("name")) {
                    case 'role':
                        error.insertAfter($("#role-js-error-valid"));
                        break;
                    case 'gendar':
                        error.insertAfter($("#gendar-js-error-valid"));
                        break;
                    default:
                        error.insertAfter(element);
                }

            },
        });

           //search patients Text to the server
           $("#credit_receivable_id").keyup(function() {
                let search_query = $(this).val();

                var url = "{{ route('sett.order_client_search', ':id') }}";
                url = url.replace(':id', search_query);

                if (search_query != "") {
                    $.ajax({
                        url: url,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            $("#search-eng-show-list").show();

                            if (data !== "") {
                                var html = ''
                                $.each(data, function(key, value) {
                                    html +=
                                        '<div data-patient_id="' + value.id +
                                        '" data-patient_name="' + value.full_name +
                                        '" class="search-eng-a clickable-item-pointer list-group-item list-group-item-action border-1 text-gray-500" style="cursor: pointer;"><i class="fas fa-search text-gray-200 me-2"></i> ' +
                                        value.full_name + '</div>';
                                });
                                $('#search-eng-show-list').html(html);
                            }

                            if (data == "") {
                                $('#search-eng-show-list').html(
                                    '<a class="list-group-item list-group-item-action border-0"><i class="fas fa-search text-gray-200 me-2"></i>No Record</a>'
                                );
                            }
                        },
                    });
                } else {
                    $("#search-eng-show-list").empty();
                    $("#search-eng-show-list").hide();;
                }
            });

            //send id from the patient search
            $(document).on("click", ".search-eng-a", function() {
                id = $(this).data('patient_id');
                name = $(this).data('patient_name');

                let search_query = $(this).data('patient_id');

                var url = "{{ route('sett.fetch_client_address', ':id') }}";
                url = url.replace(':id', search_query);

                $('#chosen_address_id').val("");
                $('#all_address_cont').html("");

                if (search_query != "") {
                    $.ajax({
                        url: url,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            $("#search-eng-show-list").show();

                            console.log(data);
                            if (data.length > 0) {

                                $('#new_address_cont').hide();

                                var html = ''
                                $.each(data, function(key, value) {
                                    // chosen delivery address
                                    if(key == 0){
                                        $('#chosen_address_id').val(value.id);
                                        $('#street_name_address').html(value.street_name);
                                        $('#bulding_number_address').html(value.bulding_number);
                                        $('#floor_address').html(value.floor);
                                        $('#apt_no_address').html(value.apartment_number);
                                        $('#extra_info_address').html(value.extra_info);
                                        $('#phone_number_address').html(value.phone_number);
                                    }

                                    html +=  '<div class="d-flex justify-content-between align-items-center second-color-bg mb-3 b-r-s-cont text-gray-700 clickable-item-pointer p-4 change_address" data-id="' + value.id + '" data-street_name="' + value.street_name + '" data-bulding_no="' + value.bulding_number + '" data-floor="' + value.floor + '" data-apt_no="' + value.apartment_number + '" data-extra_info="' + value.extra_info + '" data-phone_number="' + value.phone_number + '">' +
                                        '<div>' +
                                            '<h6>{{ __("basic.street name") }}:' +
                                                '<span>' + value.street_name + '</span>,' +
                                                '{{ __("basic.bulding no") }}: <span>' +
                                                    value.bulding_number +
                                                '</span>, ' +
                                                '{{ __('basic.floor') }}:' +
                                               '<span>' + value.floor + '</span>, ' +
                                                '{{ __('basic.apt no') }}:' +
                                                '<span>' + value.apartment_number + '</span>' +
                                            '</h6>' +
                                            '<h6>' + value.extra_info + '</h6>' +
                                            '<h6><i class="fas fa-phone me-1"></i> <span>' + value.phone_number + '</span></h6>' +
                                        '</div>' +
                                        '<div class="text-center">' +
                                            '<i class="fas fa-exchange-alt text-green fs-5 me-2"></i>' +
                                        '</div>' +
                                    '</div>';
                                });

                                $('#all_address_cont').html(html);

                                $("#search-eng-show-list").hide();
                                $('#current_address_cont').show();
                            }else{
                                $("#search-eng-show-list").hide();
                                $("#current_address_cont").hide();
                                $('#new_address_cont').show();
                            }
                        },
                    });
                } else {
                    console.log("wwww");

                    $("#search-eng-show-list").empty();
                    $("#search-eng-show-list").hide();;
                }

                $('#patient_id').val(id);
                $('#credit_receivable_id').val(name);
                $("#search-eng-show-list").hide();;
            })


            // change address
            $(document).on("click", ".change_address", function() {
                var id = $(this).data('id');
                var street_name = $(this).data('street_name');
                var bulding_number = $(this).data('bulding_number');
                var floor = $(this).data('floor');
                var apartment_number = $(this).data('apartment_number');
                var extra_info = $(this).data('extra_info');
                var phone_number = $(this).data('phone_number');

                $('#chosen_address_id').val(id);
                $('#street_name_address').html(street_name);
                $('#bulding_number_address').html(bulding_number);
                $('#floor_address').html(floor);
                $('#apt_no_address').html(apartment_number);
                $('#extra_info_address').html(extra_info);
                $('#phone_number_address').html(phone_number);

                $("#all_address").modal('hide');

                $('#current_address_cont').show();

                toastr.success("{{ __('basic.changed address successfully') }}");
            })

            // open new modal for adding a new address
            $(document).on("click", "#new_address_cont_modal", function() {
                $("#all_address").modal('hide');
                $('#new_address').modal('show');
            });

            // add new address to the client
            $(document).on('click', '#save_new_address_btn', function(e) {
                e.preventDefault()

                if (!$('#myform_address').valid()) {
                    return false;
                }

                var client_id = $('#patient_id').val();
                var client_name = $('input[name="client_name"]').val();
                var phone_number = $('input[name="phone_number"]').val();
                var street_name = $('input[name="street_name"]').val();
                var bulding_number = $('input[name="bulding_number"]').val();
                var floor = $('input[name="floor"]').val();
                var apartment_number = $('input[name="appartment_number"]').val();
                var extra_info = $('input[name="extra_info"]').val();

                $.ajax({
                    url: '{{ route('sett.store_client_address') }}',
                    type: "POST",
                    data: {
                        '_token': "{{ csrf_token() }}",
                        '_method': "POST",
                        'client_id': client_id,
                        'client_name': client_name,
                        'phone_number': phone_number,
                        'street_name': street_name,
                        'bulding_number': bulding_number,
                        'floor': floor,
                        'apartment_number': apartment_number,
                        'extra_info': extra_info,
                    },
                    success: function(data) {
                        $('#chosen_address_id').val(data.id);
                        $('#street_name_address').html(street_name);
                        $('#bulding_number_address').html(bulding_number);
                        $('#floor_address').html(floor);
                        $('#apt_no_address').html(apartment_number);
                        $('#extra_info_address').html(extra_info);
                        $('#phone_number_address').html(phone_number);

                        $('#all_address_cont').append('<div class="d-flex justify-content-between align-items-center second-color-bg mb-3 b-r-s-cont text-gray-700 clickable-item-pointer p-4 change_address" data-id="' + data.id + '" data-street_name="' + street_name + '" data-bulding_no="' + bulding_number + '" data-floor="' + floor + '" data-apt_no="' + apartment_number + '" data-extra_info="' + extra_info + '" data-phone_number="' + phone_number + '">' +
                                '<div>' +
                                    '<h6>{{ __("basic.street name") }}:' +
                                        '<span>' + street_name + '</span>,' +
                                        '{{ __("basic.bulding no") }}: <span>' +
                                            bulding_number +
                                        '</span>, ' +
                                        '{{ __('basic.floor') }}:' +
                                        '<span>' + floor + '</span>, ' +
                                        '{{ __('basic.apt no') }}:' +
                                        '<span>' + apartment_number + '</span>' +
                                    '</h6>' +
                                    '<h6>' + extra_info + '</h6>' +
                                    '<h6><i class="fas fa-phone me-1"></i> <span>' + phone_number + '</span></h6>' +
                                '</div>' +
                                '<div class="text-center">' +
                                    '<i class="fas fa-exchange-alt text-green fs-5 me-2"></i>' +
                                '</div>' +
                            '</div>'
                        );

                        $("#all_address").modal('hide');
                        $("#new_address").modal('hide');
                        $('#new_address_cont').hide();
                        $('#current_address_cont').show();
                        toastr.success("{{ __('basic.address has addedd successfully') }}");
                    },
                    error: function(error) {
                        toastr.error(error.responseJSON.message);

                        var errors_resopnse = JSON.parse(error
                            .responseText);
                        $.each(errors_resopnse.errors, function(key, val) {
                            $("#" + key + "_error").text(val[
                                0
                            ]);
                            toastr.error(val[0]);
                        })
                }
                });
            })


    // --------- barcode insert ----------
    $(document).on('keyup', '#barcode_insert_input', function() {
        fetchProducts();
    });

    // fetch products
    fetchProducts();
    function fetchProducts(product_from = $('input[name="product_from"]:checked').val()) {

        let debtor_id = $('#debtor_id').val();
        let search_query = $('#barcode_insert_input').val();

        $.ajax({
            url: '{{ route('sett.order_product_search') }}',
            type: "POST",
            data: {
                '_token': "{{ csrf_token() }}",
                '_method': "POST",
                'product_from': product_from,
                'debtor_id': debtor_id,
                'barcode_search': search_query,
            },
            dataType: "json",
            success: function(data) {

                avatar_url = '{{ URL::asset('img/products') }}';

                if (data.length > 0) {
                    var html = ''
                    $.each(data, function(key, value) {
                        html +=   '<div class="col-12 col-md-3 mb-3">' +
                                    '<div class="card shadow h-100 pos_product" data-barcode="' + value.barcode + '" data-code="' + value.code + '" >' +
                                            '<img class="card-img-top pso_product_img" src=' + avatar_url + '/' + value.main_image + '>' +
                                            '<div class="card-body py-2 px-3">' +
                                                '<p class="text-start fw-bold mb-0">' + value.name +'</p>' +
                                                '<p class="text-gray-400 text-s">' + value.barcode + '</p>' +
                                            '<div class="d-flex justify-content-between align-items-center px-0">' +
                                                    '<div>' +
                                                    '<h6 class=" mb-0 fw-bold text-grat-800">' + value.quantity + '</h6>' +
                                                        '<p class="text-xxs text-gray-400 text-uppercase mb-0">' +
                                                        value.unit.name + '</p>' +
                                                    '</div>' +
                                                    '<div>' +
                                                        '<h4 class="mb-0 fw-bold text-grat-800">' + value.sell_price + '<h4>' +
                                                        '<p class="text-xxs text-gray-400 text-uppercase mb-0">{{ $currency }}</p>' +
                                                    '</div>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>'
                    });

                    $('#products_cont').html(html);
                }else{
                    console.log('asd');
                    $("#products_cont").html(
                        '<div class="col-12">' +
                            '<div class="card">' +
                                    '<div class="card-body p-5 text-center">' +
                                        '<img width="400px" src="{{ URL::asset("img/svg/undraw_heavy_box_agqi.svg") }}" alt="" class="mb-3 img-responsive">' +
                                        '<h4 class="text-gray-400">{{ __("basic.no product found") }}</h4>' +
                                    '</div>' +
                            '</div>' +
                        '</div>'
                    );
                }
            },
        });


    };

    //search debtors Text to the server
    $("#debtor_receivable_id").keyup(function() {
        let search_query = $(this).val();

        var url = "{{ route('sett.order_supplier_search', ':search_query') }}";
        url = url.replace(':search_query', search_query);

        if (search_query != "") {
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $("#debtor_search-eng-show-list").show();

                    if (data !== "") {
                        var html = ''
                        $.each(data, function(key, value) {
                            html +=
                                '<div data-debtor_id="' + value.id +
                                '" data-debtor_name="' + value.company_name +
                                '" class="debtor_search-eng-a clickable-item-pointer list-group-item list-group-item-action border-0 text-gray-500" style="cursor: pointer;"><i class="fas fa-search text-gray-200 me-2"></i> ' +
                                value.company_name + '</div>';
                        });
                        $('#debtor_search-eng-show-list').html(html);
                    }

                    if (data == "") {
                        $('#debtor_search-eng-show-list').html(
                            '<a class="list-group-item list-group-item-action border-0"><i class="fas fa-search text-gray-200 me-2"></i>No Record</a>'
                        );
                    }
                },
            });
        } else {
            $("#debtor_search-eng-show-list").empty();
            $("#debtor_search-eng-show-list").hide();;
        }
    });

    //send the id from the patient search
    $(document).on("click", ".debtor_search-eng-a", function() {

        id = $(this).data('debtor_id');
        name = $(this).data('debtor_name');

        $('#debtor_id').val(id);
        $('#debtor_receivable_id').val(name);
        $("#debtor_search-eng-show-list").hide();
        $("#product_cont").show();;

        fetchProducts();
        fetchSupplierBranch(id);

    })

    function fetchSupplierBranch(supplierID) {
        var url = "{{ route('sett.fetch_supplier_branch', ':id') }}";
        url = url.replace(':id', supplierID);

        if (supplierID) {
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('select[name="supplier_branch_id"]').empty();
                    $.each(data, function(key, value) {
                        $('select[name="supplier_branch_id"]').append('<option value="' +
                            value.id + '">' + value.name + '</option>');
                    });
                }
            });
        } else {
            $('select[name="fetch_supplier_branch"]').empty();
        }
    }


    // choose products
    $(document).on("click", ".pos_product", function() {
        code = $(this).data('code');
        $.ajax({
            url: '{{ route('sett.order_fetch_product') }}',
            type: "POST",
            data: {
                '_token': "{{ csrf_token() }}",
                '_method': "POST",
                'code': code,
            },
            dataType: "json",
            success: function(data) {

                console.log(data);
                $("#add_order_item_btn").attr('data-code',data.code);
                $("#add_product_modal").modal('hide');
                $("#product_name").html(data.name);
                $("#product_desecration").html(data.description);
                $("#order_item_price").html(0);
                $("#item_qty").val(1);
                $('#note').val('');

                avatar_url = '{{ URL::asset('img/products') }}' + "/" + data.main_image;

                $("#product_img").attr('src',avatar_url);

                var main_prices = ''
                $.each(data.prices, function(key, value) {
                    main_prices += '<div class="check_custom_index me-3">' +
                            '<input type="radio" id="mp_' + key + value.name +'" name="main_price" value="' + value.sell + '" data-id="' + value.id + '">' +
                            '<label for="mp_' + key + value.name +'">' + value.name + " " + value.sell + '</label>' +
                            '<div class="check">' +
                                '<div class="inside"></div>' +
                            '</div>' +
                        '</div>';
                });

                $('#main_prices_cont').html(main_prices);

                $("#show_product_modal").modal('show');

                if(data.additions.length > 0){

                    $('#addition_prices_cont').show();
                    $('#addition_prices_cont_loop').html("");

                    var additions_prices = ''
                    $.each(data.additions, function(key, value) {
                        additions_prices += '<div class="custom-control custom-checkbox small me-3">' +
                                '<input class="custom-control-input-user" type="checkbox" id="add_' + key + value.name +'" name="addition_price" value="' + value.sell + '" data-id="' + value.id + '">' +
                                '<label class="custom-control-label-user" for="add_' + key + value.name +'">' + value.name + " " + value.sell + '</label>' +
                            '</div>';
                    });
                    $('#addition_prices_cont_loop').html(additions_prices);
                }else{
                    $('#addition_prices_cont_loop').html("");
                }

            },
        });
    })



    // order item prices
    $(document).on("change", 'input[name="main_price"], input[name="addition_price"]', function() {
        fetch_order_item();
    })

    $(document).on('click','.plus_counter_btn',function(){
        var selector_plus =  $(this).parent().find('.counter_book_count').val();
        $(this).parent().find('.counter_book_count').val((parseInt(selector_plus) + 1));
        if (selector_plus >= 100) {
            $(this).parent().find('.counter_book_count').val(100);
        }
        fetch_order_item();
    });

    $(document).on('click','.minus_counter_btn',function(){
        var selector_minus =  $(this).parent().find('.counter_book_count').val();

        if (selector_minus > 1) {
            $(this).parent().find('.counter_book_count').val((parseInt(selector_minus) - 1));
        }

        // if (selector_minus == 1) {
        //     $(this).parent().find('.counter_book_count').val(1);
        // }

        fetch_order_item();
    });

     // fetch products
    function fetch_order_item() {
        var main_price = parseFloat($('input[name="main_price"]:checked').val());
        var qty = $('#item_qty').val();

        var additions_prices = 0;
        $('input[name="addition_price"]').each(function () {
            additions_prices += (this.checked ? parseFloat($(this).val()) : parseFloat(0));
        });

         var final_price = parseFloat(main_price + additions_prices) * qty;
         $('#order_item_price').html(final_price);
    };

    $(document).on("click", '#add_order_item_btn', function() {

        var product_code = $(this).attr('data-code');

        var product_name = $('#product_name').html();
        var product_desecration = $('#product_desecration').html();
        var product_img = $('#product_img').attr('src');
        var final_price = $('#order_item_price').html();
        var qty = $('#item_qty').val();
        var note = $('#note').val();

        var main_price_id = parseFloat($('input[name="main_price"]:checked').attr('data-id'));

        // check price is choosen
        if(!$('input[name="main_price"]').is(':checked')){
            toastr.warning("{{ __('basic.chose price first') }}");
            return false;
        }

        // make array for additions
        var additions = "";
        $('input[name="addition_price"]').each(function (index, value) {
            var isLastElement = index == $('input[name="addition_price"]').length -1;
                if(this.checked){
                    if(isLastElement){
                        additions += $(this).attr('data-id');
                    }else{
                        additions += $(this).attr('data-id') + ",";
                    }
                }
        });

        $('#product_cont').prepend('<div class="col-12 col-md-3 mb-3 position-relative">' +
            '<div class="position-absolute top-0 start-0 z-3 delete_order_item ps-2">' +
                '<i class="fas fa-times-circle text-red fs-5 clickable-item-pointer"></i>' +
            '</div>' +
            '<div class="card shadow h-100">' +
                    '<input type="hidden" name="order_items[]" value="' + product_code + '">' +
                    '<input type="hidden" name="main_price[]" value="' + main_price_id + '">' +
                    '<input type="hidden" name="' + product_code + '_additions" value="' + additions + '">' +
                    '<input type="hidden" name="qty[]" value="' + qty + '">' +
                    '<input type="hidden" name="item_note[]" value="' + note + '">' +
                    '<input type="hidden" class="order_item_final_price" value="' + final_price + '">' +
                    '<img class="card-img-top pso_product_img" style="width: 100%; height: 132px; object-fit: cover;" src=' + product_img + '>' +
                    '<div class="card-body py-2 px-3">' +
                        '<p class="text-start fw-bold mb-0">' + product_name +'</p>' +
                        '<p class="text-gray-400 text-s">' + product_desecration + '</p>' +
                    '<div class="d-flex justify-content-between align-items-center px-0">' +
                            '<div>' +
                            '<h6 class=" mb-0 fw-bold text-grat-800">' + qty + '</h6>' +
                                '<p class="text-xxs text-gray-400 text-uppercase mb-0">{{ __("basic.pieces") }}</p>' +
                            '</div>' +
                            '<div>' +
                                '<h4 class="mb-0 fw-bold text-grat-800">' + final_price + '<h4>' +
                                '<p class="text-xxs text-gray-400 text-uppercase mb-0">{{ $currency }}</p>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>');

        $("#show_product_modal").modal('hide');

        fetch_totals();

        toastr.success("{{ __('basic.added successfully') }}");
    });



    $(document).on("click", ".delete_order_item", function() {
            $(this).parent().remove();
            fetch_totals();
    });

    $(document).on("keyup", "#delivery_fee, #discount", function() {
        fetch_totals();
    })
    // fetch products
    function fetch_totals() {

        var subtotal = 0;
        $('.order_item_final_price').each(function () {
            subtotal += parseFloat($(this).val());
        });

        if(subtotal > 0){
            $("#delivery_fee").prop( "disabled", false );
            $("#discount").prop( "disabled", false );
            $("#discount").attr("max",subtotal);
        }

        var delivery_fee = parseFloat($('#delivery_fee').val()) ? parseFloat($('#delivery_fee').val()) : parseFloat(0);

        var plus = parseFloat(subtotal + delivery_fee);

        var discount = parseFloat($('#discount').val()) ? parseFloat($('#discount').val()) : parseFloat(0);

        var final_price = parseFloat(plus - discount);

        $('#subtotal').val(subtotal);
        $('#final_price').val(final_price);
    };


    $(document).on("click", "#submit", function() {
        if($(".order_item_final_price").length == 0){
            toastr.warning("{{ __('basic.chose product first') }}");
            return false;
        }else if(!$("#credit_receivable_id").val()){
            toastr.warning("{{ __('basic.chose client first') }}");
            return false;
        }else if(!$("#chosen_address_id").val()){
            toastr.warning("{{ __('basic.delivery address is not selected') }}");
            return false;
        }
        $("#myform").submit();

    })

</script>

@endsection