@extends('admin.layout')



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



@section('content')

<div class="max-w-4xl mx-auto">

    <div class="bg-white rounded-2xl shadow-lg overflow-hidden">

        <div class="p-6 border-b border-gray-200">

            <div class="flex justify-between items-center">

                <h2 class="text-2xl font-bold text-gray-800 font-serif">Edit Category</h2>

                <a href="{{ route('admin.categories') }}" 

                   class="px-4 py-2 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors flex items-center gap-2">

                    <i class="fas fa-arrow-left"></i>

                    Back

                </a>

            </div>

        </div>

        

        <form action="{{ route('admin.categories.update', $category->id) }}" method="POST" enctype="multipart/form-data">

            @csrf

            @method('PUT')

            

            <div class="p-6 space-y-6">

                <!-- Current Image -->

                @if($category->image)

                <div class="bg-gray-50 rounded-xl p-6">

                    <label class="block text-sm font-medium text-gray-700 mb-4">Current Image</label>

                    <div class="flex flex-col md:flex-row items-center gap-6">

                        <div class="relative">

                                                                 <img src="{{ asset($category->image) }}" 

                                 alt="{{ $category->name }}"

                                 class="w-48 h-48 object-cover rounded-xl shadow-lg">

                            <div class="absolute -top-2 -right-2">

                                <!-- Button to delete image only -->

                                <button type="button"

                                        onclick="confirmDeleteImage()"

                                        class="w-10 h-10 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors shadow-lg"

                                        title="Delete this image">

                                    <i class="fas fa-trash"></i>

                                </button>

                            </div>

                        </div>

                        <div class="flex-1">

                            <div class="flex items-center mb-3">

                                <input type="checkbox" 

                                       id="remove_image" 

                                       name="remove_image" 

                                       value="1"

                                       class="h-4 w-4 text-red-600 border-gray-300 rounded">

                                <label for="remove_image" class="ml-2 text-gray-700">

                                    Remove current image

                                </label>

                            </div>

                            <p class="text-sm text-gray-500">

                                Check the box above if you want to remove this image without uploading a new one.

                            </p>

                        </div>

                    </div>

                </div>

                @endif

                

                <!-- Form Grid -->

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                    <!-- Name -->

                    <div>

                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">

                            Category Name <span class="text-red-500">*</span>

                        </label>

                        <input type="text" 

                               id="name" 

                               name="name" 

                               value="{{ old('name', $category->name) }}" 

                               required

                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gold/20 focus:border-gold transition-all"

                               placeholder="Category name">

                        @error('name')

                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>

                        @enderror

                    </div>

                    

                    <!-- Order -->

                    <div>

                        <label for="order" class="block text-sm font-medium text-gray-700 mb-2">

                            Display Order

                        </label>

                        <input type="number" 

                               id="order" 

                               name="order" 

                               value="{{ old('order', $category->order) }}"

                               min="0"

                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gold/20 focus:border-gold transition-all">

                    </div>

                    

                    <!-- Description -->

                    <div class="md:col-span-2">

                        <label for="description" class="block text-sm font-medium text-gray-700 mb-2">

                            Description

                        </label>

                        <textarea id="description" 

                                  name="description" 

                                  rows="3"

                                  class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gold/20 focus:border-gold transition-all"

                                  placeholder="Category description (optional)">{{ old('description', $category->description) }}</textarea>

                    </div>

                    

                    <!-- New Image Upload (if no image or want to replace) -->

                    <div class="md:col-span-2">

                        <label class="block text-sm font-medium text-gray-700 mb-2">

                            {{ $category->image ? 'Replace Image' : 'Upload Image' }}

                        </label>

                        <div class="border-2 border-dashed border-gray-300 rounded-2xl p-8 text-center hover:border-gold transition-colors cursor-pointer"

                             onclick="document.getElementById('new_image').click()">

                            <input type="file" 

                                   id="new_image" 

                                   name="image" 

                                   accept="image/*"

                                   class="hidden">

                            <div class="space-y-3">

                                <div class="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center">

                                    <i class="fas fa-cloud-upload-alt text-2xl text-gray-400"></i>

                                </div>

                                <div>

                                    <p class="text-sm font-medium text-gray-700">Click to upload new image</p>

                                    <p class="text-xs text-gray-500 mt-1">JPG, PNG, WebP (Max 5MB)</p>

                                </div>

                            </div>

                        </div>

                        @error('image')

                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>

                        @enderror

                        

                        <!-- Image Preview -->

                        <div id="imagePreviewContainer" class="mt-4 hidden">

                            <div class="border border-gray-200 rounded-xl p-4 bg-gray-50">

                                <img id="imagePreview" 

                                     src="#" 

                                     alt="Preview"

                                     class="max-w-full h-48 object-cover rounded-lg mx-auto">

                            </div>

                        </div>

                    </div>

                    

                    <!-- Active Status -->

                    <div class="flex items-center">

                        <div class="relative">

                            <input type="checkbox" 

                                   id="is_active" 

                                   name="is_active" 

                                   value="1"

                                   {{ old('is_active', $category->is_active) ? 'checked' : '' }}

                                   class="sr-only">

                            <div class="block bg-gray-200 w-14 h-8 rounded-full"></div>

                            <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition transform"></div>

                        </div>

                        <label for="is_active" class="ml-3 text-gray-700 font-medium">

                            Active Category

                        </label>

                    </div>

                </div>

                

                <!-- Form Actions -->

                <div class="flex flex-col sm:flex-row justify-end gap-3 pt-6 border-t border-gray-200">

                    <a href="{{ route('admin.categories') }}"

                       class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors text-center">

                        Cancel

                    </a>

                    <button type="submit" 

                            class="btn-primary px-6 py-3 rounded-xl flex items-center justify-center gap-2">

                        <i class="fas fa-save"></i>

                        Update Category

                    </button>

                </div>

            </div>

        </form>

    </div>

</div>



<!-- Form untuk hapus foto saja -->

<form id="deleteImageForm" action="{{ route('admin.categories.image.delete', $category->id) }}" method="POST" class="hidden">

    @csrf

    @method('DELETE')

</form>



<script>

function confirmDeleteImage() {

    if (confirm('Are you sure you want to delete this image? This will only remove the image, not the category.')) {

        document.getElementById('deleteImageForm').submit();

    }

}



// Image preview for new image

document.getElementById('new_image')?.addEventListener('change', function(event) {

    const input = event.target;

    const preview = document.getElementById('imagePreview');

    const previewContainer = document.getElementById('imagePreviewContainer');

    

    if (input.files && input.files[0]) {

        const reader = new FileReader();

        

        reader.onload = function(e) {

            preview.src = e.target.result;

            previewContainer.style.display = 'block';

        };

        

        reader.readAsDataURL(input.files[0]);

    }

});



// Toggle switch

const toggle = document.getElementById('is_active');

const toggleDot = toggle?.nextElementSibling?.nextElementSibling;

const toggleBlock = toggle?.nextElementSibling;



if (toggle && toggleBlock && toggleDot) {

    if (toggle.checked) {

        toggleBlock.style.background = 'rgba(212, 175, 55, 0.2)';

        toggleDot.style.transform = 'translateX(100%)';

        toggleDot.style.background = '#D4AF37';

    }

    

    toggle.addEventListener('change', function() {

        if (this.checked) {

            toggleBlock.style.background = 'rgba(212, 175, 55, 0.2)';

            toggleDot.style.transform = 'translateX(100%)';

            toggleDot.style.background = '#D4AF37';

        } else {

            toggleBlock.style.background = '#e5e7eb';

            toggleDot.style.transform = 'translateX(0)';

            toggleDot.style.background = '#fff';

        }

    });

}

</script>

@endsection