@extends('admin.layouts.app')

@section('title', 'Chemicals')

@section('content')
<div class="page-header">
    <div>
        <h2>Chemicals</h2>
        <p>Add chemical names for technicians to select during service visits</p>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

@if($errors->any())
    <div class="alert alert-danger">{{ $errors->first() }}</div>
@endif

<div class="form-card" style="margin-bottom: 24px;">
    <form method="POST" action="{{ route('admin.chemicals.store') }}">
        @csrf
        <div class="form-grid">
            <div class="form-group">
                <label for="chemical-name">Chemical Name *</label>
                <input id="chemical-name" type="text" name="name" value="{{ old('name') }}" maxlength="255" required autofocus>
            </div>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn-primary"><i class="fas fa-plus"></i> Add Chemical</button>
        </div>
    </form>
</div>

<div class="table-card">
    <table class="admin-table data-table">
        <thead><tr><th>S.No</th><th>Chemical Name</th><th width="100" class="no-sort">Action</th></tr></thead>
        <tbody>
        @foreach($chemicals as $chemical)
            <tr>
                <td>{{ $loop->iteration }}</td>
                <td>{{ $chemical->name }}</td>
                <td>
                    <form method="POST" action="{{ route('admin.chemicals.destroy', $chemical) }}" class="d-inline" onsubmit="return confirm('Delete this chemical?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn-sm btn-delete" title="Delete"><i class="fas fa-trash"></i></button>
                    </form>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>
@endsection