@extends('layouts.app')

@section('title', __('dashboard.edit_laundry_operation_title'))
@section('page_heading', __('dashboard.edit_laundry_operation_heading'))

@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.edit_laundry_operation_title') }}</li>
@endsection

@section('content')
@include('dashboard.partials.audit-log-styles')
<style>
    .laundry-edit-page .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;
    }
    .laundry-edit-page .app-action:hover { transform: translateY(-1px); }
    .laundry-edit-page .app-action--sm {
        min-height: 34px;
        padding: .4rem .85rem;
        border-radius: 8px;
        font-size: .8rem;
    }
    .laundry-edit-page .app-action--icon {
        width: 34px;
        padding: 0;
    }
    .laundry-edit-page .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);
    }
    .laundry-edit-page .app-action--secondary {
        background: var(--surface-50);
        border-color: var(--border);
        color: var(--surface-700);
    }
    .laundry-edit-page .app-action--success {
        background: #f0fdf4;
        border-color: #bbf7d0;
        color: #15803d;
    }
    .laundry-edit-page .app-action--danger {
        background: #fef2f2;
        border-color: #fecaca;
        color: #dc2626;
    }
    .laundry-edit-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-edit-page .app-panel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border-subtle);
        background: var(--bg-card);
    }
    .laundry-edit-page .app-panel__title {
        margin: 0;
        font-size: 1rem;
        font-weight: 900;
        color: var(--text-primary);
    }
    .laundry-edit-page .app-panel__toolbar {
        display: flex;
        align-items: center;
        gap: .65rem;
        flex-wrap: wrap;
    }
    .laundry-edit-page .app-panel__body { padding: 1.5rem; }
    .laundry-edit-page .app-field-label {
        display: block;
        margin-bottom: .4rem;
        color: var(--surface-700);
        font-size: .875rem;
        font-weight: 700;
    }
    .laundry-edit-page .app-input-line {
        display: flex;
        align-items: stretch;
        gap: .5rem;
        flex-wrap: wrap;
    }
    .laundry-edit-page .app-input-line .app-input { flex: 1 1 240px; }
    .laundry-edit-page .app-product-item {
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--bg-card);
    }
    .laundry-edit-page .app-product-thumb {
        width: 60px;
        height: 60px;
        border-radius: var(--radius-lg);
        object-fit: cover;
        flex-shrink: 0;
    }
    .laundry-edit-page .app-search-thumb {
        width: 50px;
        height: 50px;
        border-radius: var(--radius-lg);
        object-fit: cover;
        flex-shrink: 0;
    }
    .laundry-edit-page .app-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: .45rem .75rem;
        font-size: .75rem;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }
    .laundry-edit-page .app-chip--dark {
        background: var(--surface-100);
        color: var(--surface-700);
    }
    .laundry-edit-page .app-chip--success {
        background: #f0fdf4;
        color: #15803d;
    }
    .laundry-edit-page .app-chip--warning {
        background: #fffbeb;
        color: #b45309;
    }
    .laundry-edit-page .app-chip--danger {
        background: #fef2f2;
        color: #dc2626;
    }
    .laundry-edit-page .app-timeline-icon-surface {
        width: 3rem;
        height: 3rem;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--c-primary-bg);
        color: var(--c-primary-dark);
    }
    .laundry-edit-page .app-spinner {
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-inline-end-color: transparent;
        border-radius: 999px;
        animation: laundry-edit-spin .65s linear infinite;
    }
    @keyframes laundry-edit-spin {
        to { transform: rotate(360deg); }
    }
</style>
<div class="laundry-edit-page">
    <div class="grid gap-7">

        <div class="app-panel mb-7">
            <div class="app-panel__header">
                <h2 class="app-panel__title">{{ __('dashboard.edit_laundry_operation_form_title') }}</h2>
            </div>
            <div class="app-panel__body">
                <form action="{{ route('dashboard.laundry_operations.update', $laundryOperation->id) }}" method="POST">
                    @csrf
                    @method('PATCH')

                    <div class="mb-7">
                        <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>
                            @foreach($laundries as $laundry)
                                <option value="{{ $laundry->id }}" {{ old('laundry_id', $laundryOperation->laundry_id) == $laundry->id ? 'selected' : '' }}>
                                    {{ $laundry->name }} {{ $laundry->is_default ? __('dashboard.default_laundry_tag') : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-7">
                        <label class="app-field-label required">{{ __('dashboard.select_products') }}</label>
                        <div class="app-input-line mb-3">
                            <input type="text" id="product_search" class="app-input" placeholder="{{ __('dashboard.product_search_placeholder') }}">
                            <button type="button" class="app-action app-action--secondary" 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--success" id="add_product_by_sku_btn">
                                {{ __('dashboard.add_by_sku') }}
                            </button>
                        </div>
                        <div id="product_search_results" class="mb-3"></div>
                    </div>

                    <div class="mb-7">
                        <div class="mb-4 flex items-center justify-between">
                           <h4 class="m-0">{{ __('dashboard.selected_products') }}</h4>
                        </div>

                        <div id="selected_products_display" class="flex flex-col gap-3">
                            @foreach($selectedProducts as $product)
                                <div class="app-product-item product-item p-4" data-product-id="{{ $product['id'] }}">
                                    <input type="hidden" name="product_ids[]" value="{{ $product['id'] }}">
                                    <div class="flex flex-wrap items-center gap-3">
                                        <img src="{{ $product['image_url'] }}" alt="{{ $product['name'] }}" class="app-product-thumb">
                                        <div class="min-w-0 flex-1">
                                            <h6 class="mb-1">{{ $product['name'] }}</h6>
                                            <p class="m-0 text-[var(--text-secondary)]">SKU: {{ $product['sku'] }}</p>
                                        </div>
                                        <button type="button" class="app-action app-action--sm app-action--icon app-action--danger remove-product" data-product-id="{{ $product['id'] }}"><i class="fa-solid fa-xmark"></i></button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="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">{{ __('dashboard.save') }}</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="app-panel audit-trail">
            <div class="app-panel__header">
                <h2 class="app-panel__title">{{ __('dashboard.history_title') }}</h2>
                <div class="app-panel__toolbar">
                    <span class="app-chip app-chip--dark">{{ __('dashboard.history_total') }}: {{ $auditSummary['total'] }}</span>
                    <span class="app-chip app-chip--success">{{ __('dashboard.history_created') }}: {{ $auditSummary['created'] }}</span>
                    <span class="app-chip app-chip--warning">{{ __('dashboard.history_updated') }}: {{ $auditSummary['updated'] }}</span>
                    <span class="app-chip app-chip--danger">{{ __('dashboard.history_deleted') }}: {{ $auditSummary['deleted'] }}</span>
                    <a href="#operation_history_collapse" class="app-action app-action--sm app-action--secondary" onclick="event.preventDefault();document.getElementById('operation_history_collapse').classList.toggle('hidden')">
                        {{ __('dashboard.history_toggle') }}
                    </a>
                </div>
            </div>
            <div id="operation_history_collapse" class="hidden">
                <div class="app-panel__body">
                    <div class="timeline">
                        @forelse ($auditEntries as $entry)
                            <div class="timeline-item">
                                <div class="timeline-line hidden"></div>
                                <div class="timeline-icon">
                                    <div class="app-timeline-icon-surface">
                                        <i class="{{ $entry['icon'] }} text-xl"></i>
                                    </div>
                                </div>
                                <div class="timeline-content">
                                    <div class="mb-5 pe-3">
                                        <div class="mb-2 text-base font-semibold">
                                            {{ $entry['headline'] }}
                                            {{ __('dashboard.history_event_by') }}
                                            <a href="#" class="font-bold text-[var(--c-primary-dark)]">{{ $entry['actor'] }}</a>
                                        </div>
                                        <div class="mt-1 flex items-center text-sm">
                                            <div class="text-xs font-semibold text-[var(--text-secondary)]">{{ $entry['timestamp'] }} ({{ $entry['timestamp_human'] }})</div>
                                        </div>
                                        @if ($entry['changes']->isNotEmpty())
                                            <div class="mt-3">
                                                @foreach ($entry['changes'] as $change)
                                                    <div class="flex flex-wrap">
                                                        <div class="font-bold" style="margin-inline-end:.5rem">{{ $change['label'] }}:&nbsp;</div>
                                                        <div class="text-[var(--text-secondary)]">
                                                            @if($change['has_old'])
                                                                <span class="text-red-600" style="margin-inline-end:.25rem"><s>{{ $change['old'] }}</s></span>
                                                            @endif
                                                            <i class="fa-solid fa-arrow-right mx-1 text-sm text-[var(--text-secondary)]"></i>
                                                            <span class="font-bold text-emerald-600">{{ $change['new'] }}</span>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            <p>{{ __('dashboard.history_no_history_found') }}</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

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

    selectedProductsDisplay.addEventListener('click', function(e) {
        const button = e.target.closest('.remove-product');
        if (!button) return;
        button.closest('.product-item')?.remove();
    });

    function addProductToSelection(product) {
        if (document.querySelector(`.product-item[data-product-id="${product.id}"]`)) {
            alert('{{ __("dashboard.alert_product_already_exists") }}');
            return;
        }
        const imageUrl = product.image ? `${product.image}` : 'https://via.placeholder.com/60';
        let displayHtml = `
            <div class="app-product-item product-item p-4" data-product-id="${product.id}">
                <input type="hidden" name="product_ids[]" value="${product.id}">
                <div class="flex flex-wrap items-center gap-3">
                    <img src="${imageUrl}" alt="${product.name}" class="app-product-thumb">
                    <div class="min-w-0 flex-1">
                        <h6 class="mb-1">${product.name}</h6>
                        <p class="m-0 text-[var(--text-secondary)]">SKU: ${product.sku}</p>
                    </div>
                    <button type="button" class="app-action app-action--sm app-action--icon app-action--danger remove-product" data-product-id="${product.id}"><i class="fa-solid fa-xmark"></i></button>
                </div>
            </div>`;
        selectedProductsDisplay.insertAdjacentHTML('beforeend', displayHtml);
    }

    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.style.display = '';
                if (response.length > 0) {
                    response.forEach(product => {
                        const imageUrl = product.main_image ? `${APP_URL}/storage/${product.main_image}` : 'https://via.placeholder.com/50';
                        productSearchResults.insertAdjacentHTML('beforeend', `
                            <a href="#" class="product-result flex items-center gap-3 border-b border-[var(--border)] p-3" data-product-id="${product.id}">
                                <img src="${imageUrl}" class="app-search-thumb" alt="${product.name}">
                                <div><span class="font-bold">${product.name}</span><br><small class="text-[var(--text-secondary)]">SKU: ${product.sku}</small></div>
                            </a>`);
                    });
                } else {
                    productSearchResults.innerHTML = `<p class="p-3 text-[var(--text-secondary)]">{{ __("dashboard.no_results_found") }}</p>`;
                }
            })
            .finally(() => productSearchSpinner.classList.add('hidden'));
    }

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

    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) {
                    addProductToSelection(response[0]);
                    productSearchInput.value = '';
                    productSearchResults.innerHTML = '';
                    productSearchResults.style.display = 'none';
                } else if (response.length > 1) {
                    alert('{{ __("dashboard.alert_multiple_products_found") }}');
                    searchProducts(sku);
                } else {
                    alert('{{ __("dashboard.alert_no_product_found_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);
                productSearchInput.value = '';
                productSearchResults.innerHTML = '';
                productSearchResults.style.display = 'none';
            });
    });

    document.addEventListener('click', function(e) {
        if (!e.target.closest('#product_search, #product_search_results')) {
            productSearchResults.innerHTML = '';
            productSearchResults.style.display = 'none';
        }
    });
});
</script>
@endsection