@extends('layouts.app')

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

@section('breadcrumb')
    <li class="app-breadcrumb__item text-[var(--text-secondary)]">
        <a href="{{ route('dashboard.home') }}" class="text-[var(--text-secondary)] hover:text-[var(--c-primary-dark)]">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="app-breadcrumb__item text-[var(--text-secondary)]">
        <a href="{{ route('dashboard.laundry_operations.index') }}" class="text-[var(--text-secondary)] hover:text-[var(--c-primary-dark)]">{{ __('dashboard.Laundry Operations') }}</a>
    </li>
    <li class="app-breadcrumb__item text-[var(--text-secondary)]">{{ __('dashboard.Add Laundry Operation') }}</li>
@endsection

@section('content')
<style>
    .app-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        min-height: 42px;
        padding: .6rem 1.1rem;
        border: 1px solid transparent;
        border-radius: 10px;
        font-size: .875rem;
        font-weight: 800;
        line-height: 1.25;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: transform .18s, box-shadow .18s, background .18s, border-color .18s, color .18s;
    }
    .app-action:hover {
        transform: translateY(-1px);
    }
    .app-action--sm {
        min-height: 34px;
        padding: .4rem .85rem;
        border-radius: 8px;
        font-size: .8rem;
    }
    .app-action--icon {
        width: 38px;
        padding: 0;
    }
    .app-action--primary {
        background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
        color: #fff;
        box-shadow: 0 4px 14px rgba(var(--c-primary-rgb), .35);
    }
    .app-action--secondary {
        background: var(--surface-50);
        border-color: var(--border);
        color: var(--surface-700);
    }
    .app-action--soft {
        background: var(--c-primary-bg);
        border-color: var(--c-primary-pale);
        color: var(--c-primary-darker);
    }
    .app-action--danger {
        background: #fef2f2;
        border-color: #fecaca;
        color: #dc2626;
    }
    .laundry-create-page .app-panel {
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--bg-card);
        box-shadow: var(--shadow-card);
        overflow: hidden;
    }
    .laundry-create-page .app-panel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border-subtle);
        background: var(--bg-card);
    }
    .laundry-create-page .app-panel__title {
        margin: 0;
        font-size: 1rem;
        font-weight: 900;
        color: var(--text-primary);
    }
    .laundry-create-page .app-panel__body {
        padding: 1.5rem;
    }
    .laundry-create-page .app-field-label {
        display: block;
        margin: .75rem 0 .4rem;
        color: var(--surface-700);
        font-size: .875rem;
        font-weight: 700;
    }
    .laundry-create-page .app-input-line {
        display: flex;
        align-items: stretch;
        gap: .5rem;
        flex-wrap: wrap;
    }
    .laundry-create-page .app-input-line .app-input {
        flex: 1 1 240px;
    }
    .laundry-create-page .app-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: .3rem .7rem;
        font-size: .75rem;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }
    .laundry-create-page .app-chip--primary {
        background: var(--c-primary-bg);
        color: var(--c-primary-darker);
    }
    .laundry-create-grid {
        display: grid;
        gap: 1.75rem;
    }
    @media (min-width: 1200px) {
        .laundry-create-grid {
            grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        }
    }
    .laundry-create-search-results {
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        overflow: hidden;
        background: var(--bg-card);
    }
    .laundry-create-result {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
        text-decoration: none;
        color: inherit;
        border-bottom: 1px solid var(--border);
    }
    .laundry-create-result:last-child {
        border-bottom: 0;
    }
    .laundry-create-result:hover {
        background: var(--surface-50);
    }
    .laundry-create-result__image {
        width: 56px;
        height: 56px;
        border-radius: var(--radius-xl);
        object-fit: cover;
        flex-shrink: 0;
    }
    .laundry-create-selected-item {
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--bg-card);
    }
    .laundry-create-selected-thumb {
        width: 64px;
        height: 64px;
        border-radius: var(--radius-xl);
        object-fit: cover;
        flex-shrink: 0;
    }
    .laundry-create-empty {
        border: 1px dashed var(--border);
        border-radius: var(--radius-xl);
        padding: 1.25rem;
        text-align: center;
        color: var(--text-secondary);
        background: var(--surface-50);
    }
    .laundry-create-page .app-placeholder {
        background: var(--surface-50);
        color: var(--text-secondary);
    }
    .laundry-create-modal-dialog {
        width: min(640px, 92vw);
        background: var(--bg-card);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-modal);
        overflow: hidden;
    }
    .laundry-create-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.25rem;
        border-bottom: 1px solid var(--border);
    }
    .app-spinner {
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-inline-end-color: transparent;
        border-radius: 999px;
        animation: laundry-spin .65s linear infinite;
    }
    @keyframes laundry-spin {
        to { transform: rotate(360deg); }
    }
</style>

<div class="laundry-create-page">
<div class="laundry-create-grid">
    <div>
        <div class="app-panel h-full">
            <div class="app-panel__header">
                    <h2 class="app-panel__title">{{ __('dashboard.Add Laundry Operation') }}</h2>
                    <a href="{{ route('dashboard.laundry_operations.index') }}" class="app-action app-action--secondary app-action--sm">
                        {{ __('dashboard.Laundry Operations') }}
                    </a>
                </div>
            <div class="app-panel__body">
                <div class="mb-4 text-sm font-semibold leading-7 text-[var(--surface-700)]">
                    أرسل القطع إلى المغسلة ضمن عملية واضحة، ثم تابع الاستلام لاحقًا من سجل عمليات الغسيل.
                </div>
                <div class="flex gap-4 rounded-xl border border-dashed p-6" style="border-color:var(--c-primary-pale);background:var(--c-primary-bg)">
                    <i class="ki-outline ki-information-5 shrink-0 text-3xl text-[var(--c-primary-dark)]"></i>
                    <div class="min-w-0 flex-1">
                        <div class="font-semibold">
                            <h4 class="mb-2 font-bold text-[var(--text-primary)]">{{ __('dashboard.quick_notes') }}</h4>
                            <div class="text-sm leading-7 text-[var(--surface-700)]">
                                اختر المغسلة أولاً ثم أضف المنتجات بالبحث أو عبر SKU.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div>
        <form action="{{ route('dashboard.laundry_operations.store') }}" method="POST">
            @csrf

            <div class="app-panel mb-7">
                <div class="app-panel__header">
                    <h2 class="app-panel__title">{{ __('dashboard.operation_data') }}</h2>
                </div>
                <div class="app-panel__body">
                    <div class="grid gap-5">
                        <div>
                            <label class="app-field-label required">{{ __('dashboard.Select Laundry') }}</label>
                            <select name="laundry_id" class="app-input app-select @error('laundry_id') border-red-500 @enderror" required>
                                <option value="">اختر المغسلة</option>
                                @foreach($laundries as $laundry)
                                    <option value="{{ $laundry->id }}" @selected(old('laundry_id') == $laundry->id)>
                                        {{ $laundry->name }} {{ $laundry->is_default ? __('dashboard.Default') : '' }}
                                    </option>
                                @endforeach
                            </select>
                            @error('laundry_id')
                                <div class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="app-panel">
                <div class="app-panel__header">
                    <h2 class="app-panel__title">المنتجات المرسلة إلى الغسيل</h2>
                </div>
                <div class="app-panel__body">
                    <div class="grid gap-5">
                        <div>
                            <label class="app-field-label required">{{ __('dashboard.Select Products') }}</label>
                            <div class="app-input-line mb-4">
                                <input type="text" id="product_search" class="app-input" placeholder="{{ __('dashboard.Search for products by name or SKU') }}">
                                <button type="button" class="app-action app-action--soft" id="search_product_btn">
                                    <span id="product_search_spinner" class="app-spinner hidden" role="status" aria-hidden="true"></span>
                                    {{ __('dashboard.Search') }}
                                </button>
                                <button type="button" class="app-action app-action--primary" id="add_product_by_sku_btn">
                                    {{ __('dashboard.Add by SKU') }}
                                </button>
                            </div>

                            <div id="product_search_results" class="laundry-create-search-results mb-5 hidden"></div>

                            <select name="products[]" id="selected_products" class="hidden" multiple></select>
                            @error('products')
                                <div class="mb-3 text-xs font-semibold text-red-600">{{ $message }}</div>
                            @enderror
                            @error('products.*')
                                <div class="mb-3 text-xs font-semibold text-red-600">{{ $message }}</div>
                            @enderror

                            <div class="mb-4">
                                <div class="mb-3 font-bold text-[var(--text-primary)]">المنتجات المختارة</div>
                                <div id="selected_products_empty" class="laundry-create-empty">
                                    لم يتم اختيار أي منتج بعد.
                                </div>
                                <div id="selected_products_display" class="mt-4 grid gap-3"></div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-7 flex justify-end gap-3">
                        <a href="{{ route('dashboard.laundry_operations.index') }}" class="app-action app-action--secondary">{{ __('dashboard.Cancel') }}</a>
                        <button type="submit" class="app-action app-action--primary">
                            <span class="indicator-label">{{ __('dashboard.Send to Laundry') }}</span>
                            <span class="app-indicator-progress">{{ __('dashboard.Please wait...') }}
                                <span class="app-spinner align-middle" style="margin-inline-start:.5rem"></span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </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 class="laundry-create-modal-dialog">
        <div class="laundry-create-modal-header">
            <h5 class="m-0" id="productImageModalLabel">{{ __('dashboard.Product Image') }}</h5>
            <button type="button" class="app-action app-action--icon app-action--secondary app-action--sm" data-modal-close aria-label="{{ __('dashboard.Close') }}">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>
        <div class="p-5 text-center">
            <img src="" id="modalProductImage" class="h-auto max-w-full" 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 selectedProductsEmpty = document.getElementById('selected_products_empty');
    const addProductBySkuBtn = document.getElementById('add_product_by_sku_btn');
    const modalProductImage = document.getElementById('modalProductImage');

    function toggleEmptyState() {
        selectedProductsEmpty.classList.toggle('hidden', selectedProductsSelect.options.length > 0);
    }

    function getProductImage(product) {
        if (product.image) return product.image;
        if (product.main_image) return `/storage/${product.main_image}`;
        return '';
    }

    function searchProducts(query) {
        productSearchSpinner.classList.remove('hidden');
        fetch(`{{ route("dashboard.products.search") }}?${new URLSearchParams({ keyword: query })}`)
            .then(response => response.json())
            .then(response => {
                productSearchResults.innerHTML = '';
                productSearchResults.classList.remove('hidden');
                if (response.length > 0) {
                    response.forEach(product => {
                        const imageHtml = product.main_image
                            ? `<img src="/storage/${product.main_image}" alt="${product.name}" class="laundry-create-result__image" data-image="/storage/${product.main_image}">`
                            : `<div class="laundry-create-result__image app-placeholder flex items-center justify-center"><i class="fa-solid fa-image"></i></div>`;

                        productSearchResults.insertAdjacentHTML('beforeend', `
                            <a href="#" class="laundry-create-result product-result" data-product-id="${product.id}">
                                ${imageHtml}
                                <div class="min-w-0 flex-1">
                                    <div class="font-bold text-[var(--text-primary)]">${product.name}</div>
                                    <div class="text-xs text-[var(--text-secondary)]">SKU: ${product.sku}</div>
                                </div>
                                <span class="app-chip app-chip--primary">إضافة</span>
                            </a>
                        `);
                    });
                } else {
                    productSearchResults.innerHTML = '<div class="p-4 text-center text-[var(--text-secondary)]">{{ __("dashboard.No results found") }}</div>';
                }
            })
            .finally(() => productSearchSpinner.classList.add('hidden'));
    }

    function addProductToSelection(product) {
        if (selectedProductsSelect.querySelector(`option[value="${product.id}"]`)) {
            return;
        }

        selectedProductsSelect.insertAdjacentHTML('beforeend', `<option value="${product.id}" selected>${product.name}</option>`);
        const image = getProductImage(product);

        const productImage = image
            ? `<img src="${image}" alt="${product.name}" class="laundry-create-selected-thumb" data-modal-open="productImageModal" data-image="${image}">`
            : `<div class="laundry-create-selected-thumb app-placeholder flex items-center justify-center"><i class="fa-solid fa-image"></i></div>`;

        selectedProductsDisplay.insertAdjacentHTML('beforeend', `
            <div class="laundry-create-selected-item p-4" data-product-id="${product.id}">
                <div class="flex flex-wrap items-center gap-4">
                    ${productImage}
                    <div class="min-w-0 flex-1">
                        <div class="font-bold text-[var(--text-primary)]">${product.name}</div>
                        <div class="text-xs text-[var(--text-secondary)]">SKU: ${product.sku}</div>
                    </div>
                    <button type="button" class="app-action app-action--icon app-action--danger remove-product" data-product-id="${product.id}">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
            </div>
        `);

        productSearchInput.value = '';
        productSearchResults.innerHTML = '';
        productSearchResults.classList.add('hidden');
        toggleEmptyState();
    }

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

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

    addProductBySkuBtn.addEventListener('click', function() {
        const 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) {
                    addProductToSelection(response[0]);
                } 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.") }}');
            });
    });

    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();
        selectedProductsDisplay.querySelector(`[data-product-id="${productId}"]`)?.remove();
        toggleEmptyState();
    });

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

    toggleEmptyState();
});
</script>
@endsection