@extends('layouts.admin.app')
@section('title', 'Data ' . $title)
@section('content')

    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-end mb-3">
                <a href="{{ route($route . 'create') }}" class="btn btn-primary text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus"
                        viewBox="0 0 16 16">
                        <path
                            d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                    </svg>
                    {{ $title }}
                </a>
            </div>
            <table data-toggle="table" data-search="true" class="overflow-auto table-responsive">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Title</th>
                        <th>Description</th>
                        <th><i>Last Edit</i></th>
                        <th><i>Edited by</i></th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($datas as $data)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $data->title }}</td>
                            <td>{!! $data->desc !!}</td>
                            <td>{{ $data->updated_at->diffForHumans() }}</td>
                            <td>{{ $data->updated_by ?? '-' }}</td>
                            <td>
                                <a href="{{ route($route . 'edit', $data->id) }}" class="btn btn-warning mb-2"
                                    title="Edit"><i class="fas fa-edit"></i></a>
                                <a href="{{ route($route . 'show', $data->id) }}" class="btn btn-info mb-2"
                                    title="Show"><i class="fas fa-eye"></i></a>
                                <a href="{{ route('admin.pricing.index', $data->id) }}" class="btn btn-success mb-2"
                                    title="Pricing"><i class="fas fa-dollar-sign"></i></a>
                                <a href="{{ route('admin.product-feature.index', $data->id) }}"
                                    class="btn btn-secondary mb-2" title="Feature"><i class="fas fa-box"></i></a>
                                <form action="{{ route($route . 'destroy', $data->id) }}" method="post" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-danger btn-delete mb-2"
                                        data-id="{{ $data->id }}" title="Delete">
                                        <i class="far fa-trash-alt"></i>
                                    </button>
                                </form>
                            </td>
                            {{-- <td>
                        <div class="dropdown">
                            <a class="btn btn-sm dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                                </svg>
                            </a>

                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                <li><a class="dropdown-item" href="{{ route($route.'edit', $data->id) }}">Edit</a></li>
                                <li><a class="dropdown-item" href="{{ route($route . 'show', $data->id) }}">Detail</a></li>
                                <li><a class="dropdown-item" href="{{ route('admin.pricing.index', $data->id) }}">Pricing</a></li>
                                <li><a class="dropdown-item" href="{{ route('admin.product-feature.index', $data->id) }}">Feature</a></li>
                                <li>
                                    <form action="{{ route($route.'destroy', $data->id) }}" method="post" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="btn btn-delete"
                                            data-id="{{ $data->id }}">
                                            Delete
                                        </button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </td> --}}
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="mt-3 d-flex justify-content-end">
                {{ $datas->links() }}
            </div>
        </div>
    </div>
@endsection