@extends('dashboard.layouts.master')
@section('title', 'Categories')
@section('content')
<div class="row">
    <div class="card">
        <div class="card-header">
            <h2 class="card-title mb-0">Category List</h2>
        </div>
        <div class="row">
            <div class="col-md-6">
                <form method="GET" action="">
                    <div class="input-group">
                        <input type="text" name="search" class="form-control" placeholder="Search by name"
                            value="{{ request('search') }}">
                        <button class="btn btn-primary" type="submit">Search</button>
                        <a href="{{ route('dashboard.categories.index') }}" class="btn btn-secondary">Reset</a>
                    </div>
                </form>
            </div>
            <div class="col-md-6">
                @can('create-categories')
                <a href="{{route('dashboard.categories.create')}}" class="btn btn-primary float-end">Add Category</a>
                @endcan
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col" width="5%">ID</th>
                            <th scope="col" width="15%">Image</th>
                            <th scope="col" width="5%">Icon</th>
                            <th scope="col" width="10%">Name</th>
                            <th scope="col">Description</th>
                            <th scope="col" width="5%">Details</th>
                            <th scope="col" width="5%">Created At</th>
                            <th scope="col" width="7%">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($categories as $key => $category)
                        <tr>
                            <td>{{$categories->firstItem() + $key}}</td>
                            <td>
                                <img src="{{ asset('storage/'.$category->thumbnail) }}" alt="" width="100" height="100">
                            </td>
                            <td>
                                @if($category->icon)
                                    <img src="{{ asset('storage/'.$category->icon) }}" alt="Icon" style="max-width:50px;">
                                @else
                                    <span class="text-muted">No Icon</span>
                                @endif
                            </td>
                            <td><a href="{{ route('dashboard.categories.show', $category->id) }}">{{ $category->name }}</a></td>
                            <td>{!! $category->description ?: 'NA' !!}</td>
                            <td>
                                @if($category->products_count > 0)
                                    <span class="badge bg-success p-2">{{ $category->products_count }} Products</span>
                                @else
                                    <span class="badge bg-secondary">No Products</span>
                                @endif

                                @if($category->status)
                                    <span class="badge p-2 mt-2" style="background-color: #0d68df">Active</span>
                                @else
                                    <span class="badge bg-danger p-2 mt-2">Inactive</span>
                                @endif

                                @if($category->is_favorite)
                                    <span class="badge p-2 mt-2" style="background-color: #df0ddf">Favorite</span>
                                @endif

                                @if($category->display_on_footer)
                                    <span class="badge p-2 mt-2" style="background-color: #df0d0d">Visible on Footer</span>
                                @endif
                            </td>
                            <td>{{ $category->created_at->format('d M Y') }}</td>
                            <td>
                                @can('view-categories')
                                <a href="{{ route('dashboard.categories.show', $category->id) }}" class="btn btn-sm btn-info mt-2">View</a>
                                @endcan
                                @can('update-categories')
                                <a href="{{ route('dashboard.categories.edit', $category->id) }}" class="btn btn-sm btn-warning mt-2">Edit</a>
                                @endcan
                                @can('delete-categories')
                                <form action="{{ route('dashboard.categories.destroy', $category->id) }}" method="POST" class="d-inline-block">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-sm btn-danger delete_confirmation mt-2">Delete</button>
                                </form>
                                @endcan
                                @if(isAffiliater())
                                <button class="btn btn-sm btn-secondary" onclick="navigator.clipboard.writeText('{{ config('app.frontend_url').'/shop/'.$category->slug.'?ref_code='.auth()->user()->ref_code }}'); this.innerText='Copied!'; setTimeout(()=>this.innerText='Affiliate Link', 1500);">Affiliate Link</button>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center">No Category Found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="table-pagination mt-4">
                {{ $categories->links() }}
            </div>
        </div>
    </div>
</div>
@endsection