@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-truck"></i> {{$title}}</h3>
                {{-- Giữ id #add_new_status (script bên dưới tạo mới bằng AJAX rồi reload) --}}
                <a id="add_new_status" class="btn btn-primary" 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, nút .save-status[data-id], nút xoá .delete[data-url].
            --}}
            <div id="registration-form" class="crm-list">
                <div class="table-responsive">
                    <table class="table-sortable1 table crm-list-table">
                        <thead>
                        <tr>
                            <th class="crm-list-table__no">STT</th>
                            <th>Tên</th>
                            <th>Cập nhật</th>
                            <th class="crm-list-table__actions">Thao tác</th>
                        </tr>
                        </thead>
                        <tbody id="sortable1">
                        @if(count($trademark))
                            @foreach($trademark 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>{{$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="{{'trademark/'.$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 colspan="4">
                                    <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>
            <!-- table-responsive -->
        </div>
    </div>
@endsection
@section('_script')
<script>
    $(document).on('click', '#add_new_status', function () {
        $.ajax({
            url: '{{route('trademark.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(),
        }
        $.ajax({
            url: 'trademark/'+id,
            data:data,
            method: 'PUT',
            success: function (data) {
                if (data) {
                    location.reload();
                }
            }
        })
    })

    // Tooltip cho nút thao tác
    if ($.fn.tooltip) {
        $('.crm-list-table [data-toggle="tooltip"]').tooltip({trigger: 'hover', placement: 'top'});
    }
</script>
@endsection