@extends('layouts.app')
@section('title', 'Edit Design Card')
@section('description', 'Update design card details')
@section('content')

    <!-- Page Content -->
    <main class="p-8">
        <div class="max-w-4xl mx-auto">
            <!-- Back Button -->
            <div class="mb-6">
                <a href="{{ route('admin.design_card.index') }}" class="inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Back to Design Cards
                </a>
            </div>

            <!-- Form Card -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
                <form action="{{ route('admin.design_card.update', encryptor('encrypt', $design_card->id)) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <!-- Form Body -->
                    <div class="p-8 space-y-6">
                        <!-- Design Name -->
                        <div>
                            <label for="design_name" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                Design Name <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="design_name" id="design_name" value="{{ old('design_name', $design_card->design_name) }}" 
                                class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                placeholder="Enter design name" required>
                            @error('design_name')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Template ID -->
                        <div>
                            <label for="template_id" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                Template ID <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="template_id" id="template_id" value="{{ old('template_id', $design_card->template_id) }}" 
                                class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                placeholder="Enter template ID" required>
                            @error('template_id')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Current Image -->
                        @if($design_card->image)
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                Current Image
                            </label>
                            <div class="relative inline-block">
                                <img src="{{ asset('uploads/cards/'.$design_card->image) }}" alt="{{ $design_card->design_name }}" class="h-48 object-cover rounded-lg shadow-lg">
                                <div class="absolute top-2 right-2">
                                    <span class="px-3 py-1 bg-green-500 text-white text-xs font-semibold rounded-full shadow-lg">
                                        Current
                                    </span>
                                </div>
                            </div>
                        </div>
                        @endif

                        <!-- Image Upload -->
                        <div>
                            <label for="image" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                {{ $design_card->image ? 'Change Design Image' : 'Design Image' }}
                            </label>
                            <div class="relative">
                                <input type="file" name="image" id="image" accept="image/*"
                                    class="hidden" onchange="previewImage(event)">
                                <label for="image" class="flex items-center justify-center w-full px-4 py-8 bg-gray-50 dark:bg-gray-700 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200">
                                    <div class="text-center">
                                        <svg class="w-12 h-12 mx-auto text-gray-400 dark:text-gray-500 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                                        </svg>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Click to upload or drag and drop</p>
                                        <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">PNG, JPG, GIF up to 10MB</p>
                                    </div>
                                </label>
                            </div>
                            <!-- Image Preview -->
                            <div id="imagePreview" class="mt-4 hidden">
                                <div class="relative inline-block">
                                    <img id="preview" src="" alt="Preview" class="h-64 object-cover rounded-lg shadow-lg">
                                    <div class="absolute top-2 right-2">
                                        <span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full shadow-lg">
                                            New
                                        </span>
                                    </div>
                                </div>
                            </div>
                            @error('image')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Form Footer -->
                    <div class="bg-gray-50 dark:bg-gray-700/50 px-8 py-4 flex justify-end space-x-3">
                        <a href="{{ route('admin.design_card.index') }}" class="px-6 py-3 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200">
                            Cancel
                        </a>
                        <button type="submit" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200">
                            <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            Update Design Card
                        </button>
                    </div>
                </form>
            </div>

            <!-- Delete Section -->
            <div class="mt-6 bg-red-50 dark:bg-red-900/20 rounded-xl shadow-lg p-6 border-2 border-red-200 dark:border-red-800">
                <div class="flex items-start justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-red-800 dark:text-red-300 mb-2">Danger Zone</h3>
                        <p class="text-sm text-red-600 dark:text-red-400">Once you delete this design card, there is no going back. Please be certain.</p>
                    </div>
                    <form action="{{ route('admin.design_card.destroy', encryptor('encrypt', $design_card->id)) }}" method="POST" onsubmit="return confirm('Are you sure you want to permanently delete this design card? This action cannot be undone.');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200">
                            <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                            Delete Design Card
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </main>

<script>
function previewImage(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('preview').src = e.target.result;
            document.getElementById('imagePreview').classList.remove('hidden');
        }
        reader.readAsDataURL(file);
    }
}
</script>
@endsection