@extends('admin.layouts.app')
@section('title',get_setting('site_name').' | Asset Requisition ')
@section('content')
    <style>
        .select2-selection__rendered {
            line-height: 31px !important;

        }

        .select2-container .select2-selection--single {
            height: 35px !important;

        }

        .select2-selection__arrow {
            height: 34px !important;

        }
    </style>

    <div class="row">

        <div class="col-md-12 col-lg-12 mx-auto mb-3 mt-3">

            <div class="card">
                <div class="card-header gutters-10">
                    <div class="row w-100">
                        <div class="col-md-6">
                            <h5>Asset Requisition</h5>
                        </div>
                        <div class="col-md-6 text-right">
                            @can('Attendance-setup')
                                <button class="btn btn-primary" onclick="attendence_setup_add()"><i
                                        class="las la-plus"></i>&nbsp;Add New
                                </button>
                            @endcan
                        </div>
                    </div>

                </div>

                <div class="card-body">
                    <table class="table aiz-table">
                        <thead>
                        <tr>
                            <th>Employee Name</th>
                            <th>Emp Code</th>
                            <th>Designation</th>
                            <th>Branch</th>
                            <th>Asset Category</th>
                            <th>Asset</th>
                            <th>description</th>
                            <th>Quantity</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($asset_items as $item)
                            <tr>
                                <td>
                                    @if(!empty($item->staff)&& !empty($item->staff->user))
                                        {{$item->staff->user->name}}
                                    @endif
                                </td>

                                <td>
                                    @if(!empty($item->staff)&& !empty($item->staff->user))
                                        {{$item->staff->user->id}}
                                    @endif
                                </td>

                                <td>
                                    @if(!empty($item->staff)&& !empty($item->staff->designation))
                                        {{$item->staff->designation->name}}
                                    @endif
                                </td>
                                <td>
                                    @if(!empty($item->staff)&& !empty($item->staff->warehouse))
                                        {{$item->staff->warehouse->name}}
                                    @endif
                                </td>
                                <td>{{!empty($item->asset_category->parentCategory)?$item->asset_category->parentCategory->name:$item->asset_category->name}}</td>
                                <td>{{empty($item->asset_category->parentCategory)?'-':$item->asset_category->name}}</td>
                                <td>
                                    {{$item->description}}
                                </td>
                                <td>
                                    {{$item->qty}}
                                </td>
                                <td>
                                    <button class="btn btn-primary" type="button" name="" id=""
                                            onclick="attendance_setup_update({{$item->id}})">
                                        <i class="fas fa-edit"></i>
                                    </button>

                                    <button class="btn btn-info" type="button"
                                            onclick="asset_requisition_approval({{$item->id}})"><i
                                            class="fas fa-play"></i>
                                    </button>
                                    <a href="javascript:void(0)"
                                       data-href="{{route('asset.requisition.destroy',$item->id)}}"
                                       class="btn btn-danger btn-sm delete_modal"><i
                                            class="fas fa-trash"></i></a>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade" id="Attendance_setup_modal">
        <form action="{{route('employee.asset.requisition.store')}}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title h6">{{__('New Asset Request')}}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label for="">{{__('Employee')}}<span style="color: red">*</span></label>
                                <select class="form-control select2" name="staff_id" id="admin_requisition_staff_id" required>
                                    <option value="">{{__('Select Employee')}}</option>
                                    @foreach(\App\Models\Staff::with('user')->get() as $staff)
                                        @if(($staff->user?->is_active ?? 0) == 1)
                                            <option
                                                value="{{$staff->id}}">{{!empty($staff->user)?$staff->user->name:'-'}}
                                                ({{!empty($staff->user)?$staff->user->id:'-'}})
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <p class="text-muted small mb-2">{{ __('One or more asset types; quantity per line.') }}</p>
                        <div id="admin-requisition-lines">
                            <div class="requisition-row row mb-2 align-items-end">
                                <div class="col-md-5">
                                    <label>{{__('Asset Category')}}<span style="color: red">*</span></label>
                                    <select class="form-control requisition-parent" name="parent_id[]" required>
                                        <option value="">{{__('Select Asset Category')}}</option>
                                        @foreach($categories as $category)
                                            <option value="{{$category->id}}">{{$category->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label>{{__('Asset type')}}</label>
                                    <select class="form-control asset-sub" name="sub_id[]">
                                        <option value="">{{__('Select Asset')}}</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label>{{__('Qty')}}</label>
                                    <input class="form-control" type="number" name="qty[]" min="1" max="100" value="1" required>
                                </div>
                                <div class="col-md-1 text-md-right pt-md-4">
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-admin-requisition-line" disabled title="{{__('Remove line')}}">&times;</button>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary mb-3" id="btn-add-admin-requisition-line">{{__('Add another asset type')}}</button>
                        <div class="row mb-3" id="asset_others_featured">
                            <div class="col-12">
                                <label for="">{{__('Asset Requisition')}}</label>
                                <textarea class="form-control" name="description" id="" cols="30" rows="3"></textarea>
                            </div>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Cancel')}}</button>
                        <button type="submit" id="" class="btn btn-primary">{{__('Save')}}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade" id="Attendance_setup_update_modal">
        <form action="{{route('asset.requisition.update')}}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title h6">{{__('Asset Requisition Update')}}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body" id="asset_requisition_edit">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Cancel')}}</button>
                        <button type="submit" id="" class="btn btn-primary">{{__('Update')}}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>


    <div class="modal fade" id="asset_assign_history">
        <form action="{{route('asset.requisition.list.approval.store')}}" method="POST" id="asset-approval-form"
              onsubmit="return validateAssetApprovalForm();">
            @csrf
            <div class="modal-dialog modal-lg lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title h6">{{__('Asset Requisition Approve')}}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body" id="asset_assign_history_show">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Close')}}</button>
                        <button type="submit" class="btn btn-primary">{{__('Update')}}</button>

                    </div>
                </div>
            </div>
        </form>
    </div>

@endsection

@section('script')
    <script !src="">

        function adminRequisitionRefreshRemoveState() {
            var n = $('#admin-requisition-lines .requisition-row').length;
            $('.btn-remove-admin-requisition-line').prop('disabled', n <= 1);
        }

        function attendence_setup_add() {
            $('#Attendance_setup_modal').modal('show');
            adminRequisitionRefreshRemoveState();
        }

        $(document).on('change', '#Attendance_setup_modal .requisition-parent', function () {
            var row = $(this).closest('.requisition-row');
            var sub = row.find('.asset-sub');
            var category_id = $(this).val();
            if (category_id !== '') {
                $.ajax({
                    method: 'GET',
                    url: '{{route('get.asset.sub.categories')}}',
                    data: {category_id: category_id},
                    success: function (res) {
                        if (res) {
                            sub.html(res);
                        }
                    }
                });
            } else {
                sub.html('<option value="">{{__('Select Asset')}}</option>');
            }
        });

        $('#btn-add-admin-requisition-line').on('click', function () {
            var $row = $('#admin-requisition-lines .requisition-row:first').clone();
            $row.find('select').val('');
            $row.find('.asset-sub').html('<option value="">{{__('Select Asset')}}</option>');
            $row.find('input[type=number]').val(1);
            $('#admin-requisition-lines').append($row);
            adminRequisitionRefreshRemoveState();
        });

        $(document).on('click', '.btn-remove-admin-requisition-line', function () {
            if ($('#admin-requisition-lines .requisition-row').length <= 1) return;
            $(this).closest('.requisition-row').remove();
            adminRequisitionRefreshRemoveState();
        });

        function validateAssetApprovalForm() {
            var decision = document.querySelector('#asset_assign_history input[name="customRadio"]:checked');
            if (decision && decision.value === '3') {
                return true;
            }
            var needEl = document.getElementById('approval-qty-needed');
            var need = needEl ? parseInt(needEl.value, 10) : 1;
            if (isNaN(need) || need < 1) {
                need = 1;
            }
            var selected = document.querySelectorAll('#asset_assign_history .asset-pick-cb:checked').length;
            if (selected !== need) {
                alert('Please select exactly ' + need + ' asset(s) for approval.');
                return false;
            }
            return true;
        }

        function attendance_setup_update(id) {
            $.ajax({
                url: '{{route('asset.requisition.edit')}}',
                type: 'html',
                method: 'GET',
                data: {id: id},
                success: function (res) {
                    if (res) {
                        $('#asset_requisition_edit').html(res);
                        $('#Attendance_setup_update_modal').modal('show');
                    }

                }
            });


        }

        function get_sub() {
            var category_id = $('#asset_category_id').val();
            if (category_id !== '') {
                $.ajax({
                    method: 'Get',
                    type: 'html',
                    url: '{{route('get.asset.sub.categories')}}',
                    data: {category_id: category_id},
                    success: function (res) {
                        if (res) {
                            $('#asset_sub_categories').html(res);
                        }
                    }
                });
            } else {
                $('#asset_sub_categories').html('<option value="">Select Asset</option>');

            }


        }

        function get_subs() {
            var category_id = $('#asset_category_ids').val();
            if (category_id !== '') {
                $.ajax({
                    method: 'Get',
                    type: 'html',
                    url: '{{route('get.asset.sub.categories')}}',
                    data: {category_id: category_id},
                    success: function (res) {
                        if (res) {
                            $('#asset_sub_categoriess').html(res);
                        }
                    }
                });
            } else {
                $('#asset_sub_categoriess').html('<option value="">Select Asset</option>');

            }


        }

        function asset_requisition_approval(id) {
            $.ajax({
                url: '{{route('asset.requisition.list.approval')}}',
                method: 'GET',
                type: 'html',
                data: {id: id},
                success: function (res) {
                    $('#asset_assign_history_show').html(res);
                    $('#asset_assign_history').modal('show');
                }
            })
        }

    </script>
@endsection