@extends('layouts.app')

@section('title', 'POS Products')
@section('nav_pos', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Product Catalog')
@section('page_subtitle', 'Manage POS products and services')

@section('content')

@if(session('success'))
<div class="mb-5 flex items-center gap-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl px-5 py-3.5">
    <svg class="w-4 h-4 text-teal-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <p class="text-teal-700 text-sm font-medium">{{ session('success') }}</p>
</div>
@endif

@if($errors->any())
<div class="mb-5 bg-red-50 border-[0.5px] border-red-200 text-red-700 text-sm px-4 py-3 rounded-xl">
    <ul class="list-disc list-inside space-y-0.5">
        @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
    </ul>
</div>
@endif

@php
    $catLabels = [
        'food_beverage' => 'Food & Bev',
        'laundry'       => 'Laundry',
        'telephone'     => 'Telephone',
        'minibar'       => 'Minibar',
        'damage'        => 'Damage',
        'other'         => 'Misc',
    ];
    $catColors = [
        'food_beverage' => 'bg-orange-50 text-orange-700 border-orange-200',
        'laundry'       => 'bg-blue-50 text-blue-700 border-blue-200',
        'telephone'     => 'bg-purple-50 text-purple-700 border-purple-200',
        'minibar'       => 'bg-amber-50 text-amber-700 border-amber-200',
        'damage'        => 'bg-red-50 text-red-600 border-red-200',
        'other'         => 'bg-gray-50 text-gray-500 border-gray-200',
    ];
@endphp

<div class="flex items-center justify-between mb-5">
    <a href="{{ route('pos.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-600 transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to POS
    </a>
</div>

{{-- Add Product --}}
<div x-data="{ open: false, preview: null }" class="bg-white border-[0.5px] border-gray-200 rounded-xl mb-4 overflow-hidden">
    <button type="button" @click="open = !open"
            class="w-full flex items-center justify-between px-5 py-4 hover:bg-gray-50 transition-colors">
        <div class="flex items-center gap-2 text-gray-600 font-semibold text-sm">
            <svg class="w-4 h-4 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Add New Product
        </div>
        <svg class="w-4 h-4 text-gray-400 transition-transform" :class="open ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </button>

    <div x-show="open" x-cloak class="border-t border-gray-100 px-5 py-5">
        <form method="POST" action="{{ route('pos.products.store') }}" enctype="multipart/form-data" class="grid grid-cols-2 gap-4">
            @csrf
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Product Name <span class="text-red-400">*</span></label>
                <input type="text" name="name" value="{{ old('name') }}" required
                       class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Price (₱) <span class="text-red-400">*</span></label>
                <input type="number" name="price" value="{{ old('price') }}" min="0" step="1" required
                       class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Category <span class="text-red-400">*</span></label>
                <select name="category" required
                        class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    @foreach($catLabels as $val => $lbl)
                    <option value="{{ $val }}" {{ old('category') === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Description <span class="font-normal normal-case text-gray-300">— optional</span></label>
                <input type="text" name="description" value="{{ old('description') }}"
                       class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
            </div>

            {{-- Image upload --}}
            <div class="col-span-2">
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Product Image <span class="font-normal normal-case text-gray-300">— optional, shown on sale screen</span></label>
                <div class="flex items-center gap-4">
                    {{-- Preview --}}
                    <div class="w-20 h-20 rounded-xl border-[0.5px] border-gray-200 bg-gray-50 flex items-center justify-center overflow-hidden flex-shrink-0">
                        <img x-show="preview" :src="preview" class="w-full h-full object-cover" alt="">
                        <svg x-show="!preview" class="w-7 h-7 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <input type="file" name="image" accept="image/*"
                               @change="preview = $event.target.files[0] ? URL.createObjectURL($event.target.files[0]) : null"
                               class="w-full text-sm text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100 file:cursor-pointer cursor-pointer">
                        <p class="text-[10px] text-gray-300 mt-1">JPG, PNG, GIF or WebP · max 2 MB</p>
                    </div>
                </div>
            </div>

            <div class="col-span-2 flex items-center justify-between pt-1">
                <label class="flex items-center gap-2.5 cursor-pointer">
                    <input type="checkbox" name="active" value="1" checked
                           class="w-4 h-4 rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                    <span class="text-sm text-gray-600 font-medium">Active (visible on sale screen)</span>
                </label>
                <button type="submit"
                        class="px-4 py-2 text-sm font-semibold bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors">
                    Add Product
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Product table --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100">
        <p class="text-gray-500 text-xs font-semibold uppercase tracking-wider">{{ $products->count() }} Products</p>
    </div>

    @if($products->isEmpty())
    <div class="px-5 py-10 text-center text-gray-300 text-sm">No products yet. Add the first one above.</div>
    @else
    <table class="w-full text-sm">
        <thead>
            <tr class="border-b border-gray-100">
                <th class="px-5 py-3 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider w-12"></th>
                <th class="px-5 py-3 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Name</th>
                <th class="px-5 py-3 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Category</th>
                <th class="px-5 py-3 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Price</th>
                <th class="px-5 py-3 text-center text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Status</th>
                <th class="px-5 py-3"></th>
            </tr>
        </thead>
        <tbody>
            @foreach($products as $product)
            <tr x-data="{ editing: false, preview: null, removeImg: false }"
                class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">

                {{-- Thumbnail --}}
                <td class="px-5 py-3">
                    <div class="w-10 h-10 rounded-lg border-[0.5px] border-gray-100 overflow-hidden flex items-center justify-center bg-gray-50 flex-shrink-0">
                        @if($product->image_path)
                        <img x-show="!editing || !removeImg"
                             src="{{ $product->image_url }}" alt="{{ $product->name }}"
                             class="w-full h-full object-cover">
                        <div x-show="editing && removeImg" x-cloak
                             class="w-full h-full flex items-center justify-center">
                            <svg class="w-5 h-5 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        @else
                        <template x-if="preview">
                            <img :src="preview" class="w-full h-full object-cover" alt="">
                        </template>
                        <template x-if="!preview">
                            <svg class="w-5 h-5 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                        </template>
                        @endif
                    </div>
                </td>

                {{-- Name --}}
                <td class="px-5 py-3">
                    <p class="text-gray-700 font-medium" x-show="!editing">{{ $product->name }}</p>
                    <input x-show="editing" x-cloak type="text" name="name" value="{{ $product->name }}"
                           class="w-full border-[0.5px] border-gray-200 rounded-lg px-2 py-1.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400"
                           form="edit-{{ $product->id }}">
                    @if($product->description)
                    <p class="text-gray-400 text-xs mt-0.5" x-show="!editing">{{ $product->description }}</p>
                    @endif

                    {{-- Image controls in edit mode --}}
                    <div x-show="editing" x-cloak class="mt-2 space-y-1.5">
                        @if($product->image_path)
                        <label class="flex items-center gap-2 cursor-pointer" x-show="!preview">
                            <input type="checkbox" x-model="removeImg" name="remove_image" value="1"
                                   form="edit-{{ $product->id }}"
                                   class="w-3.5 h-3.5 rounded border-gray-300 text-red-500 focus:ring-red-400">
                            <span class="text-[10px] text-gray-400">Remove current image</span>
                        </label>
                        @endif
                        <input type="file" name="image" accept="image/*"
                               @change="preview = $event.target.files[0] ? URL.createObjectURL($event.target.files[0]) : null; removeImg = false"
                               form="edit-{{ $product->id }}"
                               class="w-full text-xs text-gray-500 file:mr-2 file:py-1 file:px-2.5 file:rounded-md file:border-0 file:text-[10px] file:font-semibold file:bg-gray-100 file:text-gray-600 hover:file:bg-gray-200 file:cursor-pointer cursor-pointer">
                        <template x-if="preview">
                            <div class="flex items-center gap-2">
                                <img :src="preview" class="w-8 h-8 rounded-md object-cover border border-gray-100">
                                <span class="text-[10px] text-teal-600 font-medium">New image ready</span>
                                <button type="button" @click="preview = null" class="text-[10px] text-gray-300 hover:text-red-400 transition-colors">✕</button>
                            </div>
                        </template>
                    </div>
                </td>

                {{-- Category --}}
                <td class="px-5 py-3" x-show="!editing">
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold border-[0.5px] {{ $catColors[$product->category] ?? 'bg-gray-50 text-gray-400 border-gray-200' }}">
                        {{ $catLabels[$product->category] ?? $product->category }}
                    </span>
                </td>
                <td class="px-5 py-3" x-show="editing" x-cloak>
                    <select name="category" form="edit-{{ $product->id }}"
                            class="w-full border-[0.5px] border-gray-200 rounded-lg px-2 py-1.5 text-xs text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        @foreach($catLabels as $val => $lbl)
                        <option value="{{ $val }}" {{ $product->category === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                        @endforeach
                    </select>
                </td>

                {{-- Price --}}
                <td class="px-5 py-3 text-right">
                    <span x-show="!editing" class="font-semibold text-gray-700">&#8369;{{ number_format($product->price, 0) }}</span>
                    <input x-show="editing" x-cloak type="number" name="price" value="{{ $product->price }}" min="0" step="1"
                           form="edit-{{ $product->id }}"
                           class="w-24 border-[0.5px] border-gray-200 rounded-lg px-2 py-1.5 text-sm text-gray-700 text-right focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                </td>

                {{-- Status --}}
                <td class="px-5 py-3 text-center">
                    @if($product->active)
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-green-50 text-green-700 border-[0.5px] border-green-200">Active</span>
                    @else
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-gray-50 text-gray-400 border-[0.5px] border-gray-200">Inactive</span>
                    @endif
                </td>

                {{-- Actions --}}
                <td class="px-5 py-3 text-right">
                    <div x-show="!editing" class="flex items-center justify-end gap-2">
                        <button type="button" @click="editing = true; preview = null; removeImg = false"
                                class="text-xs font-semibold text-gray-400 hover:text-teal-600 transition-colors">
                            Edit
                        </button>
                        <form method="POST" action="{{ route('pos.products.update', $product->id) }}"
                              data-confirm="Toggle active status for {{ $product->name }}?">
                            @csrf @method('PATCH')
                            <input type="hidden" name="name" value="{{ $product->name }}">
                            <input type="hidden" name="price" value="{{ $product->price }}">
                            <input type="hidden" name="category" value="{{ $product->category }}">
                            <input type="hidden" name="active" value="{{ $product->active ? '0' : '1' }}">
                            <button type="submit"
                                    class="text-xs font-semibold {{ $product->active ? 'text-gray-400 hover:text-amber-600' : 'text-gray-400 hover:text-green-600' }} transition-colors">
                                {{ $product->active ? 'Deactivate' : 'Activate' }}
                            </button>
                        </form>
                        <form method="POST" action="{{ route('pos.products.destroy', $product->id) }}"
                              data-confirm="Delete {{ $product->name }}? This cannot be undone." data-danger="true">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-xs font-semibold text-gray-300 hover:text-red-500 transition-colors">
                                Delete
                            </button>
                        </form>
                    </div>

                    {{-- Edit mode save/cancel --}}
                    <div x-show="editing" x-cloak class="flex items-center justify-end gap-2">
                        <button type="submit" form="edit-{{ $product->id }}"
                                class="text-xs font-semibold text-teal-600 hover:text-teal-700 transition-colors">
                            Save
                        </button>
                        <button type="button" @click="editing = false; preview = null; removeImg = false"
                                class="text-xs font-semibold text-gray-400 hover:text-gray-600 transition-colors">
                            Cancel
                        </button>
                    </div>
                </td>

                {{-- Hidden edit form (multipart for file upload) --}}
                <td class="hidden">
                    <form id="edit-{{ $product->id }}" method="POST" enctype="multipart/form-data"
                          action="{{ route('pos.products.update', $product->id) }}" @submit="editing = false">
                        @csrf @method('PATCH')
                        <input type="hidden" name="active" value="{{ $product->active ? '1' : '0' }}">
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    @endif
</div>

@endsection