@extends('admin.layouts.app')

@section('title', t('admin.order_statuses.title'))
@section('page_title', t('admin.order_statuses.title'))

@section('content')
<div x-data="orderStatusManager()" class="space-y-6">

    {{-- Flash Messages --}}
    @if(session('success'))
        <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md text-sm">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm">
            {{ session('error') }}
        </div>
    @endif

    {{-- Create New Status --}}
    <div class="bg-white rounded-lg shadow-sm p-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ t('admin.order_statuses.create_new') }}</h2>
        <form method="POST" action="{{ route('admin.order-statuses.store') }}">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ t('admin.order_statuses.status_key') }}</label>
                    <input type="text" name="status_key" value="{{ old('status_key') }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500"
                           placeholder="e.g. preparing" required>
                    @error('status_key')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ t('admin.order_statuses.sort_order') }}</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" min="0"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500"
                           required>
                </div>
            </div>

            {{-- Translations --}}
            <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                @foreach($locales as $locale)
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            {{ t('admin.order_statuses.label') }} ({{ $locale->code }})
                        </label>
                        <input type="text" name="translations[{{ $locale->code }}]"
                               value="{{ old('translations.' . $locale->code) }}"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500"
                               required>
                    </div>
                @endforeach
            </div>

            {{-- Toggles --}}
            <div class="mt-4 flex flex-wrap gap-6">
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="is_visible_to_customer" value="1" {{ old('is_visible_to_customer') ? 'checked' : '' }}
                           class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    {{ t('admin.order_statuses.visible_to_customer') }}
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="send_email" value="1" {{ old('send_email') ? 'checked' : '' }}
                           class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    {{ t('admin.order_statuses.send_email') }}
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="send_whatsapp" value="1" {{ old('send_whatsapp') ? 'checked' : '' }}
                           class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    {{ t('admin.order_statuses.send_whatsapp') }}
                </label>
            </div>

            <div class="mt-4">
                <button type="submit"
                        class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">
                    {{ t('admin.order_statuses.create') }}
                </button>
            </div>
        </form>
    </div>

    {{-- Existing Statuses List --}}
    <div class="bg-white rounded-lg shadow-sm p-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ t('admin.order_statuses.existing') }}</h2>

        <div id="sortable-statuses" class="space-y-3">
            @foreach($statuses as $status)
                <div class="border border-gray-200 rounded-lg p-4 bg-gray-50 hover:bg-white transition-colors"
                     data-id="{{ $status->id }}"
                     x-data="{ editing: false }">

                    {{-- Display Mode --}}
                    <div x-show="!editing" class="flex items-center justify-between">
                        <div class="flex items-center gap-4">
                            <span class="cursor-grab text-gray-400 hover:text-gray-600 drag-handle" title="Drag to reorder">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"/>
                                </svg>
                            </span>
                            <div>
                                <span class="font-medium text-gray-800">{{ $status->status_key }}</span>
                                @if($status->type === 'system')
                                    <span class="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full">system</span>
                                @endif
                                @if(!$status->is_active)
                                    <span class="ml-2 text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full">{{ t('admin.order_statuses.inactive') }}</span>
                                @endif
                                <div class="text-xs text-gray-500 mt-1">
                                    @foreach($status->translations as $trans)
                                        <span class="mr-3">{{ $trans->locale_code }}: {{ $trans->label }}</span>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="flex gap-2 text-xs text-gray-500">
                                @if($status->is_visible_to_customer)
                                    <span class="bg-green-100 text-green-700 px-2 py-0.5 rounded" title="Visible to customer">👁</span>
                                @endif
                                @if($status->send_email)
                                    <span class="bg-blue-100 text-blue-700 px-2 py-0.5 rounded" title="Send email">✉</span>
                                @endif
                                @if($status->send_whatsapp)
                                    <span class="bg-green-100 text-green-700 px-2 py-0.5 rounded" title="Send WhatsApp">💬</span>
                                @endif
                            </div>
                            <button @click="editing = true"
                                    class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                                {{ t('admin.common.edit') }}
                            </button>
                            @if($status->type === 'custom')
                                <form method="POST" action="{{ route('admin.order-statuses.destroy', $status) }}"
                                      onsubmit="return confirm('{{ t('admin.order_statuses.confirm_delete') }}')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-800 text-sm font-medium">
                                        {{ t('admin.common.delete') }}
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>

                    {{-- Edit Mode --}}
                    <div x-show="editing" x-cloak>
                        <form method="POST" action="{{ route('admin.order-statuses.update', $status) }}">
                            @csrf
                            @method('PUT')
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                @if($status->type === 'custom')
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ t('admin.order_statuses.status_key') }}</label>
                                        <input type="text" name="status_key" value="{{ $status->status_key }}"
                                               class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500" required>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ t('admin.order_statuses.sort_order') }}</label>
                                        <input type="number" name="sort_order" value="{{ $status->sort_order }}" min="0"
                                               class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500" required>
                                    </div>
                                @endif
                            </div>

                            <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-4">
                                @foreach($locales as $locale)
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">
                                            {{ t('admin.order_statuses.label') }} ({{ $locale->code }})
                                        </label>
                                        <input type="text" name="translations[{{ $locale->code }}]"
                                               value="{{ $status->translations->where('locale_code', $locale->code)->first()?->label }}"
                                               class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500" required>
                                    </div>
                                @endforeach
                            </div>

                            <div class="mt-3 flex flex-wrap gap-6">
                                <label class="flex items-center gap-2 text-sm text-gray-700">
                                    <input type="checkbox" name="is_visible_to_customer" value="1" {{ $status->is_visible_to_customer ? 'checked' : '' }}
                                           class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    {{ t('admin.order_statuses.visible_to_customer') }}
                                </label>
                                <label class="flex items-center gap-2 text-sm text-gray-700">
                                    <input type="checkbox" name="send_email" value="1" {{ $status->send_email ? 'checked' : '' }}
                                           class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    {{ t('admin.order_statuses.send_email') }}
                                </label>
                                <label class="flex items-center gap-2 text-sm text-gray-700">
                                    <input type="checkbox" name="send_whatsapp" value="1" {{ $status->send_whatsapp ? 'checked' : '' }}
                                           class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    {{ t('admin.order_statuses.send_whatsapp') }}
                                </label>
                            </div>

                            <div class="mt-3 flex gap-2">
                                <button type="submit"
                                        class="bg-blue-600 text-white px-3 py-1.5 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">
                                    {{ t('admin.common.save') }}
                                </button>
                                <button type="button" @click="editing = false"
                                        class="bg-gray-200 text-gray-700 px-3 py-1.5 rounded-md text-sm font-medium hover:bg-gray-300 transition-colors">
                                    {{ t('admin.common.cancel') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>

        @if($statuses->isEmpty())
            <p class="text-gray-500 text-sm text-center py-8">{{ t('admin.order_statuses.no_statuses') }}</p>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
function orderStatusManager() {
    return {
        init() {
            const el = document.getElementById('sortable-statuses');
            if (el) {
                new Sortable(el, {
                    handle: '.drag-handle',
                    animation: 150,
                    ghostClass: 'opacity-50',
                    onEnd: (evt) => {
                        const items = [];
                        el.querySelectorAll('[data-id]').forEach((item, index) => {
                            items.push({ id: parseInt(item.dataset.id), sort_order: index });
                        });
                        fetch('{{ route("admin.order-statuses.sort") }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({ items })
                        });
                    }
                });
            }
        }
    };
}
</script>
@endpush