@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 - Add Category'"
                                :buttonLabel="__('global.add')"
                                :buttonClass="'addNewCategoryBtn'"
                                :modal="'add-category-model'"
                            />
                            <div class="table-responsive">
                                <table class="table table-hover table-bordered fs-11 custom-talbe">
                                    <thead class="sticky-top shadow-sm">
                                        <tr>
                                            <th style="width: 5%" class="text-center">#</th>
                                            <th>{{ __('employee.name')}}</th>
                                            @if(auth()->user()->hasPermissionTo('Items - Add Category'))
                                                <th colspan="3" class="text-center" style="width: 10%;"><i class="bx bx-cog"></i></th>
                                            @endif
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if($category->isEmpty())
                                            <tr>
                                                <td colspan="3">
                                                    <x-record-not-found />
                                                </td>
                                            </tr>
                                        @else
                                            @php $counter = 1; @endphp
                                            @foreach($category as $info)
                                                <tr id="tr-{{ $info->id }}">
                                                    <td class="text-center">
                                                        <button type="button" class="btn btn-sm text-center btn-primary lh-10">{{$counter++}}</button>
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control d-none" id="name-input" value="{{ $info->name }}">
                                                        <span id="v-name">{{$info->name}}</span>
                                                    </td>
                                                    <td style="text-align:center;">
                                                        <button class="btn btn-outline-primary btn-sm show-edit-btn" onclick="showEdit({{$info->id}})">
                                                            <i class="fa fa-pen"></i>
                                                        </button>
                                                        <button class="btn btn-outline-success btn-sm edit-btn d-none" onclick="updateCategory({{$info->id}})">
                                                            <i class="fa fa-save"></i>
                                                        </button>
                                                        <button class="btn btn-outline-danger btn-sm hide-edit-btn d-none" onclick="hideEdit({{$info->id}})">
                                                            <i class="fa fa-times"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

        </div> <!-- container-fluid -->
    </div>
    <!-- Add Unit  modal -->
    <div class="modal fade" id="add-category-model" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('items.add_category') }}</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">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-12">
                                <label class="form-label">{{ __('items.category_name') }} <span class="required">*</span></label>
                                <input type="text" class="form-control" id="category-name"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"class="btn-close" data-bs-dismiss="modal" aria-label="Close">{{ __('global.cancel') }}</button>
                    <button type="button" class="btn btn-primary" onclick="addCtegory()">{{ __('global.submit') }}</button>
                </div>
            </div>
        </div>
    </div>
{{-- category model --}}
@endsection
<style>
    .select2-container {
        z-index: 9999;
    }
    .operation-btn{
        padding: 5px 5px 3px 5px;
    }
    .custom-talbe td{
        vertical-align: middle;
    }
</style>
@section('js')
    <script type="text/javascript">
    function addCtegory(formID)
    {
        $("#category-name").css("border", "");
        let name = $("#category-name").val();
        if(name == ""){
            $("#category-name").css("border", "1px solid #F00");
            return;
        }
        $.ajax({
            url: "{{ route('category.store') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                name: name,
            },
            success: function(response) {
                window.location.reload();
            },
            error: function(xhr, status, error) {
                toastr.error("Error In Update Operation");
            }
        });
    }
    function showEdit(id)
    {
        $("#tr-"+id+" span").addClass("d-none");
        $("#tr-"+id+" .show-edit-btn").addClass("d-none");
        $("#tr-"+id+" .edit-btn").removeClass("d-none");
        $("#tr-"+id+" .hide-edit-btn").removeClass("d-none");
        $("#tr-"+id+" input").removeClass("d-none");
    }
    function hideEdit(id)
    {
        $("#tr-"+id+" span").removeClass("d-none");
        $("#tr-"+id+" .show-edit-btn").removeClass("d-none");
        $("#tr-"+id+" .edit-btn").addClass("d-none");
        $("#tr-"+id+" .hide-edit-btn").addClass("d-none");
        $("#tr-"+id+" input").addClass("d-none");
    }
    function updateCategory(id)
    {
        $("#tr-"+id+" #name-input").css("border", "");
        let name = $("#tr-"+id+" #name-input").val();
        if(name == ""){
            $("#tr-"+id+" #name-input").css("border", "1px solid #F00");
            return;
        }
        $.ajax({
            url: "{{ route('category.update') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                id: id,
                name: name,
            },
            success: function(response) {
                // Handle the success response
                if(response.status == 1){
                    $('#tr-'+id+' #v-name').html(name);
                    toastr.success(response.message);
                    hideEdit(id)
                } else {
                    toastr.error("Error In Update Operation");
                }
            },
            error: function(xhr, status, error) {
                toastr.error("Error In Update Operation");
            }
        });
    }
    </script>
@endsection