@extends('layouts.app')

@section('title', __('dashboard.Edit Laundry Operation'))
@section('page_heading', __('dashboard.Edit Laundry Operation'))

@section('content')
<div class="app-grid g-7">
    <div class="col-span-12">
        @if(session('success'))
            <div class="app-alert app-alert--success">{{ session('success') }}</div>
        @endif

        <div class="app-card app-card--flush">
            <div class="app-card__header">
                <h2 class="app-card__title">{{ __('dashboard.Edit Laundry Operation') }}</h2>
            </div>
            <div class="app-card__body pt-5">
                <form action="{{ route('dashboard.laundry_operations.update', $laundryOperation->id) }}" method="POST">
                    @csrf
                    @method('PATCH')

                    <div class="mb-7">
                        <label class="required app-label">{{ __('dashboard.Select Laundry') }}</label>
                        <select name="laundry_id" class="app-input @error('laundry_id') app-input--invalid @enderror" required>
                            @foreach($laundries as $laundry)
                                <option value="{{ $laundry->id }}" {{ old('laundry_id', $laundryOperation->laundry_id) == $laundry->id ? 'selected' : '' }}>
                                    {{ $laundry->name }} {{ $laundry->is_default ? __('dashboard.Default') : '' }}
                                </option>
                            @endforeach
                        </select>
                        @error('laundry_id')
                            <div class="app-field-error">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-7">
                        <label class="required app-label">{{ __('dashboard.Select Products') }}</label>

                        <div class="app-input-group mb-3">
                            <input type="text" id="product_search" class="app-input" placeholder="{{ __('dashboard.Search for products by name or SKU') }}">
                            <button type="button" class="app-btn app-btn--secondary" id="search_product_btn">
                                <span id="product_search_spinner" class="app-spinner app-spinner--sm hidden" role="status" aria-hidden="true"></span>
                                {{ __('dashboard.Search') }}
                            </button>
                            <button type="button" class="app-btn app-btn--success" id="add_product_by_sku_btn">
                                {{ __('dashboard.Add by SKU') }}
                            </button>
                        </div>

                        <div id="product_search_results" class="mb-3"></div>

                        <select name="products[]" id="selected_products" class="app-input hidden" multiple>
                            @foreach($laundryOperation->products as $product)
                                <option value="{{ $product->id }}" selected>{{ $product->name }}</option>
                            @endforeach
                        </select>

                        <div id="selected_products_display" class="mt-3">
                            @foreach($laundryOperation->products as $product)
                                <div class="app-card mb-2">
                                    <div class="app-card__body flex items-center">
                                        <img src="{{ asset('storage/' . $product->main_image) }}" alt="{{ $product->name }}" class="me-3" style="width: 50px;cursor:pointer;" data-modal-open="productImageModal" data-image="{{ asset('storage/' . $product->main_image) }}">
                                        <div>
                                            <h6 class="app-card__title mb-0">{{ $product->name }}</h6>
                                            <p class="app-card__text mb-0">SKU: {{ $product->sku }}</p>
                                        </div>
                                        <button type="button" class="app-btn app-btn--sm app-btn--danger ms-auto remove-product" data-product-id="{{ $product->id }}">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="mb-7">
                        <label class="required app-label">{{ __('dashboard.Status') }}</label>
                        <select name="status" class="app-input @error('status') app-input--invalid @enderror" required>
                            <option value="sent" {{ old('status', $laundryOperation->status) == 'sent' ? 'selected' : '' }}>
                                {{ __('dashboard.sent') }}
                            </option>
                            <option value="received" {{ old('status', $laundryOperation->status) == 'received' ? 'selected' : '' }}>
                                {{ __('dashboard.received') }}
                            </option>
                        </select>
                        @error('status')
                            <div class="app-field-error">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-7" id="laundry_amount_section" style="display:none;">
                        <label class="required app-label">{{ __('dashboard.Laundry Amount') }}</label>
                        <input type="number" step="0.01" name="laundry_amount" class="app-input @error('laundry_amount') app-input--invalid @enderror"
                               value="{{ old('laundry_amount', $laundryOperation->laundry_amount) }}">
                        @error('laundry_amount')
                            <div class="app-field-error">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="flex justify-end">
                        <a href="{{ route('dashboard.laundry_operations.index') }}" class="app-btn app-btn--ghost me-3">{{ __('dashboard.Cancel') }}</a>
                        <button type="submit" class="app-btn app-btn--primary">{{ __('dashboard.Save') }}</button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

<div class="custom-modal" id="productImageModal" style="display:none;position:fixed;inset:0;z-index:1050;align-items:center;justify-content:center;background:rgba(15,23,42,.7);backdrop-filter:blur(4px)">
    <div style="width:min(640px,92vw);background:var(--bg-card,#fff);border-radius:1rem;box-shadow:0 24px 80px rgba(15,23,42,.35);overflow:hidden">
        <div class="flex items-center justify-between gap-4 p-5 border-b border-slate-200 dark:border-slate-700">
            <h5 class="mb-0" id="productImageModalLabel">{{ __('dashboard.Product Image') }}</h5>
            <button type="button" class="app-btn app-btn--sm app-btn--ghost" data-modal-close aria-label="{{ __('dashboard.Close') }}">
                <i class="ui-icon ui-icon-x-lg"></i>
            </button>
        </div>
        <div class="text-center p-5">
            <img src="" id="modalProductImage" class="max-w-full h-auto block" alt="Product Image">
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const productSearchInput = document.getElementById('product_search');
    const searchProductBtn = document.getElementById('search_product_btn');
    const productSearchSpinner = document.getElementById('product_search_spinner');
    const productSearchResults = document.getElementById('product_search_results');
    const selectedProductsSelect = document.getElementById('selected_products');
    const selectedProductsDisplay = document.getElementById('selected_products_display');
    const addProductBySkuBtn = document.getElementById('add_product_by_sku_btn');
    const modalProductImage = document.getElementById('modalProductImage');

    // Toggle laundry amount section based on status
    const statusSelect = document.querySelector('select[name="status"]');
    const laundrySection = document.getElementById('laundry_amount_section');

    function toggleLaundryAmount() {
        if(statusSelect.value === 'received') {
            laundrySection.style.display = '';
        } else {
            laundrySection.style.display = 'none';
        }
    }

    statusSelect.addEventListener('change', toggleLaundryAmount);
    toggleLaundryAmount();

    function searchProducts(query) {
        productSearchSpinner.classList.remove('hidden');
        fetch(`{{ route("dashboard.products.search") }}?${new URLSearchParams({ keyword: query })}`)
            .then(response => response.json())
            .then(response => {
                productSearchResults.innerHTML = '';
                if (response.length > 0) {
                    response.forEach(product => {
                        let imageHtml = product.main_image ?
                            `<img src="/storage/${product.main_image}" alt="${product.name}" class="me-2 product-image-thumb" style="width: 50px; cursor: pointer;" data-image="/storage/${product.main_image}">` :
                            '';
                        let resultHtml = `
                            <a href="#" class="product-result flex items-center p-2 border-b border-slate-200 dark:border-slate-700" data-product-id="${product.id}" data-product-name="${product.name}" data-product-sku="${product.sku}">
                                ${imageHtml}
                                <div>
                                    <span class="product-name">${product.name}</span>
                                    <span class="product-sku">SKU: ${product.sku}</span>
                                </div>
                            </a>
                        `;
                        productSearchResults.insertAdjacentHTML('beforeend', resultHtml);
                    });
                } else {
                    productSearchResults.innerHTML = '<p class="text-slate-500 dark:text-slate-400 p-2">{{ __("dashboard.No results found") }}</p>';
                }
            })
            .finally(() => productSearchSpinner.classList.add('hidden'));
    }

    productSearchInput.addEventListener('input', function() {
        let query = this.value;
        if (query.length > 2) {
            searchProducts(query);
        } else {
            productSearchResults.innerHTML = '';
        }
    });

    searchProductBtn.addEventListener('click', function() {
        let query = productSearchInput.value;
        if (query) {
            searchProducts(query);
        }
    });

    // Add product by SKU
    addProductBySkuBtn.addEventListener('click', function() {
        let sku = productSearchInput.value.trim();
        if (!sku) {
            return;
        }

        fetch(`{{ route("dashboard.products.search") }}?${new URLSearchParams({ keyword: sku })}`)
            .then(response => response.json())
            .then(response => {
                if (response.length === 1) {
                    const product = response[0];
                    addProductToSelection(product);
                } else if (response.length > 1) {
                    alert('{{ __("dashboard.Multiple products found with this SKU, please select from the search results.") }}');
                } else {
                    alert('{{ __("dashboard.No product found with this SKU.") }}');
                }
            })
            .catch(() => {
                alert('{{ __("dashboard.An error occurred while searching by SKU.") }}');
            });
    });

    // Add product to selection and remove previous selections
    function addProductToSelection(product) {

        // Check if the product is already selected
        if (!selectedProductsSelect.querySelector(`option[value="${product.id}"]`)) {
            selectedProductsSelect.insertAdjacentHTML('beforeend', `<option value="${product.id}" selected>${product.name}</option>`);
            const image = product.image || (product.main_image ? `/storage/${product.main_image}` : '');

            let displayHtml = `
                <div class="app-card mb-2">
                    <div class="app-card__body flex items-center">
                        <img src="${image}" alt="${product.name}" class="me-3" style="width: 50px;cursor:pointer;" data-modal-open="productImageModal" data-image="${image}">
                        <div>
                            <h6 class="app-card__title mb-0">${product.name}</h6>
                            <p class="app-card__text mb-0">SKU: ${product.sku}</p>
                        </div>
                        <button type="button" class="app-btn app-btn--sm app-btn--danger ms-auto remove-product" data-product-id="${product.id}">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            `;
            selectedProductsDisplay.insertAdjacentHTML('beforeend', displayHtml);
        }

        productSearchInput.value = '';
        productSearchResults.innerHTML = '';
    }

    productSearchResults.addEventListener('click', function(e) {
        const result = e.target.closest('.product-result');
        if (!result) return;
        e.preventDefault();
        const productId = result.dataset.productId;

        fetch(`/dashboard/products/${productId}/json`)
            .then(response => response.json())
            .then(product => {
                addProductToSelection(product);
            })
            .catch(() => {
                alert('{{ __("dashboard.An error occurred while retrieving product details.") }}');
            });
    });

    selectedProductsDisplay.addEventListener('click', function(e) {
        const button = e.target.closest('.remove-product');
        if (!button) return;
        const productId = button.dataset.productId;
        selectedProductsSelect.querySelector(`option[value="${productId}"]`)?.remove();
        button.closest('.app-card')?.remove();
    });

    // Enlarge image on click
    document.addEventListener('click', function(e) {
        const trigger = e.target.closest('[data-modal-open="productImageModal"]');
        if (!trigger) return;
        modalProductImage.src = trigger.dataset.image || '';
    });
});
</script>
@endsection