@extends('layouts.master')

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

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

<!-- 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">


<!-- datepicker time and date -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css"
    integrity="sha512-MQXduO8IQnJVq1qmySpN87QQkiR1bZHtorbJBD0tzy7/0U9+YIC93QWHeGTEoojMVHWWNkoCp8V6OzVSYrX0oQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/flatpickr@4.6.13/dist/plugins/monthSelect/style.min.css">


{{-- leaflet --}}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<style>
    .wrap {
        width: 1200px;
        margin: 30px auto;
        display: grid;
        grid-gap: 50px;
        grid-template-columns: 300px auto;
    }

    #map {
        width: 100%;
        height: 350px;
        border-radius: 10px;
    }
</style>
@endsection



@section('fixedcontent')

<!-- session successful message -->
@if (Session::has('success'))
<div id="flash-msg" class="shadow pt-3">
    <div class="d-flex justify-content-between mb-2">
        <i class="fas fs-1 fa-check"></i>
        <a id="flash-msg-btn" class="text-blue-300 clickable-item-pointer"><i class="fas fa-times"></i></a>
    </div>
    <h3>Sent Successfully</h3>
    <p class="text-blue-300">{{ Session::get('success') }}</p>
</div>
@endif

@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.shipment.index') }}">{{
                __('basic.shipments') }} | </a>
            <a class="text-gray-300">{{ __('basic.shipment') }}</a>
        </span>


        <div class="d-flex justify-content-center mt-2 mt-md-0">

            <a href="{{ route('sett.print_order', $order->id) }}"
                class="text-gray-400 bg-white btn btn-sm shadow-sm b-r-l-cont p-2 px-4 me-2"><i
                    class="fas fa-print fa-sm me-1"></i> {{ __('basic.print') }}</a>

            <a data-id="{{ $order->id }}"
                class="text-gray-400 bg-white btn btn-sm shadow-sm b-r-l-cont p-2 px-4 me-2 print_qr"><i
                    class="fas fa-print fa-sm me-1"></i> {{ __('basic.waybill') }}</a>

            @if($order->delivery_last_latitude)
            <a class="active-color-btn shadow-sm clickable-item-pointer b-r-l-cont p-2 px-4 me-1 text-s show_track"
                data-shipped_from_latitude="{{ $order->shipped_from_latitude }}"
                data-shipped_from_longitude="{{ $order->shipped_from_longitude }}"
                data-shipped_to_latitude="{{ $order->shipped_to_latitude }}"
                data-shipped_to_longitude="{{ $order->shipped_to_longitude }}"
                data-latitude="{{ $order->delivery_last_latitude }}"
                data-longitude="{{ $order->delivery_last_longitude }}"><i class="fas fa-map-marker-alt fa-sm me-1"></i>
                {{ __('basic.track')
                }}</a>
            @endif

            @if($order->invoice_id)
            <a href="{{ route('sett.invoice.show', $order->invoice_id) }}"
                class="text-gray-400 bg-white btn btn-sm shadow-sm b-r-l-cont p-2 px-4 me-2"><i
                    class="fas fa-file-invoice-dollar fa-sm me-1"></i>
                {{ __('basic.invoice') }}</a>
            @endif

            <a class="bg-danger text-white btn btn-sm shadow-sm b-r-l-cont p-2 px-4 me-2" data-bs-toggle="modal"
                data-bs-target="#delete_shipment_modal"><i class="fas fa-trash fa-sm me-1"></i> {{
                __('basic.delete')
                }}</a>

            <!-- Modal -->
            <div class="modal fade" id="delete_shipment_modal" tabindex="-1" 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">
                            <div class="modal-title" id="exampleModalLabel"><i class="fas fa-trash me-1"></i>
                                {{ __('basic.delete') }}</div>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <form action="{{ route('sett.shipment.destroy', 'test') }}" method="post">
                            {{ method_field('post') }}
                            {{ csrf_field() }}
                            <!-- Modal content -->
                            <div class="modal-body px-4">
                                <div class="modal-body delete-conf-input text-center py-0">
                                    <p class="mb-0">{{ __('basic.delete message') }}</p><br>
                                    <input type="hidden" name="item_id" value="{{ $order->id }}">
                                </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="submit" class="btn btn-default btn-link text-red">{{
                                        __('basic.delete') }}
                                    </button>
                                </div>

                            </div>
                        </form>

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

            <a class="main-color-bg text-white btn btn-sm shadow-sm b-r-l-cont p-2 px-4 me-1" data-bs-toggle="modal"
                data-bs-target="#edit_order_modal"><i class="fas fa-edit fa-sm me-1"></i> {{ __('basic.edit')
                }}</a>

            <!-- Modal for search filtering -->
            <div class="modal fade" id="edit_order_modal" tabindex="-1" role="dialog"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">

                    <form class="mb-0" action="{{ route('sett.shipment.update', $order->id) }}" method="POST"
                        style="display: contents">

                        @csrf
                        @method('PUT')

                        <div class="modal-content b-r-s-cont border-0">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-edit me-1"></i>
                                    {{ __('basic.edit order') }}</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-3">


                                <div class="row">

                                    @if($order->status >= 1)
                                    <div class="col-12 mb-2">
                                        <label class="form-label">{{ __('basic.placed') }}
                                            <small>({{ __('basic.optional') }})</small></label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i>
                                                </div>
                                            </div>
                                            <input name="placed_date" type="text"
                                                class="form-control datepicker_time bg-white"
                                                value="{{ $order->placed_date }}" placeholder="YYYY/MM/DD HM"
                                                data-enable-time="true">
                                        </div>
                                        @error('placed_date')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>
                                    @endif

                                    @if($order->status >= 5)
                                    <div class="col-12 mb-2">
                                        <label class="form-label">{{ __('basic.approved from store') }}
                                            <small>({{ __('basic.optional') }})</small></label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i>
                                                </div>
                                            </div>
                                            <input name="approved_store_date" type="text"
                                                class="form-control datepicker_time bg-white"
                                                value="{{ $order->approved_store_date }}" placeholder="YYYY/MM/DD HM"
                                                data-enable-time="true">
                                        </div>
                                        @error('approved_store_date')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>
                                    @endif

                                    @if($order->status >= 10)
                                    <div class="col-12 mb-2">
                                        <label class="form-label">{{ __('basic.shipped') }}
                                            <small>({{ __('basic.optional') }})</small></label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i>
                                                </div>
                                            </div>
                                            <input name="shipped_date" type="text"
                                                class="form-control datepicker_time bg-white"
                                                value="{{ $order->shipped_date }}" placeholder="YYYY/MM/DD HM"
                                                data-enable-time="true">
                                        </div>
                                        @error('shipped_date')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>
                                    @endif

                                    @if($order->status >= 20)
                                    <div class="col-12 mb-2">
                                        <label class="form-label">{{ __('basic.out for delivery') }}
                                            <small>({{ __('basic.optional') }})</small></label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i>
                                                </div>
                                            </div>
                                            <input name="out_for_delivery_date" type="text"
                                                class="form-control datepicker_time bg-white"
                                                value="{{ $order->out_for_delivery_date }}" placeholder="YYYY/MM/DD HM"
                                                data-enable-time="true">
                                        </div>
                                        @error('out_for_delivery_date')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>
                                    @endif

                                    @if($order->status >= 25)
                                    <div class="col-12 mb-2">
                                        <label class="form-label">{{ __('basic.delivered') }}
                                            <small>({{ __('basic.optional') }})</small></label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i>
                                                </div>
                                            </div>
                                            <input name="delivered_date" type="text"
                                                class="form-control datepicker_time bg-white"
                                                value="{{ $order->delivered_date }}" placeholder="YYYY/MM/DD HM"
                                                data-enable-time="true">
                                        </div>
                                        @error('delivered_date')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>
                                    @endif

                                    @if($order->status >= 30)
                                    <div class="col-12 mb-2">
                                        <label class="form-label">{{ __('basic.failed to deliver') }}
                                            <small>({{ __('basic.optional') }})</small></label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i>
                                                </div>
                                            </div>
                                            <input name="failed_to_deliver_date" type="text"
                                                class="form-control datepicker_time bg-white"
                                                value="{{ $order->failed_to_deliver_date }}" placeholder="YYYY/MM/DD HM"
                                                data-enable-time="true">
                                        </div>
                                        @error('failed_to_deliver_date')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>
                                    @endif

                                    @if($order->status >= 40)
                                    <div class="col-12 mb-2">
                                        <label class="form-label">{{ __('basic.canceled') }}
                                            <small>({{ __('basic.optional') }})</small></label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i>
                                                </div>
                                            </div>
                                            <input name="canceled_date" type="text"
                                                class="form-control datepicker_time bg-white"
                                                value="{{ $order->canceled_date }}" placeholder="YYYY/MM/DD HM"
                                                data-enable-time="true">
                                        </div>
                                        @error('canceled_date')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>
                                    @endif

                                    <div class="me-2 mb-3">
                                        <label class="form-label">{{ __('basic.status') }}
                                            <small>({{ __('basic.required') }})</small></label>
                                        <select name="status"
                                            class="js-example-basic-single js-example-basic-single select2-hidden-accessible">
                                            <option value="1" @if($order->status == 1) selected @endif>
                                                {{ __('basic.placed')}}
                                            </option>
                                            <option value="5" @if($order->status == 5) selected @endif>
                                                {{ __('basic.approved from store')}}
                                            </option>
                                            <option value="10" @if($order->status == 10) selected @endif>
                                                {{ __('basic.shipped')}}
                                            </option>
                                            <option value="15" @if($order->status == 15) selected @endif>
                                                {{ __('basic.accept from delivery')}}
                                            </option>
                                            <option value="16" @if($order->status == 16) selected @endif>
                                                {{ __('basic.arrived to store')}}
                                            </option>
                                            <option value="16" @if($order->status == 16) selected @endif>
                                                {{ __('basic.ready for delivery')}}
                                            </option>
                                            <option value="20" @if($order->status == 20) selected @endif>
                                                {{ __('basic.out for delivery')}}
                                            </option>
                                            <option value="25" @if($order->status == 25) selected @endif>
                                                {{ __('basic.delivered')}}
                                            </option>
                                            <option value="30" @if($order->status == 30) selected @endif >
                                                {{ __('basic.failed to deliver')}}
                                            </option>
                                            <option value="35" @if($order->status == 35) selected @endif >
                                                {{ __('basic.canceled')}}
                                            </option>
                                            <option value="40" @if($order->status == 40) selected @endif >
                                                {{ __('basic.refund')}}
                                            </option>
                                        </select>
                                    </div>

                                    <div class="me-2 mb-3">
                                        <label class="form-label">{{ __('basic.delivery') }}
                                            <small>({{ __('basic.required') }})</small></label>
                                        <select name="shipment_delivery_id"
                                            class="js-example-basic-single js-example-basic-single select2-hidden-accessible"
                                            required>
                                            @foreach ($deliveries as $item_delivery)
                                            <option value="{{ $item_delivery->id }}" @if ($item_delivery->id ==
                                                $order->delivery_id) selected @endif>
                                                {{ $item_delivery->name}}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="me-2 mb-3">
                                        <label class="form-label">{{ __('basic.note') }}
                                            <small>({{ __('basic.optional') }})</small></label>
                                        <textarea name="shipment_note"
                                            class="form-control @error('note') is-invalid @enderror" rows="4"
                                            placeholder="Write here the shipment note">{{ $order->description }}</textarea>
                                        @error('note')
                                        <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="submit" class="btn btn-default btn-link main-color">{{
                                        __('basic.update') }}</button>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>

            </div>
        </div>
    </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">
            <div>
                <h6 class="m-0 fw-normal text-gray-500 mb-2"><i class="fas fa-truck me-1"></i> {{
                    __('basic.shipment no') }}:
                    <span class="fw-bold">
                        {{ $order->code }}
                    </span>
                </h6>
                <h6 class="m-0 text-gray-500 fw-normal mb-2"><i class="fas fa-user me-1"></i> {{
                    __('basic.delivery') }}:
                    <span class="fw-bold">
                        @if($order->delivery)
                        {{ $order->delivery->full_name }}
                        @endif
                    </span>
                </h6>
                <h6 class="m-0 text-gray-500 fw-normal"><i class="fas fa-people-carry me-1"></i> {{
                    __('basic.shipped from') }}:
                    <span class="fw-bold">
                        @if($order->shipped_from > 0)
                        {{ $order->shipped_from_status }}
                        @endif
                    </span>
                </h6>
            </div>

            <h6 class="m-0 fw-bold text-gray-500">{{ __('basic.created') }}:
                {{ $order->created_at }}
            </h6>
        </div>

        <!-- Card Body -->
        <div class="card-body mt-2 px-4 px-md-5 pb-3">
            <ul class="px-0 progressbar progressbar_6icons" id="progressbar">
                <li class="active">
                    <a>
                        <!-- in case we want to use prog selector href="#clinics" -->
                        <div
                            class="icon-circle d-flex align-items-center justify-content-center @if($order->status >= 1) checked @endif">
                            <i class="fas fa-shopping-basket"></i>
                        </div>
                        {{ __('basic.placed') }}
                        <br>
                        <small class=" text-gray-300">{{ $order->placed_date }}</small>
                    </a>
                </li>

                <li class="@if($order->status >= 5) active @endif">
                    <a>
                        <div
                            class="icon-circle d-flex align-items-center justify-content-center @if($order->status >= 5) checked @endif">
                            <i class="fas fa-store"></i>
                        </div>
                        {{ __('basic.approved') }}
                        <br>
                        <small class=" text-gray-300">{{ $order->approved_store_date }}</small>
                    </a>
                </li>
                <li class="@if($order->status >= 10) active @endif">
                    <a>
                        <div
                            class="icon-circle d-flex align-items-center justify-content-center @if($order->status >= 10) checked @endif">
                            <i class="fas fa-people-carry"></i>
                        </div>
                        {{ __('basic.shipped') }}
                        <br>
                        <small class=" text-gray-300">{{ $order->shipped_date }}</small>
                    </a>
                </li>
                <li class="@if($order->status >= 20) active @endif">
                    <a>
                        <div
                            class="icon-circle d-flex align-items-center justify-content-center @if($order->status >= 20) checked @endif">
                            <i class="fas fa-truck"></i>
                        </div>
                        {{ __('basic.out for delivery') }}
                        <br>
                        <small class=" text-gray-300">{{ $order->out_for_delivery_date }}</small>
                    </a>
                </li>
                <li class="@if($order->status >= 25) active @endif">
                    <a>
                        <div
                            class="icon-circle d-flex align-items-center justify-content-center @if($order->status >= 25) checked @endif">
                            <i class="fas fa-check"></i>
                        </div>
                        {{ __('basic.delivered') }}
                        <br>
                        <small class=" text-gray-300">{{ $order->delivered_date }}</small>
                    </a>
                </li>
                <li class="@if($order->status >= 40) active @endif">
                    <a>
                        <div
                            class="icon-circle d-flex align-items-center justify-content-center @if($order->status >= 40) checked @endif">
                            <i class="fas fa-times"></i>
                        </div>
                        {{ __('basic.canceled') }}
                        <br>
                        <small class=" text-gray-300">{{ $order->canceled_date }}</small>
                    </a>
                </li>
            </ul>

            {{------------ shipments ---------------}}

            @foreach ($order->order_items as $item_si)
            <div class="col-12 col-md-3 mb-3 position-relative">
                <div class="position-absolute top-0 start-0 z-3 ms-2 rounded-circle p-0 bg-danger text-center"
                    data-bs-toggle="modal" data-bs-target="#delete_shipment_modal{{ $item_si->id }}"
                    style="width: 25px; height:25px;">
                    <i class="fas fa-times text-white fs-6 clickable-item-pointer"></i>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="delete_shipment_modal{{ $item_si->id }}" tabindex="-1"
                    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">
                                <div class="modal-title" id="exampleModalLabel"><i class="fas fa-trash me-1"></i>
                                    {{ __('basic.delete') }}</div>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>

                            <form action="{{ route('sett.delete_product_shipment', 'test') }}" method="post">
                                {{ method_field('post') }}
                                {{ csrf_field() }}
                                <!-- Modal content -->
                                <div class="modal-body px-4">
                                    <div class="modal-body delete-conf-input text-center py-0">
                                        <p class="mb-0">{{ __('basic.delete message shipment') }}</p><br>
                                        <input type="hidden" name="item_id" value="{{ $item_si->id }}">
                                    </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="submit" class="btn btn-default btn-link text-red">{{
                                            __('basic.delete') }}
                                        </button>
                                    </div>

                                </div>
                            </form>

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

                <div class="card shadow h-100 pos_product_nohover">
                    <img class="card-img-top pso_product_img"
                        src="{{ URL::asset('img/products/' . $item_si->product->main_image) }}">
                    <div class="card-body py-2 px-3">
                        <p class="text-start fw-bold mb-0">{{ $item_si->product->name }}</p>
                        <div class="text-gray-400 text-s d-flex justify-content-between mb-0">
                            <p class="mb-0">{{ $item_si->main_price->name }}</p>
                            <p class="mb-0">{{ $item_si->main_price->sell }}</p>
                        </div>
                        <hr class="my-2">
                        @if($item_si->additions)
                        @foreach ($item_si->additions as $item_addit)
                        <div class="text-gray-400 text-s d-flex justify-content-between">
                            <p class="mb-0">{{ $item_addit->product_price->name }}</p>
                            <p class="mb-0">{{ $item_addit->product_price->sell }}</p>
                        </div>
                        @endforeach
                        @endif
                        <div class="d-flex justify-content-between align-items-center px-0">
                            <div>
                                <h6 class=" mb-0 fw-bold text-grat-800">{{ $item_si->qty }}</h6>
                                <p class="text-xxs text-gray-400 text-uppercase mb-0">{{
                                    $item_si->product->unit->name }}</p>
                            </div>
                            <div>
                                <h4 class="mb-0 fw-bold text-grat-800">{{ $item_si->final_price }}<h4>
                                        <p class="text-xxs text-gray-400 text-uppercase mb-0">{{
                                            $currency }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

            {{-- 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" disabled
                            class="form-control @error('traveler_id') is-invalid @enderror"
                            placeholder="Write here customer name ..." value="{{ $order->client->full_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="{{ $order->client_address_id }}">

                            <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">
                                <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">{{ $order->delivery_address->street_name
                                                }} </span>,

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

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

                                            {{ __('basic.apt no') }}:
                                            <span id="apt_no_address">{{ $order->delivery_address->apartment_number
                                                }}</span>
                                        </h6>
                                        <h6 id="extra_info_address"> {{ $order->delivery_address->extra_info }}</h6>
                                        <h6><i class="fas fa-phone me-1"></i> <span id="phone_number_address">{{
                                                $order->delivery_address->phone_number
                                                }}</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.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">{{ $order->note }}</textarea>
                        @error('note')
                        <span class="error-msg-form">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>
                </div>


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

                    <h6 class="fw-bold">{{ __('basic.shipment 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" id="subtotal" class="form-control me-2" disabled
                                    value="{{ $order->subtotal }}">
                                <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" id="delivery_fee" name="delivery_fee" class="form-control me-2"
                                    value="{{ $order->delivery_fee }}" 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" id="discount" name="discount" class="form-control me-2"
                                    value="{{ $order->discount }}" 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" id="final_price" value="{{ $order->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>

    </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
                        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">
                        <div>
                            <h6>{{ __("basic.street name") }}:
                                <span> {{ $order->delivery_address->street_name }} </span>
                                {{ __("basic.bulding no") }}: <span>
                                    {{ $order->delivery_address->bulding_number }}
                                </span>,
                                {{ __('basic.floor') }}:
                                <span> {{ $order->delivery_address->floor }} </span>
                                {{ __('basic.apt no') }}:
                                <span> {{ $order->delivery_address->apartment_number }}</span>
                            </h6>
                            <h6> {{ $order->delivery_address->extra_info }}</h6>
                            <h6><i class="fas fa-phone me-1"></i> <span> {{ $order->delivery_address->phone_number
                                    }}</span></h6>
                        </div>
                        <div class="text-center">
                            <i class="fas fa-exchange-alt text-green fs-5 me-2"></i>
                        </div>
                    </div>

                </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">


        <form class="mb-0" action="{{ route('sett.new_product_order') }}" method="POST" style="display: contents">
            @csrf

            <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">
                        <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">
                        <input type="hidden" name="new_product_order_id" value="{{ $order->id }}">
                        <input type="hidden" id="new_product_id" name="new_product_id">
                        <button type="submit" 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>

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


<!-- Modal itinerary insert data -->
<div class="modal fade" id="map_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">
                <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-route me-1"></i>
                    {{ __('basic.delivery tracking') }}</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-3">

                <div class="col-12 mb-2">
                    <div id="map"></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>
        </div>


    </div>
</div>


<!-- confirm Modal -->
<div class="modal fade" id="print_qty_qr" tabindex="-1" 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">
                <div class="modal-title" id="exampleModalLabel"><i class="fas fa-sticky-note me-1"></i>
                    {{ __('basic.how many waybill you want to print') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

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

                <div class="modal-body delete-conf-input text-center d-flex py-0">

                    <select id="print_qty"
                        class="js-example-basic-single js-example-basic-single select2-hidden-accessible @error('qty') is-invalid @enderror"
                        id="type" name="qty" required>
                        @for($i = 1; $i <= 20; $i++) <option value="{{ $i }}">{{ $i }}</option>
                            @endfor
                    </select>
                    <input type="hidden" name="shipment_id" id="waybill_id" value="">
                </div>
            </div>

            <div class="modal-footer">
                <div class="right-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="left-side">
                    <button id="print_qr_btn" class="btn btn-default btn-link text-green">{{__('basic.print') }}
                    </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();
            }

        });

</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>

{{-- print jquery --}}
<script type="text/javascript" language="javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.6.2/jQuery.print.min.js">
</script>

{{-- leaflet --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.js"></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();

    })




    $('.print_qr').on('click', function() {
        var id = $(this).data('id');
        $('#print_qty_qr').modal('show');
        $('#waybill_id').val(id);
    });

    $('#print_qr_btn').on('click', function() {

        var id = $("#waybill_id").val();
        var qty = $("#print_qty").val();

        var url = "{{ route("sett.print_shipment_waybill") }}"; //get submit url [replace url here if desired]
        $.ajax({
            url: url
            , type: 'POST'
            , data: {
                '_token': "{{ csrf_token() }}"
                , 'id': id
                , 'qty': qty
            , }
            , success: function(viewContent) {
                console.log(viewContent);
                $.print(viewContent, {
                addGlobalStyles : true,
                stylesheet : null,
                rejectWindow : true,
                noPrintSelector : ".no-print",
                //Print in a hidden iframe
                iframe : false,
                //Add this on bottom
                append : null,
                //Add this at top
                prepend : null,
            }); // This is where the script calls the printer to print the viwe's content.
            }
        , });


    });



    // 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);
                $("#new_product_id").val(data.id);

                $("#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.id +'" data-price="' + 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 addition_price_inputs" type="checkbox" id="add_' + key + value.name +'" name="addition_price[]" value="' + value.id + '" data-price="' + 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("");
                }

            },
        });
    })

    let mapOptions = {
                    center:[30.033333, 31.233334],
                    zoom: 19,
                }

    let map = new L.map('map' , mapOptions);
    //Instead of adding the markers directly to your map, add them to a L.LayerGroup
    var layerGroup = L.layerGroup().addTo(map);

    // tracking
    $(document).on('click','.show_track',function(){
        var latitude =  $(this).data('latitude')
        var longitude =  $(this).data('longitude')
        var shipped_from_latitude =  $(this).data('shipped_from_latitude')
        var shipped_from_longitude =  $(this).data('shipped_from_longitude')


        var shipped_to_latitude =  $(this).data('shipped_to_latitude')
        var shipped_to_longitude =  $(this).data('shipped_to_longitude')
        if(shipped_to_latitude == null){
            shipped_to_latitude = latitude;
            shipped_to_longitude = longitude;
        }

        let mapOptions = {
            center:[latitude, longitude],
            zoom:15
        }

        // Comment out the below code to see the difference.
        $('#map_modal').on('shown.bs.modal', function() {
        map.invalidateSize();
        });

        // L.marker([latitude, longitude]).addTo(map)
        //     .bindPopup('Your Delivery Location')
        //     .openPopup();

        let customIcon = { iconUrl:"{{ URL::asset('img/icons/bike_top_tracking.png') }}",
                    iconSize:[70,70] }

        let myIcon = L.icon(customIcon);
        //let myIcon = L.divIcon();

        let iconOptions = {
            title:"company name",
            draggable:true,
            icon:myIcon
        }


    // remove all marks
    layerGroup.clearLayers();


    // add markers and polygon (shipped from and shipped) to the map
    shipped_from = L.marker([shipped_from_latitude , shipped_from_longitude])
    .bindPopup('Shipped from')
    .addTo(layerGroup);
    shipped_to = L.marker([shipped_to_latitude , shipped_to_longitude])
    .bindPopup('Shipped to')
    .addTo(layerGroup);
        // show itinerary polygon
    var polygon = L.polygon([
                    [shipped_from_latitude,shipped_from_longitude],
                    [shipped_to_latitude,shipped_to_longitude],
                ]).addTo(layerGroup);

    // marker for delivery
    marker = new L.marker([latitude, longitude], iconOptions)
                        .bindPopup('the delivery location')
                        .addTo(layerGroup);


        let layer = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 14,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap | Tripo</a>'
        }).addTo(map);


        //center the marker
        // map.panTo(new L.LatLng(latitude, longitude));
        // map.fitBounds([[latitude,longitude]]);
        arrayOfLatLngs = [[latitude,longitude]]
        var bounds = new L.LatLngBounds(arrayOfLatLngs);
        map.fitBounds(bounds);

        // map.fitBounds([latitude, longitude]);


        $('#map_modal').modal('show');
    });

    // order item prices
    $(document).on("change", 'input[name="main_price"], .addition_price_inputs', 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').data('price'));
        var qty = $('#item_qty').val();

        var additions_prices = 0;
        $('.addition_price_inputs').each(function () {
            additions_prices += (this.checked ? parseFloat($(this).data('price')) : parseFloat(0));
        });

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



    $(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>



<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"
    integrity="sha512-K/oyQtMXpxI4+K0W7H25UopjM8pzq0yrVdFdG21Fh5dBe91I40pDd9A4lzNlHPHBIP2cwZuoxaUSX0GJSObvGA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    $(document).ready(function() {


//-------- datepicker time --------
$('.datepicker_time').flatpickr({
    enableTime: true,
    dateFormat: "Y-m-d H:i",
});

})
</script>
@endsection