@extends('admin.layout.admin')
@section('content')
    <style>
        .overflow-hidden-text {
            white-space: nowrap; /* Prevent text wrapping */
            overflow: hidden; /* Hide overflowing text */
            text-overflow: ellipsis; /* Add ellipsis (...) for hidden text */
        }
    </style>
    <div class="card">
        <div class="content-page">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6"></div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#" style="color: #666;">Get In Touch</a></li>
                            <li class="breadcrumb-item active" aria-current="page" style="color: #333; font-weight: bold;">
                                Dashboard
                            </li>
                        </ol>
                    </div>
                </div>

                <h2>Products</h2>
                <div style="display: flex; justify-content: right; margin-bottom: 10px;">
                    <a href="{{ route('admin.product.create') }}" class="btn btn-primary"
                       style="font-size: 1rem; padding: 10px 20px; background-color: black; color: white; border: none;">
                        Add New
                    </a>
                </div>

                <table id="product_id" class="ll-table table table-hover text-nowrap">
                    <thead>
                    <tr>

                        <th>Product Name</th>
                        <th>Category</th>
                        <th>Short Description</th>
                        <th>Image</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($products as $product)
                        <tr>

                            <td>{{ $product->name }}</td>
                            <td>{{ $product->category->cate_title ?? ''}}</td> <!-- Assuming category relation -->
                            <td class="overflow-hidden-text">
                                {{ substr($product->description, 0, 50) }}{{ strlen($product->description) > 50 ? '...' : '' }}
                            </td>                            <td>
                                <img src="{{ $product->getFirstMediaUrl('product_image') }}" class="custom-img" style="width: 100px;">
                            </td>
                            <td>
                                <div class="d-flex align-items-center py-2 pr-3">
                                    <a href="{{ route('admin.product.edit', $product->id) }}" class="btn bg-info ml-2">
                                        <i class="fas fa-edit"></i>
                                    </a>

                                    <form action="{{ route('admin.product.destroy', $product->id) }}" method="post">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn bg-danger" type="submit"><i class="fas fa-trash"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

            </div>
        </div>
    </div>



@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('#product_id').dataTable();
    });
</script>
@endsection