@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') }} ({{ __('Temporary System') }})
            </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">
                                <form id="add-form" action="{{route('temp-purchase.store')}}" method="post">
                                    @csrf
                                    <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="select2  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-is-meet="{{($item->id == config('app.globals.meat_carton_item_id') || $item->category_id == config('app.globals.meat_category_id') || $item->category_id ==config('app.globals.meat_carton_category_id')) ? 1:0}}"
                                                                                    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="select2  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="select2 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-6 quantity-div">
                                                                    <label id="quantity-lable" class="required"
                                                                           for="">{{__('messages.quantity')}}</label>
                                                                    <input name="quantity" id="quantity" type="number"
                                                                           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-6 ">
                                                                    <label id="price-label" class="required"
                                                                           for="">{{__('Price')}}</label>
                                                                    <input name="price" id="price" type="number"
                                                                           required
                                                                           class="form-control">
                                                                    <div class="price-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.price')]) }}</div>
                                                                </div>
                                                                <div class="form-group my-3 col-md-6">
                                                                    <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-6">
                                                                    <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>
                                                                </div>
                                                                <input type="hidden" name="item">
                                                                <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 / Weight')}}</th>
                                                                        <th style="">{{__('Price')}}</th>
                                                                        <th style="">{{__('messages.production date')}}</th>
                                                                        <th style=""
                                                                            class="expire-date-header">{{__('messages.expire date')}}</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-6">
                                                                    <label class="required"
                                                                           for=""> {{__('messages.shipping')}}</label>
                                                                    <select id="shipping_type" name="shipping_type"
                                                                            class="select2 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-6">
                                                                    <label for=""> {{__('messages.Shipping price')}}</label>
                                                                    <input name="shipping_price" id="priceShipping"
                                                                           class="form-control"
                                                                           value="0"
                                                                           step=".01"
                                                                           type="number">
                                                                </div>
                                                                <div class="form-group mb-3 col-md-6">
                                                                    <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-6"> -->
<!--                                                                     <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-6">
                                                                    <label for=""> {{__('messages.Customs expenses')}}</label>
                                                                    <input name="customs" id="customs"
                                                                           class="form-control"
                                                                           type="number"
                                                                           value="0"
                                                                           step=".01"
                                                                    >
                                                                </div>
                                                                <div class="form-group my-3 col-md-6">
                                                                    <label for=""> {{__('messages.Clearance expenses')}}</label>
                                                                    <input name="clearance" id="clearance"
                                                                           class="form-control" type="number"
                                                                           step=".01"
                                                                           value="0"
                                                                    >
                                                                </div>
                                                                <div class="form-group my-3 col-md-6">
                                                                    <label for=""> {{__('messages.Tax expenses')}}</label>
                                                                    <input name="tax" id="tax" class="form-control"
                                                                           type="number"
                                                                           step=".01"
                                                                           value="0"
                                                                    >
                                                                </div>
                                                                <div class="form-group my-3 col-md-6">
                                                                    <label for=""> {{__('messages.Unloading workers expenses')}}</label>
                                                                    <input name="workers_expenses" id="workersExpenses"
                                                                           class="form-control"
                                                                           step=".01"
                                                                           type="number" value="0">
                                                                </div>
                                                                <hr>
                                                                <div class="form-group mb-3 col-md-6">
                                                                    <label for=""> {{__('messages.Subtotal')}}</label>
                                                                    <input name="subtotal" id="subtotal"
                                                                           class="form-control"
                                                                           step=".01"
                                                                           value="0"
                                                                           type="text"
                                                                           readonly min="0">
                                                                </div>
                                                                <div class="form-group mb-3 col-md-6">
                                                                    <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-6">
                                                                    <label for=""> {{__('messages.Discount Amount')}}</label>
                                                                    <input name="discount_amount" id="discountAmount"
                                                                           class="form-control"
                                                                           step=".01"
                                                                           value="0"
                                                                           type="number" disabled min="0">
                                                                </div>
                                                                <div class="form-group my-3 col-md-6">
                                                                    <label for=""> {{__('messages.Total price')}}</label>
                                                                    <input name="total_price" id="totalPrice"
                                                                           class="form-control"
                                                                           disabled
                                                                           value="0"
                                                                           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>
                                                        <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 type="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 type="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 type="submit"
                                                                class="btn btn-primary">{{__('messages.Save')}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </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>
    <input type="hidden" id="user-index" value="{{ route('purchases.index') }}"/>

@endsection

@section("scripts")
    <script>
        var translations = {
            'weight': "{{__('messages.meat weight')}}",
            "item_weight": "{{__('messages.weight')}}",
            "quantity": "{{__('messages.Quantity')}}",
            "name": "{{__('Name')}}",
            "price": "{{__('Price')}}",
        };

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

@endsection