@extends('layouts.admin')

@section('title', 'Edit Department')
@section('header', 'Edit Department: ' . $department->name)

@push('styles')
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<style>
    .ql-editor { min-height: 200px; font-size: 16px; }
    .drop-zone { border: 2px dashed #e2e8f0; border-radius: 12px; transition: all 0.2s; }
    .drop-zone.active { border-color: #6366f1; bg-indigo-50/50; }
</style>
@endpush

@section('content')
<div class="max-w-5xl mx-auto space-y-6">
    @include('partials.admin._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Masters', 'url' => '#'],
            ['name' => 'Departments', 'url' => route('admin.masters.departments.index')],
            ['name' => 'Edit', 'url' => route('admin.masters.departments.edit', $department->id)]
        ]
    ])

    <form action="{{ route('admin.masters.departments.update', $department->id) }}" method="POST" enctype="multipart/form-data" 
        x-data="{ 
            newImages: [],
            handleFiles(e) {
                const files = e.target.files || e.dataTransfer.files;
                for(let i = 0; i < files.length; i++) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.newImages.push(e.target.result);
                    }
                    reader.readAsDataURL(files[i]);
                }
            },
            removeNewImage(index) {
                this.newImages.splice(index, 1);
            },
            deleteExistingImage(imageId, el) {
                if(confirm('Are you sure you want to delete this image?')) {
                    fetch(`/admin/masters/departments/images/${imageId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if(data.success) {
                            el.closest('.image-item').remove();
                        }
                    });
                }
            }
        }">
        @csrf
        @method('PUT')
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
            <div class="p-6 border-b border-slate-50 flex items-center gap-3">
                <div class="p-2 bg-indigo-50 rounded-lg text-indigo-600">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2.5 2.5 0 113.536 3.536L12 14.036H8.5V10.5L22.586 2.414z"/></svg>
                </div>
                <h2 class="text-xl font-bold text-slate-800">Edit Department</h2>
            </div>
            
            <div class="p-6 space-y-8">
                <!-- Name -->
                <div class="space-y-2">
                    <label for="name" class="block text-sm font-medium text-slate-700">Department Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" id="name" value="{{ old('name', $department->name) }}" required
                        class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all @error('name') border-red-500 @enderror">
                    @error('name')
                        <p class="text-xs text-red-500 font-medium mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Description (Quill) -->
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-slate-700">Department Description</label>
                    <div id="editor" class="bg-white rounded-lg"></div>
                    <input type="hidden" name="description" id="description-input">
                </div>

                <!-- Existing Images -->
                @if($department->images->count() > 0)
                <div class="space-y-4">
                    <label class="block text-sm font-medium text-slate-700 text-slate-400 uppercase tracking-wider text-xs font-bold">Existing Images</label>
                    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                        @foreach($department->images as $image)
                            <div class="image-item relative group aspect-square rounded-xl overflow-hidden border border-slate-100 shadow-sm">
                                <img src="{{ asset('storage/' . $image->image_path) }}" class="h-full w-full object-cover">
                                <div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <button type="button" @click="deleteExistingImage({{ $image->id }}, $el)" class="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600 shadow-lg">
                                        <svg class="h-4 w-4" 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"/></svg>
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Upload New Images -->
                <div class="space-y-4 pt-4 border-t border-slate-50">
                    <label class="block text-sm font-medium text-slate-700">Upload New Images</label>
                    
                    <div class="drop-zone p-8 flex flex-col items-center justify-center text-slate-400 bg-slate-50/50 cursor-pointer hover:bg-slate-50 transition-all group"
                         @click="$refs.fileInput.click()"
                         @dragover.prevent="$el.classList.add('active')"
                         @dragleave.prevent="$el.classList.remove('active')"
                         @drop.prevent="$el.classList.remove('active'); handleFiles($event)">
                        
                        <input type="file" name="images[]" multiple class="hidden" x-ref="fileInput" @change="handleFiles($event)">
                        
                        <div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100 mb-4 group-hover:scale-110 transition-transform">
                            <svg class="h-8 w-8 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                        </div>
                        <p class="font-bold text-slate-700 text-sm">Add more department photos</p>
                    </div>

                    <!-- New Image Previews -->
                    <template x-if="newImages.length > 0">
                        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 mt-6">
                            <template x-for="(image, index) in newImages" :key="index">
                                <div class="relative group aspect-square rounded-xl overflow-hidden border border-indigo-100 shadow-sm border-2">
                                    <img :src="image" class="h-full w-full object-cover">
                                    <div class="absolute top-2 left-2 px-2 py-0.5 bg-indigo-600 text-[10px] text-white font-bold rounded-full">NEW</div>
                                    <div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                        <button type="button" @click.stop="removeNewImage(index)" class="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600 shadow-lg">
                                            <svg class="h-4 w-4" 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"/></svg>
                                        </button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-medium text-slate-700">Status</label>
                    <div class="flex items-center gap-4">
                        <label class="relative flex items-center gap-2 cursor-pointer group">
                            <input type="radio" name="status" value="1" {{ old('status', $department->status ? '1' : '0') == '1' ? 'checked' : '' }} class="peer sr-only">
                            <div class="w-5 h-5 border-2 border-slate-200 rounded-full peer-checked:border-indigo-600 peer-checked:bg-indigo-600 transition-all"></div>
                            <span class="text-sm font-medium text-slate-600 group-hover:text-slate-800">Active</span>
                        </label>
                        <label class="relative flex items-center gap-2 cursor-pointer group">
                            <input type="radio" name="status" value="0" {{ old('status', $department->status ? '1' : '0') == '0' ? 'checked' : '' }} class="peer sr-only">
                            <div class="w-5 h-5 border-2 border-slate-200 rounded-full peer-checked:border-slate-400 peer-checked:bg-slate-400 transition-all"></div>
                            <span class="text-sm font-medium text-slate-600 group-hover:text-slate-800">Inactive</span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="p-6 bg-slate-50 border-t border-slate-100 flex items-center justify-end gap-3">
                <a href="{{ route('admin.masters.departments.index') }}" class="px-4 py-2 text-sm font-bold text-slate-500 hover:text-slate-700 uppercase tracking-wider">
                    Cancel
                </a>
                <button type="submit" class="px-6 py-2 bg-indigo-600 text-white rounded-lg font-bold uppercase tracking-wider text-xs hover:bg-indigo-700 shadow-lg shadow-indigo-100 transition-all">
                    Update Department
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ 'header': [1, 2, 3, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['link', 'clean']
                ]
            }
        });

        const input = document.getElementById('description-input');
        
        // Populate existing content
        quill.root.innerHTML = {!! json_encode(old('description', $department->description)) !!};

        quill.on('text-change', function() {
            input.value = quill.root.innerHTML;
        });

        document.querySelector('form').addEventListener('submit', function() {
            input.value = quill.root.innerHTML;
        });
    });
</script>
@endpush