@extends('layouts.app')

@section('content')
    <div x-data="machineForm()" class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] p-5 lg:p-6">
        <div class="mb-6">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $title }}</h2>
        </div>

        <form action="{{ route('stock.machines.store') }}" method="POST" class="space-y-5">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label for="name" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Nama Mesin <span class="text-error-500">*</span>
                    </label>
                    <input type="text" name="name" id="name" value="{{ old('name') }}"
                        class="h-11 block w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-500 focus:ring-brand-500 dark:border-gray-600 dark:text-white/90"
                        required>
                    @error('name')
                        <p class="mt-1 text-xs text-error-500">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="description" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Keterangan
                    </label>
                    <input type="text" name="description" id="description" value="{{ old('description') }}" placeholder="Opsional"
                        class="h-11 block w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-500 focus:ring-brand-500 dark:border-gray-600 dark:text-white/90">
                </div>
                
                <div class="md:col-span-2">
                    <label for="cost_per_click" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Biaya per Klik<span class="text-error-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                            <span class="text-gray-500 sm:text-sm">Rp</span>
                        </div>
                        <input type="number" name="cost_per_click" id="cost_per_click" 
                            value="{{ old('cost_per_click', 0) }}" min="0" step="10" required
                            class="block w-full rounded-lg border border-gray-300 bg-transparent pl-12 pr-3 py-2.5 text-sm text-gray-800 placeholder-gray-400 focus:border-brand-500 focus:ring-brand-500 dark:border-gray-600 dark:text-white/90 dark:placeholder-gray-500"
                            placeholder="0">
                    </div>
                </div>
            </div>

            <!-- Kategori Bahan Selector -->
            <div>
                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Kategori Bahan</label>
                <div class="flex flex-wrap items-center gap-2">
                    <button type="button" @click="showCategoryDialog = true"
                        class="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                        </svg>
                        Pilih Kategori
                        <span x-show="selectedCategories.length > 0" class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-brand-500 text-xs text-white" x-text="selectedCategories.length"></span>
                    </button>
                    <template x-for="id in selectedCategories" :key="'cat-'+id">
                        <span class="inline-flex items-center gap-1 rounded-full bg-brand-50 px-2.5 py-1 text-xs font-medium text-brand-700 dark:bg-brand-500/15 dark:text-brand-400">
                            <span x-text="getCategoryName(id)"></span>
                            <button type="button" @click="toggleCategory(id)" class="hover:text-error-500">
                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                            </button>
                            <input type="hidden" name="categories[]" :value="id">
                        </span>
                    </template>
                </div>
            </div>

            <!-- Bahan Selector -->
            <div>
                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Bahan</label>
                <div class="flex flex-wrap items-center gap-2">
                    <button type="button" @click="showMaterialDialog = true"
                        class="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                        </svg>
                        Pilih Bahan
                        <span x-show="selectedMaterials.length > 0" class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-success-500 text-xs text-white" x-text="selectedMaterials.length"></span>
                    </button>
                    <template x-for="id in selectedMaterials" :key="'mat-'+id">
                        <span class="inline-flex items-center gap-1 rounded-full bg-success-50 px-2.5 py-1 text-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-400">
                            <span x-text="getMaterialName(id)"></span>
                            <button type="button" @click="toggleMaterial(id)" class="hover:text-error-500">
                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                            </button>
                            <input type="hidden" name="materials[]" :value="id">
                        </span>
                    </template>
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 pt-4">
                <a href="{{ route('stock.machines.index') }}"
                    class="rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">
                    Batal
                </a>
                <button type="submit"
                    class="rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600">
                    Simpan
                </button>
            </div>
        </form>

        <!-- Category Dialog -->
        @include('pages.stock.machines._select-dialog', [
            'dialogVar' => 'showCategoryDialog',
            'searchVar' => 'categorySearch',
            'items' => 'filteredCategories',
            'selectedVar' => 'selectedCategories',
            'toggleFn' => 'toggleCategory',
            'selectAllFn' => 'selectAllCategories',
            'deselectAllFn' => 'deselectAllCategories',
            'dialogTitle' => 'Pilih Kategori Bahan',
        ])

        <!-- Material Dialog -->
        @include('pages.stock.machines._select-dialog', [
            'dialogVar' => 'showMaterialDialog',
            'searchVar' => 'materialSearch',
            'items' => 'filteredMaterials',
            'selectedVar' => 'selectedMaterials',
            'toggleFn' => 'toggleMaterial',
            'selectAllFn' => 'selectAllMaterials',
            'deselectAllFn' => 'deselectAllMaterials',
            'dialogTitle' => 'Pilih Bahan',
        ])
    </div>

    <script>
        function machineForm() {
            return {
                showCategoryDialog: false,
                showMaterialDialog: false,
                categorySearch: '',
                materialSearch: '',
                selectedCategories: @json(old('categories', [])).map(Number),
                selectedMaterials: @json(old('materials', [])).map(Number),
                allCategories: @json($categories->map(fn($c) => ['id' => $c->id, 'name' => $c->name])),
                allMaterials: @json($materials->map(fn($m) => ['id' => $m->id, 'name' => $m->name])),

                get filteredCategories() {
                    const s = this.categorySearch.toLowerCase();
                    return s ? this.allCategories.filter(c => c.name.toLowerCase().includes(s)) : this.allCategories;
                },
                get filteredMaterials() {
                    const s = this.materialSearch.toLowerCase();
                    return s ? this.allMaterials.filter(m => m.name.toLowerCase().includes(s)) : this.allMaterials;
                },
                toggleCategory(id) {
                    const i = this.selectedCategories.indexOf(id);
                    i === -1 ? this.selectedCategories.push(id) : this.selectedCategories.splice(i, 1);
                },
                toggleMaterial(id) {
                    const i = this.selectedMaterials.indexOf(id);
                    i === -1 ? this.selectedMaterials.push(id) : this.selectedMaterials.splice(i, 1);
                },
                selectAllCategories() { this.selectedCategories = this.allCategories.map(c => c.id); },
                deselectAllCategories() { this.selectedCategories = []; },
                selectAllMaterials() { this.selectedMaterials = this.allMaterials.map(m => m.id); },
                deselectAllMaterials() { this.selectedMaterials = []; },
                getCategoryName(id) { return this.allCategories.find(c => c.id === id)?.name ?? ''; },
                getMaterialName(id) { return this.allMaterials.find(m => m.id === id)?.name ?? ''; },
            }
        }
    </script>
@endsection