@extends('newDashboard.index')

@section('css')
    <link rel="stylesheet" href="{{ asset('metronic/css/data-table.css') }}">
    <style>
.show-warehouse-layout {
    border-collapse: separate;
	border:1px solid #ddd;
}

.show-warehouse-layout  tr  {

	border:1px solid #ddd;
	
	
}
.show-warehouse-layout th ,.total-space{
    background-color: #8daf21;
		border:1px solid #8daf21!important;
	   font-wight:bolder;
	   font-size:18px;
	color:#fff
}
.show-warehouse-layout * {
	text-align: center!important;
}
.total-space,.warehouse-section{
	display:flex;
	justify-content:space-between;
	align-items:center;

}
.display-none{
	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-cards-variant menu-icon"></i>
                </span> {{ __('messages.Inventories') }}
            </h3>
        </div>
        <div class="row">
            <div id="success_message"></div>
            @permission('inventories-create')
                <div class="buttons-container">
                    <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal"
                        data-bs-target="#AddInventoryModal">{{ __('messages.Add Inventory') }}</button>
                </div>
            @endpermission
            <input type="hidden" id="add-ajax-route" value="{{ route('inventories.store') }}" />
            <input type="hidden" id="update-ajax-route" value="{{ route('inventory.update.data') }}" />
            <input type="hidden" id="delete-ajax-route" value="{{ route('inventory.delete.data') }}" />
            <div class="table-responsive customscroll">
                <table class="table datatable text-center" id="table">
                    <thead>
                        <tr>
                            <th>{{ __('messages.ID') }}</th>
                            <th>{{ __('messages.Name') }}</th>
                            <th>{{ __('messages.Category') }}</th>
                            <th>{{ __('messages.Serial') }}</th>
                            <th>{{ __('messages.Address') }}</th>
                            <th>{{ __('messages.Space') }}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- ------------- MODALS ----------------- --}}

    {{-- Add Modal --}}
    <div class="modal fade" id="AddInventoryModal" tabindex="-1" aria-labelledby="AddInventoryModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="AddCategoryModalLabel">{{ __('messages.Add Inventory') }}</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="name 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.Serial') }}</label>
                        <input id="serial-input" type="text" required class="Serial form-control">
                    </div>
                    <div class="form-group mb-3 col-md-6">
                        <label for="">{{ __('messages.Address') }}</label>
                        <input id="address-input" type="text" required class="Serial form-control">
                    </div>
                    <div class="form-group mb-3 col-md-6">
                        <label for="">{{ __('messages.Space') }}</label>
                        <input id="space-input" type="text" required class="Serial form-control">
                    </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_inventory">{{ __('messages.Save') }}</button>
                </div>
            </div>
        </div>
    </div>
    {{-- add Modal End --}}

    {{-- Edit Modal --}}
    <div class="modal fade" id="EditInventoryModal" tabindex="-1" aria-labelledby="EditInventoryModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="EditInventoryModalLabel">{{ __('messages.Edit Inventory 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('inventory.get.data') }}" />

                    <div class="form-group mb-3 col-md-6">
                        <label for=""> {{ __('messages.Name') }}</label>
                        <input id="edit-name-input" type="text" required class="name form-control">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="category-input">{{ __('messages.Category') }}</label>
                        <select id="edit-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 for="">{{ __('messages.Serial') }}</label>
                        <input id="edit-serial-input" type="text" required class="Serial form-control">
                    </div>
                    <div class="form-group mb-3 col-md-6">
                        <label for="">{{ __('messages.Address') }}</label>
                        <input id="edit-address-input" type="text" required class="Serial form-control">
                    </div>
                    <div class="form-group mb-3 col-md-6">
                        <label for="">{{ __('messages.Space') }}</label>
                        <input id="edit-space-input" type="text" required class="Serial form-control">
                    </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_inventory">{{ __('messages.Update') }}</button>
                </div>
            </div>
        </div>
    </div>
    {{-- Edit Modal End --}}


	{{-- Add Section Modal --}}
<div class="modal fade" id="AddSectionModal" tabindex="-1" aria-labelledby="AddSectionModalLabel" aria-hidden="true">
    <form id="warehouse-layouts" >
    @csrf
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="AddSectionModalLabel">{{ __('messages.Inventory Diagram') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body row">
                <ul id="add_section_msgList"></ul>

                <input id="inventory-id" type="hidden">
                
                <div class="form-group mb-3">
                    <label>{{ __('messages.Number of Sections') }}</label>
                    <input id="num-sections-input" type="number" class="form-control" min="1" >
                </div>
				<input hidden name="inventory_id" id="inventory_id_for_warehouse_layout" />
                <div id="error-messages"></div>
                <div id="sections-inputs-container"></div>
                
                <div>
                                <button id="add-new-warehouse-layout" type="button" class="btn btn-primary w-100 display-none" >{{ __('messages.Add New Section') }}</button>
                </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" >{{ __('messages.Save') }}</button>
            </div>
        </div>
    </div>
</form>
</div>
{{-- Add Section 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 Inventory') }}</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_inventory">{{ __('messages.Yes Delete') }}</button>
                </div>
            </div>
        </div>
    </div>
    {{-- END DELETE MODAL --}}
   {{-- Show warehouse layout list --}}
   	<div class="modal fade" id="warehouseLayoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                
                {{__("messages.Space")}} 
                <span id="inventory-name"></span>
                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

            </div>
            <div class="modal-body">
            <div class="table-responsive">
                     <table class="show-warehouse-layout table" >

                    <thead>
                        <tr>
                      		<th>{{ __('messages.Name') }}</th>
                            <th>{{ __('messages.Category') }}</th>
                            <th>{{ __('messages.Serial') }}</th>
                            <th>{{ __('messages.Address') }}</th>
                            <th>{{ __('messages.Space') }}</th>
                            <th>{{ __('messages.Unit Type') }}</th>
                        </tr>
                    </thead>
                    <tbody id="layoutsTableBody">
                        
                    </tbody>
                </table>
                <div class="total-space p-2">
                
                	<div>
                	{{__("messages.Total Space")}}
                	</div>
                	<div >
                	<span id="space"></span>
                		{{__("messages.KM")}}
                	<sup>3</sup>
                	</div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
  <input type="hidden"  id="warehouse-layout-list-route" value="{{route('warehouse-layout-list')}}" />
  <input type="hidden"  id="warehouse-layout-route" value="{{route('warehouse-layout')}}" />
   {{-- end Show warehouse layout list --}}
@endsection

@section('scripts')
    <script>
        var translations = {
            'ID': '{{ __('messages.ID') }}',
            'Name': '{{ __('messages.Name') }}',
            'Section': '{{ __('messages.Section') }}',
            'Category': '{{ __('messages.Category') }}',
            'Serial': '{{ __('messages.Serial') }}',
            'Address': '{{ __('messages.Address') }}',
            'Space': '{{ __('messages.Space') }}',
            'Inventories': '{{ __('messages.Inventories') }}',
            'Name': '{{ __('messages.Name') }}',
            'Length': '{{ __('messages.Length') }}',
            'Width': '{{ __('messages.Width') }}',
            'Height': '{{ __('messages.Height') }}',
            'Space': '{{ __('messages.Space') }}',
            'Quantity': '{{ __('messages.Quantity') }}',
            'Unit Type': '{{ __('messages.Unit Type') }}',
            'carton': '{{ __('messages.carton') }}',
            'package': '{{ __('messages.package') }}',
            'bag': '{{ __('messages.bag') }}',
            'KM': '{{ __('messages.KM') }}',
        };


     
     </script>
   
    
    <script src="{{ asset('metronic/js/pages/inventory.js') }}"></script>
    <script src="{{ asset('metronic/js/pages/inventory-warehouse.js?v=').uniqId() }}"></script>
@endsection