@extends('layouts.auth')

@section('content')
    <div class="container-fluid" id="container-wrapper">
        <div class="d-flex">
            <h1 class="flex-grow-1">Categories</h1>
            <div>
                <a href="{{ route('categories.create') }}" class="btn btn-primary btn-sm my-1 ms-auto"><i class="fas fa-plus-square"></i>
                    Add New</a>
            </div>
        </div>

        @if ($categories->count() > 0)
            <table class="table">
                <thead>
                    <th>#</th>
                    <th>Name</th>
                    <th>Status</th>
                    <th>Order</th>
                    <th colspan="2">Action</th>
                </thead>
                <tbody>
                    @foreach ($categories as $key => $category)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td>
                                <div class="d-flex m-2">
                                    <div>
                                        <img src="{{ $category->image }}" height="60" width="60" class=" rounded-circle mx-auto" alt="{{ $category->name }}">
                                    </div>
                                    <div>
                                        <a href="{{ route('categories.show', $category->id) }}" class="nav-link">
                                            {{ $category->name }}
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if ($category->status)
                                    <p class="text-primary">Active</p>
                                @else
                                    <p class="text-danger">In Active</p>
                                @endif
                            </td>
                            <td>
                                {{ $category->order }}
                            </td>
                            <td>
                                <div class="d-flex">
                                    <div>
                                        <a href="{{ route('categories.edit', $category->id) }}" class="btn btn-secondary btn-sm mx-1">
                                            <span>
                                                edit
                                            </span>
                                        </a>
                                    </div>

                                    <form action="{{route('categories.destroy', $category->id)}}" method="POST">
                                        @csrf
                                        <input type="hidden" name="_method" value="DELETE">
                                        <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                    </form>

                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <div class="card card-body m-2">
                No Category Found
            </div>
        @endif
    </div>
@endsection