@extends('layouts.admin')

@section('title', 'Units')

@section('content')
<div class="admin-page-header">
    <h1>Units</h1>
    @can('units.create')
    <a href="{{ route('admin.units.create') }}" class="admin-btn-primary">
        <i class="bi bi-plus"></i> Add Unit
    </a>
    @endcan
</div>

<div class="admin-card">
    <div class="card-body">
        @if($units->count() > 0)
            <div class="table-responsive">
                <table class="admin-table table table-hover">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Products Using</th>
                            <th>Created At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($units as $unit)
                            <tr>
                                <td>
                                    <strong>{{ ucfirst($unit->name) }}</strong>
                                </td>
                                <td>
                                    <span class="badge-modern badge-modern-info">{{ $unit->products()->count() }}</span>
                                </td>
                                <td>{{ $unit->created_at->format('M d, Y') }}</td>
                                <td>
                                    <div class="d-flex gap-2">
                                        @can('units.update')
                                        <a href="{{ route('admin.units.edit', $unit->id) }}" 
                                           class="admin-action-btn admin-action-btn-sm admin-btn-primary"
                                           title="Edit">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        @endcan
                                        @can('units.delete')
                                        <form action="{{ route('admin.units.destroy', $unit->id) }}" 
                                              method="POST" 
                                              class="d-inline" 
                                              onsubmit="return confirm('Are you sure you want to delete this unit? It will be removed from all products using it.')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" 
                                                    class="admin-action-btn admin-action-btn-sm"
                                                    style="background: #ef4444; height: -webkit-fill-available; color: white;"
                                                    title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="admin-empty-state">
                <i class="bi bi-rulers"></i>
                <h3>No Units Found</h3>
                @can('units.create')
                <p>Get started by creating your first unit.</p>
                <a href="{{ route('admin.units.create') }}" class="admin-btn-primary">
                    <i class="bi bi-plus"></i> Add Unit
                </a>
                @endcan
            </div>
        @endif
    </div>
</div>
@endsection
