@extends('layouts.admin')

@section('title', 'Add Department')
@section('header', 'Create New Department')

@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' => 'Create', 'url' => route('admin.masters.departments.create')]
        ]
    ])

    <form action="{{ route('admin.masters.departments.store') }}" method="POST" enctype="multipart/form-data" 
        x-data="{ 
            images: [],
            handleFiles(e) {
                const files = e.target.files;
                for(let i = 0; i < files.length; i++) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.images.push(e.target.result);
                    }
                    reader.readAsDataURL(files[i]);
                }
            },
            removeImage(index) {
                this.images.splice(index, 1);
                // Note: In a real scenario, you'd handle the actual FileList sync or use a library, 
                // but for this UI demonstration, we show the previews.
            }
        }">
        @csrf
        <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="M12 4v16m8-8H4"/></svg>
                </div>
                <h2 class="text-xl font-bold text-slate-800">Add New 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') }}" 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"
                        placeholder="e.g. Cardiology Department">
                    @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>

                <!-- Multiple Images Drag & Drop -->
                <div class="space-y-4">
                    <label class="block text-sm font-medium text-slate-700">Department Images (Multiple)</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.dataTransfer)">
                        
                        <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        </div>
                        <p class="font-bold text-slate-700 text-sm">Click or Drag & Drop images here</p>
                        <p class="text-xs mt-1">PNG, JPG or WEBP (Max 10MB per image)</p>
                    </div>

                    <!-- Image Previews -->
                    <template x-if="images.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 images" :key="index">
                                <div class="relative group aspect-square rounded-xl overflow-hidden border border-slate-100 shadow-sm">
                                    <img :src="image" 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.stop="removeImage(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', '1') == '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') == '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 flex-wrap 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" name="create_another" value="1" class="px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 hover:bg-indigo-100 rounded-lg transition-colors">
                    Save & Add Another
                </button>
                <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">
                    Create 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',
            placeholder: 'Wait while the department description is being prepared...',
            modules: {
                toolbar: [
                    [{ 'header': [1, 2, 3, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['link', 'clean']
                ]
            }
        });

        const input = document.getElementById('description-input');
        
        // Populate from old input if validation failed
        @if(old('description'))
            quill.root.innerHTML = {!! json_encode(old('description')) !!};
        @endif

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

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