@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);
            }
        }


    </style>
    <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.Add purchase') }}
            </h3>
        </div>

        {{-- Add Modal --}}
        <div class="container" id="AddCategoryModal">
            <div class="">
                <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.Purchase 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>

                                            <input type="hidden" id="purchases-prise-last"
                                                   value="{{ route('purchases.prise.last') }}"/>

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

                                                            <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.Supplier')}}</label>
                                                                <select id="supplier"
                                                                        class="js-example-disabled-results  form-control">
                                                                    <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Supplier')]) }}</option>
                                                                    @foreach($suppliers as $supplier)
                                                                        <option value="{{$supplier->id}}">{{$supplier->name}}</option>
                                                                    @endforeach
                                                                </select>
                                                                <div class="supplierId-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.Suppliers')]) }}</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 my-3 col-md-2 quantity-div">
                                                                <label id="quantity-lable" class="required"
                                                                       for="">{{__('messages.quantity')}}</label>
                                                                <input name="quantity" id="quantity" type="text"
                                                                       required
                                                                       class="form-control">
                                                                <div class="quantity-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.quantity')]) }}</div>
                                                            </div>
                                                            <div class="form-group my-3 col-md-2">
                                                                <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="form-group my-3 col-md-3">
                                                                <label class="required">{{__('messages.production date')}}</label>
                                                                <input name="production_date" id="production_date"
                                                                       class="form-control"
                                                                       type="date">
                                                                <div class="production_date-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.production date')]) }}</div>
                                                            </div>
                                                            <div class="form-group my-3 col-md-3">
                                                                <label class="required">{{__('messages.expire date')}}</label>
                                                                <input name="expire_date" id="expire_date"
                                                                       class="form-control"
                                                                       type="date">
                                                                <div class="expire_date-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.expire date')]) }}</div>
                                                            </div>
                                                            <div class="mb-3 mx-1 row justify-content-between">
                                                                <button id="confirmItem" type="button"
                                                                        class="btn btn-primary col-md-2">{{__('messages.Confirm item')}}</button>
                                                                <button id="showSalse" type="button"
                                                                        class="btn btn-primary col-md-2">{{__('messages.Purchasing price')}}</button>

                                                            </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.Suppliers')}}</th>
                                                                    <th style="">{{__('messages.Inventory')}}</th>
                                                                    <th style="">{{__('messages.quantity')}}</th>
                                                                    <th style="">{{__('messages.price')}}</th>
                                                                    <th style="">{{__('messages.production date')}}</th>
                                                                    <th style=""
                                                                        class="expire-date-header">{{__('messages.expire date')}}</th>
                                                                    <th style=""></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.shipping')}}</label>
                                                                <select id="shipping_type"
                                                                        class="js-example-disabled-results form-control">
                                                                    <option value="0">{{ __('validation.Select', ['attribute' => __('messages.shipping')]) }}</option>
                                                                    <option value="land">{{__('messages.land')}}</option>
                                                                    <option value="air">{{__('messages.air')}}</option>
                                                                    <option value="sea">{{__('messages.sea')}}</option>
                                                                </select>
                                                                <div class="shipping_type-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.shipping')]) }}</div>
                                                            </div>
                                                            <div class="form-group mb-3 col-md-4">
                                                                <label for=""> {{__('messages.Shipping price')}}</label>
                                                                <input name="price_shipping" id="priceShipping"
                                                                       class="form-control"
                                                                       type="number" value="0">
                                                            </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>
                                                                <select name="status" id="status" class=" form-control">
                                                                    <option value="pending" selected>Pending</option>
                                                                    <option value="estimated_cost">estimated cost
                                                                    </option>
                                                                </select>
                                                            </div>
<!--                                                             <div class="form-group mb-3 col-md-4"> -->
<!--                                                                 <label for=""> {{__('messages.Date')}}</label> -->
<!--                                                                 <input name="date_time" id="date_time" -->
<!--                                                                        class="form-control" -->
<!--                                                                        type="datetime-local" value="" -->
<!--                                                                 > -->
<!--                                                                 <div class="date_time-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.date_time')]) }}</div> -->

<!--                                                             </div> -->
                                                            <hr>
                                                            <h4>{{__('messages.Other expenses')}}</h4>
                                                            <div class="form-group my-3 col-md-4">
                                                                <label for=""> {{__('messages.Customs expenses')}}</label>
                                                                <input name="customs" id="customs" class="form-control"
                                                                       type="number"
                                                                       value="0">

                                                            </div>
                                                            <div class="form-group my-3 col-md-4">
                                                                <label for=""> {{__('messages.Clearance expenses')}}</label>
                                                                <input name="clearance" id="clearance"
                                                                       class="form-control" type="number"
                                                                       value="0">

                                                            </div>
                                                            <div class="form-group my-3 col-md-4">
                                                                <label for=""> {{__('messages.Tax expenses')}}</label>
                                                                <input name="tax" id="tax" class="form-control"
                                                                       type="number"
                                                                       value="0">
                                                            </div>
                                                            <div class="form-group my-3 col-md-4">
                                                                <label for=""> {{__('messages.Unloading workers expenses')}}</label>
                                                                <input name="workers_expenses" id="workersExpenses"
                                                                       class="form-control"
                                                                       type="number" value="0">

                                                            </div>
                                                            <hr>
                                                            <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 my-3 col-md-4">
                                                                <label for=""> {{__('messages.Total price')}}</label>
                                                                <input name="total_price" id="totalPrice"
                                                                       class="form-control"
                                                                       type="number">
                                                                <input type="hidden" id="add-ajax-route"
                                                                       value="{{ route('purchases.store') }}"/>
                                                            </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 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>
                                                <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>


    {{-- 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.price')}}  </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                </div>
                <div class="modal-body row">
                    <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-show-user-data" role="tab" aria-controls="pills-home"
                                           aria-selected="true">{{__('messages.Purchase data')}}</a>
                                    </li>
                                </ul>
                                <div class="tab-content tab-content-custom-pill" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-show-items" role="tabpanel"
                                         aria-labelledby="pills-contact-tab">
                                        <h4 class="card-title">{{__('messages.price')}}</h4>
                                        <div class="custoTable" style="overflow: hidden;">
                                            <div class="table_responsive">
                                                <table id="show-myTableItems">
                                                    <thead>
                                                    <tr>
                                                        <th>{{__('messages.Date')}}</th>
                                                        <th>{{__('messages.quantity')}}</th>
                                                        <th>{{__('messages.price')}}</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 --}}

    {{-- 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">
                        <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">
                            <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">
                            <div class="list-title">{{__('messages.Uploaded Files')}}</div>
                            <div class="list" id="FileList"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- End - show darg Modal --}}
    </div>
@endsection

@section("scripts")
    <script>
        var translations = {
            'weight': "{{__('messages.meat weight')}}",
            'meat_weight_required': "{{__('validation.required', ['attribute' => __('messages.meat weight')])}}",
            "name": "{{__('Name')}}",
            "price": "{{__('Price')}}",
            "item_weight": "{{__('messages.weight')}}",
            "quantity": "{{__('messages.Quantity')}}",
            "weightError": "{{ __('validation.required', ['attribute' => __('messages.meat weight')]) }}",

        };
    </script>
    <script src="{{asset('metronic/js/pages/purchases.js?v=').config('app.version')}}"></script>
    <script src="{{asset('metronic/js/components/uploadFiles.js')}}"></script>
    <script src="{{asset('metronic/js/pages/create-purchase.js?v=').config('app.version')}}"></script>
@endsection