@extends('layouts.app')

@section('content')
<div class="content-header">
    <p class="title">Units</p>
    <ul>
        <li><a href="{{ route('units.create') }}">{{ _('Add New') }}</a></li>
    </ul>
</div>
<div class="content">
    <table id="myTable" class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>Unit Name</th>
                <th>Quantity</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($units as $unit)
            <tr>
                <td>{{ $unit->id }}</td>
                <td>{{ $unit->unit_name }}</td>
                <td>{{ $unit->quantity }} pcs</td>
                <td>
                    <!-- Edit Button with FontAwesome Icon -->
                    <a href="{{ route('units.edit', $unit->id) }}" class="btn btn-warning">
                        <i class="fas fa-edit"></i>
                    </a>

                    <!-- Delete Button with FontAwesome Icon -->
                    <form action="{{ route('units.destroy', $unit->id) }}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete this unit?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash"></i>
                        </button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection