@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

@section('page-content')

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body list-heading">
                            <!-- card-header -->
                            <!--cenario 1: only header, 2:header and add button, 3:header and print, other:header , add button and prin. type:both[pdf,excel], type:[pdf], type:[excel] -->
                            <x-card-header 
                                :scenario="'2'"
                                :pageTitle="$page_title"
                                :permission="'Items - Request Items'"
                                :buttonLabel="__('items.request_form.add_form')"
                                :buttonClass="'addNewItemsBtn'"
                                :totalCount="$allForms->total()"
                                :modal="'fees9-form-modal'"
                            />

                            <div class="mt-3">
                                {{-- Search --}}
                                <x-search-filter 
                                    :rows="2"
                                    :inputs-per-row="3"
                                    :col-md-classes="[
                                        ['col-md-4','col-md-4','col-md-4'],
                                        ['col-md-4', 'col-md-4', 'col-md-4']
                                    ]"
                                    :input-config="[
                                        [
                                            ['type' => 'text'],
                                            ['type' => 'select', 'options' => [
                                                '1' => __('items.consumable'), 
                                                '2' => __('items.none_consumable')
                                            ]],
                                            ['type' => 'select', 'options' => [
                                                '1' => __('items.consumable'), 
                                                '2' => __('items.none_consumable')
                                            ]],
                                        ],
                                        [
                                            ['type' => 'select', 'options' => [
                                                'new' => __('items.new'),
                                                'use' => __('items.use'),
                                                'inactive' => __('items.inactive'),
                                                'defective' => __('items.defective'),
                                            ]],
                                            ['type' => 'select', 'options' => [
                                                '1' => __('items.consumable'), 
                                                '2' => __('items.none_consumable')
                                            ]],
                                            ['type' => 'select', 'options' => $paginationArray]
                                        ]
                                    ]"
                                    :names="[
                                        [
                                            'term_searh_name',
                                            'category',
                                            'unit',
                                        ],
                                        [
                                            'item_status',
                                            'is_consumable',
                                            'pagination_searh_name',
                                        ]
                                    ]"
                                    :ids="[
                                        [
                                            'term_searh_id',
                                            'category',
                                            'unit_id',
                                        ],
                                        [
                                            'item_status_id',
                                            'is_consumable_id',
                                            'pagination_searh_id',
                                        ]
                                    ]"
                                    :placeholders="[
                                        [
                                            __('global.search'),
                                            __('items.category'),
                                            __('items.unit'),
                                        ],
                                        [
                                            __('items.item_status'),
                                            __('items.is_consumable'),
                                            key($paginationArray) ? key($paginationArray) : __('global.pagination')
                                        ]
                                    ]"
                                    form-action="{{ route('items.list') }}"
                                    report-type="both" 
                                    :lang="$lang"
                                />

                                                
                                <!-- end Search -->
                            </div>

                            <div class="card">
                                <div class="card-body pe-0 ps-0" id="data_content">
                                    @include('dnekcab.nimda.items.Fees9.list')
                                </div>
                            </div>
                            <div class="row">
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

        </div> <!-- container-fluid -->
    </div>
    <div class="modal fade" id="fees9-form-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">{{ __('items.create_fees9_form') }}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-0" style="max-height: 80vh; overflow-y: auto;">
                    <form id="fees9-form" action="{{ route('items.fees9.store') }}" method="POST">
                        @csrf
                        <div class="row mb-2">
                            <div class="col-md-4">
                                <label class="form-label">{{ __('items.fees9.department_name') }}</label>
                                <select name="r_department" class="form-control select2">
                                    <option value="0">{{ __('global.select') }}</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->id }}">{{ $department->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">{{ __('items.fees9.description') }}</label>
                                <textarea name="description" rows="1" class="form-control"></textarea>
                            </div>
                        </div>

                        <div class="row mx-1">
                            <div class="col py-2 px-0" style="border-top: 1px solid #CCC; border-bottom: 1px solid #CCC">
                                <label class="form-label mb-0">{{ __('items.fees9.items_info') }}</label>
                            </div>
                        </div>
                        <div id="form-container">
                            <div class="row mb-2 form-row">
                                <div class="col-md-4 px-1">
                                    <label class="form-label my-1 me-4">{{ __('items.name') }}</label>
                                    <div class="d-flex align-items-center">
                                        <span class="p-2 item-number">1- </span>
                                        <select name="item_name[]" class="form-select no-select2 me-2">
                                            <option value="">{{ __('global.select') }}</option>
                                            @foreach ($itemMaster as $itemInfo)
                                                <option value="{{ $itemInfo->id }}">{{ $itemInfo->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2 px-0">
                                    <label class="form-label my-1">{{ __('items.quantity') }}</label>
                                    <input type="text" class="form-control" name="quantity[]" placeholder="{{ __('items.quantity') }}"/>
                                </div>
                                <div class="col-md-2 px-1">
                                    <label for="unit" class="form-label">{{ __('items.unit') }}</label>
                                    <select name="unit[]" class="form-select no-select2 me-2">
                                        <option value="">{{ __('global.select') }}</option>
                                        @foreach ($units as $unit)
                                            <option value="{{ $unit->id }}">{{ $unit->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 px-0">
                                    <label class="form-label">{{ __('items.category') }}</label>
                                    <div class="d-flex align-items-center">
                                        <select name="category[]" class="form-select no-select2 me-2">
                                            <option value="">{{ __('global.select') }}</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                        <button type="button" class="btn btn-outline-secondary me-1 add-item-btn" style="padding: 10px" onclick="addNewItem()">
                                            <i class="fa fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <button type="button" class="btn btn-secondary"class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                    <i class="fa fa-times"></i> &nbsp;{{ __('global.cancel') }}
                                </button>
                                <button type="button" class="btn btn-primary submit-btn" onclick="addFees9Form('fees9-form')">
                                    <i class="fa fa-save"></i> &nbsp;{{ __('global.submit') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
<style>
    .select2-container {
        z-index: 9999;
    }
    #select2-employee-select-container{
        font-size: 14px;
    }
    .select2-results__options li{
        font-size: 14px;
    }
    #form-container select{
        padding: 7px 10px 9px 10px;
        background-position: left .75rem center !important;
    }
    #fees9-form input, #fees9-form select, #fees9-form label{
        color: #000 !important;
    }
    
    .modal-body::-webkit-scrollbar {
        width: 6px;
    }

    .modal-body::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 10px;
    }

    .modal-body::-webkit-scrollbar-thumb:hover {
        background-color: #4063ff;
    }

    .modal-body::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
</style>
@section('js')
    <!-- jquery step -->
    <script src="{{asset('assets/libs/jquery-steps/build/jquery.steps.min.js')}}"></script>

    <!-- form wizard init -->
    <script src="{{asset('assets/dnekcab/js/pages/form-wizard.init.js')}}"></script>
    <script type="text/javascript">

        var rowCounter = 1;
        function addNewItem()
        {
            // Clone the first row (excluding the add button)
            var newRow = $('#form-container .form-row').first().clone();  
            rowCounter++;
            
            newRow.find('input, select').each(function() {
                var name = $(this).attr('name');
                $(this).attr('name', name.replace(/\[\]/, `[${rowCounter}]`)); // Update the name attribute
                $(this).val(''); // Clear input fields
            });
    
            // Update the item number in the new row
            newRow.find('.item-number').text(rowCounter + '-');
    
            // Replace the "add" button with a "remove" button in new rows
            newRow.find('.add-item-btn').removeClass('add-item-btn').addClass('remove-item-btn');
            newRow.find('.remove-item-btn').html('<i class="fa fa-minus"></i>');
            newRow.find('.remove-item-btn').attr('onclick', 'removeItem(this)');  // Set the remove function
            newRow.find('.remove-item-btn').addClass('btn-outline-danger'); // Add class for red button style
            
            // Append new row and reinitialize select2 for the new row
            $('#form-container').append(newRow); 
        }
    
        function removeItem(button)
        {
            // Get the current row index and update the rowCounter accordingly
            var rowIndex = $(button).closest('.form-row').index();
            rowCounter--;
            
            $(button).closest('.form-row').remove();
            
            // Update item numbers for remaining rows
            $('#form-container .form-row').each(function(index) {
                $(this).find('.item-number').text(index + 1 + '-');
            });
        }

        function addFees9Form(formID)
        {
            if(!validateForm(formID)){
                return false;
            }
            var isValid = true;
            var rows = document.querySelectorAll('.form-row');
            
            rows.forEach(function(row, index) {
                var itemName = row.querySelector('[name="item_name[]"]');
                var quantity = row.querySelector('[name="quantity[]"]');
                var unit = row.querySelector('[name="unit[]"]');
                var category = row.querySelector('[name="category[]"]');
                
                // Ensure all fields exist before accessing their properties
                if (itemName && quantity && unit && category) {
                    // Check if any field is empty
                    if (!itemName.value || !quantity.value || !unit.value || !category.value) {
                        isValid = false;

                        // Apply red border to empty fields
                        if (!itemName.value) {
                            itemName.style.border = '1px solid red';
                        } else {
                            itemName.style.border = '';
                        }
                        if (!quantity.value) {
                            quantity.style.border = '1px solid red';
                        } else {
                            quantity.style.border = '';
                        }
                        if (!unit.value) {
                            unit.style.border = '1px solid red';
                        } else {
                            unit.style.border = '';
                        }
                        if (!category.value) {
                            category.style.border = '1px solid red';
                        } else {
                            category.style.border = '';
                        }
                    } else {
                        // Remove red border if fields are filled
                        itemName.style.border = '';
                        quantity.style.border = '';
                        unit.style.border = '';
                        category.style.border = '';
                    }
                }
            })

            // Stop form submission if any field is empty
            if (!isValid) {
                return false;
            }

            $("#"+formID).submit();
        }
      
    </script>
@endsection