@extends('layouts.admin')

@section('title', $post->exists ? __('admin.posts.edit') : __('admin.posts.create'))

@php
    $editing = $post->exists;
    $action = $editing ? lroute('admin.posts.update', $post) : lroute('admin.posts.store');
    $field = 'w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20';
    $label = 'mb-1 block text-sm font-semibold text-ink';
    $locale = app()->getLocale();
@endphp

@section('content')
    <div class="flex items-center justify-between gap-4">
        <h1 class="text-2xl font-bold text-brand-deep">{{ $editing ? __('admin.posts.edit') : __('admin.posts.create') }}</h1>
        <a href="{{ lroute('admin.posts.index') }}" class="text-sm font-medium text-ink-soft transition hover:text-brand">{{ __('admin.actions.back') }}</a>
    </div>

    <form method="POST" action="{{ $action }}" enctype="multipart/form-data" class="mt-6 max-w-3xl space-y-5 rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
        @csrf
        @if ($editing)
            @method('PUT')
        @endif

        <div class="grid gap-5 sm:grid-cols-2">
            <div>
                <label for="locale" class="{{ $label }}">{{ __('admin.posts.locale') }}</label>
                <select id="locale" name="locale" class="{{ $field }}" required>
                    @foreach (config('locales.supported') as $code => $data)
                        <option value="{{ $code }}" @selected(old('locale', $post->locale) === $code)>{{ $data['name'] }}</option>
                    @endforeach
                </select>
                @error('locale')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="slug" class="{{ $label }}">{{ __('admin.posts.slug') }}</label>
                <input type="text" id="slug" name="slug" value="{{ old('slug', $post->slug) }}" class="{{ $field }}" dir="ltr" required>
                @error('slug')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="author_id" class="{{ $label }}">{{ __('admin.posts.author') }}</label>
                <select id="author_id" name="author_id" class="{{ $field }}">
                    <option value="">{{ __('admin.posts.no_author') }}</option>
                    @foreach (($users ?? []) as $user)
                        <option value="{{ $user->id }}" @selected((int) old('author_id', $post->author_id) === $user->id)>{{ $user->name }}</option>
                    @endforeach
                </select>
                @error('author_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
        </div>

        <div>
            <label for="title" class="{{ $label }}">{{ __('admin.posts.post_title') }}</label>
            <input type="text" id="title" name="title" value="{{ old('title', $post->title) }}" class="{{ $field }}" required>
            @error('title')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>

        <div>
            <label for="excerpt" class="{{ $label }}">{{ __('admin.posts.excerpt') }}</label>
            <textarea id="excerpt" name="excerpt" rows="2" class="{{ $field }}">{{ old('excerpt', $post->excerpt) }}</textarea>
            @error('excerpt')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>

        <div>
            <label for="body" class="{{ $label }}">{{ __('admin.posts.body') }}</label>
            @include('admin.partials.markdown-toolbar', ['for' => 'body'])
            <textarea id="body" name="body" rows="12" class="{{ $field }} rounded-t-none" dir="{{ \App\Support\Locale::direction(old('locale', $post->locale ?: 'ar')) }}">{{ old('body', $post->body) }}</textarea>
            @error('body')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            <script>
                document.getElementById('locale').addEventListener('change', function () {
                    document.getElementById('body').dir = this.value === 'ar' ? 'rtl' : 'ltr';
                });
            </script>
        </div>

        <div>
            <label for="featured_image" class="{{ $label }}">{{ __('admin.posts.featured_image') }}</label>
            @if ($post->featured_image)
                <div class="mb-3 flex items-center gap-4 rounded-lg bg-paper p-3">
                    <img src="{{ Storage::url($post->featured_image) }}" alt="{{ __('admin.editor.current_image') }}" class="h-20 w-32 rounded-lg object-cover ring-1 ring-black/10">
                    <label class="flex cursor-pointer items-center gap-2 text-sm text-ink-soft">
                        <input type="checkbox" name="remove_featured_image" value="1" class="rounded border-black/20 text-brand focus:ring-brand/30">
                        {{ __('admin.editor.remove_image') }}
                    </label>
                </div>
            @endif
            <input type="file" id="featured_image" name="featured_image" accept=".jpg,.jpeg,.png,.webp"
                   class="{{ $field }} file:me-3 file:rounded-full file:border-0 file:bg-brand/10 file:px-4 file:py-1.5 file:text-sm file:font-semibold file:text-brand">
            <p class="mt-1 text-xs text-ink-soft">{{ __('admin.editor.upload_hint') }}</p>
            @error('featured_image')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>

        <div class="grid gap-5 sm:grid-cols-2">
            <div>
                <label for="meta_title" class="{{ $label }}">{{ __('admin.posts.meta_title') }}</label>
                <input type="text" id="meta_title" name="meta_title" value="{{ old('meta_title', $post->meta_title) }}" class="{{ $field }}">
                @error('meta_title')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="meta_description" class="{{ $label }}">{{ __('admin.posts.meta_description') }}</label>
                <input type="text" id="meta_description" name="meta_description" value="{{ old('meta_description', $post->meta_description) }}" class="{{ $field }}">
                @error('meta_description')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="grid gap-5 sm:grid-cols-2">
            <div>
                <label for="status" class="{{ $label }}">{{ __('admin.posts.status') }}</label>
                <select id="status" name="status" class="{{ $field }}" required>
                    @foreach (['draft', 'published'] as $status)
                        <option value="{{ $status }}" @selected(old('status', $post->status) === $status)>{{ __("admin.posts.statuses.{$status}") }}</option>
                    @endforeach
                </select>
                @error('status')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="published_at" class="{{ $label }}">{{ __('admin.posts.published_at') }}</label>
                <input type="datetime-local" id="published_at" name="published_at" value="{{ old('published_at', $post->published_at?->format('Y-m-d\TH:i')) }}" class="{{ $field }}" dir="ltr">
                @error('published_at')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="flex items-center gap-3 pt-2">
            <button type="submit" class="rounded-full bg-brand px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-brand-deep">{{ __('admin.actions.save') }}</button>
            <a href="{{ lroute('admin.posts.index') }}" class="rounded-full px-6 py-2.5 text-sm font-medium text-ink-soft transition hover:text-brand">{{ __('admin.actions.cancel') }}</a>
        </div>
    </form>
@endsection