{{--
|--------------------------------------------------------------------------
| Plik Widoku: Edycja Kategorii Menu
|--------------------------------------------------------------------------
|
| Lokalizacja: resources/views/category/edit.blade.php
| Autor: Tomasz Kaplanski & Coding Partner (Gemini)
| Wersja: 2.0 (Refaktoryzacja i walidacja)
| Ostatnia modyfikacja: 6 Lipca 2024
|
|--------------------------------------------------------------------------
| Opis Przeznaczenia
|--------------------------------------------------------------------------
|
| Ten plik Blade renderuje prosty, ale w pełni interaktywny interfejs do
| edycji istniejącej kategorii menu. Cała logika formularza jest zarządzana
| przez Alpine.js, co zapewnia płynne doświadczenie użytkownika bez
| przeładowywania strony.
|
|--------------------------------------------------------------------------
| Kluczowe Funkcjonalności
|--------------------------------------------------------------------------
|
| - Asynchroniczne ładowanie danych kategorii z Firestore na podstawie ID z trasy.
| - Formularz do edycji nazwy kategorii.
| - Przełącznik do zmiany statusu publikacji.
| - Walidacja po stronie klienta w czasie rzeczywistym z informacją zwrotną.
| - Przycisk zapisu, który jest aktywny tylko po wykryciu zmian w formularzu ("dirty state").
| - Przycisk zapisu jest nieaktywny, jeśli formularz jest niepoprawny lub trwa zapis.
| - Wizualny wskaźnik ładowania (loader) podczas operacji pobierania i zapisu.
| - Przekierowanie do strony zarządzania kategoriami po pomyślnym zapisie.
|
|--------------------------------------------------------------------------
| Stos Technologiczny
|--------------------------------------------------------------------------
|
| - Backend: Laravel (silnik szablonów Blade)
| - Frontend (Interaktywność): Alpine.js
| - Frontend (Style): Tailwind CSS
| - Baza Danych: Google Firebase (Firestore)
|
|--------------------------------------------------------------------------
| Zależności
|--------------------------------------------------------------------------
|
| - Poprawnie zdefiniowane nazwane trasy (routes) w Laravelu: 'category', 'category.edit'.
| - Skonfigurowany dostęp do bazy danych Firestore (globalnie dostępny obiekt `database`).
| - Dołączona biblioteka Alpine.js w głównym szablonie aplikacji.
| - System tłumaczeń Laravela (`trans()`) do internacjonalizacji interfejsu.
|
--}}
@extends('layouts.app')

@section('content')

{{-- Główny kontener aplikacji ze stylami z layoutu referencyjnego --}}
<div class="p-10"
    x-data="categoryEditor()"
    x-init="init()"
>

    {{-- Loader wyświetlany podczas operacji asynchronicznych (ładowanie, zapis) --}}
    <div x-show="isLoading"
        class="fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center" style="display: none;">
        <div class="text-white text-lg flex flex-col items-center gap-2">
            <i class="fa-solid fa-spinner fa-spin text-4xl"></i>
            <span class="text-base">{{ trans('lang.loading') }}</span>
        </div>
    </div>
    
    {{-- Główna treść strony, widoczna po załadowaniu danych --}}
    <div x-show="!isLoading" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="flex flex-col gap-8" style="display: none;">

        {{-- Górny, niebieski kafelek z tytułem i przyciskiem powrotu --}}
        <div class="rounded-lg shadow-[1px_1px_4px_0px_#e2e8f0] p-6 bg-gradient-to-r from-slate-900 via-blue-800 to-blue-500 flex items-center justify-between">
            <div>
                <h3 class="text-2xl font-bold text-slate-50">{!! trans('lang.edit_category_title') !!}</h3>
                <p class="text-sm text-slate-200 mt-1 m-0">{!! trans('lang.edit_category_desc') !!}</p>
            </div>
            <a href="{!! route('category') !!}" class="px-4 py-2 rounded-md bg-white text-slate-600 text-sm hover:bg-slate-100 hover:text-slate-900 hover:no-underline transition focus:outline-none focus:ring-0 flex items-center gap-2">
                <i class="fa fa-rotate-left"></i>
                {{ trans('lang.back_to_category_management') }}
            </a>
        </div>

        {{-- Główny biały kafelek z formularzem --}}
        <div class="rounded-lg border border-slate-300 shadow-lg overflow-hidden flex flex-col">
            {{-- Część z polami formularza --}}
            <div class="p-6 md:p-8 bg-white flex-grow">
                {{-- Formularz --}}
                <div class="flex flex-col">
                    {{-- Pole: Nazwa kategorii --}}
                    <div class="mb-5 w-full md:w-3/5 lg:w-2/5">
                        <label for="category-name" class="block text-sm font-semibold text-gray-700 mb-2">{{trans('lang.category_name')}}</label>
                        <input 
                            type="text" 
                            id="category-name" 
                            x-model="name" 
                            @input.debounce.500ms="validate()"
                            class="w-full px-4 py-2 border !border-slate-300 rounded-lg focus:outline-none focus:ring-0 focus:shadow-none focus:bg-blue-50 transition duration-200" 
                            :class="{'!border-red-500': errors.name}"
                            placeholder="Insert category name" 
                            required>
                        <p x-show="errors.name" x-text="errors.name" class="text-sm text-red-600 mt-1"></p>
                    </div>

                    {{-- Przełącznik: Publikuj --}}
                    <div class="mb-6">
                        <p class="text-sm font-semibold text-gray-700 mb-2">{{trans('lang.food_publish')}}</p>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="category_publish" x-model="publish" class="sr-only peer">
                            <div class="relative w-11 h-6 bg-slate-300 rounded-full peer-checked:bg-blue-500 transition-colors after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border after:border-slate-300 after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full peer-checked:after:border-white"></div>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Stopka kafelka z przyciskiem zapisu --}}
            <div class="p-4 bg-slate-50 border-t border-slate-200 text-right">
                <button 
                    type="button" 
                    @click="saveCategory" 
                    :disabled="!isDirty || isSaving || hasErrors"
                    class="uppercase w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-0"
                >
                    <span x-show="!isSaving">{{ trans('lang.save') }}</span>
                    <span x-show="isSaving">
                        <i class="fa-solid fa-spinner fa-spin"></i>
                        {{ trans('lang.saving') }}
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    const serverData = {
        subcategoryId: @json($subcategory->id),
        name:          @json($subcategory->name),
        publish:       @json((bool) $subcategory->publish),
        csrfToken:     '{{ csrf_token() }}',
        routeCategory: '{{ route("category") }}',
        apiUpdate:     '{{ url("/api/categories/" . $subcategory->id) }}',
    };

    function categoryEditor() {
        return {
            // State properties
            name: serverData.name,
            publish: serverData.publish,

            // Loading and saving states
            isLoading: false,
            isSaving: false,
            originalState: { name: serverData.name, publish: serverData.publish },

            // Validation state
            errors: {
                name: ''
            },

            // Computed property to check if form has changed
            get isDirty() {
                return this.name !== this.originalState.name ||
                       this.publish !== this.originalState.publish;
            },

            // Computed property to check for validation errors
            get hasErrors() {
                return Object.values(this.errors).some(error => error !== '');
            },

            // init() — data already loaded server-side
            init() {
                const menu = document.getElementById("menu_menu");
                if (menu) menu.classList.add("active");
            },

            // Validation logic
            validate() {
                if (!this.name.trim()) {
                    this.errors.name = "{{ trans('lang.validation.category_name_required') }}";
                    return false;
                }
                this.errors.name = '';
                return true;
            },

            // saveCategory() is called on button click
            async saveCategory() {
                if (!this.validate() || !this.isDirty) {
                    return;
                }

                this.isSaving = true;

                try {
                    const res = await fetch(serverData.apiUpdate, {
                        method: 'PATCH',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': serverData.csrfToken,
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({
                            name:    this.name,
                            publish: this.publish,
                        }),
                    });

                    if (!res.ok) {
                        const err = await res.json().catch(() => ({}));
                        throw new Error(err.message ?? 'Server error');
                    }

                    window.location.href = serverData.routeCategory;
                } catch (error) {
                    console.error("Error saving category:", error);
                    alert("An error occurred while saving. Please check the console.");
                    this.isSaving = false;
                }
            }
        };
    }
</script>
@endsection
