@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="'1'"
                                :pageTitle="$page_title"
                            />

                            <div class="card">
                                <div class="card-body">
                                    <div class="card card-primary">
                                        <div class="card-body p-0">
                                            <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' => $categories],
                                                            ['type' => 'text', 'customClass' => 'datepickers'],
                                                        ],
                                                        [
                                                            ['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',
                                                            'created_date',
                                                        ],
                                                        [
                                                            'item_status',
                                                            'is_consumable',
                                                            'pagination_searh_name',
                                                        ]
                                                    ]"
                                                    :ids="[
                                                        [
                                                            'term_searh_id',
                                                            'category',
                                                            'created_date',
                                                        ],
                                                        [
                                                            'item_status_id',
                                                            'is_consumable_id',
                                                            'pagination_searh_id',
                                                        ]
                                                    ]"
                                                    :placeholders="[
                                                        [
                                                            __('global.search'),
                                                            __('items.category'),
                                                            __('items.request_form.recieve_date'),
                                                        ],
                                                        [
                                                            __('items.item_status'),
                                                            __('items.is_consumable'),
                                                            key($paginationArray) ? key($paginationArray) : __('global.pagination')
                                                        ]
                                                    ]"
                                                    form-action="{{ route('items.collection.custodians.view', ['id' => $encID]) }}"
                                                    report-type="both" 
                                                    :lang="$lang"
                                                />
                                                <!-- end Search -->
                                            </div>
                                            <div class="row pt-3 pb-1 px-2">
                                                <label class="custom-label">
                                                    <i class="fa fa-list"></i>&nbsp; {{ __('items.list') }} <strong>{{ $directorates->name }}</strong>
                                                </label>
                                            </div>
                                            <div class="card-body p-0" id="data_content">
                                                @include('dnekcab.nimda.items.fetch_directorate_items.collection_list')
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

        </div> <!-- container-fluid -->
    </div>
@endsection
<style>
    .custom-table{
        border-bottom: 3px ridge #EEE;
        border-top: 3px ridge #EEE;
    }
    .custom-table td{
        padding: 5px 10px !important;
    }
    .custom-table .custom-label{
        font-weight: bold;
    }
    .tooltip-container {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .tooltip-text {
        visibility: hidden;
        width: 150px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 8px;
        border-radius: 5px;
        position: absolute;
        z-index: 1000;
        bottom: 120%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
    }

    .tooltip-container:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }
</style>
@section('js')
    <script type="text/javascript">
    function addCustodian(formID)
    {
        let custodian = $("#custodian").val();
        let jobType = $("#job_type").val();
        if(custodian == "0"){
            $("#"+formID+" .select2-selection").css("border", "1px solid #F00");
            return;
        }else{
            $("#"+formID+" .select2-selection").css("border", "");
        }

        if(jobType == ""){
            $("#job_type").css("border", "1px solid #F00");
            return;
        }else{
            $("#job_type").css("border", "");
        }
        $("#"+formID).submit();
    }
    </script>
@endsection