@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="row">
                                                <label class="custom-label"><i class="fa fa-info-circle"></i>&nbsp;{{ __('items.employee_info') }}</label>
                                            </div>
                                            <table class="table custom-table">
                                                <tr>
                                                    <td style="width: 10%">
                                                        <label class="custom-label">{{ __('employee.name') }}</label>
                                                    </td>
                                                    <td style="width: 70%">
                                                        {{ $viewEmployee->name }} {{ $viewEmployee->last_name }}
                                                    </td>
                                                    <td rowspan="4" class="text-center">
                                                        @php
                                                            $photoPath = public_path('assets/attachment/employee/photo/' . $viewEmployee->image);
                                                        @endphp
                                                        <img src="{{ $viewEmployee->image && file_exists($photoPath) ? asset('assets/attachment/employee/photo/' . $viewEmployee->image) : asset('assets/img/default-img.png') }}" alt="{{ $viewEmployee->name }}" style="width: 120px; height: 120px; border: 3px double #929292; border-radius: 50%;">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <label class="custom-label">{{ __('employee.id_number') }}</label>
                                                    </td>
                                                    <td>
                                                        {{ $viewEmployee->id_number }}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <label class="custom-label">{{ __('employee.phone') }}</label>
                                                    </td>
                                                    <td>
                                                        {{$viewEmployee->id_number }}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <label class="custom-label">{{ __('items.custodian.job_type') }}</label>
                                                    </td>
                                                    <td>
                                                        {{$viewEmployee->job_type }}
                                                    </td>
                                                </tr>
                                            </table>
                                            <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.employees.view', ['id' => $encID]) }}"
                                                    report-type="both" 
                                                    :lang="$lang"
                                                />
                                                <!-- end Search -->
                                            </div>
                                            <div class="row pt-3 pb-1">
                                                <label class="custom-label"><i class="fa fa-list"></i>&nbsp;{{ __('items.list') }}</label>
                                            </div>
                                            <div class="card-body p-0" id="data_content">
                                                @include('dnekcab.nimda.items.fetch_employee_items.employee_list')
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

        </div> <!-- container-fluid -->
    </div>
    <!-- return-item-model  modal -->
    <div class="modal fade" id="return-item-model" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-exchange-alt"></i> {{ __('items.return_items_to_custodians') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-0">
                    <form id="return-items-form" action="{{ route('items.collection.employees.update') }}" method="POST">
                        @csrf
                        <input type="hidden" name="employee_id" value="{{ encryption($viewEmployee->id) }}">
                        <div class="row">
                            <div class="col-md-12">
                                <label class="form-label">{{ __('items.custodian.info') }}</label>
                            </div>
                            <div class="col-md-12" id="custodian-info"><i class="fa fa-spinner fa-spin"></i></div>
                        </div>
                        <div class="row">
                            <label class="form-label">{{ __('items.item_status') }}<span class="required">*</span></label>
                            <select name="item_status" id="item_status" class="form-control">
                                <option value="">{{ __('global.select') }}</option>
                                <option value="new">{{ __('items.new') }}</option>
                                <option value="use">{{ __('items.use') }}</option>
                                <option value="inactive">{{ __('items.inactive') }}</option>
                                <option value="defective">{{ __('items.defective') }}</option>
                            </select>
                        </div>
                        <div class="row mt-2">
                            <label class="form-label">{{ __('items.distribution_date') }}<span class="required">*</span></label>
                            <input type="text" name="returned_date" id="returned_date" value="{{ getHijriDate(now()) }}" autocomplete="off" class="form-control datepickers">
                        </div>
                        <div class="row mt-2">
                            <div class="col">
                                <button type="button" class="btn btn-secondary"class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                    <i class="fa fa-times-circle"></i> {{ __('global.cancel') }}
                                </button>
                                <button type="button" class="btn btn-primary" onclick="returnItems('return-items-form')">
                                    <i class="fa fa-check-circle"></i> {{ __('global.submit') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- return-item-model model --}}
@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 getCustodianInfo(item_id, record_id)
    {
        $.ajax({
            url: "{{ route('items.getCustodianInfo') }}",
            method: "GET",
            data: {
                "_token": "{{ csrf_token() }}",
                item_id: item_id,
                record_id: record_id
            },
            success: function(response) {
                $("#custodian-info").html(response);
                $("#return-item-model").modal('show');
            },
            error: function(xhr, status, error) {
                toastr.error("Error In Operation");
            }
        });
    }

    function returnItems(formID)
    {
        let itemStatus = $("#item_status").val();
        let returnedDate = $("#returned_date").val();
        if(itemStatus == ""){
            $("#item_status").css("border", "1px solid #F00");
            return;
        }else{
            $("#item_status").css("border", "");
        }

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