@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="'request-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.item_request.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="request-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">
                <form id="request-items-form" action="{{ route('items.request.store') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('items.request_form.create_request_from') }}</h5>
                        <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body py-0">
                        <div class="row" style="padding: 5px 0px 0px 5px; background-image: linear-gradient(#efefef, #FFF, #efefef);">
                            <div class="col">
                                <i class="fa fa-table"></i>&nbsp; <label class="form-label">{{ __('items.info') }}</label>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-4">
                                <label class="form-label">{{ __('items.request_form.itmes_name') }} <span class="required">*</span></label><br>
                                <select name="r_item_name" id="item-master-select" class="form-control select2 me-2">
                                    <option value="">{{ __('global.select') }}</option>
                                    @foreach ($itemsList as $master)
                                        <option value="{{ $master->id }}">
                                            {{ $master->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('r_item_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ __('items.category') }} <span class="required">*</span></label><br>
                                <select name="r_category" class="form-control select2 me-2">
                                    <option value="">{{ __('global.select') }}</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}">
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('r_category')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label for="is_consumable" class="form-label">{{ __('items.is_consumable') }} <span class="required">*</span></label>
                                <select name="r_is_consumable" id="is_consumable" class="form-control select2" onchange="showReceiverSection(this.value)">
                                    <option value="0">{{ __('global.select') }}</option>
                                    <option value="1">{{ __('items.consumable') }}</option>
                                    <option value="2">{{ __('items.none_consumable') }}</option>
                                </select>
                                @error('r_is_consumable')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <label for="quantity" class="form-label">{{ __('items.quantity') }} <span class="required">*</span></label>
                                <input type="number" class="form-control" name="r_quantity" placeholder="{{ __('items.quantity') }}"/>
                                @error('r_quantity')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-8 mb-2">
                                <label for="unit" class="form-label">{{ __('items.unit') }} <span class="required">*</span></label>
                                <select name="r_unit" id="unit-select" class="form-control select2 me-2">
                                    <option value="">{{ __('global.select') }}</option>
                                    @foreach ($units as $unit)
                                        <option value="{{ $unit->id }}" >
                                            {{ $unit->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('r_unit')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mt-2" style="padding: 5px 0px 0px 5px; background-image: linear-gradient(#efefef, #FFF, #efefef);">
                            <div class="col">
                                <i class="fa fa-envelope"></i>&nbsp; <label class="form-label">{{ __('items.request_form.request_info') }}</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="default-section my-2">
                                <div class="col-md-12">
                                    <label class="form-label">{{ __('items.request_form.select_requester') }} <span class="required">*</span></label><br>
                                    <select name="employee" class="form-control select2" disabled>
                                        <option value="">{{ __('global.select') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="department-section my-2 d-none">
                                <div class="col-md-12">
                                    <label class="form-label">{{ __('items.select_department') }} <span class="required">*</span></label><br>
                                    <select name="department_id" id="department-select" class="form-control select2">
                                        <option value="">{{ __('global.select') }}</option>
                                        @foreach ($departments as $dep)
                                            <option value="{{ $dep->id }}">
                                                {{ $dep->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="employee-section my-2 d-none">
                                <div class="col-md-12">
                                    <label class="form-label">{{ __('items.select_employee') }} <span class="required">*</span></label><br>
                                    <select name="employee_id" id="employee-select" class="form-control select2">
                                        <option value="">{{ __('global.select') }}</option>
                                        @foreach ($allEmployee as $employee)
                                            <option value="{{ $employee->id }}">
                                                {{ @$employee->name }} {{ @$employee->last_name }} | {{ @$employee->designation->name }} | {{ @$employee->directorate->name }} | {{ @$employee->department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <label class="form-label">{{ __('items.remarks') }}</label>
                                <textarea name="remarks" rows="1" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fa fa-save"></i> {{ __('global.cancel') }}
                        </button>
                        <button type="button" class="btn btn-primary submit-btn" disabled onclick="addRequestItemForm('request-items-form')">
                            <i class="fa fa-times"></i> {{ __('global.submit') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
<style>
    .select2-container {
        z-index: 9999;
    }
    #select2-employee-select-container{
        font-size: 14px;
    }
    .select2-results__options li{
        font-size: 14px;
    }
</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">
        $(document).ready(function(){
            $(".select2").select2();
        });

        function showReceiverSection(section)
        {
            if(section == 1){
                $(".department-section").removeClass("d-none");
                $(".employee-section").addClass("d-none");
                $(".default-section").addClass("d-none");
                $(".submit-btn").removeAttr("disabled");
            }else if(section == 2){
                $(".employee-section").removeClass("d-none");
                $(".department-section").addClass("d-none");
                $(".default-section").addClass("d-none");
                $(".submit-btn").removeAttr("disabled");
            }else{
                $(".default-section").removeClass("d-none");
                $(".employee-section").addClass("d-none");
                $(".department-section").addClass("d-none");
                $(".submit-btn").attr("disabled", "disabled");
            }
        }

        function addRequestItemForm(formID)
        {
            $("#department-select").next(".select2").find(".select2-selection").attr("style", "");
            $("#employee-select").next(".select2").find(".select2-selection").attr("style", "");
            if(!validateForm(formID)){
                return false;
            }
            let is_consumable = $("#is_consumable").val();
            let dep = $("#department-select").val();
            let emp = $("#employee-select").val();
            if(is_consumable == 1 && dep == ''){
                // $("#department-select").css("border", "1px solid #F00");
                $("#department-select").next(".select2").find(".select2-selection").attr("style", "border: 1px solid #F00 !important");
                return;
            }
            if (is_consumable == 2 && emp == '') {
                $("#employee-select").next(".select2").find(".select2-selection").attr("style", "border: 1px solid #F00 !important");
                return;
            }
            $("#"+formID).submit();
        }
      
    </script>
@endsection