@extends("newDashboard.index")
@section("css")
    <link rel="stylesheet" href="{{asset('metronic/css/data-table.css')}}">
@endsection
@section("main-content")
    <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
        }
    </style>
    <input
            type="hidden"
            id="get-inventories-expiry-dates"
            value="{{ route('get-inventories-expiry-dates') }}"
    />
    <input type="hidden" id="get-available-inventories-for-item-route" value="{{ route('get-available-inventories-for-item') }}"/>
    <div class="content-wrapper">
        <div class="page-header" style="margin-bottom: 30px;">
            <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 invoice') }}
            </h3>
        </div>

        <input type="hidden" id="user-index" value="{{ route('users.index') }}"/>
        <input type="hidden" id="check-meat-with-expiry-date-route" value="{{ route('check-meat-with-expiry-date') }}"/>
        {{-- Add Modal --}}
        <div class="container" id="AddCategoryModal">
            <div class="">
                <input type="hidden" id="add-ajax-route" value="{{ route('sales.store') }}"/>
                <div class="modal-content" style="background: #fbfbfb;">
                    <div class="modal-header">
                        <div class="col-12">
                            <div class="modal-body row">

                                <ul id="save_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" role="tablist">
                                                <li class="nav-item">
                                                    <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                                       href="#pills-health" role="tab" aria-controls="pills-home"
                                                       aria-selected="true">{{__('messages.Sales data')}}</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                                                       href="#pills-career" role="tab" aria-controls="pills-profile"
                                                       aria-selected="false">{{__('messages.Add purchase files')}} </a>
                                                </li>

                                            </ul>
                                            <div class="tab-content tab-content-custom-pill" id="pills-tabContent">
                                                <div class="tab-pane fade show active" id="pills-health" role="tabpanel"
                                                     aria-labelledby="pills-home-tab">
                                                    <div class="item-container">
                                                        <div class="row">
                                                            <input type="hidden" id="get-quantityata-ajax-route"
                                                                   value="{{ route('check-inventory-quantity-with-expiry-date') }}"/>
                                                            <input type="hidden" id="get-PurchasePrise"
                                                                   value="{{ route('sales.get.PurchasePrise') }}"/>
                                                            <div class="form-group mb-3 col-md-4">
                                                                <label class="required"
                                                                       for=""> {{__('messages.Item')}}</label>
                                                                <select id="item"
                                                                        class="js-example-disabled-results  form-control">
                                                                    <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Item')]) }}</option>
                                                                    @foreach($items as $item)
                                                                        <option value="{{$item->id}}"
                                                                                data-item-is-carton="{{$item->is_meat_in_carton}}"
                                                                                data-item-category-id="{{$item->category_id}}">{{$item->name}}</option>
                                                                    @endforeach
                                                                </select>

                                                                <div class="itemId-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.Item')]) }}</div>
                                                            </div>

                                                            <div class="form-group mb-3 col-md-4">
                                                                <label class="required"
                                                                       for=""> {{__('messages.Inventory')}}</label>
                                                                <select id="inventoryItem"
                                                                        class="js-example-disabled-results form-control">
                                                                    <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Inventory')]) }}</option>
                                                                    @foreach($inventories as $inventory)
                                                                        <option value="{{$inventory->id}}">{{$inventory->name}}</option>
                                                                    @endforeach
                                                                </select>
                                                                <div class="inventoryId-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.Inventory')]) }}</div>
                                                            </div>
                                                            <div class="form-group mb-3 col-md-4">
                                                                <label class="required"
                                                                       for=""> {{__('Expiry Date')}}</label>
                                                                <select id="expiryDate"
                                                                        class="js-example-disabled-results form-control">
                                                                </select>
                                                                <div class="expiryDate-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.Inventory')]) }}</div>
                                                            </div>

                                                            <div class="form-group mb-3 col-md-4">
                                                                <label class="required"
                                                                       for="validationServer05">{{__('messages.quantity')}}
                                                                    <small class="text-muted"
                                                                           id="automatic-count"></small></label>

                                                                <input name="quantity" id="quantity" type="text"
                                                                       required class="form-control">
                                                                <div class="quantity-error d-none text-danger "
                                                                     id="validationServer05">{{ __('validation.required', ['attribute' => __('messages.quantity')]) }}</div>
                                                                <div id="validationServer05Feedback"
                                                                     class="invalid-feedback customQntText">
                                                                    {{__('messages.quantity not exist')}}
                                                                </div>
                                                            </div>
                                                            <div class="form-group mb-3 col-md-4 price-div">
                                                                <label class="required">{{__('messages.price')}}</label>
                                                                <input name="price" id="price" class="form-control"
                                                                       type="text">
                                                                <div class="price-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.price')]) }}</div>
                                                            </div>
                                                            <div class="col-md-12 text-danger d-none error-quantity-not-matching">
                                                                {{__('messages.The quantity of meat options should be equivalent to quantity of cartoon meat')}}
                                                            </div>
                                                            <div class="col-md-12 text-danger d-none error-quantity-meat"></div>
                                                            <div class=" mb-3 ps-0 row justify-content-between">
                                                                <button id="confirmItem" type="button"
                                                                        class="btn btn-primary col-2"
                                                                        disabled="disabled">{{__('messages.Confirm item')}}</button>
                                                                <!--                                           <div class="form-group mb-3 col-md-2 ps-0"> -->
                                                                <!--                                             <label >{{__('messages.Purchasing price')}}</label> -->
                                                                <!--                             				<input id="PurchasingPrice" disabled class="form-control" type="text" > -->
                                                                <!--                                          </div> -->
                                                            </div>
                                                            <div id="success_message"></div>

                                                            <table id="itemTable" class="table my-3">
                                                                <thead style="background-color: #8daf21; color:#fff;">
                                                                <tr>
                                                                    <th style="">#</th>
                                                                    <th style="">{{__('messages.Item')}}</th>
                                                                    <th style="">{{__('messages.Inventory')}}</th>
                                                                    <th style="">{{__('messages.quantity')}}</th>
                                                                    <th style="">{{__('messages.item weight')}}</th>
                                                                    <th style="">{{__('messages.price')}}</th>
                                                                    <th style="">{{__('messages.Action')}}</th>
                                                                </tr>
                                                                </thead>
                                                                <tbody id="confirmedItems">
                                                                <tr class="row col d-none">
                                                                    <td colspan="8"
                                                                        class="text-center text-danger">{{ __('validation.size.array', ['attribute' => __('messages.Item'), 'size' => 1]) }}</td>
                                                                </tr>
                                                                </tbody>
                                                            </table>
                                                            <div class="form-group mb-3 col-md-4">
                                                                <label class="required"
                                                                       for=""> {{__('messages.Customer')}}</label>
                                                                <select id="customer"
                                                                        class="js-example-disabled-results  form-control">
                                                                    <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Customer')]) }}</option>
                                                                    @foreach($customers as $customer)
                                                                        <option value="{{$customer->id}}">{{$customer->name}}</option>
                                                                    @endforeach
                                                                </select>
                                                                <div class="customerId-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.Customer')]) }}</div>
                                                            </div>

                                                            <div class="form-group mb-3 col-md-4">
                                                                <label class="required"
                                                                       for=""> {{__('messages.payment method')}}</label>
                                                                <select id="paymentMethod"
                                                                        class="js-example-disabled-results  form-control">
                                                                    <option value="cridet">{{__('messages.cridet On the account')}}</option>
                                                                    <option value="cash">{{__('messages.cash')}}</option>
                                                                    <option value="check">{{__('messages.check')}}</option>
                                                                    <option value="bank-transfer">{{__('messages.Bank Transfer')}}</option>

                                                                </select>

                                                                <div class="paymentMethod-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.payment method')]) }}</div>


                                                            </div>
                                                            <div class="form-group mb-3 col-md-4 d-none">

                                                                <label class="required"
                                                                       for=""> {{__('messages.bank transfer method')}}</label>

                                                                <select name="final_account_id"
                                                                        id="bank_transfer_method"
                                                                        class="js-example-disabled-results  form-control">

                                                                    <option value="0"
                                                                            selected>{{ __('validation.Select', ['attribute' => __('messages.transactions')]) }}</option>

                                                                    @foreach ($Transaction as $row)
                                                                        <option value="{{ $row->id }}">
                                                                            {{ str_replace('-', '', $row->serial_number) }}
                                                                            -
                                                                            {{ $row->name }}
                                                                        </option>
                                                                    @endforeach

                                                                </select>
                                                                <div class="final_account_id_error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.bank transfer method')]) }}</div>
                                                            </div>
                                                            <div class="form-group mb-3 col-md-4">
                                                                <label class="required"
                                                                       for=""> {{__('messages.Sale type')}}</label>
                                                                <select name="SaleType" id="SaleType"
                                                                        class="js-example-disabled-results  form-control"
                                                                        onchange="toggleDateInputs()">
                                                                    <option value="SalesInvoice">{{__('messages.Sales invoice')}}</option>
                                                                    <option value="offerPrice">{{__('messages.offer price')}}</option>
                                                                </select>
                                                                <div class="SaleType-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.payment method')]) }}</div>
                                                            </div>
                                                            <div class="form-group mb-3 col-md-6 CUSTOM-d-none"
                                                                 id="fromDateContainer">
                                                                <label class="required">{{ __('messages.From') }}</label>
                                                                <input id="from_date" type="date" class="form-control"
                                                                       name="from_date">
                                                            </div>
                                                            <div class="form-group mb-3 col-md-6 CUSTOM-d-none"
                                                                 id="toDateContainer">
                                                                <label class="required">{{ __('messages.To') }}</label>
                                                                <input id="to_date" type="date" class="form-control"
                                                                       name="to_date">
                                                            </div>
                                                            <div class="form-group mb-3 col-md-4">
                                                                <label for=""> {{__('messages.Serial number')}}</label>
                                                                <input name="serial_number" id="serialNumber"
                                                                       class="form-control" type="text" value=""
                                                                       readonly>
                                                                <div class="serial_number-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.Serial number')]) }}</div>
                                                            </div>
                                                            <div class="form-group mb-3 col-md-4">
                                                                <label for=""> {{__('messages.Status')}}</label>
                                                                <input type="text" readonly required
                                                                       class=" form-control" value="Pending">
                                                            </div>
                                                            <div class="form-group mb-3 col-md-4">
                                                                <label class="required"
                                                                       for=""> {{__('messages.The maximum date for receiving the quantity')}}</label>
                                                                <input name="max_receiving_date" type="date"
                                                                       id="max_receiving_date" required
                                                                       class=" form-control">
                                                            </div>
                                                            <!--                                                             <div class="form-group mb-3 col-md-4"> -->
                                                            <!--                                                                 <label class="required" -->
                                                            <!--                                                                        for=""> {{__('messages.Date')}}</label> -->
                                                            <!--                                                                 <input type="datetime-local" name="date_time" -->
                                                            <!--                                                                        id="date_time" required class=" form-control"> -->
                                                            <!--                                                                 <div class="date_time-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.date_time')]) }}</div> -->
                                                            <!--                                                             </div> -->
                                                            <div class="form-group mb-3 col-md-4">
                                                                <label for=""> {{__('messages.Subtotal')}}</label>
                                                                <input name="subtotal" id="subtotal"
                                                                       class="form-control" type="text" readonly
                                                                       min="0">
                                                            </div>
                                                            <div class="form-group mb-3 col-md-4">
                                                                <label for=""> {{__('messages.Discount Type')}}</label>
                                                                <select name="discount_type" id="discountType"
                                                                        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-4">
                                                                <label for=""> {{__('messages.Discount Amount')}}</label>
                                                                <input name="discount_amount" id="discountAmount"
                                                                       class="form-control" type="number" disabled
                                                                       min="0">
                                                            </div>
                                                            <div class="form-group mb-3 col-md-4">
                                                                <label for=""> {{__('messages.Total price')}}</label>
                                                                <input name="total_price" id="totalPrice"
                                                                       class="form-control" type="text" readonly>
                                                            </div>
                                                            <div class="form-group my-3 col-md-12">
                                                                <label for="note"> {{__('messages.Note')}}</label>
                                                                <textarea id="note" name="note" class="form-control"
                                                                          rows="5"></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="container-fluid">
                                                        <hr/>
                                                        <div class="text-center p-3"
                                                             style="background-color: #8daf21; color:#fff;">
                                                            <h5 class="text-white m-0">{{__('Item Descriptions')}}</h5>
                                                        </div>
                                                        <table class="table text-center">
                                                            <thead>
                                                            <tr class="">
                                                                <th>{{__("Item Name")}}</th>
                                                                <th>{{__("Quantity")}}</th>
                                                                <th>{{__("Weight")}}</th>
                                                                <th>{{__("Price")}}</th>
                                                                <th>{{__("Action")}}</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody id="itemTableBody"></tbody>
                                                        </table>
                                                        <div class="text-start p-3">
                                                            <button onclick="addNewDescriptionItem()"
                                                                    class="btn btn-primary btn btn-sm">
                                                                <i class="fas fa-plus"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="pills-career" role="tabpanel"
                                                     aria-labelledby="pills-profile-tab">
                                                    <div class="containerDragDop">
                                                        <div class="header-section" style="padding: 14px 0px;">
                                                            <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">
                                                            <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">{{__('messages.Browse Files')}}</button>
                                                                <input name="files" type="file" id="FileList"
                                                                       class="file-selector-input" multiple>
                                                            </div>
                                                            <div class="col">
                                                                <div class="drop-here">{{__('messages.Drop Here')}}</div>
                                                            </div>
                                                        </div>
                                                        <div class="list-section-customcss list-section">
                                                            <div class="list-title">{{__('messages.Uploaded Files')}}</div>
                                                            <div class="list" id="FileList"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button id="addPurchase"
                                                            class="btn btn-primary">{{__('messages.Save')}}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="spinner-layer d-none">
        <div class="spinner"></div>
        <p class="fs-3">{{__('messages.Processing')}}</p>
    </div>
    {{--    </div>--}}
@endsection

@section("scripts")
    <script>
        var translations = {
            "weight": "{{__('messages.meat weight')}}",
            "name": "{{__('Name')}}",
            "expiry date": "{{__('Expiry Date')}}",
            "price": "{{__('Price')}}",
            "item_weight": "{{__('messages.weight')}}",
            "quantity": "{{__('messages.Quantity')}}",
            "weightError": "{{ __('validation.required', ['attribute' => __('messages.meat weight')]) }}",
            "automatic": "{{ __('messages.automatic') }}",
            "shoulder_meat": "{{__('messages.Shoulder meat')}}",
            "thigh_meat": "{{__('messages.Thigh meat')}}",
            "Select Inventory": "{{ __('validation.Select', ['attribute' => __('messages.Inventory')]) }}",
            "Carton_veal": "{{__('messages.Carton veal')}}"
        };
    </script>
    <script src="{{asset('metronic/js/pages/sales.js?v=').config('app.version')}}"></script>
    <script src="{{asset('metronic/js/components/uploadFiles.js')}}"></script>

@endsection