@extends('admin.layouts.app')

@section('title', 'Categories')

@section('content')

<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h3 class="mb-1">
                Categories
            </h3>

            <p class="text-muted mb-0">
                Manage all categories
            </p>

        </div>

        <a href="{{ route('admin.categories.create') }}"
           class="btn btn-primary">

            <i class="bi bi-plus-lg"></i>

            Add Category

        </a>

    </div>

    @if(session('success'))

        <div class="alert alert-success">

            {{ session('success') }}

        </div>

    @endif

    <div class="card shadow-sm border-0">

        <div class="card-body">

            <table class="table table-striped align-middle" id="categoryTable">

                <thead>

                    <tr>

                        <th width="70">
                            ID
                        </th>

                        <th width="90">
                            Image
                        </th>

                        <th width="70">
                            Icon
                        </th>

                        <th>
                            Name
                        </th>

                        <th width="120">
                            Properties
                        </th>

                        <th width="120">
                            Status
                        </th>

                        <th width="120">
                            Sort
                        </th>

                        <th width="180">
                            Actions
                        </th>

                    </tr>

                </thead>

                <tbody>

                @foreach($categories as $category)

                    <tr>

                        <td>

                            {{ $category->id }}

                        </td>

                        <td>

                            @if($category->image)

                                <img
                                    src="{{ asset('storage/'.$category->image) }}"
                                    width="60"
                                    class="rounded">

                            @endif

                        </td>

                        <td>

                            @if($category->icon)

                                <i class="{{ $category->icon }} fs-4"></i>

                            @endif

                        </td>

                        <td>

                            {{ optional($category->translation())->name }}

                        </td>

                        <td>

                            {{ $category->properties_count }}

                        </td>

                        <td>

                            @if($category->status)

                                <span class="badge bg-success">

                                    Active

                                </span>

                            @else

                                <span class="badge bg-danger">

                                    Disabled

                                </span>

                            @endif

                        </td>

                        <td>

                            {{ $category->sort_order }}

                        </td>

                        <td>

                            <a
                                href="{{ route('admin.categories.edit',$category) }}"
                                class="btn btn-warning btn-sm">

                                <i class="bi bi-pencil"></i>

                            </a>

                            <form
                                action="{{ route('admin.categories.destroy',$category) }}"
                                method="POST"
                                class="d-inline">

                                @csrf

                                @method('DELETE')

                                <button
                                    class="btn btn-danger btn-sm"
                                    onclick="return confirm('Delete category?')">

                                    <i class="bi bi-trash"></i>

                                </button>

                            </form>

                        </td>

                    </tr>

                @endforeach

                </tbody>

            </table>

        </div>

    </div>

    <div class="mt-4">

        {{ $categories->links() }}

    </div>

</div>

@endsection


@push('scripts')

<script>

new DataTable('#categoryTable');

</script>

@endpush