@extends('layouts.admin')
@section('title', 'Global settings')
@section('lede', 'Identity, SEO, tracking and the SMTP account that sends booking letters. Calendar hours and the letter designs live on Appointments.')
@section('content')
@php
    $fields = config('edspire.fields', []);
    $groups = [];
    foreach ($fields as $key => $field) {
        $groups[$field['group'] ?? 'Other'][$key] = $field;
    }
    $groupNames = array_keys($groups);
@endphp
<div class="max-w-4xl" x-data="{ tab: @js($groupNames[0] ?? 'Identity'), q: '', photo: @js($values['founder_photo'] ?? ''), og: @js($values['seo_og_image'] ?? ''), logo: @js($values['seo_org_logo'] ?? '') }">
<form method="post" action="{{ route('admin.settings.update') }}">
    @csrf
    <div class="mb-4">
        <input x-model="q" placeholder="Find a setting — title, robots, pixel, founder…" class="max-w-xl">
    </div>
    <div class="mb-5 flex flex-wrap gap-2" x-show="q.trim() === ''">
        @foreach($groupNames as $name)
            <button type="button" class="rounded-full border border-line px-3 py-1 text-sm" :class="tab === @js($name) ? 'bg-ink text-cream' : 'bg-white'" @click="tab = @js($name)">{{ $name }} <span class="text-xs opacity-70">{{ count($groups[$name]) }}</span></button>
        @endforeach
    </div>
    @foreach($groups as $title => $items)
        <section class="desk-card mb-4" x-show="q.trim() !== '' || tab === @js($title)">
            <h2 x-show="q.trim() !== ''">{{ $title }}</h2>
            <div class="mt-4 grid gap-5">
                @foreach($items as $key => $field)
                    @php
                        $label = $field['label'] ?? str_replace('_', ' ', $key);
                        $needle = strtolower($label.' '.$key.' '.($field['help'] ?? ''));
                    @endphp
                    <label class="text-sm" x-show="q.trim() === '' || @js($needle).includes(q.trim().toLowerCase())">
                        <span class="desk-k">{{ $label }}</span>
                        @if(($field['type'] ?? '') === 'toggle')
                            <span class="mt-2 flex items-center gap-2 normal-case tracking-normal text-ink"><input type="checkbox" name="{{ $key }}" value="1" @checked(($values[$key] ?? '0') === '1')> On</span>
                        @elseif(($field['type'] ?? '') === 'textarea')
                            <textarea name="{{ $key }}" rows="4" class="mt-1">{{ $values[$key] ?? '' }}</textarea>
                        @elseif(($field['type'] ?? '') === 'select')
                            <select name="{{ $key }}" class="mt-1">
                                @foreach($field['options'] ?? [] as $value => $option)
                                    <option value="{{ $value }}" @selected(($values[$key] ?? '') === (string) $value)>{{ $option }}</option>
                                @endforeach
                            </select>
                        @elseif(($field['type'] ?? '') === 'password')
                            <input type="password" name="{{ $key }}" value="" autocomplete="new-password" class="mt-1" placeholder="{{ ($values[$key] ?? '') !== '' ? 'Saved — leave blank to keep it' : 'Not set yet' }}">
                        @elseif(($field['type'] ?? '') === 'media')
                            <input name="{{ $key }}" class="mt-1" @if($key === 'founder_photo') x-model="photo" @elseif($key === 'seo_og_image') x-model="og" @elseif($key === 'seo_org_logo') x-model="logo" @else value="{{ $values[$key] ?? '' }}" @endif>
                        @else
                            <input name="{{ $key }}" value="{{ $values[$key] ?? '' }}" class="mt-1" @if(($field['type'] ?? '') === 'url') type="url" placeholder="https://" @endif>
                        @endif
                        @if(!empty($field['help']))<span class="mt-1 block text-xs font-normal normal-case tracking-normal text-muted">{{ $field['help'] }}</span>@endif
                    </label>
                @endforeach
            </div>
        </section>
    @endforeach
    @if($media->isNotEmpty())
        <section class="desk-card mb-4" x-show="q.trim() !== '' || ['Founder','SEO'].includes(tab)">
            <h2>Media gallery</h2>
            <p class="mt-1 text-sm text-muted">Click a picture, then choose where it goes.</p>
            <div class="mt-3 grid grid-cols-3 gap-2 sm:grid-cols-5">
                @foreach($media as $file)
                    <figure class="overflow-hidden rounded-lg border border-line">
                        <img src="{{ $file->url() }}" alt="{{ $file->alt }}" class="aspect-[4/3] w-full object-cover">
                        <figcaption class="grid">
                            <button type="button" class="px-2 py-1 text-left text-[11px]" @click="photo = @js($file->url())">Founder</button>
                            <button type="button" class="border-t border-line px-2 py-1 text-left text-[11px]" @click="og = @js($file->url())">Social image</button>
                            <button type="button" class="border-t border-line px-2 py-1 text-left text-[11px]" @click="logo = @js($file->url())">Logo</button>
                        </figcaption>
                    </figure>
                @endforeach
            </div>
        </section>
    @endif
    <div class="desk-bar">
        <button class="desk-btn">Save global settings</button>
        <a href="{{ route('admin.seo') }}" class="desk-quiet">Open the 404 monitor</a>
    </div>
</form>
<form method="post" action="{{ route('admin.settings.mail') }}" class="desk-card mt-4" x-show="tab === 'Mail' || q.toLowerCase().includes('mail') || q.toLowerCase().includes('smtp')" x-cloak>
    @csrf
    <h2>Send a test</h2>
    <p class="mt-1 text-sm text-muted">Save the SMTP fields first. This sends the owner letter with sample school details, including the Google Calendar button.</p>
    <label class="mt-4 block text-sm"><span class="desk-k">Send to</span>
        <input type="email" name="test_email" value="{{ auth()->user()->email }}" required class="mt-1">
    </label>
    <button class="desk-btn mt-4">Send test email</button>
</form>
</div>
@endsection