@extends('main.layouts.app')
@section('content')

<style>
    .breadcrumb-item+.breadcrumb-item:before {
      display:none
    }
</style>
<div class="page-header">
    <h2 class="mb-0"> Categories Page </h2>
    <ol class="breadcrumb align-items-center">
        <li class="breadcrumb-item"> <a class="" href="dashboard"> Home / </a> </li>
        <li class="breadcrumb-item"> <a class="btn btn-primary ml-1" href="{{ route('category.show') }}">Add Category</a></li>
    </ol>
    {{-- <div class="row  white-bg page-heading">
        <div class="d-flex ">

        </div>

    </div> --}}
</div>


<div class="card">
    <div class="card-body">
        <div class="wrapper wrapper-content">
            <div class="animated fadeInUp">
                <table id="photos_table" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Category Name</th>
                            <th>Slug</th>
                            <th>Banner Image</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($categories as $data)
                            <tr>
                                <td>{{ $data->id }}</td>
                                <td>{{ $data->category_name }}</td>
                                <td>{{ $data->slug_url }}</td>
                                <td><img height="100px;" src="{{ $data->banner_image }}" /></td>
                                <td class="no-sort no-click" id="bread-actions">
                                    <a href="{{ route('categories.edit', $data->id) }}"
                                        class="btn btn-sm btn-primary">Edit</a>
    
                                    <a href="{{ route('categories.delete', $data->id) }}"
                                        class="btn btn-sm btn-danger">Delete</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

    <script>
        $(document).ready(function() {
            $('#photos_table').DataTable();
        });
    </script>

@endsection