@extends('client.layouts.app')
@if (isset($open_sale_bill) && !empty($open_sale_bill))
    @section('title', ' فاتورة مبيعات ' . $open_sale_bill->sale_bill_number)
@else
    @section('title', ' فاتورة مبيعات ' . $pre_bill)
@endif

@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">

                            <h2 class="content-header-title float-start mb-0">
                                @if (isset($open_sale_bill) && !empty($open_sale_bill))تعديل فاتورة مبيعات
                                @else
                                    إضافة فاتورة مبيعات @endif
                            </h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('client.home') }}">لوحة التحكم </a>
                                    </li>
                                    <li class="breadcrumb-item"><a
                                            href="{{ route('client.sale_bills.index') }}">المبيعات</a>
                                    </li>
                                    <li class="breadcrumb-item active">
                                        @if (isset($open_sale_bill) && !empty($open_sale_bill))تعديل فاتورة
                                        @else
                                            إضافة فاتورة @endif
                                    </li>
                                    <li class="breadcrumb-item active">
                                        @if (isset($open_sale_bill) && !empty($open_sale_bill))
                                            {{ $open_sale_bill->sale_bill_number }}@else{{ $pre_bill }}@endif
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
                    <div class="mb-1 breadcrumb-right">
                        <div class="dropdown">
                            <a href="{{ route('client.sale_bills.index') }}">
                                <button class="btn-icon btn btn-primary" type="button"><i data-feather='eye'> </i></button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Basic Horizontal form layout section start -->
                <!-- Basic multiple Column Form section start -->
                <section class="invoice-add-wrapper" data-select2-id="13">
                    <form target="_blank" action="#" method="POST" id="invoice">
                        @csrf
                        <input id="company_id" value="{{ $company_id }}" type="hidden">

                        @if (isset($open_sale_bill) && !empty($open_sale_bill))
                            <input id="sale_bill_id" value="{{ $open_sale_bill->id }}" type="hidden">
                            <input type="hidden" value="{{ $open_sale_bill->sale_bill_number }}" id="sale_bill_number" />
                            <input type="hidden" value="{{ $open_sale_bill->status }}" id="status" />
                        @else
                            <input id="sale_bill_number" value="{{ $pre_bill }}" type="hidden">
                            <input type="hidden" value="open" id="status" />

                        @endif

                        <div class="row invoice-add">
                            <!-- Invoice Add Left starts -->
                            <div class="col-xl-9 col-md-8 col-12" data-select2-id="12">
                                <div class="card invoice-preview-card" data-select2-id="11">
                                    <!-- Header starts -->
                                    <div class="card-body invoice-padding pb-0 row">

                                        <div class="col-xl-3 col-md-3 col-12">
                                            <div class="mb-1" align="center">
                                                <b class="form-label" for="client_name">اسم العميل</b>

                                                <select name="outer_client_id" id="outer_client_id"
                                                    class="search select2-selection__placeholder">
                                                    <option @if (isset($open_sale_bill) && !empty($open_sale_bill) && empty($open_sale_bill->outer_client_id)) selected @endif
                                                        value="">عميل نقدي
                                                    </option>
                                                    @foreach ($outer_clients as $outer_client)
                                                        <option
                                                            @if (isset($open_sale_bill) && !empty($open_sale_bill) && $outer_client->id == $open_sale_bill->outer_client_id) selected value="{{ $open_sale_bill->outer_client_id }}"
                              @else
                              value="{{ $outer_client->id }}" @endif>
                                                            {{ $outer_client->client_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-xl-3 col-md-3 col-12">
                                            <div class="mb-1" align="center">
                                                <b class="form-label" for="date">تاريخ الفاتورة</b>
                                                <input type="date" name="date"
                                                    @if (isset($open_sale_bill) && !empty($open_sale_bill)) value="{{ $open_sale_bill->date }}"
                                 @else
                                 value="2026-05-22" @endif
                                                    id="date" class="form-control" />
                                            </div>
                                        </div>

                                        <div class="col-xl-3 col-md-3 col-12">
                                            <div class="mb-1" align="center">
                                                <b class="form-label" for="time">وقت الفاتورة</b>
                                                <input type="time" name="time"
                                                    @if (isset($open_sale_bill) && !empty($open_sale_bill)) value="{{ $open_sale_bill->time }}"
                                     @else
                                     value="23:33:56" @endif
                                                    id="time" class="form-control" />
                                            </div>
                                        </div>

                                        <div class="col-xl-3 col-md-3 col-12">
                                            <div class="mb-1" align="center">
                                                <b class="form-label" for="store_id"> مخزن البيع </b>
                                                <select name="store_id" id="store_id"
                                                    class="search select2-selection__placeholder" title="اختر المخزن">
                                                                                                        @foreach ($stores as $store)
                                                        <option value="all" selected>جميع المنتجات</option>
                                                        <option value="{{ $store->id }}">{{ $store->store_name }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>
                                        <div class=" outer_client_details no-print row"
                                            @if (!isset($open_sale_bill) || empty($open_sale_bill) || empty($open_sale_bill->outer_client_id)) style="display: none !important;" @endif>
                                            <div class="col-xl-3 col-md-3 col-12">
                                                <label class="form-label"> الفئة </label>
                                                <input type="text" class="form-control"
                                                    @if (isset($open_sale_bill) && !empty($open_sale_bill) && !empty($open_sale_bill->outer_client_id)) value="{{ $open_sale_bill->OuterClient->client_category }}" @endif
                                                    readonly id="category" />
                                            </div>
                                            <div class="col-xl-3 col-md-3 col-12">
                                                <label class="form-label">المديونية </label>
                                                <input type="text"
                                                    @if (isset($open_sale_bill) && !empty($open_sale_bill) && !empty($open_sale_bill->outer_client_id)) value="@if ($open_sale_bill->OuterClient->balance > 0) علية @else لة @endif
                                                    {{ $open_sale_bill->OuterClient->balance }}" @endif
                                                class="form-control" readonly id="balance_before"/>
                                            </div>
                                            <div class="col-xl-3 col-md-3 col-12">
                                                <label class="form-label">جنسية العميل</label>
                                                <input type="text" class="form-control"
                                                    @if (isset($open_sale_bill) && !empty($open_sale_bill) && !empty($open_sale_bill->outer_client_id)) value="{{ $open_sale_bill->OuterClient->client_national }}" @endif
                                                    readonly id="client_national" />
                                            </div>
                                            <div class="col-xl-3 col-md-3 col-12">
                                                <div class="form-group" dir="rtl">
                                                    <label class="form-label">ملاحظات </label>
                                                    <input type="text" name="notes"
                                                        @if (isset($open_sale_bill) && !empty($open_sale_bill)) value="{{ $open_sale_bill->notes }}" @endif
                                                        id="notes" class="form-control" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Header ends -->

                                    <!-- Vertical Scrollbar -->
                                    <div class="col-lg-12 col-md-12 col-12">
                                        <div class="card overflow-hidden mb-4" style="height: 290px;">
                                            <br>
                                            <center>
                                                <h5 class="">المنتجات</h5>
                                            </center>
                                            <div class="card-body" id="vertical-example">
                                                <div class="row" id="products_list">
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <hr class="invoice-spacing">

                                    <div class="card-body  bill_details" id="productsTable">
                                                                                @if ($open_sale_bill)
                                            @foreach ($open_sale_bill->elements as $element)
                                                <div class="mb-3 invItem" data-repeater-list="group-a"
                                                    id="row-{{ ++$c }}">
                                                    <div class="repeater-wrapper pt-0 pt-md-4" data-repeater-item="">
                                                        <div class="d-flex border rounded position-relative pe-0">
                                                            <div class="row w-100 p-3">

                                                                <div class="col-md-2 col-12 mb-md-0 mb-3">
                                                                    <p class="mb-2 repeater-title">المنتج</p>
                                                                    <div id="productName_{{ $c }}">
                                                                        {{ $element->product->product_name }}</div><input
                                                                        type="hidden" name="product[]"
                                                                        id="product_{{ $c }}"
                                                                        value="{{ $element->product_id }}"
                                                                        class="form-control product" autocomplete="off"
                                                                        required>
                                                                </div>

                                                                <div class="col-md-2 col-12 mb-md-0 mb-3">
                                                                    <p class="mb-2 repeater-title">الكمية</p>
                                                                    <input class="form-control quantity" type="number"
                                                                        value="{{ $element->quantity }}"
                                                                        name="quantity[]"
                                                                        id="quantity_{{ $c }}"
                                                                        product="{{ $element->product_id }}"
                                                                        @if ($element->product->is_product == 1) @else max="999999" @endif
                                                                        min="0" step="any">
                                                                </div>

                                                                <div class="col-md-2 col-12 mb-md-0 mb-3">
                                                                    <p class="mb-2 repeater-title">الوحدة</p>
                                                                    {{ $element->unit->unit_name }}<input type="hidden"
                                                                        name="unit[]" id="unit_{{ $c }}"
                                                                        value="{{ $element->unit_id }}"
                                                                        class="form-control unit" autocomplete="off"
                                                                        required>
                                                                    <input type="hidden" name="product_unit_quantity[]"
                                                                        id="product_unit_quantity_{{ $c }}"
                                                                        value="{{ $element->elements_unit->quantity }}"
                                                                        class="form-control unit" autocomplete="off"
                                                                        required>
                                                                </div>

                                                                <div class="col-md-3 col-12 mb-md-0 mb-3">
                                                                    <p class="mb-2 repeater-title">السعر</p>

                                                                    <input class="form-control" type="number"
                                                                        step="any"
                                                                        value="{{ $element->product_price }}"
                                                                        name="price[]" id="price_{{ $c }}"
                                                                        product="{{ $element->product_id }}"
                                                                        min="0">
                                                                </div>

                                                                <div class="col-md-3 col-12 mb-md-0 mb-3">
                                                                    <p class="mb-2 repeater-title">الإجمالي</p>
                                                                    <input type="text" name="total[]"
                                                                        id="total_{{ $c }}"
                                                                        class="form-control total"
                                                                        id="total_{{ $c }}"
                                                                        value="{{ $element->quantity_price }}" readonly
                                                                        required>
                                                                </div>

                                                            </div>

                                                            <div
                                                                class="d-flex flex-column align-items-center justify-content-between border-start p-2">
                                                                <a class="delete" id="removeRows"
                                                                    data-unit="{{ $element->unit_id }}"
                                                                    data-div="{{ $c }}"
                                                                    data-product="{{ $element->product_id }}"
                                                                    data-invoice="{{ $open_sale_bill->sale_bill_number }}"><i
                                                                        class="la la-trash"
                                                                        style="font-size:20px;color:red"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                            <input id="elementCout" type="hidden"
                                                value="{{ $open_sale_bill->elements->count() }}">
                                        @endif

                                    </div>



                                    <hr class="invoice-spacing mt-0">
                                    <div class="card-body invoice-padding-extra"
                                        @if (empty($element)) style="display:none" @endif>
                                        <div class="row invoice-sales-total-wrapper">
                                            <div class="col-md-6 order-md-1 order-2 mt-md-0 mt-3">
                                                <div class="d-flex align-items-center mb-1">
                                                    <b for="extra_type" class="form-label">&nbsp; الشحن &nbsp;</b>
                                                    <select name="extra_type" id="extra_type" class="form-control"
                                                        style="width: 30%;display: inline;float: right;margin-left: 5px">
                                                        <option @if (
                                                            !empty($open_sale_bill) &&
                                                                !empty($open_sale_bill->extra->action_type) &&
                                                                $open_sale_bill->extra->action_type == 'pound') selected @endif
                                                            value="pound">{{ $extra_settings->currency }}</option>
                                                        <option @if (
                                                            !empty($open_sale_bill) &&
                                                                !empty($open_sale_bill->extra->action_type) &&
                                                                $open_sale_bill->extra->action_type == 'percent') selected @endif
                                                            value="percent">نسبة مئوية</option>
                                                    </select>
                                                    <input type="number" name="extra_value"min="0"
                                                        style="width: 50%;display: inline;float: right;" id="extra_value"
                                                        class="form-control" placeholder=" قيمة أو نسبة الشحن "
                                                        @if (!empty($open_sale_bill->extra)) value="{{ $open_sale_bill->extra->value }}" @endif />
                                                </div>
                                                <div class="d-flex align-items-center mb-1">
                                                    <b for="discount_type" class="form-label">&nbsp; الخصم &nbsp;</b>
                                                    <select name="discount_type" id="discount_type" class="form-control"
                                                        style="width: 30%;display: inline;float: right;margin-left: 5px">
                                                        <option @if (
                                                            !empty($open_sale_bill) &&
                                                                !empty($open_sale_bill->discount->action_type) &&
                                                                $open_sale_bill->discount->action_type == 'pound') selected @endif
                                                            value="pound">{{ $extra_settings->currency }}</option>
                                                        <option @if (
                                                            !empty($open_sale_bill) &&
                                                                !empty($open_sale_bill->discount->action_type) &&
                                                                $open_sale_bill->discount->action_type == 'percent') selected @endif
                                                            value="percent">نسبة مئوية</option>
                                                    </select>
                                                    <input type="number" name="discount_value"min="0"
                                                        @if (!empty($open_sale_bill) && !empty($open_sale_bill->discount)) value="{{ $open_sale_bill->discount->value }}" @endif
                                                        style="width: 50%;display: inline;float: right;"
                                                        id="discount_value" class="form-control"
                                                        placeholder=" قيمة أو نسبة الخصم " />
                                                </div>
                                            </div>
                                            <div class="col-md-6 d-flex justify-content-end order-md-2 order-1">
                                                <div class="invoice-calculations">
                                                    <div class="d-flex justify-content-between mb-2">
                                                        <p class="w-px-100">الإجمالي : </p>
                                                        <p class="fw-medium">
                                                        <div id="subtotal">0</div>
                                                        </p>
                                                    </div>
                                                    <div id="taxAndTotalWithTax"
                                                        @if (empty($company->tax_value_added)) style="display: none" @endif>
                                                        <div class="d-flex justify-content-between mb-2">
                                                            <p class="w-px-100"> الضريبة : </p>
                                                            <p class="fw-medium">
                                                            <div id="tax">
                                                                @if (!empty($company->tax_value_added))
                                                                    {{ $company->tax_value_added }}
                                                                @else
                                                                    0 @endif
                                                            </div>%</p>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-2">
                                                            <p class="w-px-100">الإجمالي بعد الضريبة : </p>
                                                            <p class="fw-medium">
                                                            <div id="totalAfterTax">0</div>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex justify-content-between mb-2">
                                                        <p class="w-px-100"> الشحن : </p>
                                                        <p class="fw-medium">
                                                            @if (!empty($open_sale_bill->extra))
                                                                <div id="extra">{{ $open_sale_bill->extra->value }}
                                                                </div>
                                                                <div id="exType">
                                                                    @if ($open_sale_bill->extra->action_type == 'pound')
                                                                        {{ $extra_settings->currency }}
                                                                    @else
                                                                        % @endif
                                                                </div>
                                                            @else
                                                                <div id="extra">0</div>
                                                                <div id="exType"></div>
                                                            @endif
                                                        </p>
                                                    </div>
                                                    <div class="d-flex justify-content-between mb-2">
                                                        <p class="w-px-100"> الخصم : </p>
                                                        <p class="fw-medium">
                                                            @if (!empty($open_sale_bill->discount))
                                                                <div id="discount">{{ $open_sale_bill->discount->value }}
                                                                </div>
                                                                <div id="disType">
                                                                    @if ($open_sale_bill->discount->action_type == 'pound')
                                                                        {{ $extra_settings->currency }}
                                                                    @else
                                                                        % @endif
                                                                </div>
                                                            @else
                                                                <div id="discount">0</div>
                                                                <div id="disType"></div>
                                                            @endif
                                                        </p>
                                                    </div>

                                                    <hr class="my-50">
                                                    <div class="d-flex justify-content-between mb-2">
                                                        <p class="w-px-100"> إجمالي الفاتورة : </p>
                                                        <p class="fw-medium">
                                                        <div id="finalTotal"></div>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <!-- Invoice Add Left ends -->

                            <!-- Invoice Add Right starts -->
                            <div class="col-xl-3 col-md-4 col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <button
                                            class="btn btn-primary w-100 mb-75 waves-effect waves-float waves-light submit"
                                            id="saveAllWithOutPrint" type="submit"
                                            @if (!isset($open_buy_bill) || empty($element) || empty($open_buy_bill)) disabled @endif>
                                            @if (isset($open_buy_bill) && !empty($open_buy_bill) && $open_buy_bill->status == 'done')
                                                تحديث <i class="la la-check"></i>
                                            @else
                                                حفظ
                                            @endif

                                        </button>


                                        <button
                                            class="btn btn-success w-100 mb-75 waves-effect waves-float waves-light submit"
                                            id="saveAll" type="submit"
                                            @if (!isset($open_buy_bill) || empty($element) || empty($open_buy_bill)) disabled @endif>
                                            @if (isset($open_buy_bill) && !empty($open_buy_bill) && $open_buy_bill->status == 'done')
                                                تحديث و طباعة
                                            @else
                                                حفظ و طباعة
                                            @endif

                                        </button>
                    </form>

                    @if (isset($open_sale_bill) && !empty($open_sale_bill))
                        <input type="hidden" value="{{ $open_sale_bill->sale_bill_number }}" name="sale_bill_number" />
                    @else
                        <input type="hidden" value="{{ $pre_bill }}" name="sale_bill_number" />
                    @endif
                    @if (isset($open_sale_bill) && !empty($open_sale_bill) && $open_sale_bill->status == 'done')
                        <a href="{{ route('client.sale_bills.print', $open_sale_bill->sale_bill_number) }}"> <button
                                class="btn btn-primary w-100 mb-75 waves-effect waves-float waves-light" id="viewInvoice"
                                type="button">
                                عرض <i data-feather="eye"></i>
                            </button></a>
                        <button type="button" class="btn btn-outline-danger w-100 mb-75 waves-effect "
                            onclick="window.history.back()"> رجوع <i class="la la-arrow-left"></i></button>
                    @else
                        <form method="post" action="{{ route('client.sale_bills.cancel') }}">
                            @csrf
                            @if (isset($open_sale_bill) && !empty($open_sale_bill))
                                <input type="hidden" value="{{ $open_sale_bill->sale_bill_number }}"
                                    name="sale_bill_number" />
                            @else
                                <input type="hidden" value="{{ $pre_bill }}" name="sale_bill_number" />
                            @endif
                            <button type="submit" id="cancel" @if (!isset($open_sale_bill) || empty($open_sale_bill)) disabled @endif
                                class="btn btn-outline-danger w-100 mb-75 waves-effect ">
                                الغاء وخروج
                                <i class="la la-arrow-left"></i>
                            </button>

                        </form>
                    @endif
            </div>
        </div>
        <form method="POST" id="payForm" action="#">
            @csrf

            <div class="mt-2">
                <p class="mb-50">طريقة الدفع</p>
                <select id="payment_method" name="payment_method" class="form-select"
                    @if (empty($open_sale_bill)) disabled @endif>
                    <option value="">اختر طريقة الدفع</option>
                    <option value="cash">دفع كاش نقدى</option>
                    @if (count($banks) > 0)
                        <option value="bank">دفع بنكى شبكة</option>
                    @endif
                </select>
            </div>



            <div id="payCash" style="display: none">
                <div class="mt-2" id="safes" style="display: none" @disabled(true)>
                    <p class="mb-50">إختر خزنة الدفع</p>
                    <select id="safe_id"class="form-select">
                        <option value="">اختر خزنة الدفع</option>
                        @foreach ($safes as $safe)
                            <option value="{{ $safe->id }}" @if ($safe->safe_name == 'الخزنة الرئيسية') selected @endif>
                                {{ $safe->safe_name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="mt-2">
                    <input readonly value="" class="form-control" name="cash_number" id="cash_number"
                        type="hidden">
                    <p class="mb-50">المبلغ المدفوع</p>
                    <input class="form-control" id="payAmountCash" name="amount" type="text">
                </div>


            </div>
            {{-- bank pay --}}
            <div id="payBank" style="display: none">
                <div class="mt-2" id="banks" style="display: none">
                    <p class="mb-50">إختر البنك </p>
                    <select id="bank_id"class="form-select">
                        <option value="">اختر البنك </option>
                        @foreach ($banks as $bank)
                            <option value="{{ $bank->id }}">{{ $bank->bank_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mt-2">
                    <input required readonly value="" class="form-control" name="cash_number" id="cash_number"
                        type="hidden">
                    <p class="mb-50">المبلغ المدفوع</p>
                    <input class="form-control" id="payAmountBank" name="amount" type="text">
                </div>
                <div class="mt-2">
                    <p class="mb-50">رقم المعاملة</p>
                    <input type="text" class="form-control" id="bank_check_number" />
                </div>
                <div class="mt-2">
                    <p class="mb-50">ملاحظات</p>
                    <input type="text" class="form-control" id="bank_notes" />
                </div>


            </div>

            <div class="mt-2" align="center">

                <button type="submit" id="submitPay" style="display: none"
                    class="btn btn-outline-primary w-50 mb-50 waves-effect "><i class="fa fa-check"></i>تسجيل
                    الدفع</button>

            </div>

            <div class="mt-2" id="cashPaied" @if (empty($sale_bill_bank_cash) && empty($sale_bill_cash)) style="display:none;" @endif>
                <center>
                    <p class="mb-50">سجل دفعات الفاتورة</p>
                    <hr class="invoice-spacing">
                    @if (isset($open_sale_bill) && !empty($open_sale_bill))
                        @if (!empty($sale_bill_cash))
                            <div class="opreation" id="{{ $sale_bill_cash->id }}">
                                <td> {{ $sale_bill_cash->amount }} </td>
                                <td> ( {{ $sale_bill_cash->safe->safe_name }} )</td>
                                <td> <button type="button" payment_method="cash" id="deleteCash"
                                        cash_id="{{ $sale_bill_cash->id }}" class="btn delete_pay"><i
                                            style="font-size:20px ; color:red " class="la la-trash"></i></button> </td>
                            </div>
                        @endif
                        @if (!empty($sale_bill_bank_cash))
                            <div class="opreation" id="{{ $sale_bill_bank_cash->id }}">
                                <td> {{ $sale_bill_bank_cash->amount }} </td>
                                <td> ( {{ $sale_bill_bank_cash->bank->bank_name }} )</td>
                                <td> <button type="button" payment_method="bank" id="deleteCash"
                                        cash_id="{{ $sale_bill_bank_cash->id }}" class="btn delete_pay"><i
                                            style="font-size:20px ; color:red " class="la la-trash"></i></button> </td>
                            </div>
                        @endif
                    @endif
                    <div id="pay" style="display:none">
                    </div>
                    <hr class="invoice-spacing">
                </center>
            </div>


        </form>
    </div>
    <!-- Invoice Add Right ends -->
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
        <div class="offcanvas-header">
            <h5 id="offcanvasEndLabel" class="offcanvas-title">
                <span class="me-2" id="offProductName"></span>
            </h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body my-auto mx-0 flex-grow-0">
            <h4 class="text-center">تفاصيل المنتج</h4>
            <table class="table table-border ">
                <tbody>
                    <tr>
                        <td>الكمية المتاحة</td>
                        <td id="offProductQuantity"></td>
                    </tr>
                    <tr>
                        <td>سعر بيع قطاعي</td>
                        <td id="offProductSellSectorPrice"></td>
                    </tr>
                    <tr>
                        <td>سعر بيع جملة</td>
                        <td id="offProductSellWholePrice"></td>
                    </tr>
                    <tr>
                    <tr>
                        <td>سعر الشراء</td>
                        <td id="offProductBuyPrice"></td>
                    </tr>
                    <tr>
                        <td>الوحدة الأساسية</td>
                        <td id="offProductUnit"></td>
                    </tr>
                    <tr>
                        <td>الفئة</td>
                        <td id="offProductCategory"></td>
                    </tr>
                    <tr>
                        <td>المخزن</td>
                        <td id="offProductStore"></td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
    </div>
    </div>
    </section>
    </div>
    </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('app-assets/js/select2.min.js') }}"></script>
    <script src="{{ asset('app-assets/js/pages/sales-pos.js') }}"></script>
    <script
        src="https://demos.pixinvent.com/vuexy-html-admin-template/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js">
    </script>
    <script src="https://demos.pixinvent.com/vuexy-html-admin-template/assets/js/extended-ui-perfect-scrollbar.js"></script>


    <script>
        $('.search').select2();
    </script>
@endsection
@section('style')
    <link href="{{ asset('app-assets/css/app-invoice.css') }}" rel="stylesheet" />
    <script src="{{ asset('app-assets/js/pages/sales.js') }}"></script>

    <link
        href="https://demos.pixinvent.com/vuexy-html-admin-template/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css"
        rel="stylesheet" />

@endsection