@extends("newDashboard.index")

@section("css")
<link rel="stylesheet" href="{{asset('metronic/css/data-table.css')}}">
  <style>

        /* Spinner styles */
        .spinner {
            width: 5em;
            height: 5em;
            border: 0.5em solid rgba(0, 0, 0, 0.1);
            border-left-color: #8daf21;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            z-index: 99999;
            /*   margin-left:260px; */
        }

        .spinner-layer {
            position: fixed;
            width: calc(100vw - 260px);
            height: calc(100vh - 70px);
            background: #f2edf3;
            z-index: 999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 10px;
        }

        /* Spinner animation */
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .CUSTOM-d-none {
            display: none
        }

        /*
         | خلايا وحقول الأرقام: نجبر اتجاه LTR حتى تظهر فاصلة الآلاف والكسر
         | العشري في مكانهما الصحيح داخل الصفحة العربية، ونمنع كسر الرقم لسطرين.
        */
        .num,
        input.num {
            direction: ltr;
            unicode-bidi: embed;
            white-space: nowrap;
            text-align: end;
        }

        @media print {
            .num {
                direction: ltr;
                unicode-bidi: embed;
                white-space: nowrap;
            }
        }
    </style>
@endsection

@section("main-content")
<div class="content-wrapper">
    <div class="page-header">
        <h3 class="page-title">
          <span class="page-title-icon bg-gradient-primary text-white me-2">
            <i class="mdi mdi-cards-variant menu-icon"></i>
          </span>    {{__('messages.Sales System')}}
        </h3>
    </div>
  	<div class="row">
          <div id="success_message"></div>
		  <div class="buttons-container">
		  	<a class="btn btn-primary float-end " href="{{ route('sales.create') }}">{{__('messages.Add Invoice')}}</a>
		  </div>
          <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
          <input type="hidden" id="user-index" value="{{ route('sales.index') }}" />
          <input type="hidden" id="add-ajax-route" value="{{ route('user.add.data') }}" />
          <input type="hidden" id="update-ajax-route" value="{{ route('sales.update') }}" />
          <input type="hidden" id="delete-ajax-route" value="{{ route('user.delete.data') }}" />


          <div class="table-responsive customscroll">

            {{-- الفلاتر: كانت موضوعة داخل وسم <table> وهو HTML غير صالح --}}
            <div class="container pb-2">
                <div class="row gap-1 custom-padding-filter-tmp">
                    <div class="col-12 col-md-4 col-xl-3">
                        <label class="col-form-label">{{__('messages.date:')}}</label>
                        <div class="center-custom-width-filter-date">
                            <input type="text" id="config-demo" placeholder="{{__('messages.date from - to')}}" class="form-control" />
                        </div>
                    </div>

                    <div class="col-12 col-md-4 col-xl-3 customselectcss">
                        <div class="form-group mb-3 px-2">
                            <label class="col-form-label">{{__('messages.Customer')}}:</label>
                            <select id="customersFilter" class="js-example-disabled-results form-control">
                                <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Customer')]) }}</option>
                                @foreach($customersFilter as $customerOption)
                                <option value="{{ $customerOption->id }}">{{ $customerOption->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

          <table class="table datatable text-center" id="table" >
            <thead>
            <tr>
           	   <th>{{__('messages.ID')}}</th> 
                <th>{{__('messages.Serial number')}}</th>
                <th>{{__('messages.Status')}}</th>
                 <th>{{__('messages.Customer')}}</th>
                <th>{{__('messages.Total price')}}</th>
                <th>{{__('messages.Owner status')}}</th>
                <th>{{__('messages.Date')}}</th>
                <th>{{__('messages.User Name')}}</th>
                <th></th> 
            </tr>
            </thead>
            <tbody></tbody>
        </table>
        </div>
	</div>
</div>


{{-- edit Modal --}}
            <div class="modal fade" id="edit-modal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                             <h5 class="modal-title" id="editModalLabel">{{__('messages.Update Sales Data')}}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body row">
            
                               <ul id="update_msgList"></ul>
                             <input type="hidden" id="id" />
                             <input type="hidden" id="edit-ajax-route" value="{{ route('sales.edit.data') }}" />
                             
                              <div class="card-body">
                                <div class="row">
                                  <div class="col-md-12 mx-auto">
                                    <ul class="nav nav-pills nav-pills-custom justify-content-center" id="pills-tab" role="tablist">
                                      <li class="nav-item">
                                        <a class="nav-link active" id="pills-purchase-tab" data-bs-toggle="pill" href="#pills-purchase" role="tab" aria-controls="pills-home" aria-selected="true">{{__('messages.Sales data')}}</a>
                                      </li>
                                      <li class="nav-item">
                                        <a class="nav-link" id="pills-items-tab" data-bs-toggle="pill" href="#pills-items" role="tab" aria-controls="pills-contact" aria-selected="false"> {{__('messages.Items')}} </a>
                                      </li>
                                      <li class="nav-item">
                                        <a class="nav-link" id="pills-Files-tab" data-bs-toggle="pill" href="#pills-Files" role="tab" aria-controls="pills-Files" aria-selected="false">{{__('messages.Sales files')}}</a>
                                      </li>
                                      {{-- كان قسم رفع الملفات (#pills-add-Files) موجوداً بدون رابط تبويب،
                                           أي أنه لا يظهر إطلاقاً. أضفت الرابط ليصبح قابلاً للوصول. --}}
                                      <li class="nav-item">
                                        <a class="nav-link" id="pills-add-Files-tab" data-bs-toggle="pill" href="#pills-add-Files" role="tab" aria-controls="pills-add-Files" aria-selected="false">{{__('messages.upload files')}}</a>
                                      </li>

                                    </ul>
                                    <div class="tab-content tab-content-custom-pill" id="pills-tabContent">
                                      <div class="tab-pane fade show active" id="pills-purchase" role="tabpanel" aria-labelledby="pills-purchase">
                                      <div class="row">
                                               <div class="form-group mb-3 col-md-6">
                                                <label for=""> {{__('messages.Serial number')}}</label>
                                                <input type="text" id="edit-serial-number" readonly required class=" form-control">
                                            </div>
                                             <div class="form-group mb-3 col-md-6">
                                                <label for=""> {{__('messages.Status')}}</label>
                                                <input type="text" id="edit-status" readonly required class=" form-control">
                                            </div>  
<!--                                             <div class="form-group mb-3 col-md-6"> -->
<!--                                                 <label for="">{{__('messages.Status')}}</label> -->
<!--                                                 <select id="edit-status" class="form-control"> -->
<!-- 												  <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Status')]) }}</option> -->
<!--                                                	  <option value="pending">Pending</option> -->
<!--                                                	  <option value="completed">Completed</option> -->
<!-- 	                                            </select> -->
<!--                                             </div> -->
                                                <div class="form-group mb-3 col-md-6">
                                                    <label for=""> {{__('messages.Subtotal')}}</label>
                                                    <input id="edit-subtotal" class="form-control num" type="text" readonly>
                                                </div>
                                                <div class="form-group mb-3 col-md-6">
                                                    <label for=""> {{__('messages.Discount Type')}}</label>
                                                    <select id="edit-discount-type" class=" form-control">
                                                        <option value="0" selected>{{__('messages.Select an Option')}}</option>
                                                        <option value="fixed">{{__('messages.Fixed')}}</option>
                                                       	<option value="percentage">{{__('messages.Percentage')}}</option>
                                                    </select>
                                                </div>
                                                <div class="form-group mb-3 col-md-6">
                                                    <label for=""> {{__('messages.Discount Amount')}}</label>
                                                    {{-- حقل قابل للتعديل: يبقى بدون فواصل حتى لا يفرغه المتصفح --}}
                                                    <input id="edit-discount-amount" class="form-control" type="number" min="0">
                                                </div>
                                              <div class="form-group mb-3 col-md-6">
                                                <label for="Role">{{__('messages.Total price')}}</label>
                                                <input type="text" readonly id="edit-total-price" required class="form-control num">
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{__('messages.Date')}}</label>
                                                <input type="text" readonly id="edit-created-at" required class=" form-control">
                                            </div>
                                            @permission('purchasing-pending')
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{__('messages.Owner status')}}</label>
                                                <select id="edit-owner-status" class="form-control">
												  <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Status')]) }}</option>
                                                  <option value="approve">{{__('messages.Approve')}}</option>
                                               	  <option value="reject">{{__('messages.Reject')}}</option>
	                                            </select>
                                            </div>
                                            @endpermission
                                      </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-items" role="tabpanel" aria-labelledby="pills-items">
                                    	<h4 class="card-title">{{__('messages.Items')}}</h4>
                                        <div class="custoTable" style="overflow: hidden;">
                                          <div class="table_responsive">
                                            <table id="edit-myTableItems">
                                              <thead>
                                                    <tr> 
                                                      <th>{{__('messages.Item')}}</th>
                                                      <th>{{__('messages.Inventory')}}</th>
                                                      <th>{{ __('messages.meat weight') }}</th>
                                                      <th>{{__('messages.quantity')}}</th>
                                                      <th>{{__('messages.price')}}</th>
                                                    </tr>
                                              </thead>
                                              <tbody>
                                              </tbody>
                                            </table>
                                          </div>
                                        </div>
                                   </div>
                                  <div class="tab-pane fade" id="pills-Files" role="tabpanel" aria-labelledby="pills-Files">
                                  	<input type="hidden" id="delete-image-route" value="{{ route('sales.image') }}" />
                			         <div class="custoTable">
                                      <div class="table_responsive">
                                        <table id="edit-myTableFile">
                                          <thead>
                                                <tr> 
                                                  <th>{{__('messages.ID')}}</th>
                                                  <th>{{__('messages.Files')}}</th>
                                                  <th>{{__('messages.Action')}}</th>
                                                </tr>
                                           </thead>
                                           <tbody>
                                           </tbody>
                                        </table>
                                      </div>
                                    </div>
                                 </div>
                                  <div class="tab-pane fade" id="pills-add-Files" role="tabpanel" aria-labelledby="pills-add-Files-tab">
                                    <div class="containerDragDop">
                                            <div class="header-section">
                                                <h1>{{__('messages.upload files')}}</h1>
                                                <p>{{__('messages.Upload files you want to share with your team members')}}</p>
                                                <p>{{__('messages.PDF, Images & Videos are allowed')}}</p>
                                                <p class="files-error d-none text-danger">{{__('messages.too_many_files')}}</p>
                                            </div>
                                            <div class="drop-section-customcss drop-section-edit">
                                                <div class="col">
                                                    <div class="cloud-icon">
                                                        <img src="/metronic/images/iconsDragAndDrop/cloud.png" alt="cloud">
                                                    </div>
                                                    <span>{{__('messages.Drag & Drop your files here')}}</span>
                                                    <span>{{__('messages.OR')}}</span>
                                                    <button class="file-selector-edit">{{__('messages.Browse Files')}}</button>
                                                    <input name="files" type="file" id="FileListEditInput" class="file-selector-input-edit" multiple>
                                                </div>
                                                <div class="col">
                                                    <div class="drop-here">{{__('messages.Drop Here')}}</div>
                                                </div>
                                            </div>
                                            <div class="list-section-customcss list-section-edit">
                                                <div class="list-title">{{__('messages.Uploaded Files')}}</div>
                                                <div class="list-edit"></div>
                                            </div>
                                        </div>
                                  </div>
                           <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                                @permission('purchasing-pending')
                                <button type="submit" class="btn btn-primary update">{{__('messages.Update')}}</button>
                                @endpermission
                           </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
        </div>
   	 </div>
	</div>
{{-- Edn- Edit Modal --}}
{{-- show Modal --}}
            <div class="modal fade" id="show-modal" tabindex="-1" aria-labelledby="showModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                         
                             <h5 class="modal-title" id="showModalLabel">{{__('messages.Sales data')}}  </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          
                        </div>
                        <div class="modal-body row">
            
                               <ul id="show_user_msgList"></ul>
                             
                              <div class="card-body">
                                <div class="row">
                                  <div class="col-md-12 mx-auto">
                                    <ul class="nav nav-pills nav-pills-custom justify-content-center" id="pills-tab-show" role="tablist">
                                      <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-show-user-data" role="tab" aria-controls="pills-home" aria-selected="true">{{__('messages.Purchase data')}}</a>
                                      </li>
                                       <li class="nav-item">
                                        <a class="nav-link" id="pills-show-items-tab" data-bs-toggle="pill" href="#pills-show-items" role="tab" aria-controls="pills-contact" aria-selected="false"> {{__('messages.Items')}} </a>
                                      </li>
                                      <li class="nav-item">
                                        <a class="nav-link" id="pills-show-files-tab" data-bs-toggle="pill" href="#pills-show-user-file" role="tab" aria-controls="pills-contact" aria-selected="false"> {{__('messages.Purchase files')}} </a>
                                      </li>
                                    </ul>
                                    <div class="tab-content tab-content-custom-pill" id="pills-tabContent-show">
                                      <div class="tab-pane fade show active" id="pills-show-user-data" role="tabpanel" aria-labelledby="pills-home-tab">
                                        <fieldset disabled>
                                         <div class="row">
                                               <div class="form-group mb-3 col-md-6">
                                                <label for=""> {{__('messages.Serial number')}}</label>
                                                <input type="text" id="show-serial-number" required class=" form-control">
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{__('messages.Status')}}</label>
                                                <input type="text" id="show-status" required class=" form-control">
                                            </div>
                                              <div class="form-group mb-3 col-md-6">
                                                <label for="Role">{{__('messages.Total price')}}</label>
                                                <input type="text" id="show-total-price" required class="form-control num">
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{__('messages.Date')}}</label>
                                                <input type="text" id="show-created-at" required class=" form-control">
                                            </div>
                                          </div>
                                         </fieldset>
                                    </div>
                                    <div class="tab-pane fade" id="pills-show-items" role="tabpanel" aria-labelledby="pills-show-items-tab">
                                    	<h4 class="card-title">{{__('messages.Items')}}</h4>
                                        <div class="custoTable" style="overflow: hidden;">
                                          <div class="table_responsive">
                                            <table id="show-myTableItems">
                                              <thead>
                                                    <tr> 
                                                      <th>{{__('messages.Item')}}</th>
                                                      <th>{{__('messages.Inventory')}}</th>
                                                      <th>{{__('messages.quantity')}}</th>
                                                      <th>{{__('messages.price')}}</th>
                                                    </tr>
                                              </thead>
                                              <tbody>
                                              </tbody>
                                            </table>
                                          </div>
                                        </div>
                                     </div>
                                     <div class="tab-pane fade" id="pills-show-user-file" role="tabpanel" aria-labelledby="pills-show-files-tab">
                    			         <div class="custoTable">
                                          <div class="table_responsive">
                                            <table id="show-myTableFile">
                                              <thead>
                                                    <tr> 
                                                      <th>{{__('messages.ID')}}</th>
                                                      <th>{{__('messages.Files')}}</th>
                                                      <th>{{__('messages.Action')}}</th>
                                                    </tr>
                                                  </thead>
                                                  <tbody>
                                                  </tbody>
                                            </table>
                                          </div>
                                        </div>
                                     </div>
                               <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                           </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
        </div>
   	 </div>
	</div>
{{-- Edn- show Modal --}}
{{-- Delete Modal --}}
<div class="modal fade" id="DeleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
               <h5 class="modal-title" id="deleteModalLabel">{{__('messages.Delete')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4>{{__('messages.Confirm to Delete Data ?')}}</h4>
                <input type="hidden" id="deleteing_id">
                <input type="hidden" id="deleteing_user_fetch_id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary close-delet-model" data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                <button type="button" class="btn btn-danger  delete_any_user ">{{__('messages.Yes Delete')}}</button>
            </div>
        </div>
    </div>
</div>
{{-- End - Delete Modal --}}
{{-- Delete file Modal --}}
<div class="modal fade" id="DeleteFileModal" tabindex="-1" aria-labelledby="DeleteFileModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
               <h5 class="modal-title" id="DeleteFileModalLabel">{{__('messages.Delete')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4>{{__('messages.Confirm to Delete Data ?')}}</h4>
                 <input type="hidden" id="dele-file-ajax-route" value="{{ route('user.file.delete.data') }}" />
                <input type="hidden" id="deleteing_file_id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary close-delet-model" data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                <button type="button" class="btn btn-danger   delete_any_file">{{__('messages.Yes Delete')}}</button>
            </div>
        </div>
    </div>
</div>
{{-- End - Delete file Modal --}}
{{-- show darg Modal --}}
<div class="modal fade" id="editFileDragModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{__('messages.Update File User')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body row">
                <ul id="update_msgList_file"></ul>
                <div class="containerDragDop">
                    <input type="hidden" id="update_fileattach_id">
                    <input type="hidden" id="purchase-id">
                    <input type="hidden" id="ubdate-fileattach-ajax-route"
                        value="{{ route('user.file.update.data') }}" />

                    <div class="header-section">
                        <h1>{{__('messages.upload files')}}</h1>
                        <p>{{__('messages.Upload files you want to share with your team members')}}</p>
                        <p>{{__('messages.PDF, Images & Videos are allowed')}}</p>
                    </div>
                    <div class="drop-section-customcss drop-section-file-edit">
                        <div class="col">
                            <div class="cloud-icon">
                                <img src="/metronic/images/iconsDragAndDrop/cloud.png" alt="cloud">
                            </div>
                            <span>{{__('messages.Drag & Drop your files here')}}</span>
                            <span>{{__('messages.OR')}}</span>
                            <button class="file-selector-file-edit">{{__('messages.Browse Files')}}</button>
                            <input name="files" type="file" id="FileListFileEditInput" class="file-selector-file-input-edit">
                        </div>
                        <div class="col">
                            <div class="drop-here">{{__('messages.Drop Here')}}</div>
                        </div>
                    </div>
                    <div class="list-section-customcss list-section-file-edit">
                        <div class="list-title">{{__('messages.Uploaded Files')}}</div>
                        <div class="list-file-editt"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary close-dragAndDrop-model"
                    data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                <button type="button" class="btn btn-primary update-file-attachment">{{__('messages.Yes Update File')}}</button>
            </div>
        </div>
    </div>
</div>
    <div class="spinner-layer d-none">
        <div class="spinner"></div>
        <p class="fs-3">{{__('messages.Processing')}}</p>
    </div>
{{-- End - show darg Modal --}}
@endsection

@section("scripts")
    <script>
    var translations = {
        'ID': '{{ __("messages.ID") }}',
        'Serial number': '{{ __("messages.Serial number") }}',
        'Status': '{{ __("messages.Status") }}',
        'Customer': '{{ __("messages.Customer") }}',
        'Total price': '{{ __("messages.Total price") }}',
        'Owner status': '{{ __("messages.Owner status") }}',
        'Date': '{{ __("messages.Date") }}',
        'users Data': '{{ __("messages.users Data") }}',
        'Sales System': '{{ __("messages.Sales System") }}',
        'Subtotal': '{{ __("messages.Subtotal") }}',
        'All': '{{ __("messages.All") }}',
    };
    </script>

    {{--
        دوال تنسيق الأرقام — معرّفة هنا قبل تحميل sales.js
        حتى تكون متاحة له وللسكربتات الأخرى عبر window.
          formatNumber(1234567.5, 3) -> "1,234,567.500"
          unformatNumber("1,234.5")  -> "1234.5"
          toNumber("1,234.5")        -> 1234.5
        قاعدة: الفواصل للعرض فقط، وتُزال بـ unformatNumber قبل أي إرسال للسيرفر.
    --}}
    <script>
    (function () {
        function toNumber(value) {
            if (value === null || value === undefined || value === '') return 0;
            var num = parseFloat(String(value).replace(/,/g, ''));
            return isNaN(num) ? 0 : num;
        }

        function formatNumber(value, decimals) {
            if (value === null || value === undefined || value === '') return '';
            var num = parseFloat(String(value).replace(/,/g, ''));
            if (isNaN(num)) return value;
            var str = (decimals === undefined || decimals === null) ? String(num) : num.toFixed(decimals);
            var parts = str.split('.');
            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            return parts.join('.');
        }

        function unformatNumber(value) {
            if (value === null || value === undefined) return value;
            return String(value).replace(/,/g, '');
        }

        window.toNumber = toNumber;
        window.formatNumber = formatNumber;
        window.unformatNumber = unformatNumber;
    })();
    </script>

 <script type="module" src="{{asset('metronic/js/pages/sales.js')}}"></script> 
 <script src="{{asset('metronic/js/components/uploadFiles.js')}}"></script> 
@endsection