@extends('layout.app')
<style>
    .txt-dotted{
        border: 1px solid transparent;
        border-bottom: dotted 1px #999;
        width: 100%;
        padding: 0px;
    }
</style>
@section('content')
    <div class="col-md-12 col-lg-12">
        <div class="card crm-list-card">
            <div class="card-header crm-list-header">
                <h3 class="card-title"><i class="fas fa-theater-masks"></i> {{$title}}</h3>
                {{-- Giữ hook JS #add_new_status (tạo dòng mới rồi reload trang) --}}
                <a class="btn btn-primary" id="add_new_status" href="javascript:void(0)"><i class="fa fa-plus-circle"></i> Tạo mới</a>
            </div>
            {{--
                Bảng sửa trực tiếp - style dùng chung .crm-list-table (public/css/crm-2026/components.css).
                Giữ hook JS: tr[data-id], input .name, textarea .description, nút .save-status[data-id], nút .delete[data-url].
            --}}
            <div id="registration-form">
                <div class="crm-list">
                    <div class="table-responsive">
                        <table class="table crm-list-table">
                            <thead>
                            <tr>
                                <th class="crm-list-table__no">STT</th>
                                <th>Tên</th>
                                <th>Mô tả</th>
                                <th>Cập nhật</th>
                                <th class="crm-list-table__actions">Thao tác</th>
                            </tr>
                            </thead>
                            <tbody id="sortable1">
                            @if(count($genitives))
                                @foreach($genitives as $k =>$item)
                                    <tr data-id="{{$item->id}}">
                                        <td class="crm-list-table__no">{{$k+1}}</td>
                                        <td><input type="text" class="name txt-dotted" value="{{$item->name}}"></td>
                                        <td>
                                            <textarea rows="2" type="text" class="description txt-dotted">{{$item->description}}</textarea>
                                        </td>
                                        <td>{{$item->updated_at}}</td>
                                        <td class="crm-list-table__actions">
                                            <a class="crm-action-btn crm-action-btn--save save-status" href="javascript:void(0)"
                                               data-id="{{$item->id}}" data-toggle="tooltip" title="Lưu" aria-label="Lưu {{$item->name}}">
                                                <i class="fa fa-save"></i>
                                            </a>
                                            <a class="crm-action-btn crm-action-btn--delete delete" href="javascript:void(0)"
                                               data-url="{{'genitives/'.$item->id}}" data-toggle="tooltip" title="Xoá" aria-label="Xoá {{$item->name}}">
                                                <i class="fas fa-trash-alt"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td id="no-data" colspan="5">
                                        <div class="crm-list-empty">
                                            <i class="fas fa-folder-open"></i>
                                            <span>Không tồn tại dữ liệu</span>
                                        </div>
                                    </td>
                                </tr>
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- table-responsive -->
        </div>
    </div>
@endsection
@section('_script')
<script>
    // Tooltip cho nút thao tác trong bảng
    if ($.fn.tooltip) {
        $('.crm-list-table [data-toggle="tooltip"]').tooltip({trigger: 'hover', placement: 'top'});
    }

    $(document).on('click', '#add_new_status', function () {
        $.ajax({
            url: '{{route('genitives.store')}}',
            method: 'POST',
            success: function (data) {
                if (data) {
                    location.reload();
                }
            }
        })
    })

    $(document).on('click', '.save-status', function () {
        let id = $(this).data('id');
        let data = {
            name :$(this).closest('tr').find('.name').val(),
            description :$(this).closest('tr').find('.description').val(),
        }
        $.ajax({
            url: 'genitives/'+id,
            data:data,
            method: 'PUT',
            success: function (data) {
                if (data) {
                    location.reload();
                }
            }
        })
    })
</script>
@endsection