@extends('layouts.app')
@section('page-title', isset($folder) ? 'Edit Folder' : 'New Folder')

@section('content')

<x-admin-hero-header
    :title="$isEdit ? 'Edit Folder' : ($isSubFolder ? 'New Sub-folder' : 'New Folder')"
    :subtitle="$isEdit ? 'Update folder details and assigned users' : ($isSubFolder ? 'Creating inside: '.$parentFolder->name : 'Create a new folder and assign users')"
>
    <x-slot:icon>
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>
    </x-slot:icon>
    <x-slot:actions>
        <a href="{{ route('admin.folders.index', ['type' => $selectedType]) }}" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20 focus:ring-white/30">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Back to Folders
        </a>
    </x-slot:actions>
</x-admin-hero-header>


@if($isSubFolder)
<div class="mb-6 flex items-center gap-3 rounded-[14px] px-[18px] py-3.5 {{ $selectedTypeStyle['bannerClass'] }}">
    <div class="w-9 h-[30px] shrink-0">
        <svg viewBox="0 0 72 60" fill="none" class="w-full h-full">
            <path d="M2 10C2 7.239 4.239 5 7 5H27L35 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V10Z"
                  class="{{ $selectedTypeStyle['folderBackClass'] }}"/>
            <path d="M2 18C2 15.239 4.239 13 7 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V18Z"
                  class="{{ $selectedTypeStyle['folderFrontClass'] }}"/>
        </svg>
    </div>
    <div>
        <p class="text-[11px] font-bold uppercase tracking-[.05em] text-surface-400 mb-0.5">Creating sub-folder inside</p>
        <p class="text-sm font-bold text-surface-800">{{ $parentFolder->name }}</p>
    </div>
</div>
@endif

<form method="POST" class="enhanced-form"
      action="{{ $isEdit ? route('admin.folders.update', $folder) : route('admin.folders.store') }}"
      x-data="folderForm(@js($formData))">
    @csrf
    @if($isEdit) @method('PUT') @endif
    <input type="hidden" name="status" value="1" />
    @if($isSubFolder)
        <input type="hidden" name="parent_id" value="{{ $parentFolder->id }}" />
        <input type="hidden" name="document_type" value="{{ $parentFolder->document_type }}" />
    @endif

    <div class="rounded-2xl border border-surface-100 bg-white shadow-soft">
    <div class="grid grid-cols-1 lg:grid-cols-3">


        <div class="border-b border-surface-100 p-5 sm:p-6 lg:border-b-0 @can('manage-folders') lg:col-span-2 lg:border-r @else lg:col-span-3 @endcan">

            
            <div>
                <x-form-section-header title="Folder information" description="Configure the folder name, type and hierarchy." icon="folder" />

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

                    
                    @if(!$isSubFolder)
                    <div>
                        <label class="form-label">Document Type <span class="text-red-500">*</span></label>
                        <div class="document-type-grid">
                            @foreach($formData['types'] as $typeKey => $typeLabel)
                                <x-document-type-card
                                    :value="$typeKey"
                                    :label="$typeLabel"
                                    :description="$formData['typeStyles'][$typeKey]['description']"
                                />
                            @endforeach
                        </div>
                        @error('document_type')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    @endif

                    
                    <div>
                        <label for="name" class="form-label">Folder Name <span class="text-red-500">*</span></label>
                        <input type="text" id="name" name="name"
                               value="{{ old('name', $isEdit ? $folder->name : '') }}"
                               placeholder="e.g. Aviation Safety Manuals" required
                               class="form-input form-icon-folder {{ $errors->has('name') ? 'form-input-error' : '' }}" />
                        @error('name')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    
                    @if(!$isSubFolder && !empty($formData['parentFolderGroups']))
                        @include('admin.folders.partials.parent-folder-picker')
                    @endif

                    
                    <div>
                        <label for="description" class="form-label">Description</label>
                        <textarea id="description" name="description" rows="3"
                                  placeholder="Brief description of what this folder contains..."
                                  class="form-input resize-none {{ $errors->has('description') ? 'form-input-error' : '' }}">{{ old('description', $isEdit ? $folder->description : '') }}</textarea>
                        @error('description')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                </div>
            </div>

        </div>

        @can('manage-folders')
        <div class="p-5 sm:p-6 lg:sticky lg:top-24 lg:col-span-1 lg:self-start">
            <x-form-section-header title="Assign users" description="Choose who can access this folder.">
                <x-slot:actions><span class="rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-700" x-text="selectedUsers.length + ' selected'"></span></x-slot:actions>
            </x-form-section-header>


            <div class="relative mb-3">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg class="w-3.5 h-3.5 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                </div>
                <input type="text" x-model="userSearch"
                       placeholder="Search users..."
                       class="form-input pl-8 text-sm py-2" />
            </div>


            <div class="space-y-1 max-h-96 overflow-y-auto pr-1">
                <template x-if="filteredUsers.length === 0">
                    <p class="text-xs text-surface-400 text-center py-4">No users found</p>
                </template>
                <template x-for="user in filteredUsers" :key="user.id">
                    <div class="rounded-xl p-2 transition-colors"
                         :class="isFromParent(user.id) ? 'bg-surface-50' : (isSelected(user.id) ? 'bg-primary-50/60' : 'hover:bg-surface-50')">
                        <label class="flex items-center gap-3" :class="isFromParent(user.id) ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'">
                            <input type="checkbox"
                                   :value="user.id"
                                   name="user_ids[]"
                                   :checked="isSelected(user.id)"
                                   :disabled="isFromParent(user.id)"
                                   @change="toggleUser(user.id)"
                                   class="w-4 h-4 rounded text-primary-600 border-surface-300 focus:ring-primary-500" />
                            <template x-if="user.avatar_url">
                                <img :src="user.avatar_url" :alt="user.full_name"
                                     class="w-7 h-7 rounded-full object-cover ring-1 ring-surface-200 shrink-0" />
                            </template>
                            <template x-if="!user.avatar_url">
                                <div class="w-7 h-7 rounded-full bg-primary-100 flex items-center justify-center shrink-0">
                                    <span class="text-xs font-semibold text-primary-600"
                                          x-text="user.full_name.charAt(0).toUpperCase()"></span>
                                </div>
                            </template>
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center gap-2">
                                    <p class="text-sm font-medium text-surface-800 truncate" x-text="user.full_name"></p>
                                    <span x-show="isFromParent(user.id)"
                                          class="inline-flex items-center gap-1 rounded-md border border-violet-200 bg-violet-50 px-1.5 py-0.5 text-[10px] font-bold text-violet-600 shrink-0">
                                        Inherited
                                    </span>
                                </div>
                                <p class="text-xs text-surface-400 truncate" x-text="user.email"></p>
                            </div>
                        </label>


                        <div x-show="isSelected(user.id)" class="ml-7 mt-2 flex flex-wrap items-center gap-x-4 gap-y-1.5" style="display:none;">
                            <label class="flex items-center gap-1.5" :class="isFromParent(user.id) ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'">
                                <input type="checkbox"
                                       :value="user.id"
                                       name="write_user_ids[]"
                                       :checked="isWrite(user.id)"
                                       :disabled="isFromParent(user.id)"
                                       @change="toggleWrite(user.id)"
                                       class="w-3.5 h-3.5 rounded text-primary-600 border-surface-300 focus:ring-primary-500" />
                                <span class="text-xs text-surface-600">Add / manage documents</span>
                            </label>
                            <label class="flex items-center gap-1.5" :class="isFromParent(user.id) ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'">
                                <input type="checkbox"
                                       :value="user.id"
                                       name="subfolder_user_ids[]"
                                       :checked="isSubfolder(user.id)"
                                       :disabled="isFromParent(user.id)"
                                       @change="toggleSubfolder(user.id)"
                                       class="w-3.5 h-3.5 rounded text-primary-600 border-surface-300 focus:ring-primary-500" />
                                <span class="text-xs text-surface-600">Create sub-folders</span>
                            </label>
                        </div>
                    </div>
                </template>
            </div>


            <template x-for="uid in parentUsers" :key="'p'+uid">
                <input type="hidden" name="user_ids[]" :value="uid" />
            </template>
            <template x-for="uid in parentWriteUsers" :key="'pw'+uid">
                <input type="hidden" name="write_user_ids[]" :value="uid" />
            </template>
            <template x-for="uid in parentSubfolderUsers" :key="'ps'+uid">
                <input type="hidden" name="subfolder_user_ids[]" :value="uid" />
            </template>

            @if($users->isEmpty())
                <p class="text-xs text-surface-400 text-center py-4 italic">No active users found.</p>
            @endif
        </div>
        @endcan

    </div>

    
    <div class="flex flex-wrap items-center justify-end gap-3 rounded-b-2xl border-t border-surface-100 bg-surface-50/70 px-5 py-4 sm:px-6">
        <a href="{{ route('admin.folders.index', ['type' => $selectedType]) }}" class="btn-secondary">Cancel</a>
        <button type="submit" class="btn-primary">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            {{ $isEdit ? 'Save Changes' : 'Create Folder' }}
        </button>
    </div>
    </div>

</form>

@endsection