@extends('dashboard.layouts.master')

@section('pageTitle', 'Edit Category')

@section('content')
    <div id="kt_content_container" class="container-xxl">
        <div class="mb-5 card card-xxl-stretch mb-xl-8">
            <div class="pt-5 border-0 card-header">
                <h3 class="card-title align-items-start flex-column">
                    <span class="mb-1 card-label fw-bolder fs-3">Edit Category: {{ $category->name }}</span>
                </h3>
            </div>
            <div class="py-3 card-body">
                <form action="{{ route('admin.categories.update', $category->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <div class="col-md-8">
                            <label for="name" class="form-label">Name:</label>
                            <input type="text" id="name" name="name" class="form-control"
                                   value="{{ old('name', $category->name) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label for="status" class="form-label">Status:</label>
                            <select name="status" id="status" class="form-select">
                                <option value="active" {{ old('status', $category->status) == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ old('status', $category->status) == 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label for="description" class="form-label">Description:</label>
                            <textarea name="description" id="description" cols="30" rows="5"
                                      class="form-control">{{ old('description', $category->description) }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label for="short_description" class="form-label">Short Description:</label>
                            <textarea name="short_description" id="short_description" cols="30" rows="5"
                                      class="form-control">{{ old('short_description', $category->short_description) }}</textarea>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label for="parent_id">Parent Category</label>
                            <select id="parent_id" name="parent_id" class="form-control">
                                <option value="">Select Parent Category</option>
                                @forelse($categories as $cat)
                                    <option value="{{ $cat['id'] }}" {{ $category->parent_id == $cat['id'] ? 'selected' : '' }}>
                                        {{ $cat['name'] }}
                                    </option>
                                @empty
                                    <option value="">No categories available</option>
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="row mt-3">
    <div class="col-md-6">
        <label for="image" class="form-label">Category Image:</label>
        <input type="file" id="image" name="image" class="form-control" accept="image/*">

        @if($category->image_url)
            <div class="mt-2">
                <img src="{{ $category->image_url }}" alt="Category Image" style="max-width: 200px; max-height: 200px;">
                <div class="form-check mt-2">
                    <input class="form-check-input" type="checkbox" name="remove_image" id="remove_image">
                    <label class="form-check-label" for="remove_image">
                        Remove current image
                    </label>
                </div>
            </div>
        @endif
    </div>
</div>
                    <hr>
                    <button type="submit" class="btn btn-success w-100">Update</button>
                </form>
            </div>
        </div>
    </div>
@endsection