@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-body">
            <a href="{{ route('tj-box-map.create') }}" type="button" class="btn btn-primary float-right">
                Add New TJ Box
            </a>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table id="dataTablea" class="table">
                    <thead class="bg-gray-50">
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Coordinates</th>
                            <th>Remarks</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach ($tjBoxes as $tjBox)
                            <tr>
                                <td>{{ $tjBox->id }}</td>
                                <td>{{ $tjBox->name }}</td>
                                <td>{{ $tjBox->type }}</td>
                                <td>
                                    <span title="{{ $tjBox->coordinates }}">
                                        {{ \Illuminate\Support\Str::limit($tjBox->coordinates, 40) }}
                                    </span>
                                </td>
                                <td>{{ $tjBox->remarks }}</td>
                                <td>
                                    <a href="{{ route('tj-box-map.edit', $tjBox->id) }}" class="btn btn-sm btn-primary">
                                        Edit
                                    </a>
                                    {{-- <form action="{{ route('tj-box-map.destroy', $tjBox->id) }}" method="POST"
                                        style="display:inline-block"
                                        onsubmit="return confirm('Are you sure you want to delete this TJ Box?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger">
                                            Delete
                                        </button>
                                    </form> --}}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-3">
                {{ $tjBoxes->links() }}
            </div>
        </div>
    </div>
@endsection