@extends('layouts.app')

@section('content')

<div class="content-header">
    <p class="title">Edit Category</p>
    <ul>
        <li><a href="{{ route('category.index') }}">{{ __('List') }}</a></li>
    </ul>
</div>

<div class="content">
    <form method="POST" action="{{ route('category.update', $category->id) }}">
        @csrf
        @method('PUT')
        <table class="table table-borderless">
            <tbody>
                <tr>
                    <th class="bg-light" width="50%"><label for="name">Name</label></th>
                    <th class="bg-light" width="50%"><label for="parent_id">Parent</label></th>
                </tr>
                <tr>
                    <td>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name', $category->name) }}" required>
                        @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </td>
                    <td>
                        <select class="form-select select2 w-100 @error('parent_id') is-invalid @enderror" id="parent_id" name="parent_id">
                            <option value="">None</option>
                            @foreach ($categories as $parentCategory)
                            @include('inventory.category._category_option', [
                            'category' => $parentCategory,
                            'level' => 0,
                            'selectedCategoryId' => $category->parent_id
                            ])
                            @endforeach
                        </select>
                        @error('parent_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </td>
                </tr>
            </tbody>
        </table>

        <button type="submit" class="btn btn-primary mt-2" style="float: right;">Update</button>
    </form>
</div>

@endsection