@extends('layouts.app')

@section('title', 'New Sale')
@section('nav_pos', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'New Sale')
@section('page_subtitle', 'Build and process a transaction')

@section('content')

@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 = [
        'all'          => 'All',
        'food_beverage'=> 'Food & Bev',
        'minibar'      => 'Minibar',
        'laundry'      => 'Laundry',
        'telephone'    => 'Telephone',
        'damage'       => 'Damage',
        'other'        => 'Misc',
    ];
@endphp

<div x-data="posBuilder()" x-init="init()">

{{-- Hidden form (Alpine populates these before submit) --}}
<form id="pos-form" method="POST" action="{{ route('pos.store') }}">
    @csrf
    <input type="hidden" name="mode" :value="mode">
    <input type="hidden" name="reservation_id" :value="selectedRoom ? selectedRoom.id : ''">
    <input type="hidden" name="payment_method" :value="mode === 'direct' ? paymentMethod : ''">
    <input type="hidden" name="reference" :value="paymentRef">
    <input type="hidden" name="notes" :value="notes">
    <template x-for="(item, i) in cart" :key="i">
        <span>
            <input type="hidden" :name="`items[${i}][product_id]`" :value="item.product_id ?? ''">
            <input type="hidden" :name="`items[${i}][description]`" :value="item.description">
            <input type="hidden" :name="`items[${i}][unit_price]`" :value="item.unit_price">
            <input type="hidden" :name="`items[${i}][quantity]`" :value="item.quantity">
            <input type="hidden" :name="`items[${i}][category]`" :value="item.category">
        </span>
    </template>
</form>

{{-- Back link --}}
<div class="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>

{{-- Step 1: Mode + room/payment selection --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5 mb-4">
    <p class="text-gray-400 text-[10px] uppercase tracking-wider font-semibold mb-3">Step 1 — How to settle?</p>

    <div class="flex items-center gap-3 mb-4">
        <button type="button" @click="mode = 'room'"
                :class="mode === 'room'
                    ? 'bg-blue-600 text-white border-blue-600'
                    : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50'"
                class="flex items-center gap-2.5 px-4 py-2.5 rounded-lg border-[0.5px] text-sm font-semibold 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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
            </svg>
            Charge to Room
        </button>

        <button type="button" @click="mode = 'direct'"
                :class="mode === 'direct'
                    ? 'bg-teal-600 text-white border-teal-600'
                    : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50'"
                class="flex items-center gap-2.5 px-4 py-2.5 rounded-lg border-[0.5px] text-sm font-semibold 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"/>
            </svg>
            Direct Sale
        </button>
    </div>

    {{-- Charge to Room: guest search --}}
    <div x-show="mode === 'room'" x-cloak>
        <div x-show="!selectedRoom" class="relative">
            <input type="text" x-model="roomQuery"
                   @input="showRoomDropdown = roomQuery.length > 0"
                   @blur="setTimeout(() => showRoomDropdown = false, 200)"
                   placeholder="Search by room number or guest name…"
                   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-blue-500/20 focus:border-blue-400">
            <div x-show="showRoomDropdown && filteredRooms().length > 0" x-cloak
                 class="absolute z-10 left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden">
                <template x-for="r in filteredRooms()" :key="r.id">
                    <button type="button" @click="selectRoom(r)"
                            class="w-full flex items-center gap-3 px-4 py-3 hover:bg-teal-50 transition-colors text-left border-b border-gray-50 last:border-0">
                        <div class="w-8 h-8 rounded-lg bg-blue-50 text-blue-700 flex items-center justify-center font-bold text-xs flex-shrink-0">
                            <span x-text="r.room_no"></span>
                        </div>
                        <div>
                            <p class="text-gray-700 font-medium text-sm" x-text="r.guest_name"></p>
                            <p class="text-gray-400 text-xs" x-text="`Room ${r.room_no} · ${r.booking_no}`"></p>
                        </div>
                    </button>
                </template>
            </div>
            <div x-show="showRoomDropdown && filteredRooms().length === 0 && roomQuery.length > 0" x-cloak
                 class="absolute z-10 left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg px-4 py-3">
                <p class="text-gray-400 text-sm">No checked-in guests matching "<span x-text="roomQuery"></span>"</p>
            </div>
        </div>

        <div x-show="selectedRoom" x-cloak
             class="flex items-center gap-3 px-4 py-3 bg-blue-50 border-[0.5px] border-blue-200 rounded-xl">
            <div class="w-9 h-9 rounded-lg bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-sm flex-shrink-0">
                <span x-text="selectedRoom?.room_no"></span>
            </div>
            <div class="flex-1">
                <p class="text-blue-700 font-semibold text-sm" x-text="selectedRoom?.guest_name"></p>
                <p class="text-blue-400 text-xs" x-text="`Room ${selectedRoom?.room_no} · ${selectedRoom?.booking_no} · Checked In`"></p>
            </div>
            <button type="button" @click="clearRoom()"
                    class="text-blue-400 hover:text-blue-600 transition-colors text-xs font-semibold">
                Change
            </button>
        </div>
    </div>

    {{-- Direct Sale: payment method --}}
    <div x-show="mode === 'direct'" x-cloak class="flex items-end gap-3">
        <div class="flex-1">
            <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Payment Method</label>
            <select x-model="paymentMethod"
                    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(['Cash','GCash','Maya','Credit Card','Debit Card','Bank Transfer'] as $m)
                <option>{{ $m }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex-1">
            <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Reference # <span class="font-normal normal-case text-gray-300">— optional</span></label>
            <input type="text" x-model="paymentRef" placeholder="Transaction / receipt #"
                   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>
</div>

{{-- Step 2: Products + Cart --}}
<div class="grid grid-cols-3 gap-4">

    {{-- Products (2/3) --}}
    <div class="col-span-2 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-400 text-[10px] uppercase tracking-wider font-semibold mb-3">Step 2 — Select Items</p>

            {{-- Category tabs --}}
            <div class="flex gap-1 flex-wrap">
                @foreach($catLabels as $key => $label)
                <button type="button" @click="activeCategory = '{{ $key }}'"
                        :class="activeCategory === '{{ $key }}'
                            ? 'bg-teal-600 text-white'
                            : 'bg-gray-50 text-gray-500 hover:bg-gray-100'"
                        class="px-3 py-1 rounded-lg text-xs font-semibold transition-colors">
                    {{ $label }}
                </button>
                @endforeach
            </div>
        </div>

        {{-- Product grid --}}
        <div class="p-4 grid grid-cols-3 gap-2.5">
            <template x-for="p in filteredProducts()" :key="p.id">
                <button type="button" @click="addProduct(p)"
                        class="text-left rounded-xl border-[0.5px] border-gray-100 hover:border-teal-300 hover:shadow-sm transition-all overflow-hidden group bg-white">
                    {{-- Image area --}}
                    <div class="h-24 bg-gray-50 overflow-hidden relative">
                        <template x-if="p.image_url">
                            <img :src="p.image_url" :alt="p.name"
                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
                        </template>
                        <template x-if="!p.image_url">
                            <div class="w-full h-full flex items-center justify-center">
                                <svg class="w-8 h-8 text-gray-200 group-hover:text-teal-200 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                          d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10"/>
                                </svg>
                            </div>
                        </template>
                        {{-- "Add" flash on hover --}}
                        <div class="absolute inset-0 bg-teal-600/0 group-hover:bg-teal-600/10 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
                            <div class="w-7 h-7 rounded-full bg-teal-600/80 flex items-center justify-center">
                                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                    {{-- Text --}}
                    <div class="p-2.5">
                        <p class="text-gray-700 font-semibold text-xs leading-tight group-hover:text-teal-700 transition-colors line-clamp-2" x-text="p.name"></p>
                        <p class="text-teal-600 font-bold text-sm mt-1">&#8369;<span x-text="p.price.toLocaleString('en-PH')"></span></p>
                    </div>
                </button>
            </template>

            <template x-if="filteredProducts().length === 0">
                <div class="col-span-3 py-6 text-center text-gray-300 text-sm">No products in this category</div>
            </template>
        </div>

        {{-- Custom item button --}}
        <div class="px-4 pb-4 border-t border-gray-50 pt-3">
            <button type="button" @click="addCustom()"
                    class="flex items-center gap-2 text-sm text-gray-400 hover:text-teal-600 transition-colors font-medium">
                <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="M12 4v16m8-8H4"/>
                </svg>
                Add Custom Item
            </button>
        </div>
    </div>

    {{-- Cart (1/3) --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl flex flex-col">
        <div class="px-4 py-4 border-b border-gray-100">
            <p class="text-gray-400 text-[10px] uppercase tracking-wider font-semibold">Cart</p>
        </div>

        {{-- Empty state --}}
        <div x-show="cart.length === 0" class="flex-1 flex flex-col items-center justify-center py-8 px-4">
            <svg class="w-8 h-8 text-gray-100 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                      d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
            </svg>
            <p class="text-gray-300 text-xs text-center">Tap a product or add a custom item</p>
        </div>

        {{-- Cart items --}}
        <div class="flex-1 overflow-y-auto divide-y divide-gray-50">
            <template x-for="(item, i) in cart" :key="i">
                <div class="px-4 py-3">
                    {{-- Description --}}
                    <template x-if="item.product_id !== null">
                        <p class="text-gray-700 text-sm font-medium leading-tight" x-text="item.description"></p>
                    </template>
                    <template x-if="item.product_id === null">
                        <input type="text" x-model="item.description" placeholder="Item description"
                               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 mb-1">
                    </template>

                    {{-- Category (custom only) --}}
                    <template x-if="item.product_id === null">
                        <select x-model="item.category"
                                class="w-full border-[0.5px] border-gray-200 rounded-lg px-2 py-1.5 text-xs text-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 mb-1">
                            <option value="food_beverage">Food & Beverage</option>
                            <option value="laundry">Laundry</option>
                            <option value="telephone">Telephone</option>
                            <option value="minibar">Minibar</option>
                            <option value="damage">Damage</option>
                            <option value="other" selected>Miscellaneous</option>
                        </select>
                    </template>

                    <div class="flex items-center gap-2 mt-1.5">
                        {{-- Qty controls --}}
                        <div class="flex items-center gap-1">
                            <button type="button" @click="decQty(i)"
                                    class="w-6 h-6 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-500 flex items-center justify-center text-sm font-bold leading-none transition-colors">−</button>
                            <span class="text-gray-700 font-semibold text-sm w-5 text-center" x-text="item.quantity"></span>
                            <button type="button" @click="incQty(i)"
                                    class="w-6 h-6 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-500 flex items-center justify-center text-sm font-bold leading-none transition-colors">+</button>
                        </div>

                        <span class="text-gray-200">·</span>

                        {{-- Price --}}
                        <template x-if="item.product_id !== null">
                            <p class="text-teal-700 font-semibold text-sm">&#8369;<span x-text="(item.unit_price * item.quantity).toLocaleString('en-PH')"></span></p>
                        </template>
                        <template x-if="item.product_id === null">
                            <div class="flex items-center gap-1 flex-1">
                                <span class="text-gray-400 text-sm">&#8369;</span>
                                <input type="number" x-model="item.unit_price" min="0" step="1" placeholder="0"
                                       class="w-full border-[0.5px] border-gray-200 rounded-lg px-2 py-1 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            </div>
                        </template>

                        {{-- Remove --}}
                        <button type="button" @click="removeItem(i)"
                                class="ml-auto text-gray-200 hover:text-red-400 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="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </template>
        </div>

        {{-- Total + Notes + Process --}}
        <div class="border-t border-gray-100 p-4 space-y-3">
            <div class="flex items-center justify-between">
                <p class="text-gray-500 font-semibold text-sm">Total</p>
                <p class="text-teal-700 font-black text-xl">&#8369;<span x-text="cartTotal().toLocaleString('en-PH')"></span></p>
            </div>

            <textarea x-model="notes" rows="2" placeholder="Notes (optional)…"
                      class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none"></textarea>

            <button type="button" @click="submit()"
                    :disabled="!canProcess()"
                    :class="canProcess()
                        ? 'bg-teal-600 hover:bg-teal-700 text-white cursor-pointer'
                        : 'bg-gray-100 text-gray-300 cursor-not-allowed'"
                    class="w-full py-2.5 rounded-lg text-sm font-semibold transition-colors">
                <span x-show="mode === 'room' && selectedRoom">Charge to Room <span x-text="selectedRoom?.room_no"></span></span>
                <span x-show="mode === 'direct'">Process — <span x-text="paymentMethod"></span></span>
                <span x-show="!mode || (mode === 'room' && !selectedRoom)">Select settlement method first</span>
            </button>
        </div>
    </div>

</div>
</div>

<script>
function posBuilder() {
    return {
        mode: null,
        selectedRoom: null,
        roomQuery: '',
        showRoomDropdown: false,
        paymentMethod: 'Cash',
        paymentRef: '',
        notes: '',
        activeCategory: 'all',
        cart: [],
        allProducts: [],
        allRooms: [],

        init() {
            this.allProducts = @json($productsJson);
            this.allRooms = @json($checkedInJson);
        },

        filteredProducts() {
            return this.allProducts.filter(p =>
                p.active && (this.activeCategory === 'all' || p.category === this.activeCategory)
            );
        },

        filteredRooms() {
            if (!this.roomQuery) return [];
            const q = this.roomQuery.toLowerCase();
            return this.allRooms.filter(r =>
                String(r.room_no).includes(q) ||
                r.guest_name.toLowerCase().includes(q) ||
                r.booking_no.toLowerCase().includes(q)
            );
        },

        addProduct(p) {
            const existing = this.cart.find(i => i.product_id === p.id);
            if (existing) { existing.quantity++; }
            else { this.cart.push({ product_id: p.id, description: p.name, unit_price: p.price, quantity: 1, category: p.category }); }
        },

        addCustom() {
            this.cart.push({ product_id: null, description: '', unit_price: '', quantity: 1, category: 'other' });
        },

        removeItem(i) { this.cart.splice(i, 1); },
        incQty(i) { this.cart[i].quantity++; },
        decQty(i) { if (this.cart[i].quantity > 1) this.cart[i].quantity--; else this.removeItem(i); },

        selectRoom(r) {
            this.selectedRoom = r;
            this.roomQuery = '';
            this.showRoomDropdown = false;
        },

        clearRoom() { this.selectedRoom = null; },

        cartTotal() {
            return this.cart.reduce((s, i) => s + (parseFloat(i.unit_price) || 0) * parseInt(i.quantity), 0);
        },

        canProcess() {
            if (this.cart.length === 0) return false;
            if (!this.mode) return false;
            if (this.mode === 'room' && !this.selectedRoom) return false;
            return this.cart.every(i => i.description && i.description.trim() !== '');
        },

        submit() {
            if (!this.canProcess()) return;
            document.getElementById('pos-form').submit();
        },
    };
}
</script>

@endsection