@extends('newDashboard.index')

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

@section('main-content')
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-package"></i>
                </span> {{ __('messages.Items') }}
            </h3>
        </div>
        <div class="row">
            <div id="success_message"></div>
            @permission('items-create')
                <div class="buttons-container">
                    <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal"
                        data-bs-target="#AddItemModal">{{ __('messages.Add Item') }}</button>
                </div>
            @endpermission
            <input type="hidden" id="add-ajax-route" value="{{ route('items.store') }}" />
            <input type="hidden" id="update-ajax-route" value="{{ route('item.update') }}" />
            <input type="hidden" id="delete-ajax-route" value="{{ route('item.delete') }}" />

            <div class="table-responsive customscroll">
                <table class="table datatable text-center" id="table">
                    <div class="form-group mb-3 col-md-3 col-8 px-4">
                        <div class="d-flex align-items-center gap-2">
                            <label class="" for=""> {{ __('messages.Items') }}:</label>
                            <select id="categorySelect" class="js-example-disabled-results  form-control">
                                <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Items')]) }}
                                </option>
                                @foreach ($categoriesFiler as $categoriesFiler)
                                    <option value="{{ $categoriesFiler->id }}">{{ $categoriesFiler->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <thead>
                        <tr>
                            <th>{{ __('messages.ID') }}</th>
                            <th>{{ __('messages.Name') }}</th>
                            <th>{{ __('messages.Category') }}</th>
                            <th>{{ __('messages.Unit Type') }}</th>
                            <th>{{ __('messages.Store Terms') }}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Add Modal --}}
    <div class="modal fade" id="AddItemModal" tabindex="-1" aria-labelledby="AddItemModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="AddItemModalLabel">{{ __('messages.Add Item') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body row">
                    <ul id="save_msgList"></ul>
                    <div class="form-group mb-3 col-md-6">
                        <label class="required" for=""> {{ __('messages.Name') }}</label>
                        <input id="name-input" type="text" required class="form-control">
                    </div>
                    <div class="form-group col-md-6">
                        <label class="required" for="category-input">{{ __('messages.Category') }}</label>
                        <select id="category-input" class="form-control">
                            <option selected>{{ __('messages.Choose') }}...</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mb-3 col-md-6">
                        <label class="required" for=""> {{ __('messages.Unit Type') }}</label>
                        <input id="unit-type-input" type="text" required class="form-control">
                    </div>
                    <div class="form-group mb-3 col-md-6">
                        <label  for=""> {{ __('messages.item weight') }}</label>
                        <input id="unit-weight" type="text"  class="form-control">
                    </div>
                    <div class="form-group mb-3 col-md-6">
                        <input id="meat-in-carton-input" class="form-check-input p-2 mt-0" type="checkbox">
                        <label class="mb-0" for=""> {{ __('messages.Meat in carton') }}</label>
                    </div>
                    <div class="form-group mb-3 col-md-12">
                        <label class="required" for=""> {{ __('messages.Store Terms') }}</label>
                        <textarea name="store-terms-input" id="store-terms-input"></textarea>
                    </div>
                    <div class="form-group mb-3 col-md-12">
                        <label for="">{{ __('messages.Description') }}</label>
                        <textarea id="description-input" type="text" required class="description form-control"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                    <button type="button" class="btn btn-primary add_item">{{ __('messages.Save') }}</button>
                </div>
            </div>
        </div>
    </div>
    {{-- add Modal End --}}

    {{-- Edit Modal --}}
    <div class="modal fade" id="EditItemModal" tabindex="-1" aria-labelledby="EditItemModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="EditItemModalLabel">{{ __('messages.Edit Item Data') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body row">
                    <ul id="update_msgList"></ul>

                    <input id="edit-id" type="hidden" required class="name form-control">
                    <input type="hidden" id="edit-ajax-route" value="{{ route('item.get.data') }}" />

                    <div class="form-group mb-3 col-md-6">
                        <label class="required" for=""> {{ __('messages.Name') }}</label>
                        <input id="edit-name-input" type="text" required class="form-control" />
                    </div>
                    <div class="form-group col-md-6">
                        <label class="required" for="category-input">{{ __('messages.Category') }}</label>
                        <select id="edit-category-input" class="form-control">
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mb-3 col-md-6">
                        <label class="required" for=""> {{ __('messages.Unit Type') }}</label>
                        <input id="edit-unit-type-input" type="text" required class="form-control" />
                    </div>
                    <div class="form-group mb-3 col-md-6">
                        <label  for=""> {{ __('messages.item weight') }}</label>
                        <input id="edit-unit-weight" type="text"  class="form-control">
                    </div>
                    <div class="form-group mb-3 col-md-6">
                        <input id="edit-meat-in-carton-input" class="form-check-input p-2 mt-0" type="checkbox">
                        <label class="mb-0" for=""> {{ __('messages.Meat in carton') }}</label>
                    </div>
                    <div class="form-group mb-3 col-md-12">
                        <label class="required" for=""> {{ __('messages.Store Terms') }}</label>
                        <textarea name="store-terms-input" id="edit-store-terms-input"></textarea>
                    </div>
                    <div class="form-group mb-3 col-md-12">
                        <label for="">{{ __('messages.Description') }}</label>
                        <textarea id="edit-description-input" type="text" required class="description form-control"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                    <button type="submit" class="btn btn-primary update_item">{{ __('messages.Update') }}</button>
                </div>
            </div>
        </div>
    </div>
    {{-- Edit Modal End --}}

    {{-- START DELETE MODAL --}}
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <input type="hidden" id="deleteing_id">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">{{ __('messages.Delete Item Data') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h4>{{ __('messages.Confirm to Delete Data ?') }}</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                    <button type="button" class="btn btn-danger delete_item">{{ __('messages.Yes Delete') }}</button>
                </div>
            </div>
        </div>
    </div>
    {{-- END DELETE MODAL --}}

    {{-- STORE TERMS --}}
    <div class="modal fade" id="showStoreTermsModal" tabindex="-1" aria-labelledby="showStoreTermsModal"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="showStoreTermsModal">{{ __('messages.Store Terms') }} <span
                            id="item-name-span"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="modal-data-container"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                </div>
            </div>
        </div>
    </div>
    {{-- STORE TERMS MODAL --}}
@endsection

@section('scripts')
    <script>
        var translations = {
            'ID': '{{ __('messages.ID') }}',
            'Name': '{{ __('messages.Name') }}',
            'Category': '{{ __('messages.Category') }}',
            'Unit Type': '{{ __('messages.Unit Type') }}',
            'Store Terms': '{{ __('messages.Store Terms') }}',
            'Items': '{{ __('messages.Items') }}',


        };
    </script>
    
    <script src="{{ asset('metronic/js/pages/items.js') }}"></script>
@endsection