@csrf

<div class="book-form-layout">
    <div>
        <div class="form-field">
            <label for="title">Book title</label>
            <input id="title" name="title" type="text" value="{{ old('title', $book->title ?? '') }}" required>
            @error('title')<span class="form-error">{{ $message }}</span>@enderror
        </div>

        <div class="form-field">
            <label for="description">Description</label>
            <textarea id="description" name="description" rows="7">{{ old('description', $book->description ?? '') }}</textarea>
            @error('description')<span class="form-error">{{ $message }}</span>@enderror
        </div>

        <div class="form-field">
            <label for="cover_image">Book cover image</label>
            <input id="cover_image" name="cover_image" type="file" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp">
            <small class="form-help">JPG, PNG, or WEBP. Maximum 5 MB.</small>
            @error('cover_image')<span class="form-error">{{ $message }}</span>@enderror
        </div>
    </div>

    <div>
        <div class="form-field">
            <label for="category_id">Category</label>
            <select id="category_id" name="category_id" required>
                <option value="">Choose a category</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}" @selected(old('category_id', $book->category_id ?? '') == $category->id)>{{ $category->name }}</option>
                @endforeach
            </select>
            @error('category_id')<span class="form-error">{{ $message }}</span>@enderror
        </div>

        <div class="form-row">
            <div class="form-field">
                <label for="price">Price</label>
                <input id="price" name="price" type="number" step="0.01" min="0" value="{{ old('price', $book->price ?? '') }}" required>
                @error('price')<span class="form-error">{{ $message }}</span>@enderror
            </div>
            <div class="form-field">
                <label for="stock">Stock</label>
                <input id="stock" name="stock" type="number" min="0" value="{{ old('stock', $book->stock ?? 0) }}" required>
                @error('stock')<span class="form-error">{{ $message }}</span>@enderror
            </div>
        </div>

        <div class="form-row">
            <div class="form-field">
                <label for="language">Language</label>
                <input id="language" name="language" type="text" value="{{ old('language', $book->language ?? '') }}">
                @error('language')<span class="form-error">{{ $message }}</span>@enderror
            </div>
            <div class="form-field">
                <label for="edition">Edition</label>
                <input id="edition" name="edition" type="text" value="{{ old('edition', $book->edition ?? '') }}">
                @error('edition')<span class="form-error">{{ $message }}</span>@enderror
            </div>
        </div>

        <div class="form-field">
                <label for="pages">Pages</label>
                <input id="pages" name="pages" type="number" min="1" value="{{ old('pages', $book->pages ?? '') }}">
                @error('pages')<span class="form-error">{{ $message }}</span>@enderror
        </div>

        <label class="status-toggle">
            <input type="hidden" name="status" value="0">
            <input type="checkbox" name="status" value="1" @checked(old('status', $book->status ?? true))>
            <span>Available in shop</span>
        </label>
    </div>
</div>

<div class="form-actions">
    <a href="{{ route('books.index') }}" class="btn btn-light">Cancel</a>
    <button type="submit" class="btn btn-accent">{{ $submitLabel }}</button>
</div>