@extends('layouts.master')
@section('css')

<!-- Internal Data table css -->
<link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/jquery.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">

<!-- Internal Spectrum-colorpicker css -->
<link href="{{ URL::asset('assets/plugins/spectrum-colorpicker/spectrum.css') }}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
/* زر الحفظ الأساسي - تصميم عصري ومتناسق */
.btn-main-action {
    background: linear-gradient(135deg, #419BB2, #358094) !important;
    color: white !important;
    border: none;
    border-radius: 8px !important;
    padding: 8px 30px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(65, 155, 178, 0.25);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.btn-main-action:hover {
    background: linear-gradient(135deg, #358094, #2a6878) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(65, 155, 178, 0.35) !important;
    color: white !important;
}

.btn-main-action:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* زر التعليق */
.btn-outline-secondary {
    border: 2px solid #ced4da;
    background: white;
    color: #6c757d;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-outline-secondary:hover {
    background-color: #f8f9fa;
    border-color: #6c757d;
    color: #343a40;
}

.svg-white { fill: white; }
.tx-18 { font-size: 18px; }
.shadow-md { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); }
.gap-3 { gap: 1rem !important; }

/* ألوان مخصصة للطباعة والتنزيل */
.btn-primary-custom {
    background-color: #419BB2 !important;
    border: none;
    color: white;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary-custom:hover {
    background-color: #358094 !important;
    transform: translateY(-2px);
}

.btn-secondary-custom {
    background-color: #2c3e50 !important;
    border: none;
    color: white;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-secondary-custom:hover {
    background-color: #1a252f !important;
    transform: translateY(-2px);
}

/* تنسيق الحاوية */
.bg-light-custom {
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 1px dashed #419BB2;
}

.addProductBtn:hover {
    background-color: #358094 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.addProductBtn:active {
    transform: translateY(0);
}

.select2-container--default .select2-selection--single {
    border-radius: 5px !important;
    height: 38px !important;
    border: 1px solid #e1e5ef !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px !important;
    padding-right: 15px !important;
}

/* الخط العام والجدول */
body, table, td, th, input, button, .form-control {
    font-family: "Tajawal", sans-serif;
    font-weight: 600 !important;
    color: #000 !important;
}

table {
    border-collapse: collapse !important;
    width: 100%;
}

table thead th {
    background: #f1f3f9;
    padding: 12px;
    font-weight: 700 !important;
    color: #000 !important;
    text-align: center;
    border: 1px solid #d6d6d6 !important;
}

#productsTableBody tr {
    background: #ffffff;
    transition: background 0.2s ease;
}

#productsTableBody tr:hover {
    background: #f7f9ff;
}

#productsTableBody td {
    border: 1px solid #e0e0e0 !important;
    padding: 10px !important;
    vertical-align: middle;
}

.form-control {
    border-radius: 6px !important;
    border: 1px solid #c8ccd4 !important;
    transition: .2s;
}

.form-control:focus {
    border-color: #478bff !important;
    box-shadow: 0 0 0 2px rgba(71, 139, 255, 0.25);
}

.btn-info, .btn-primary {
    background: linear-gradient(135deg, #478bff, #357bff) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}

.btn-info:hover, .btn-primary:hover {
    background: linear-gradient(135deg, #3f79ff, #296bff) !important;
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, #ff5b5b, #ff3b3b) !important;
    border: none !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #ff4343, #ff2020) !important;
    transform: scale(1.05);
}

#addProductBtn, .btn-add-product {
    background: linear-gradient(135deg, #1a73e8, #0d5bd8) !important;
    padding: 8px 20px;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 700 !important;
    border: none;
}

#addProductBtn:hover {
    transform: translateY(-2px);
}

.modal-content {
    border-radius: 12px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
}

.modal-header {
    background: #f1f3f9;
    border-bottom: 1px solid #ddd !important;
}

.modal-title {
    color: #000 !important;
    font-weight: 700 !important;
}

.modal-body {
    background: #fff;
}

#SearchProductTable th, #SearchProductTable td {
    border: 1px solid #dcdcdc !important;
}

#SearchProductTable tr:hover {
    background: #eef3ff !important;
}

td .d-flex {
    align-items: center;
}
</style>
@section('title')
{{ __('home.Offerـpricesـtoـcustomer') }}
@stop
@endsection

@section('page-header')
<div class="main-parent">
    <div class="breadcrumb-header justify-content-between"
        style="display: flex; align-items: center; background-color: #f8f9fa; padding: 10px 20px; border-bottom: 2px solid #23395D; margin-bottom: 20px; width: 100%; border-radius: 4px 4px 0 0;">

        <div class="my-auto">
            <h4 class="content-title mb-0" style="color: #23395D; font-weight: bold; font-size: 18px; margin: 0;">
                {{ __('home.Offerـpricesـtoـcustomer') }}
            </h4>
        </div>

        <div class="d-flex flex-wrap align-items-center" style="gap: 8px;">
            <div style="min-width: 150px;">
                <select class="form-control select2" name="numbershowstatus" id="numbershowstatus" required>
                    <option value="1">{{__('home.shownumberselect')}}</option>
                    <option value="0">{{__('home.notshow')}}</option>
                </select>
            </div>

            @can('Add a new customer')
            <button class="modal-effect btn btn-sm text-white"
                style="background-color: #23395D; border: 1px solid #1a2a44; border-radius: 3px; padding: 6px 14px; font-size: 11px; white-space: nowrap;"
                data-toggle="modal" href="#createcustomer">
                <i class="fa fa-user-plus" style="margin-left: 5px;"></i> {{ __('home.addnewcustomer') }}
            </button>
            @endcan

            @can('Add new product')
            <button class="modal-effect btn btn-sm text-white"
                style="background-color: #23395D; border: 1px solid #1a2a44; border-radius: 3px; padding: 6px 14px; font-size: 11px; white-space: nowrap;"
                data-toggle="modal" href="#createproduct">
                <i class="fa fa-plus" style="margin-left: 5px;"></i> {{ __('supprocesses.addproduct') }}
            </button>
            @endcan

            <button class="modal-effect btn btn-sm text-white"
                style="background-color: #28a745; border: 1px solid #1e7e34; border-radius: 3px; padding: 6px 14px; font-size: 11px; white-space: nowrap;"
                data-toggle="modal" href="#updateinvoicefromsale">
                <i class="fa fa-truck" style="margin-left: 5px;"></i> {{ __('home.update_qutation') }}
            </button>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="card mg-b-20">
            <div class="card-header pb-0">
                @php
                    $avtSaleRate = App\Models\Avt::find(1)->AVT ?? 15;
                    $system_settings = App\Models\system_setting::find(1);
                    $discound_allow = $system_settings->discount_on_invoice ?? 15;
                    $rate_system = $system_settings->discount_on_invoice ?? 0;
                @endphp

                <input type="hidden" id="discound_allow" name="discound_allow" value="{{ $discound_allow / 100 }}">
                <input type="hidden" id="avtValue" name="avtValue" value="{{ $avtSaleRate }}">

                <form enctype="multipart/form-data" method="POST" role="search" name="form-name" id='formdata' autocomplete="off">
                    {{ csrf_field() }}

                    <div style="border-radius: 10px" class="card p-3 my-3">
                        <table class="table-responsive table table-bordered">
                            <colgroup>
                                <col style="width:2%">
                                <col style="width:3%">
                                <col style="width:15%">
                                <col style="width:20%">
                                <col style="width:9%">
                                <col style="width:9%">
                                <col style="width:7%">
                                <col style="width:9%">
                                <col style="width:7%">
                                <col style="width:9%">
                                <col style="width:10%">
                            </colgroup>
                            <thead class="table-dark">
                                <tr>
                                    <th>-</th>
                                    <th>#</th>
                                    <th>{{ __('home.productNo') }}</th>
                                    <th>{{ __('home.product') }}</th>
                                    <th>{{ __('home.saleperpice') }}</th>
                                    <th>{{ __('home.productprice') }}</th>
                                    <th>{{ __('home.quantity') }}</th>
                                    <th>{{ __('home.price') }}</th>
                                    <th>{{ __('home.discount') }}</th>
                                    <th>{{ __('home.addedValue') }}</th>
                                    <th>{{ __('home.total') }}</th>
                                    <th>{{ __('home.operations') }}</th>
                                </tr>
                            </thead>
                            <tbody id="productsTableBody"></tbody>
                        </table>

                        <button type="button" class="btn addProductBtn shadow-sm text-white"
                            style="background-color: #419BB2; border-radius: 8px; padding: 8px 20px; border: none; transition: all 0.3s ease;"
                            onclick="addRow()">
                            <i class="fas fa-plus-circle me-1"></i> {{ __('supprocesses.addproduct') }}
                        </button>
                        <br>

                        <div class="row mt-3 p-3"
                            style="background-color: #fcfcfc; border: 1px solid #e1e1e1; border-radius: 8px; justify-content: space-between; align-items: flex-end;">
                            <div class="col-md-3">
                                <label class="form-label">{{ __('home.discound_on_invoice') }}</label>
                                <input type="number" step="any" id="discound_on_invoice" name="discound_on_invoice"
                                    oninput='calculateTotalDiscount()' class="form-control" value="0">
                            </div>

                            <div class="col-lg-4">
                                <label for="last_supplier_cost" class="control-label parent-label"
                                    style="color: #23395D; font-weight: bold; font-size: 13px;">
                                    <i class="fa fa-tag ml-1"></i> {{ __('home.last_quotation_price') }}
                                </label>
                                <select class="form-control parent-input" name="last_supplier_cost" id="last_supplier_cost"
                                    style="background-color: #d4edda; border: 1px solid #28a745; border-radius: 5px; height: 40px; font-weight: 500;">
                                </select>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-3">
                                <div class="card bd-0 bg-light p-3 text-center shadow-sm">
                                    <label class="form-label fw-bold text-muted mb-1">{{ __('home.the amount') }}</label>
                                    <input readonly type="text" id="totalSum" name="totalSum"
                                        class="form-control text-center border-0 bg-transparent fw-bold tx-20"
                                        style="color: #444;" value="0.00">
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="card bd-0 bg-danger-light p-3 text-center shadow-sm">
                                    <label class="form-label fw-bold text-danger mb-1">{{ __('home.discount') }}</label>
                                    <input type="text" id="totaldiscound" name="totaldiscound" readonly
                                        class="form-control text-center border-0 bg-transparent fw-bold text-danger tx-20"
                                        value="0.00">
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="card bd-0 bg-primary-light p-3 text-center shadow-sm">
                                    <label class="form-label fw-bold text-primary mb-1">{{ __('home.addedValue') }}</label>
                                    <input type="text" id="totalTax" name="totalTax" readonly
                                        class="form-control text-center border-0 bg-transparent fw-bold text-primary tx-20"
                                        value="0.00">
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="card bd-0 bg-success p-3 text-center shadow-sm border-2">
                                    <label class="form-label fw-bold text-white mb-1" style="font-size: 1.1rem;">{{ __('home.total') }}</label>
                                    <input type="text" id="grandTotal" name="grandTotal" readonly
                                        class="form-control text-center border-0 bg-transparent fw-bold text-white tx-24"
                                        value="0.00">
                                </div>
                            </div>
                        </div>

                        <input type="hidden" name="show_invoice_number_update" id="show_invoice_number_update" value="0">

                        <div class="row row-sm align-items-end mt-3">
                            <div class="col-lg-4 mg-lg-t-10">
                                <label for="clientnamesearch" class="form-label">{{ __('home.chooseclient') }}</label>
                                <select style="width:100%!important" name="clientnamesearch" id="clientnamesearch" class="form-control select2">
                                    <option value="1">عميل نقدي CASH CUSTOMER</option>
                                </select>
                            </div>

                            <div class="col-lg-8 mg-t-10">
                                <label for="notes" class="form-label fw-bold text-muted">
                                    <i class="fas fa-sticky-note me-1 text-warning"></i> {{ __('home.notesClient') }}
                                </label>
                                <div class="input-group shadow-sm">
                                    <span class="input-group-text bg-white border-end-0">
                                        <i class="fas fa-pen-nib text-muted tx-12"></i>
                                    </span>
                                    <input autocomplete="off" type="text"
                                        class="form-control parent-input border-start-0 ps-0" id="notes" name="notes"
                                        value="-" placeholder="{{ __('home.enter_notes_here') }}">
                                </div>
                            </div>
                        </div>

                        <input type="hidden" id="token_search" value="{{ csrf_token() }}">
                        <input type="hidden" id="invoice_number" name="invoice_number" value="{{ $data['invoice_id'] ?? '' }}">
                        <input type="hidden" id="saveinvice" name="saveinvice" value="0">
                        <input type="hidden" id="branchs_id" name="branchs_id" value="{{ Auth()->user()->branchs_id ?? 1 }}">
                        <input type="hidden" id="user_id" name="user_id" value="{{ Auth()->user()->discount_allow_limit ?? 0 }}">
                        <input type="hidden" id="rate_system" name="rate_system" value="{{ $rate_system }}">
                        <input type="hidden" id="shownumberproduct" name="shownumberproduct" value="1">
                    </div>

                    <!-- حاوية زر الحفظ بتصميم متناسق -->
                    <div id="saveInvoiceContainer" class="text-center my-4">
                        <button type="submit" id="saveInvoice" name="saveInvoice" class="btn btn-main-action">
                            <i class="fas fa-save"></i>
                            <span>{{ __('supprocesses.save_data') }}</span>
                        </button>
                    </div>
                </form>

                <input type="hidden" name="show_invoice_number" id="show_invoice_number">

                <!-- أزرار الطباعة والتحميل -->
                <center>
                    <div class="justify-content-center" id="printdiv" style="display: none;">
                        <form action="{{ url(Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() . '/print_order_perice_to_customer') }}"
                            method="POST" role="search" autocomplete="off">
                            @csrf
                            <div class="card bd-0 shadow-none bg-light-custom p-3 mt-3">
                                <div class="row row-sm justify-content-center text-center">
                                    <input type="hidden" name="OrderNoprint" id="OrderNoprint">
                                    <div class="col-md-12 d-flex flex-wrap justify-content-center gap-3">
                                        <button type="submit" id="print_qoute"
                                            class="btn btn-primary-custom shadow-sm d-flex align-items-center px-4 py-2">
                                            <span class="fw-bold">{{ __('home.print') }}</span>
                                            <svg class="ms-2" style="width: 20px; height: 20px; fill: white;" viewBox="0 0 24 24">
                                                <path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z" />
                                            </svg>
                                        </button>

                                        <a href="javascript:void(0);" id="generate_pdf" target="_blank"
                                            class="btn btn-secondary-custom shadow-sm d-flex align-items-center px-4 py-2">
                                            <span class="fw-bold">{{ __('home.dwonloadpdf') }}</span>
                                            <i class="fa-solid fa-file-pdf ms-2"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </center>
            </div>
        </div>
    </div>
</div>

{{-- مودال رسالة الحفظ --}}
<div class="modal fade product-selection" id="massagesave" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 bg-transparent shadow-none">
            <div class="modal-body text-center">
                <img style="width:180px;height:180px;" class="custom_img" src="{{ asset('assets/admin/uploads/done.png') }}" alt="Done">
            </div>
        </div>
    </div>
</div>

{{-- مودال البحث عن منتج --}}
<div class="modal fade product-selection" id="SearchProduct" tabindex="-1" role="dialog" aria-hidden="true" dir="rtl">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('home.searchaboutproduct') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-5 mg-t-20 mg-lg-t-0">
                            <label class="control-label parent-label fw-bold">{{ __('home.searchaboutproduct') }}</label>
                            <input autocomplete="off" dir="ltr" type="text" class="form-control parent-input"
                                placeholder="{{ __('home.Search By Name or Product Number') }}" id="searchaboutproduct"
                                name="searchaboutproduct" oninput="searchaboutproductfunction()">
                        </div>
                        <div class="col-lg-4 mb-2">
                            <label class="control-label parent-label fw-bold">{{ __('home.groups') }}</label>
                            <select style="width:100%!important" name="product_group" id="product_group" class="form-control select2">
                                @foreach (App\Models\products_group::get() as $section)
                                <option value="{{ $section->id }}">{{ $section->group_ar }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive" id="ajax_responce_serarchDiv">
                        <table class="table text-md-nowrap text-center our-table" id="SearchProductTable" width="100%" style="border: 2px solid rgba(0,0,0,.3);">
                            <thead>
                                <tr>
                                    <th>{{ __('home.productNo') }}</th>
                                    <th>{{ __('home.product') }}</th>
                                    <th>{{ __('home.branch') }}</th>
                                    <th>{{ __('home.productlocation') }}</th>
                                    <th>{{ __('home.quantity') }}</th>
                                    <th>{{ __('home.purchaseproductwithouttax') }}</th>
                                    <th>{{ __('home.sellingproduct without tax') }}</th>
                                    <th>{{ __('home.Add') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="8" class="text-center text-muted">-</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('home.cancel') }}</button>
            </div>
        </div>
    </div>
</div>

{{-- مودال إضافة عميل جديد --}}
<div class="modal p-3" id="createcustomer" tabindex="-1" role="dialog">
    <div style="margin: 0 9% !important;" class="modal-dialog modal-dialog-centered modal-special modal-xl" role="document">
        <div class="modal-content modal-content-demo p-3">
            <div class="modal-header">
                <h6 class="modal-title">{{ __('home.addnewcustomer') }}</h6>
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row mb-1">
                    <div class="col-lg-4 col-md-6 mb-2">
                        <label style="font-size: 12px;" class="control-label parent-label">{{ __('supprocesses.name') }}</label>
                        <input style="height:32px" type="text" class="form-control parent-input" id="name" name="name" required>
                    </div>

                    <div class="col-lg-4 col-md-3 mb-2">
                        <label style="font-size: 12px;" class="control-label parent-label">{{ __('supprocesses.phone') }}</label>
                        <input style="height:32px;" type="text" class="form-control parent-input" id="customer_phone" name="customer_phone" required>
                    </div>

                    <div class="col-lg-4 col-md-3 mb-2">
                        <label style="font-size: 12px;" class="control-label parent-label">{{ __('supprocesses.email') }}</label>
                        <input style="height:32px" type="email" class="form-control parent-input" id="email" name="email" value="Example@gmail.com">
                    </div>
                </div>

                <div class="row mb-1">
                    <div class="col-lg-3 col-md-3">
                        <label style="font-size: 12px;" class="control-label parent-label">{{ __('supprocesses.timeout_periodـinـdays') }}</label>
                        <input style="height:32px" type="number" class="form-control parent-input" id="timeout_periodـinـdays" name="timeout_periodـinـdays" value="30" required>
                    </div>
                    <div class="col-lg-3 col-md-3">
                        <label style="font-size: 12px;" class="control-label parent-label">{{ __('home.tax_number') }}</label>
                        <input style="height:32px" type="text" class="form-control parent-input" id="TaxـNumber" name="TaxـNumber" maxlength="15">
                    </div>
                    <div class="col-lg-2 col-md-3">
                        <label style="font-size: 12px;" class="control-label parent-label">{{ __('home.CRN') }}</label>
                        <input style="height:32px" type="text" class="form-control parent-input" id="CRN" name="CRN" value="0">
                    </div>
                    <div class="col-lg-2 col-md-3">
                        <label style="font-size: 12px;" class="control-label parent-label">{{ __('supprocesses.credit_limit') }}</label>
                        <input style="height:32px" type="number" class="form-control parent-input" id="credit_limit" name="credit_limit" value="10000" required>
                    </div>
                    <div class="col-lg-2 col-md-3">
                        <label style="font-size: 12px;" class="control-label parent-label">{{ __('supprocesses.product_notes') }}</label>
                        <input style="height:32px" type="text" class="form-control parent-input" id="customer_notes" name="customer_notes" value="-">
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-lg-2">
                        <label class="control-label parent-label">{{ __('home.city') }}</label>
                        <input type="text" class="form-control parent-input" id="city" name="city" required>
                    </div>
                    <div class="col-lg-2">
                        <label class="control-label parent-label">{{ __('home.region') }}</label>
                        <input type="text" class="form-control parent-input" id="sub_city" name="sub_city" required>
                    </div>
                    <div class="col-lg-2">
                        <label class="control-label parent-label">{{ __('home.StreetName') }}</label>
                        <input type="text" class="form-control parent-input" id="StreetName" name="StreetName" required>
                    </div>
                    <div class="col-lg-2">
                        <label class="control-label parent-label">{{ __('home.plot_identification') }}</label>
                        <input type="text" class="form-control parent-input" id="plot_identification" name="plot_identification" required>
                    </div>
                    <div class="col-lg-2">
                        <label class="control-label parent-label">{{ __('home.buildnumber') }}</label>
                        <input type="text" class="form-control parent-input" id="buildnumber" name="buildnumber" required>
                    </div>
                    <div class="col-lg-2">
                        <label class="control-label parent-label">{{ __('home.postcode') }}</label>
                        <input type="text" class="form-control parent-input" id="postcode" name="postcode" value="" required>
                    </div>
                </div>
            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button style="background-color: #419BB2" class="btn btn-primary px-4 py-2" onclick="createnewcustomerajax()">
                    {{ __('supprocesses.save_data') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- مودال تحديث عرض السعر برقم الفاتورة --}}
<div class="modal p-3" id="updateinvoicefromsale" tabindex="-1" role="dialog">
    <div style="margin: 0 9% !important;" class="modal-dialog modal-dialog-centered modal-special" role="document">
        <div class="modal-content modal-content-demo p-3">
            <div class="modal-header">
                <h6 class="modal-title">{{ __('home.updateinvoice') }}</h6>
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row mb-1">
                    <div class="col-lg-12 mb-2">
                        <label style="font-size: 12px;" class="control-label parent-label">{{ __('home.enterinvoicenumber') }}</label>
                        <input style="height:32px" type="text" class="form-control parent-input"
                            id="updateinvoicebyidforsale" name="updateinvoicebyidforsale" required>
                    </div>
                </div>
            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button style="background-color: #419BB2" class="btn btn-primary px-4 py-2" id="updateinvoicebyidforsaleupdate">
                    {{ __('home.search') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- مودال إضافة منتج جديد --}}
<div class="modal p-3" id="createproduct" tabindex="-1" role="dialog">
    <div style="margin: 0 9% !important;" class="modal-dialog modal-dialog-centered modal-special modal-xl" role="document">
        <div class="modal-content modal-content-demo p-3">
            <div class="modal-header">
                <h6 class="modal-title">{{ __('supprocesses.addproduct') }}</h6>
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-2">
                    <label style="font-size:16px; color:#23395D; font-weight:bold; cursor: pointer;">
                        <input type="checkbox" id="translate_status"> &nbsp; {{__('home.active_translate')}}
                    </label>
                </div>

                <div class="row mb-2">
                    <div class="col-md-4 mb-2">
                        <label class="control-label parent-label">{{ __('supprocesses.product_name_ar') }}</label>
                        <input autocomplete="off" type="text" class="form-control parent-input" id="product_name_ar"
                            name="product_name_ar" onkeyup="translateNameToEnglish()" required>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="control-label parent-label">{{ __('supprocesses.product_name_en') }}</label>
                        <input autocomplete="off" type="text" class="form-control parent-input" id="product_name_en"
                            name="product_name_en" onkeyup="translateNameToArbic()" required>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="control-label parent-label">{{ __('supprocesses.product_code') }}</label>
                        <input type="text" class="form-control parent-input" id="product_code_create"
                            name="product_code_create" dir="ltr" required>
                    </div>
                </div>

                <div class="row mb-2">
                    <div class="col-lg-3 mb-2">
                        <label class="control-label parent-label">{{ __('supprocesses.product_branch') }}</label>
                        <select name="Section" id="Section" class="form-control parent-input">
                            <option value="{{ Auth()->user()->branch->id ?? 1 }}">{{ Auth()->user()->branch->name ?? '' }}</option>
                            @foreach (App\Models\branchs::get() as $section)
                                @if((Auth()->user()->branch->id ?? 0) != $section->id)
                                    <option value="{{ $section->id }}">{{ $section->name }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3 mb-2">
                        <label class="control-label parent-label">{{ __('home.groups') }}</label>
                        <select style="width:100%!important" name="modal_product_group" id="modal_product_group" class="form-control select2">
                            @foreach (App\Models\products_group::get() as $section)
                                <option value="{{ $section->id }}">{{ $section->group_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3 mb-2">
                        <label class="control-label parent-label">{{ __('home.MAINproduct') }}</label>
                        <select style="width:100%!important" name="MAINproduct" id="MAINproduct" class="form-control select2">
                            <option value="0">{{ __('home.noreplace') }}</option>
                        </select>
                    </div>
                    <div class="col-lg-3 mb-2">
                        <label class="control-label parent-label">{{ __('home.refnumber') }}</label>
                        <input type="text" class="form-control parent-input" id="refnumber" name="refnumber">
                    </div>
                    <input type="hidden" name="unit" id="unit" value="piece">
                </div>

                <div class="row mb-2">
                    <div class="col-lg-4">
                        <label class="control-label parent-label">{{ __('home.purachesepice') }}</label>
                        <input autocomplete="off" type="number" step="any" class="form-control parent-input" id="cost_price"
                            name="cost_price" value="0" {{ in_array(Auth()->user()->id ?? 0, [17, 30]) ? '' : 'readonly' }}>
                    </div>
                    <div class="col-lg-4">
                        <label class="control-label parent-label">{{ __('home.salepice') }}</label>
                        <input autocomplete="off" type="number" step="any" class="form-control parent-input" id="sale_price_create"
                            value="0" name="sale_price_create" {{ in_array(Auth()->user()->id ?? 0, [17, 30]) ? '' : 'readonly' }}>
                    </div>
                    <div class="col-lg-4">
                        <label class="control-label parent-label">{{ __('home.quantity') }}</label>
                        <input autocomplete="off" type="number" step="any" class="form-control parent-input" id="quantity_create"
                            value="0" name="quantity_create" {{ in_array(Auth()->user()->id ?? 0, [17, 30]) ? '' : 'readonly' }}>
                    </div>
                </div>

                <div class="row mb-2">
                    <div class="col-lg-4 mb-2">
                        <label class="control-label parent-label">{{ __('supprocesses.product_location') }}</label>
                        <input dir="ltr" type="text" class="form-control parent-input" id="product_location_create"
                            name="product_location_create" value="-" required>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="control-label parent-label">{{ __('supprocesses.minmum_quantity_stock_alart') }}</label>
                        <input type="number" class="form-control parent-input" id="minmum_quantity_stock_alart"
                            name="minmum_quantity_stock_alart" value="2" required>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="control-label parent-label">{{ __('supprocesses.product_notes') }}</label>
                        <input type="text" class="form-control parent-input" id="product_notes" name="product_notes" value="-">
                    </div>
                </div>
            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button type="button" style="background-color: #419BB2" class="btn btn-primary px-4 py-2" onclick="createnewproductajax()">
                    {{ __('supprocesses.save_data') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- مودال العمليات على المنتج --}}
<div class="modal fade product-selection" id="operation_product" tabindex="-1" role="dialog" aria-hidden="true" dir="rtl">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive" id="ajax_responce_operation_product_Div"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('home.cancel') }}</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>

<script>
let rowIndex = 0;
window.currentRow = 0;

function getTaxRate() {
    let taxVal = parseFloat($('#avtValue').val()) || 0;
    return taxVal > 1 ? (taxVal / 100) : taxVal;
}

$('#clientnamesearch').select2({
    placeholder: 'ابحث عن العميل',
    allowClear: true,
    minimumInputLength: 2,
    ajax: {
        url: "{{ route('clientnamesearch.search') }}",
        dataType: 'json',
        delay: 300,
        data: function(params) {
            window.lastClientSearchText = params.term;
            return { q: params.term };
        },
        processResults: function(data) {
            if (!data || data.length === 0) {
                $('#name').val(window.lastClientSearchText || '');
                $('#clientnamesearch').select2('close');
                $('#createcustomer').modal('show');
                return { results: [] };
            } else {
                return {
                    results: data.map(item => ({
                        id: item.id,
                        text: item.name + ' :- ' + (item.tax_no || '')
                    }))
                };
            }
        }
    }
});

function calculateTotals_with_tax() {
    let taxFactor = getTaxRate();

    document.querySelectorAll('#productsTableBody tr').forEach(r => {
        let tax_with_price = parseFloat(r.querySelector('.product-price-tax').value) || 0;
        let cost = parseFloat(r.querySelector('.product_cost').value) || 0;
        let price = taxFactor > 0 ? (tax_with_price / (1 + taxFactor)) : tax_with_price;

        if (tax_with_price > 0 && price < cost) {
            Swal.fire({
                icon: 'error',
                title: 'تنبيه: خطأ في سعر البيع <br> <small>Warning: Sales Price Error</small>',
                html: `
                    <div style="direction: rtl; text-align: center;">
                        <p style="font-weight: bold; color: #d33;">السعر المدخل أقل من سعر البيع المعتمد في النظام!</p>
                        <p dir="ltr">The entered price is lower than the registered selling price!</p>
                        <hr>
                        <div style="background: #f8f9fa; padding: 10px; border-radius: 5px;">
                            <strong>سعر النظام | System Price:</strong>
                            <span style="color: #28a745; font-size: 1.2em;">${cost}</span>
                        </div>
                    </div>
                `,
                confirmButtonText: 'موافق | OK',
                confirmButtonColor: '#3085d6',
                timer: 6000,
                timerProgressBar: true
            });
            r.querySelector('.product-price-tax').style.borderColor = 'red';
            price = cost;
            tax_with_price = cost * (1 + taxFactor);
            r.querySelector('.product-price-tax').value = tax_with_price.toFixed(2);
        } else {
            r.querySelector('.product-price-tax').style.borderColor = '';
        }

        r.querySelector('.product-price').value = price.toFixed(2);
    });

    calculateTotals();
}

function calculateTotals() {
    let total = 0,
        taxTotal = 0,
        discountTotal = 0,
        grand = 0;
    let taxFactor = getTaxRate();

    document.querySelectorAll('#productsTableBody tr').forEach(r => {
        let price = parseFloat(r.querySelector('.product-price').value) || 0;
        let cost = parseFloat(r.querySelector('.product_cost').value) || 0;
        let qty = parseFloat(r.querySelector('.product-quentity').value) || 0;

        if (price > 0 && price < cost) {
            Swal.fire({
                icon: 'error',
                title: 'تنبيه: خطأ في سعر البيع <br> <small>Warning: Sales Price Error</small>',
                html: `
                    <div style="direction: rtl; text-align: center;">
                        <p style="font-weight: bold; color: #d33;">السعر المدخل أقل من سعر البيع المعتمد في النظام!</p>
                        <p dir="ltr">The entered price is lower than the registered selling price!</p>
                        <hr>
                        <div style="background: #f8f9fa; padding: 10px; border-radius: 5px;">
                            <strong>سعر النظام | System Price:</strong>
                            <span style="color: #28a745; font-size: 1.2em;">${cost}</span>
                        </div>
                    </div>
                `,
                confirmButtonText: 'موافق | OK',
                confirmButtonColor: '#3085d6',
                timer: 6000,
                timerProgressBar: true
            });

            r.querySelector('.product-price').style.borderColor = 'red';
            price = cost;
            r.querySelector('.product-price').value = cost.toFixed(2);
        } else {
            r.querySelector('.product-price').style.borderColor = '';
        }

        let discound_allow_Input = parseFloat($('#discound_allow').val()) || 0.15;
        let discountInput = parseFloat(r.querySelector('.product-discound').value) || 0;

        if (discountInput > (qty * price) * discound_allow_Input) {
            Swal.fire({
                icon: 'error',
                title: 'تجاوز حد الخصم | Discount Limit Exceeded',
                text: 'لقد تخطيت الخصم المسموح به لهذا الصنف',
                confirmButtonText: 'موافق | OK',
                confirmButtonColor: '#d33',
                timer: 5000,
                timerProgressBar: true
            });
            discountInput = 0;
            r.querySelector('.product-discound').value = 0;
        }

        let subtotal = price * qty;
        let taxableAmount = Math.max(0, subtotal - discountInput);
        let tax = taxableAmount * taxFactor;
        let totalRow = taxableAmount + tax;

        r.querySelector('.product-totalprice_withodtax').value = subtotal.toFixed(2);
        r.querySelector('.product-tax').value = tax.toFixed(2);
        r.querySelector('.product-total').value = totalRow.toFixed(2);
        r.querySelector('.product-price-tax').value = (price * (1 + taxFactor)).toFixed(2);

        total += subtotal;
        taxTotal += tax;
        grand += totalRow;
        discountTotal += discountInput;
    });

    let invoiceDiscount = parseFloat($('#discound_on_invoice').val()) || 0;
    if (invoiceDiscount > 0) {
        let invoiceDiscountBeforeTax = invoiceDiscount / (1 + taxFactor);
        discountTotal += invoiceDiscountBeforeTax;
        let net = Math.max(0, total - discountTotal);
        taxTotal = net * taxFactor;
        grand = net + taxTotal;
    }

    document.getElementById('totalSum').value = total.toFixed(2);
    document.getElementById('totaldiscound').value = discountTotal.toFixed(2);
    document.getElementById('totalTax').value = taxTotal.toFixed(2);
    document.getElementById('grandTotal').value = grand.toFixed(2);
}

function calculateTotalDiscount() {
    calculateTotals();
}

function replaceproduct(id) {
    let branchs_id = $('#branchs_id').val();
    jQuery.ajax({
        url: "{{ URL::to('operationproducts') }}/" + branchs_id + "/" + id,
        type: 'get',
        dataType: 'html',
        cache: false,
        success: function(data) {
            $('#operation_product').modal('show');
            $("#ajax_responce_operation_product_Div").html(data);
        }
    });
}

function reorderRows() {
    const rows = document.querySelectorAll('#productsTableBody tr');
    rows.forEach((tr, i) => {
        const rowNumberCell = tr.querySelector('td:nth-child(2)');
        if (rowNumberCell) {
            rowNumberCell.innerText = i + 1;
        }
        tr.setAttribute('data-index', i);

        const searchButtons = tr.querySelectorAll('button[onclick^="openProductModal"]');
        searchButtons.forEach(btn => {
            btn.setAttribute('onclick', `openProductModal(${i})`);
        });

        const inputs = tr.querySelectorAll('input[name*="products"]');
        inputs.forEach(input => {
            let name = input.getAttribute('name');
            if (name) {
                let newName = name.replace(/products\[\d+\]/, `products[${i}]`);
                input.setAttribute('name', newName);
            }
        });
    });
}

function removeRow(btn) {
    btn.closest('tr').remove();
    reorderRows();
    calculateTotals();
}

function openProductModal(index) {
    window.currentRow = index;
    $('#SearchProduct').modal('show');
}

function addRow() {
    let table = document.getElementById('productsTableBody');
    let index = table.querySelectorAll('tr').length;

    let row = `
        <tr data-index="${index}">
            <td>
                <input type="hidden" name="products[${index}][product_id]" class="product-id form-control">
                <input type="hidden" name="products[${index}][product_cost]" class="product_cost" value="0">
            </td>
            <td class="align-middle text-center">${index + 1}</td>
            <td class="text-start">
                <div class="d-flex gap-2">
                    <input type="text" class="form-control product-code" placeholder="اختر منتج" readonly>
                    <button type="button" class="btn btn-sm btn-info p-1"
                            style="background-color: #FBA10F;font-size:13px;width:40px"
                            onclick="openProductModal(${index})">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </td>
            <td class="text-start">
                <div class="d-flex gap-2">
                    <input type="text" class="form-control product-name" placeholder="اختر منتج" readonly>
                    <button type="button" class="btn btn-sm btn-info p-1"
                            style="background-color: #FBA10F;font-size:13px;width:40px"
                            onclick="openProductModal(${index})">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </td>
            <td>
                <input type="number" step="any" name="products[${index}][price-tax]"
                    class="form-control product-price-tax" value="0" min="0" onchange="calculateTotals_with_tax()">
            </td>
            <td>
                <input type="number" step="any" name="products[${index}][price]"
                    class="form-control product-price" value="0" min="0" onchange="calculateTotals()">
            </td>
            <td>
                <input type="number" step="any" name="products[${index}][quentity]"
                    class="form-control product-quentity" oninput='calculateTotals()' value="1" min="1">
            </td>
            <td>
                <input type="text" name="products[${index}][totalprice_withodtax]"
                    class="form-control product-totalprice_withodtax" readonly value="0">
            </td>
            <td>
                <input type="number" step="any" name="products[${index}][discound]"
                    class="form-control product-discound" value="0" onchange='calculateTotals()' min="0">
            </td>
            <td>
                <input type="text" name="products[${index}][tax]" class="form-control product-tax" value="0" readonly>
            </td>
            <td>
                <input type="text" class="form-control product-total" readonly value="0">
            </td>
            <td>
                <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">{{ __('home.delete') }}</button>
            </td>
        </tr>`;

    table.insertAdjacentHTML("beforeend", row);
    window.currentRow = index;
    $('#SearchProduct').modal('show');
}

function searchaboutproductfunction() {
    let searchtext = $('#searchaboutproduct').val();
    let branchs_id = $('#branchs_id').val();
    let token_search = $("#token_search").val();

    jQuery.ajax({
        url: "{{ URL::to('searchChooseProductpaginatenewSaleBypost') }}",
        type: 'post',
        cache: false,
        dataType: 'html',
        data: {
            "_token": token_search,
            "searchtext": searchtext,
            "branchs_id": branchs_id,
            "currentrow": window.currentRow,
        },
        success: function(data) {
            $("#ajax_responce_serarchDiv").html(data);
        }
    });
}

$('#SearchProduct').on('show.bs.modal', function() {
    searchaboutproductfunction();
});

$(document).on('click', '#ajax_pagination_in_search a', function(e) {
    e.preventDefault();
    let search_by_text = $("#searchaboutproduct").val();
    let url = $(this).attr("href");
    let token_search = $("#token_search").val();
    let branchs_id = $('#branchs_id').val();

    jQuery.ajax({
        url: url,
        type: 'post',
        cache: false,
        dataType: 'html',
        data: {
            "_token": token_search,
            "searchtext": search_by_text,
            "branchs_id": branchs_id,
        },
        success: function(data) {
            $("#ajax_responce_serarchDiv").html(data);
        }
    });
});

function chooseProduct(code, productcode, name, cost, sale_price, location, availablequantity, currentrow) {
    let row = document.querySelector(`#productsTableBody tr[data-index='${currentrow}']`);
    if (!row) return;

    row.querySelector('.product-id').value = code;
    row.querySelector('.product-name').value = name;
    row.querySelector('.product-code').value = productcode;
    row.querySelector('.product-price').value = sale_price;
    row.querySelector('.product_cost').value = cost;
    row.querySelector('.product-discound').value = 0;

    calculateTotals();
    $('#SearchProduct').modal('hide');

    let clientId = $('#clientnamesearch').val() || 1;
    $.ajax({
        url: "{{ URL::to('/getlastprice_offer_price') }}/" + code + "/" + clientId,
        type: "GET",
        dataType: "json",
        success: function(data) {
            $("#last_supplier_cost").empty();
            if (Array.isArray(data)) {
                data.forEach(product => {
                    $('#last_supplier_cost').append($('<option>', {
                        value: 1,
                        text: "{{ __('home.Invoice_no') }}: " + (product.invoiceid || '-') +
                            " ** " + (product.date || '-') + " ** " + (product.cost || 0) + " {{ __('home.SAR') }}"
                    }));
                });
            }
        }
    });
}

function createnewproductajax() {
    let token_search = $("#token_search").val();
    let name_ar = $('#product_name_ar').val().trim();
    let location = $('#product_location_create').val().trim();

    if (name_ar === '') {
        alert("{{ __('supprocesses.product_name_ar') }}");
        return;
    }
    if (location === '') {
        alert("{{ __('supprocesses.product_location') }}");
        return;
    }

    $.ajax({
        url: "{{ URL::to('addnewProductajax') }}",
        type: 'post',
        cache: false,
        data: {
            _token: token_search,
            product_notes: $('#product_notes').val() || '-',
            minmum_quantity_stock_alart: $('#minmum_quantity_stock_alart').val(),
            product_name_ar: name_ar,
            product_name_en: $('#product_name_en').val(),
            product_code: $('#product_code_create').val(),
            Section: $('#Section').val(),
            unit: $('#unit').val(),
            product_location: location,
            refnumber: $('#refnumber').val(),
            product_group: $('#modal_product_group').val(),
            numberofpice: $('#quantity_create').val(),
            cost_price: $('#cost_price').val(),
            sale_price_create: $('#sale_price_create').val(),
        },
        success: function(data) {
            $('#createproduct').modal('hide');
            $('#quantity_create').val(0);
            $('#cost_price').val(0);
            $('#sale_price_create').val(0);
            $('#product_location_create').val('-');
            $('#product_name_ar').val('');
            $('#product_name_en').val('');
            $('#product_notes').val('-');
            $('#product_code_create').val('');

            $('#massagesave').modal('show');
            setTimeout(() => {
                $('#massagesave').modal('hide');
            }, 1000);
        },
        error: function() {
            alert("{{ __('home.sorryerror') }}");
        }
    });
}

function createnewcustomerajax() {
    let token_search = $("#token_search").val();
    let name = $('#name').val().trim();
    let taxNo = $('#TaxـNumber').val().trim();

    if (name === '') {
        alert("{{ __('home.enterclienname') }}");
        return;
    }
    if (taxNo !== '' && taxNo.length !== 15) {
        alert('يجب أن يتكون الرقم الضريبي من 15 رقماً\nThe tax number must consist of 15 digits');
        return;
    }

    $.ajax({
        url: "{{ URL::to('createnewcustomerajax') }}",
        type: 'post',
        cache: false,
        data: {
            _token: token_search,
            name: name,
            tax_no: taxNo,
            Balance: 0,
            city: $('#city').val() || "client address",
            phone: $('#customer_phone').val(),
            email: $('#email').val(),
            notes: $('#customer_notes').val(),
            Limit_credit: $('#credit_limit').val(),
            grace_period_in_days: $('#timeout_periodـinـdays').val(),
            buildnumber: $('#buildnumber').val(),
            plot_identification: $('#plot_identification').val(),
            StreetName: $('#StreetName').val(),
            sub_city: $('#sub_city').val(),
            postcode: $('#postcode').val(),
            CRN: $('#CRN').val(),
        },
        success: function(data) {
            $('#createcustomer').modal('hide');
            $('#customer_phone').val('');
            $('#TaxـNumber').val('');
            $('#name').val('');

            let newOption = new Option(data.name + ' :- ' + (data.tax_no || ''), data.id, true, true);
            $('#clientnamesearch').append(newOption).trigger('change');

            $('#massagesave').modal('show');
            setTimeout(() => {
                $('#massagesave').modal('hide');
            }, 800);
        },
        error: function() {
            alert("{{ __('home.sorryerror') }}");
        }
    });
}

function translateNameToArbic() {
    if (document.getElementById('translate_status').checked) {
        let wordEnglish = $('#product_name_en').val();
        jQuery.ajax({
            url: "https://translate.googleapis.com/translate_a/single?client=gtx&dt=t&sl=en&tl=ar&q=" + encodeURIComponent(wordEnglish),
            type: 'get',
            cache: false,
            success: function(res) {
                if (res && res[0] && res[0][0]) {
                    $('#product_name_ar').val(res[0][0][0]);
                }
            }
        });
    }
}

function translateNameToEnglish() {
    if (document.getElementById('translate_status').checked) {
        let wordArabic = $('#product_name_ar').val();
        jQuery.ajax({
            url: "https://translate.googleapis.com/translate_a/single?client=gtx&dt=t&sl=ar&tl=en&q=" + encodeURIComponent(wordArabic),
            type: 'get',
            cache: false,
            success: function(res) {
                if (res && res[0] && res[0][0]) {
                    $('#product_name_en').val(res[0][0][0]);
                }
            }
        });
    }
}

$('select[name="numbershowstatus"]').on('change', function() {
    $('#shownumberproduct').val($(this).val());
});

// حفظ عرض السعر
$("#formdata").on('submit', function(e) {
    e.preventDefault();

    let isValid = true;
    let errorMessage = "";
    let rows = $('#productsTableBody tr');

    if (rows.length === 0) {
        Swal.fire({
            icon: 'warning',
            title: 'تنبيه',
            text: 'يجب إضافة صنف واحد على الأقل في عرض السعر'
        });
        return;
    }

    rows.each(function() {
        let row = $(this);
        let productId = row.find('.product-id').val();
        let price = row.find('.product-price').val();
        let qty = row.find('.product-quentity').val();
        let productName = row.find('.product-name').val();

        if (!productId || productId === "" || productId === "0") {
            row.css('background-color', '#fff3cd');
            isValid = false;
            errorMessage = "يرجى اختيار صنف صحيح في جميع الصفوف";
            return false;
        }

        if (price === "" || parseFloat(price) <= 0 || qty === "" || parseFloat(qty) <= 0) {
            row.find('.product-price, .product-quentity').css('border', '2px solid red');
            isValid = false;
            errorMessage = "يوجد نقص في سعر أو كمية المنتج: " + (productName || "غير محدد");
            return false;
        } else {
            row.find('.product-price, .product-quentity').css('border', '');
            row.css('background-color', '');
        }
    });

    if (!isValid) {
        Swal.fire({
            icon: 'error',
            title: 'بيانات غير مكتملة',
            text: errorMessage,
            confirmButtonText: 'موافق'
        });
        return;
    }

    let clientName = $("#clientnamesearch option:selected").text().trim();
    let form = this;

    Swal.fire({
        title: 'تأكيد حفظ عرض السعر | Confirm Quotation',
        html: `<b>هل أنت متأكد من حفظ عرض السعر للعميل؟</b><br><span style="color: #007bff;">${clientName}</span>`,
        icon: 'info',
        showCancelButton: true,
        confirmButtonText: 'نعم، حفظ | Yes, Save',
        cancelButtonText: 'إلغاء | Cancel',
        reverseButtons: true
    }).then((result) => {
        if (result.isConfirmed) {
            $('#saveInvoice').prop('disabled', true).html(
                '<span class="spinner-border spinner-border-sm me-2" role="status"></span> جاري الحفظ...'
            );
            $('#massagesave').modal('show');

            $.ajax({
                url: "{{ URL::to('save_invoice_qutation') }}",
                type: 'post',
                data: new FormData(form),
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    if (data >= 1) {
                        $('#show_invoice_number').val(data);
                        $('#OrderNoprint').val(data);

                        let link = "{{ URL::to('generate_pdf_qoute') }}/" + data;
                        $('#generate_pdf').attr('href', link);

                        // إخفاء حاوية زر الحفظ بالكامل وإظهار أزرار الطباعة
                        $('#saveInvoiceContainer').slideUp(200);
                        $('#printdiv').fadeIn(300);

                        setTimeout(() => {
                            $('#massagesave').modal('hide');
                            Swal.fire({
                                icon: 'success',
                                title: 'تم الحفظ بنجاح',
                                timer: 1500,
                                showConfirmButton: false
                            });
                        }, 700);
                    } else {
                        $('#saveInvoice').prop('disabled', false).html(
                            '<i class="fas fa-save"></i> <span>{{ __("supprocesses.save_data") }}</span>'
                        );
                        $('#massagesave').modal('hide');
                        Swal.fire('خطأ', 'حدثت مشكلة أثناء الحفظ', 'error');
                    }
                },
                error: function() {
                    $('#saveInvoice').prop('disabled', false).html(
                        '<i class="fas fa-save"></i> <span>{{ __("supprocesses.save_data") }}</span>'
                    );
                    $('#massagesave').modal('hide');
                    Swal.fire('خطأ', 'فشل الاتصال بالسيرفر', 'error');
                }
            });
        }
    });
});

// استيراد عرض سعر سابق للتحديث
$("#updateinvoicebyidforsaleupdate").click(function(e) {
    e.preventDefault();
    let invoiceId = $('#updateinvoicebyidforsale').val().trim();
    if (!invoiceId) return;

    jQuery.ajax({
        url: "{{ URL::to('updateofficebyidforupdate') }}/" + invoiceId,
        type: 'get',
        dataType: 'json',
        cache: false,
        success: function(data) {
            $('#updateinvoicefromsale').modal('hide');
            $('#show_invoice_number_update').val(invoiceId);
            document.getElementById("productsTableBody").innerHTML = "";

            if (data && data['product']) {
                data['product'].forEach((product, index) => {
                    let table = document.getElementById('productsTableBody');
                    let row = `
                    <tr data-index="${index}">
                        <td>
                            <input type="hidden" name="products[${index}][product_id]" class="product-id form-control" value="${product['id']}">
                            <input type="hidden" name="products[${index}][product_cost]" class="product_cost" value="${product['Unit_Price'] || 0}">
                        </td>
                        <td class="align-middle text-center">${index + 1}</td>
                        <td class="text-start">
                            <div class="d-flex gap-2">
                                <input type="text" class="form-control product-code" value="${product['Product_Code'] || ''}" readonly>
                                <button type="button" class="btn btn-sm btn-info p-1" style="background-color: #FBA10F;font-size:13px;width:40px" onclick="openProductModal(${index})">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </td>
                        <td class="text-start">
                            <div class="d-flex gap-2">
                                <input type="text" class="form-control product-name" value="${product['product_name'] || ''}" readonly>
                                <button type="button" class="btn btn-sm btn-info p-1" style="background-color: #FBA10F;font-size:13px;width:40px" onclick="openProductModal(${index})">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </td>
                        <td><input type="number" step="any" name="products[${index}][price-tax]" class="form-control product-price-tax" value="0" min="0" onchange="calculateTotals_with_tax()"></td>
                        <td><input type="number" step="any" name="products[${index}][price]" class="form-control product-price" value="${product['Unit_Price'] || 0}" min="0" onchange="calculateTotals()"></td>
                        <td><input type="number" step="any" name="products[${index}][quentity]" class="form-control product-quentity" oninput='calculateTotals()' value="${product['quantity'] || 1}"></td>
                        <td><input type="text" name="products[${index}][totalprice_withodtax]" class="form-control product-totalprice_withodtax" readonly value="0"></td>
                        <td><input type="number" step="any" name="products[${index}][discound]" class="form-control product-discound" value="0" onchange='calculateTotals()' min="0"></td>
                        <td><input type="text" name="products[${index}][tax]" class="form-control product-tax" value="0" readonly></td>
                        <td><input type="text" class="form-control product-total" readonly value="0"></td>
                        <td><button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">{{ __('home.delete') }}</button></td>
                    </tr>`;
                    table.insertAdjacentHTML("beforeend", row);
                });

                calculateTotals();
                $('#discound_on_invoice').val(data['discound'] || 0).trigger('input');

                if (data['customer']) {
                    let option = new Option(data['customer']['name'], data['customer']['id'], true, true);
                    $('#clientnamesearch').append(option).trigger('change');
                }

                // إعادة إظهار زر الحفظ وإخفاء أزرار الطباعة
                $('#printdiv').hide();
                $('#saveInvoiceContainer').show();
                $('#saveInvoice').prop('disabled', false).html(
                    '<i class="fas fa-save"></i> <span>{{ __("supprocesses.save_data") }}</span>'
                );
            }
        },
        error: function() {
            alert("{{ __('home.sorryerror') }}");
        }
    });
});
</script>
@endsection
```