@extends('layouts.admin', ['title' => 'Settings', 'currentPage' => 'settings', 'breadcrumbs' => [ ['title' => 'Settings'] ]])

@section('content')
<div class="max-w-3xl mx-auto p-6">
    <div class="bg-white rounded-2xl shadow-lg p-6">
        <h1 class="text-xl font-bold text-gray-800 mb-4">Organization Settings</h1>
        <form id="settingsForm" class="space-y-4">
            <div>
                <label class="block text-sm text-gray-700 mb-1">School Name</label>
                <input type="text" name="school_name" value="{{ $settings['school_name'] ?? '' }}" class="w-full px-3 py-2 border rounded-lg">
            </div>
            <div>
                <label class="block text-sm text-gray-700 mb-1">Canvas Base URL</label>
                <input type="url" name="canvas_base_url" value="{{ $settings['canvas_base_url'] ?? '' }}" placeholder="https://canvas.example.edu" class="w-full px-3 py-2 border rounded-lg">
            </div>
            <div>
                <label class="block text-sm text-gray-700 mb-1">Canvas API Token</label>
                <input type="password" name="canvas_api_token" value="{{ $settings['canvas_api_token'] ?? '' }}" class="w-full px-3 py-2 border rounded-lg">
            </div>
            <div>
                <label class="block text-sm text-gray-700 mb-1">School Logo</label>
                <input type="file" name="logo" accept="image/*" class="block w-full text-sm">
                @if(!empty($settings['school_logo']))
                    <img src="{{ $settings['school_logo'] }}" alt="Logo" class="h-12 mt-2">
                @endif
            </div>
            <div class="pt-2">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg">Save Settings</button>
                <span id="settingsMsg" class="ml-3 text-sm text-gray-500"></span>
            </div>
        </form>
    </div>
</div>
@endsection

@push('head')
<script>
document.addEventListener('DOMContentLoaded', function(){
    const form = document.getElementById('settingsForm');
    form.addEventListener('submit', async function(e){
        e.preventDefault();
        const msg = document.getElementById('settingsMsg');
        const data = new FormData(form);
        try {
            const res = await fetch('/admin/api/settings', { method:'POST', body:data, credentials:'same-origin' });
            if (!res.ok) throw new Error('HTTP '+res.status);
            msg.textContent = 'Saved';
        } catch(e) { msg.textContent = 'Failed to save'; }
    });
});
</script>
@endpush