@extends('layouts.cp')
@section('title', 'Document Paths')

@section('content')
<div class="bg-white rounded-xl border border-gray-200 p-6">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h2 class="text-sm font-medium text-gray-900">Document Paths</h2>
            <p class="text-xs text-gray-500 mt-1">Manage storage paths for all document types.</p>
        </div>
        <button onclick="openAddModal()"
                class="text-xs px-3 py-1.5 bg-gray-900 text-white rounded-lg hover:bg-gray-700">
            + Add Path
        </button>
    </div>

    <table class="w-full text-sm">
        <thead>
            <tr class="border-b border-gray-100">
                <th class="text-left text-xs text-gray-400 font-medium pb-3">Key</th>
                <th class="text-left text-xs text-gray-400 font-medium pb-3">Path</th>
                <th class="text-left text-xs text-gray-400 font-medium pb-3">Driver</th>
                <th class="text-left text-xs text-gray-400 font-medium pb-3">Description</th>
                <th class="text-right text-xs text-gray-400 font-medium pb-3">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @foreach($paths as $path)
            <tr>
                <td class="py-3 font-mono text-xs text-gray-600">{{ $path->key }}</td>
                <td class="py-3 font-mono text-xs text-indigo-600">{{ $path->value }}</td>
                <td class="py-3">
                    <span class="text-xs px-2 py-0.5 rounded-full {{ $path->storage_driver === 's3' ? 'bg-blue-50 text-blue-600' : 'bg-gray-100 text-gray-500' }}">
                        {{ $path->storage_driver }}
                    </span>
                </td>
                <td class="py-3 text-xs text-gray-400">{{ $path->description }}</td>
                <td class="py-3 text-right">
                    <button onclick="openEditModal({{ $path->id }}, '{{ $path->key }}', '{{ $path->value }}', '{{ $path->storage_driver }}', '{{ addslashes($path->description) }}')"
                            class="text-xs px-2.5 py-1 border border-blue-200 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100">
                        Edit
                    </button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

{{-- Add Modal --}}
<div id="add-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/30" onclick="closeAddModal()"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
        <h3 class="text-sm font-semibold text-gray-900 mb-5">Add Document Path</h3>
        <div class="space-y-4">
            <div>
                <label class="block text-xs text-gray-500 mb-1">Key</label>
                <input type="text" id="add-key" placeholder="e.g. user_guide"
                       class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Path</label>
                <input type="text" id="add-value" placeholder="e.g. userguide/prod"
                       class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Storage Driver</label>
                <select id="add-driver" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none">
                    <option value="s3">S3</option>
                    <option value="local">Local</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Description</label>
                <input type="text" id="add-desc" placeholder="Brief description"
                       class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
            </div>
        </div>
        <div class="flex gap-3 mt-5">
            <button onclick="saveAdd()" class="flex-1 py-2 text-sm bg-gray-900 text-white rounded-lg hover:bg-gray-700">Save</button>
            <button onclick="closeAddModal()" class="px-4 py-2 text-sm border border-gray-200 rounded-lg hover:bg-gray-50 text-gray-600">Cancel</button>
        </div>
    </div>
</div>

{{-- Edit Modal --}}
<div id="edit-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/30" onclick="closeEditModal()"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
        <h3 class="text-sm font-semibold text-gray-900 mb-1">Edit Document Path</h3>
        <p class="text-xs text-gray-400 mb-5" id="edit-key-label"></p>
        <input type="hidden" id="edit-id">
        <div class="space-y-4">
            <div>
                <label class="block text-xs text-gray-500 mb-1">Path</label>
                <input type="text" id="edit-value"
                       class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Storage Driver</label>
                <select id="edit-driver" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none">
                    <option value="s3">S3</option>
                    <option value="local">Local</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Description</label>
                <input type="text" id="edit-desc"
                       class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
            </div>
        </div>
        <div class="flex gap-3 mt-5">
            <button onclick="saveEdit()" class="flex-1 py-2 text-sm bg-gray-900 text-white rounded-lg hover:bg-gray-700">Save</button>
            <button onclick="closeEditModal()" class="px-4 py-2 text-sm border border-gray-200 rounded-lg hover:bg-gray-50 text-gray-600">Cancel</button>
        </div>
    </div>
</div>

<script>
function openAddModal() { document.getElementById('add-modal').classList.remove('hidden'); }
function closeAddModal() { document.getElementById('add-modal').classList.add('hidden'); }

function openEditModal(id, key, value, driver, desc) {
    document.getElementById('edit-id').value          = id;
    document.getElementById('edit-key-label').textContent = key;
    document.getElementById('edit-value').value       = value;
    document.getElementById('edit-driver').value      = driver;
    document.getElementById('edit-desc').value        = desc;
    document.getElementById('edit-modal').classList.remove('hidden');
}
function closeEditModal() { document.getElementById('edit-modal').classList.add('hidden'); }

function saveAdd() {
    fetch('/config/document-paths', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({
            key:            document.getElementById('add-key').value,
            value:          document.getElementById('add-value').value,
            storage_driver: document.getElementById('add-driver').value,
            description:    document.getElementById('add-desc').value,
        })
    })
    .then(r => r.json())
    .then(d => { if (d.success) { closeAddModal(); location.reload(); } });
}

function saveEdit() {
    const id = document.getElementById('edit-id').value;
    fetch(`/config/document-paths/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({
            value:          document.getElementById('edit-value').value,
            storage_driver: document.getElementById('edit-driver').value,
            description:    document.getElementById('edit-desc').value,
        })
    })
    .then(r => r.json())
    .then(d => { if (d.success) { closeEditModal(); location.reload(); } });
}
</script>
@endsection