@extends('layouts.portal')
@section('title', 'Website Appearance | Abu Dhabi Auto Care')
@section('content')
<div class="max-w-5xl mx-auto">
    <div class="section-heading"><div><span class="eyebrow accent">MAKE IT YOURS</span><h1 class="text-3xl font-bold mt-2">Website appearance</h1><p class="mt-2">Manage the first impression of your workshop.</p></div><a href="{{ route('home') }}" target="_blank" rel="noopener noreferrer" class="text-link">View website ↗</a></div>
    <form method="POST" action="{{ route('admin.appearance.update') }}">
        @csrf @method('PUT')
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div class="admin-panel">
                <h2>Hero content</h2>
                <div class="field"><label for="hero_eyebrow">Small introduction</label><input id="hero_eyebrow" name="hero_eyebrow" maxlength="80" required value="{{ old('hero_eyebrow', $appearance->get('hero_eyebrow', 'PRECISION. PASSION. PEACE OF MIND.')) }}"></div>
                <div class="field"><label for="hero_title">Headline</label><input id="hero_title" name="hero_title" maxlength="120" required value="{{ old('hero_title', $appearance->get('hero_title', 'Your car. Our craft.')) }}"></div>
                <div class="field"><label for="hero_description">Description</label><textarea id="hero_description" name="hero_description" maxlength="400" rows="5" required>{{ old('hero_description', $appearance->get('hero_description', 'From a flawless finish to a smoother drive. Expert painting, repairs and everyday care, all under one roof in Abu Dhabi.')) }}</textarea></div>
                <div class="field"><label for="hero_button">Booking button text</label><input id="hero_button" name="hero_button" maxlength="40" required value="{{ old('hero_button', $appearance->get('hero_button', 'Get a free quotation')) }}"><small>Opens the service booking form.</small></div>
            </div>
            <div class="admin-panel">
                <h2>Photography & theme</h2>
                <div class="field"><label for="hero_media_id">Hero photograph</label><select id="hero_media_id" name="hero_media_id"><option value="">Default automotive photograph</option>@foreach($images as $image)<option value="{{ $image->id }}" @selected(old('hero_media_id', $appearance->get('hero_media_id')) == $image->id)>{{ $image->title }}</option>@endforeach</select><a class="text-link" href="{{ route('admin.media.index') }}">Manage your media library ↗</a><small>Landscape images of at least 1600 pixels wide work best.</small></div>
                <div class="field"><label for="hero_position">Image focal point</label><select id="hero_position" name="hero_position">@foreach(['left' => 'Left', 'center' => 'Centre', 'right' => 'Right'] as $value => $label)<option value="{{ $value }}" @selected(old('hero_position', $appearance->get('hero_position', 'center')) === $value)>{{ $label }}</option>@endforeach</select><small>Choose which part stays visible when the image is cropped.</small></div>
                <div class="field"><label for="hero_overlay">Image darkening (%)</label><input id="hero_overlay" type="number" name="hero_overlay" min="20" max="80" required value="{{ old('hero_overlay', $appearance->get('hero_overlay', 40)) }}"><small>20–80%. The left-side gradient keeps the headline readable.</small></div>
                <div class="field"><label for="default_theme">Default website theme</label><select id="default_theme" name="default_theme">@foreach(['light' => 'Light — warm white', 'dark' => 'Dark — charcoal', 'system' => 'Match device settings'] as $value => $label)<option value="{{ $value }}" @selected(old('default_theme', $appearance->get('default_theme', 'light')) === $value)>{{ $label }}</option>@endforeach</select><small>Visitors can switch themes. Their saved choice takes priority.</small></div>
            </div>
        </div>
        <div class="flex justify-end mt-6"><button type="submit" class="button button-primary">Save website appearance ↗</button></div>
    </form>
</div>
@endsection